diff --git a/web/app/templates/main/dashboard.html.j2 b/web/app/templates/main/dashboard.html.j2
index d59eb21b2cc0528f5d76e5da9b66a0f47c86beaf..175ec175d3ba8eb58421c3fd654afaaedb45c76b 100644
--- a/web/app/templates/main/dashboard.html.j2
+++ b/web/app/templates/main/dashboard.html.j2
@@ -119,8 +119,12 @@
         <div class="col s12 m4">
           <a href="{{ url_for('services.service', service='file-setup') }}" style="color: rgba(0,0,0,0.87);">
             <div class="card-panel center-align hoverable">
-              <i class="large material-icons" style="color: #ee6e73;">burst_mode</i>
-              <p>File setup</p>
+              <br>
+              <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>
           </a>
@@ -128,8 +132,12 @@
         <div class="col s12 m4">
           <a href="{{ url_for('services.service', service='ocr') }}" style="color: rgba(0,0,0,0.87);">
             <div class="card-panel center-align hoverable">
-              <i class="large material-icons" style="color: #ee6e73;">find_in_page</i>
-              <p>Optical Character Recognition</p>
+              <br>
+              <a 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 a process called OCR. This step enables you to proceed with further computational analysis of your documents.</p>
             </div>
           </a>
@@ -137,8 +145,12 @@
         <div class="col s12 m4">
           <a href="{{ url_for('services.service', service='nlp') }}" style="color: rgba(0,0,0,0.87);">
             <div class="card-panel center-align hoverable">
-              <i class="large material-icons" style="color: #ee6e73;">format_textdirection_l_to_r</i>
-              <p>Natural Language Processing</p>
+              <br>
+              <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>
           </a>
diff --git a/web/app/templates/nopaque.html.j2 b/web/app/templates/nopaque.html.j2
index 1717b658c6d9a2b35ed10b111904ae7ddca1a807..0a4b03eca1757b65309a0297222d1ff658efc479 100644
--- a/web/app/templates/nopaque.html.j2
+++ b/web/app/templates/nopaque.html.j2
@@ -105,7 +105,6 @@
         }
         /* ### End sidenav-fixed offset ### */
       {% endif %}
-      {% block style_additions %}{% endblock %}
     </style>
     <script src="{{ url_for('static', filename='js/JSONPatch.js/jsonpatch.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/Dark_Reader/darkreader.js') }}"></script>
diff --git a/web/app/templates/services/corpus_analysis.html.j2 b/web/app/templates/services/corpus_analysis.html.j2
index d339cc907a01f4203b96539685d84a2c0a3834e1..8e94fe1eec5b74c9c46696bc035bfb4d8f395908 100644
--- a/web/app/templates/services/corpus_analysis.html.j2
+++ b/web/app/templates/services/corpus_analysis.html.j2
@@ -2,11 +2,11 @@
 
 {% set main_class = 'corpus-analysis-color lighten' %}
 
-{% block style_additions %}
+{% block page_content %}
+<style>
   main button, main .btn, main .btn-floating {background-color: {{ corpus_analysis_color_darken }};}
-{% endblock %}
+</style>
 
-{% block page_content %}
 <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);">
diff --git a/web/app/templates/services/file-setup.html.j2 b/web/app/templates/services/file-setup.html.j2
index 3a4961a59dc3f25961a913af83e13d8fbf96a529..abc1ed9b9b8f28bf3662b807b0c4c0c66456f237 100644
--- a/web/app/templates/services/file-setup.html.j2
+++ b/web/app/templates/services/file-setup.html.j2
@@ -2,11 +2,11 @@
 
 {% set main_class = 'file-setup-color lighten' %}
 
-{% block style_additions %}
+{% block page_content %}
+<style>
   main button, main .btn, main .btn-floating {background-color: {{ file_setup_color_darken }};}
-{% endblock %}
+</style>
 
-{% block page_content %}
 <div class="col s12 m3 push-m9">
   <div class="center-align">
     <p class="hide-on-small-only">&nbsp;</p>
diff --git a/web/app/templates/services/nlp.html.j2 b/web/app/templates/services/nlp.html.j2
index b86d01bb78677abec0f61743cef5344f159b1f88..7a032dd9eff41d5c0de8a98605046e8a3ec6b181 100644
--- a/web/app/templates/services/nlp.html.j2
+++ b/web/app/templates/services/nlp.html.j2
@@ -2,11 +2,11 @@
 
 {% set main_class = 'nlp-color lighten' %}
 
-{% block style_additions %}
+{% block page_content %}
+<style>
   main button, main .btn, main .btn-floating {background-color: {{ nlp_color_darken }};}
-{% endblock %}
+</style>
 
-{% block page_content %}
 <div class="col s12 m3 push-m9">
   <div class="center-align">
     <p class="hide-on-small-only">&nbsp;</p>
diff --git a/web/app/templates/services/ocr.html.j2 b/web/app/templates/services/ocr.html.j2
index d4cbaec6ee29a5bf21cb33c0330e085bf62c8843..1c68f5035cf61b9b05442c28438b7966e9147864 100644
--- a/web/app/templates/services/ocr.html.j2
+++ b/web/app/templates/services/ocr.html.j2
@@ -2,11 +2,11 @@
 
 {% set main_class = 'ocr-color lighten' %}
 
-{% block style_additions %}
+{% block page_content %}
+<style>
   main button, main .btn, main .btn-floating {background-color: {{ ocr_color_darken }};}
-{% endblock %}
+</style>
 
-{% block page_content %}
 <div class="col s12 m3 push-m9">
   <div class="center-align">
     <p class="hide-on-small-only">&nbsp;</p>