diff --git a/web/app/static/css/nopaque.css b/web/app/static/css/nopaque.css
index f1e6f5e0..66421a7d 100644
--- a/web/app/static/css/nopaque.css
+++ b/web/app/static/css/nopaque.css
@@ -106,7 +106,7 @@ indicator will show up how the column is sorted right now.; */
 .service[data-service]:before {
   content: "help";
 }
-.service[data-service="corpus_analysis"]:before {
+.service[data-service="corpus-analysis"]:before {
   content: "search";
 }
 .service[data-service="file-setup"]:before {
diff --git a/web/app/templates/main/index.html.j2 b/web/app/templates/main/index.html.j2
index 208a1e72..a8d1c5f9 100644
--- a/web/app/templates/main/index.html.j2
+++ b/web/app/templates/main/index.html.j2
@@ -30,23 +30,23 @@
         <div class="col s12">
           <div class="row">
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">flash_on</i>
-              <p>Speeds up your work</p>
+              <i class="large material-icons secondary-color-text">flash_on</i>
+              <p class="primary-color-text"><b>Speeds up your work</b></p>
               <p class="light">All tools provided by nopaque are carefully selected to provide a complete tool suite without being held up by compatibility issues.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">cloud</i>
-              <p>Cloud infrastructure</p>
+              <i class="large material-icons secondary-color-text">cloud</i>
+              <p class="primary-color-text"><b>Cloud infrastructure</b></p>
               <p class="light">All computational work is processed within nopaque’s cloud infrastructure. You don't need to install any software. Great, right?</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">group</i>
-              <p>User friendly</p>
+              <i class="large material-icons secondary-color-text">group</i>
+              <p class="primary-color-text"><b>User friendly</b></p>
               <p class="light">You can start right away without having to read mile-long manuals. All services come with default settings that make it easy for you to just get going. Also great, right?</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">settings</i>
-              <p>Meshing processes</p>
+              <i class="large material-icons secondary-color-text">settings</i>
+              <p class="primary-color-text"><b>Meshing processes</b></p>
               <p class="light">No matter where you step in, nopaque facilitates and accompanies your research. Its workflow perfectly ties in with your research process.</p>
             </div>
           </div>
@@ -85,23 +85,35 @@
           <br class="hide-on-small-only">
           <div class="row">
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">burst_mode</i>
-              <p>File setup</p>
+              <a href="{{ url_for('services.service', service='file-setup') }}" class="btn-floating btn-large file-setup-color darken waves-effect waves-light" style="transform: scale(2);">
+                <i class="material-icons service" data-service="file-setup"></i>
+              </a>
+              <p>&nbsp;</p>
+              <p class="file-setup-color-text"><b>File setup</b></p>
               <p class="light">Digital copies of text based research data (books, letters, etc.) often comprise various files and formats. nopaque converts and merges those files to facilitate further processing and the application of other services.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">find_in_page</i>
-              <p>Optical Character Recognition</p>
+              <a href="{{ url_for('services.service', service='ocr') }}" class="btn-floating btn-large ocr-color darken waves-effect waves-light" style="transform: scale(2);">
+                <i class="material-icons service" data-service="ocr"></i>
+              </a>
+              <p>&nbsp;</p>
+              <p class="ocr-color-text"><b>Optical Character Recognition</b></p>
               <p class="light">nopaque converts your image data – like photos or scans – into text data through OCR making it machine readable. This step enables you to proceed with further computational analysis of your documents.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">format_textdirection_l_to_r</i>
-              <p>Natural Language Processing</p>
+              <a href="{{ url_for('services.service', service='nlp') }}" class="btn-floating btn-large nlp-color darken waves-effect waves-light" style="transform: scale(2);">
+                <i class="material-icons service" data-service="nlp"></i>
+              </a>
+              <p>&nbsp;</p>
+              <p class="nlp-color-text"><b>Natural Language Processing</b></p>
               <p class="light">By means of computational linguistic data processing (tokenization, lemmatization, part-of-speech tagging and named-entity recognition) nopaque extracts additional information from your text.</p>
             </div>
             <div class="col s12 m6 l3 center-align">
-              <i class="large material-icons" style="color: #ee6e73;">search</i>
-              <p>Corpus analysis</p>
+              <a href="{{ url_for('services.service', service='corpus_analysis') }}" class="btn-floating btn-large corpus-analysis-color darken waves-effect waves-light" style="transform: scale(2);">
+                <i class="material-icons service" data-service="corpus-analysis"></i>
+              </a>
+              <p>&nbsp;</p>
+              <p class="corpus-analysis-color-text"><b>Corpus analysis</b></p>
               <p class="light">nopaque lets you create and upload as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags.</p>
             </div>
           </div>
diff --git a/web/app/templates/nopaque.html.j2 b/web/app/templates/nopaque.html.j2
index 58b532e6..1717b658 100644
--- a/web/app/templates/nopaque.html.j2
+++ b/web/app/templates/nopaque.html.j2
@@ -58,23 +58,37 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
     <style>
       .primary-color {background-color: {{ primary_color }} !important;}
+      .primary-color-text {color: {{ primary_color }} !important;}
       .secondary-color {background-color: {{ secondary_color }} !important;}
+      .secondary-color-text {color: {{ secondary_color }} !important;}
 
       .corpus-analysis-color {background-color: {{ corpus_analysis_color }} !important;}
+      .corpus-analysis-color-text {color: {{ corpus_analysis_color }} !important;}
       .corpus-analysis-color.darken {background-color: {{ corpus_analysis_color_darken }} !important;}
+      .corpus-analysis-color-text.text-darken {color: {{ corpus_analysis_color_darken }} !important;}
       .corpus-analysis-color.lighten {background-color: {{ corpus_analysis_color_lighten }} !important;}
+      .corpus-analysis-color-text.text-lighten {color: {{ corpus_analysis_color_lighten }} !important;}
 
       .file-setup-color {background-color: {{ file_setup_color }} !important;}
+      .file-setup-color-text {color: {{ file_setup_color }} !important;}
       .file-setup-color.darken {background-color: {{ file_setup_color_darken }} !important;}
+      .file-setup-color-text.text-darken {color: {{ file_setup_color_darken }} !important;}
       .file-setup-color.lighten {background-color: {{ file_setup_color_lighten }} !important;}
+      .file-setup-color-text.text-lighten {color: {{ file_setup_color_lighten }} !important;}
 
       .ocr-color {background-color: {{ ocr_color }} !important;}
+      .ocr-color-text {color: {{ ocr_color }} !important;}
       .ocr-color.darken {background-color: {{ ocr_color_darken }} !important;}
+      .ocr-color-text.text-darken {color: {{ ocr_color_darken }} !important;}
       .ocr-color.lighten {background-color: {{ ocr_color_lighten }} !important;}
+      .ocr-color-text.text-lighten {color: {{ ocr_color_lighten }} !important;}
 
       .nlp-color {background-color: {{ nlp_color }} !important;}
+      .nlp-color-text {color: {{ nlp_color }} !important;}
       .nlp-color.darken {background-color: {{ nlp_color_darken }} !important;}
+      .nlp-color-text.text-darken {color: {{ nlp_color_darken }} !important;}
       .nlp-color.lighten {background-color: {{ nlp_color_lighten }} !important;}
+      .nlp-color-text.text-lighten {color: {{ nlp_color_lighten }} !important;}
       {% if current_user.is_authenticated %}
         /*
          * ### Start sidenav-fixed offset ###
diff --git a/web/app/templates/playground/index.html.j2 b/web/app/templates/playground/index.html.j2
index 7ed676de..6ac6acc2 100644
--- a/web/app/templates/playground/index.html.j2
+++ b/web/app/templates/playground/index.html.j2
@@ -131,7 +131,7 @@
   <div class="card">
     <div class="card-content">
       <a class="btn-floating btn-large hoverable left" style="margin-right: 15px;">
-        <i class="material-icons service" data-service="corpus_analysis"></i>
+        <i class="material-icons service" data-service="corpus-analysis"></i>
       </a>
       <span class="card-title">Corpus analysis</span>
       <i>Create as many text corpora as you want. It makes use of CQP Query Language, which allows for complex search requests with the aid of metadata and NLP tags.</i>
diff --git a/web/app/templates/services/corpus_analysis.html.j2 b/web/app/templates/services/corpus_analysis.html.j2
index 02f6e8cf..d339cc90 100644
--- a/web/app/templates/services/corpus_analysis.html.j2
+++ b/web/app/templates/services/corpus_analysis.html.j2
@@ -10,7 +10,7 @@
 <div class="col s12 m3 push-m9">
   <div class="center-align">
     <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
-      <i class="material-icons service" data-service="corpus_analysis"></i>
+      <i class="material-icons service" data-service="corpus-analysis"></i>
     </a>
   </div>
 </div>