diff --git a/web/app/static/css/nopaque.css b/web/app/static/css/nopaque.css
index 07d1c004..f1e6f5e0 100644
--- a/web/app/static/css/nopaque.css
+++ b/web/app/static/css/nopaque.css
@@ -1,13 +1,3 @@
-nav, .footer-copyright {
-  background-color: #00426f !important;
-  color: white !important;
-}
-
-.page-footer {
-  background-color: #b1b3b4;
-  color: white;
-}
-
 /*
  * ### Start sticky footer ###
  * Force the footer to always stay on the bottom of the page regardless of how
diff --git a/web/app/templates/nopaque.html.j2 b/web/app/templates/nopaque.html.j2
index 36187b6a..d2036d6d 100644
--- a/web/app/templates/nopaque.html.j2
+++ b/web/app/templates/nopaque.html.j2
@@ -1,6 +1,7 @@
-{% import "macros/materialize.html.j2" as M %}
+{% import "utils/materialize.html.j2" as M %}
 
-{% if title == '' %}
+
+{% if title is not defined %}
   {% set title = None %}
 {% endif %}
 
@@ -12,6 +13,13 @@
   {% set main_class = 'grey lighten-5' %}
 {% endif %}
 
+{% if parallax is not defined %}
+  {% set parallax = False %}
+{% endif %}
+
+{% set nopaque_primary_color = '#00426f' %}
+{% set nopaque_secondary_color = '#b1b3b4' %}
+
 {% set corpus_analysis_color = '#aa9cc9' %}
 {% set corpus_analysis_color_darken = '#6b3f89' %}
 {% set corpus_analysis_color_lighten = '#ebe8f6' %}
@@ -28,6 +36,12 @@
 {% set ocr_color_darken = '#00a58b' %}
 {% set ocr_color_lighten = '#e7f4f1' %}
 
+
+{%- macro insert_content() -%}
+  {% block page_content %}{% endblock %}
+{%- endmacro -%}
+
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -36,15 +50,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>
       nopaque
-      {% if request.path != url_for('main.index') %}
-      – {{ title }}
-      {% endif %}
+      {% if request.path != url_for('main.index') %} – {{ title }}{% endif %}
     </title>
     <link rel="icon" href="{{ url_for('static', filename='images/nopaque_logo.png') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='fonts/Material_design_icons/material-icons.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/Materialize/materialize.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/nopaque.css') }}">
-    {% if current_user.is_authenticated %}
     <style>
       .corpus-analysis-color {background-color: {{ corpus_analysis_color }} !important;}
       .corpus-analysis-color.darken {background-color: {{ corpus_analysis_color_darken }} !important;}
@@ -61,6 +72,13 @@
       .nlp-color {background-color: {{ nlp_color }} !important;}
       .nlp-color.darken {background-color: {{ nlp_color_darken }} !important;}
       .nlp-color.lighten {background-color: {{ nlp_color_lighten }} !important;}
+
+      .nopaque-primary-color {background-color: {{ nopaque_primary_color }} !important;}
+      .nopaque-secondary-color {background-color: {{ nopaque_secondary_color }} !important;}
+      {% block style_additions %}{% endblock %}
+    </style>
+    {% if current_user.is_authenticated %}
+    <style>
       /*
        * ### Start sidenav-fixed offset ###
        * The sidenav-fixed class is used which causes the sidenav to be fixed and open
@@ -107,7 +125,7 @@
   <body>
     <header>
       <div class="navbar-fixed">
-        <nav>
+        <nav class="nav-extended nopaque-primary-color white-text">
           <div class="nav-wrapper">
             <a href="{{ url_for('main.index') }}" class="brand-logo" style="margin-left: 25px;"><img src="{{ url_for('static', filename='images/logo_-_nopaque.png') }}" style="height: 64px;"></a>
             {% if current_user.is_authenticated %}
@@ -126,6 +144,21 @@
               </li>
             </ul>
           </div>
+          <div class="nav-content">
+            <noscript>
+              <div class="card z-depth-0" style="background-color: inherit;">
+                <div class="card-content">
+                  <span class="card-title">JavaScript is disabled</span>
+                  <p>You have JavaScript disabled. Nopaque uses javascript and sockets to send data in realtime to you. For example showing you the status of your jobs and your corpora. Please activate JavaScript to make full use of nopaque.</p>
+                  <p>Some services are still useable without Javascript.</p>
+                </div>
+                <div class="card-action">
+                  <a href="#">What services can I still use?</a>
+                  <a href="#">What services and functions are not available?</a>
+                </div>
+              </div>
+            </noscript>
+          </div>
         </nav>
       </div>
 
@@ -172,32 +205,9 @@
       </ul>
     </header>
 
-    {%- macro insert_page_content() -%}
-    <noscript>
-      <div class="container">
-        <div class="row">
-          <div class="col s12">
-            <div class="card red darken-1">
-              <div class="card-content white-text">
-                <span class="card-title">JavaScript is disabled</span>
-                <p>You have JavaScript disabled. Nopaque uses javascript and sockets to send data in realtime to you. For example showing you the status of your jobs and your corpora. Please activate JavaScript to make full use of nopaque.</p>
-                <p>Some services are still useable without Javascript.</p>
-              </div>
-              <div class="card-action">
-                <a href="#">What services can I still use?</a>
-                <a href="#">What services and functions are not available?</a>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </noscript>
-    {% block page_content %}{% endblock %}
-    {%- endmacro -%}
-
     {% if parallax %}
       <main>
-        {{ insert_page_content() }}
+        {{ insert_content() }}
       </main>
     {% else %}
       <main class="{{ main_class }}">
@@ -208,7 +218,7 @@
           <div class="col s12">
             <h2>{{ headline }}</h2>
           </div>
-          {{ insert_page_content() }}
+          {{ insert_content() }}
         </div>
         {% if not full_width %}
         </div>
@@ -217,13 +227,13 @@
     {% endif %}
     </main>
 
-    <footer class="page-footer">
+    <footer class="page-footer nopaque-secondary-color white-text">
       <div class="container">
         <div class="row">
           <div class="col s6 m3">
             <a href="https://www.dfg.de/">
               <img class="responsive-img" src="{{ url_for('static', filename='images/logo_-_dfg.gif') }}">
-          </a>
+            </a>
           </div>
           <div class="col s6 m3 offset-m1 center-align">
             <a href="https://www.uni-bielefeld.de/sfb1288/">
@@ -241,7 +251,7 @@
           </div>
         </div>
       </div>
-      <div class="footer-copyright">
+      <div class="footer-copyright nopaque-primary-color white-text">
         <div class="container">
           <div class="row" style="margin-bottom: 0;">
             <div class="col s12 m2">
diff --git a/web/app/templates/services/corpus_analysis.html.j2 b/web/app/templates/services/corpus_analysis.html.j2
index 62e9d5db..02f6e8cf 100644
--- a/web/app/templates/services/corpus_analysis.html.j2
+++ b/web/app/templates/services/corpus_analysis.html.j2
@@ -2,10 +2,14 @@
 
 {% set main_class = 'corpus-analysis-color lighten' %}
 
+{% block style_additions %}
+  main button, main .btn, main .btn-floating {background-color: {{ corpus_analysis_color_darken }};}
+{% endblock %}
+
 {% block page_content %}
 <div class="col s12 m3 push-m9">
   <div class="center-align">
-    <a class="btn-floating btn-large corpus-analysis-color darken waves-effect waves-light" style="transform: scale(2);">
+    <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
       <i class="material-icons service" data-service="corpus_analysis"></i>
     </a>
   </div>
diff --git a/web/app/templates/services/file-setup.html.j2 b/web/app/templates/services/file-setup.html.j2
index f670ea0d..3a4961a5 100644
--- a/web/app/templates/services/file-setup.html.j2
+++ b/web/app/templates/services/file-setup.html.j2
@@ -1,14 +1,17 @@
 {% extends "nopaque.html.j2" %}
 
-
 {% set main_class = 'file-setup-color lighten' %}
 
+{% block style_additions %}
+  main button, main .btn, main .btn-floating {background-color: {{ file_setup_color_darken }};}
+{% endblock %}
+
 {% block page_content %}
 <div class="col s12 m3 push-m9">
   <div class="center-align">
-    <p>&nbsp;</p>
-    <p>&nbsp;</p>
-    <a class="btn-floating btn-large file-setup-color darken waves-effect waves-light" style="transform: scale(2);">
+    <p class="hide-on-small-only">&nbsp;</p>
+    <p class="hide-on-small-only">&nbsp;</p>
+    <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
       <i class="material-icons service" data-service="file-setup"></i>
     </a>
   </div>
@@ -43,7 +46,7 @@
             {{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }}
           </div>
           <div class="col s12">
-            {{ M.render_field(add_job_form.files, accept='image/jpeg, image/png, image/tiff', color=file_setup_color_darken, placeholder='Choose your .jpeg, .png or .tiff files') }}
+            {{ M.render_field(add_job_form.files, accept='image/jpeg, image/png, image/tiff', placeholder='Choose your .jpeg, .png or .tiff files') }}
           </div>
           <div class="col s12 hide">
             {{ M.render_field(add_job_form.version, material_icon='apps') }}
@@ -51,7 +54,7 @@
         </div>
       </div>
       <div class="card-action right-align">
-        {{ M.render_field(add_job_form.submit, color=file_setup_color_darken, material_icon='send') }}
+        {{ M.render_field(add_job_form.submit, material_icon='send') }}
       </div>
     </form>
   </div>
diff --git a/web/app/templates/services/nlp.html.j2 b/web/app/templates/services/nlp.html.j2
index 5cca1c95..b86d01bb 100644
--- a/web/app/templates/services/nlp.html.j2
+++ b/web/app/templates/services/nlp.html.j2
@@ -2,12 +2,16 @@
 
 {% set main_class = 'nlp-color lighten' %}
 
+{% block style_additions %}
+  main button, main .btn, main .btn-floating {background-color: {{ nlp_color_darken }};}
+{% endblock %}
+
 {% block page_content %}
 <div class="col s12 m3 push-m9">
   <div class="center-align">
-    <p>&nbsp;</p>
-    <p>&nbsp;</p>
-    <a class="btn-floating btn-large nlp-color darken waves-effect waves-light" style="transform: scale(2);">
+    <p class="hide-on-small-only">&nbsp;</p>
+    <p class="hide-on-small-only">&nbsp;</p>
+    <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
       <i class="material-icons service" data-service="nlp"></i>
     </a>
   </div>
@@ -60,7 +64,7 @@
             {{ M.render_field(add_job_form.description, data_length='255', material_icon='description') }}
           </div>
           <div class="col s12 l5">
-            {{ M.render_field(add_job_form.files, accept='text/plain', color=nlp_color_darken, placeholder='Choose your .txt files') }}
+            {{ M.render_field(add_job_form.files, accept='text/plain', placeholder='Choose your .txt files') }}
           </div>
           <div class="col s12 l4">
             {{ M.render_field(add_job_form.language, material_icon='language') }}
@@ -92,7 +96,7 @@
         </div>
       </div>
       <div class="card-action right-align">
-        {{ M.render_field(add_job_form.submit, color=nlp_color_darken, material_icon='send') }}
+        {{ M.render_field(add_job_form.submit, material_icon='send') }}
       </div>
     </form>
   </div>
diff --git a/web/app/templates/services/ocr.html.j2 b/web/app/templates/services/ocr.html.j2
index 5679ed80..d4cbaec6 100644
--- a/web/app/templates/services/ocr.html.j2
+++ b/web/app/templates/services/ocr.html.j2
@@ -2,12 +2,16 @@
 
 {% set main_class = 'ocr-color lighten' %}
 
+{% block style_additions %}
+  main button, main .btn, main .btn-floating {background-color: {{ ocr_color_darken }};}
+{% endblock %}
+
 {% block page_content %}
 <div class="col s12 m3 push-m9">
   <div class="center-align">
-    <p>&nbsp;</p>
-    <p>&nbsp;</p>
-    <a class="btn-floating btn-large ocr-color darken waves-effect waves-light" style="transform: scale(2);">
+    <p class="hide-on-small-only">&nbsp;</p>
+    <p class="hide-on-small-only">&nbsp;</p>
+    <a class="btn-floating btn-large waves-effect waves-light" style="transform: scale(2);">
       <i class="material-icons service" data-service="ocr"></i>
     </a>
   </div>
diff --git a/web/app/templates/macros/query_result_macro.html.j2 b/web/app/templates/utils/macros.html.j2
similarity index 73%
rename from web/app/templates/macros/query_result_macro.html.j2
rename to web/app/templates/utils/macros.html.j2
index 68bf0903..974fa8ae 100644
--- a/web/app/templates/macros/query_result_macro.html.j2
+++ b/web/app/templates/utils/macros.html.j2
@@ -1,3 +1,26 @@
+{%- macro insert_page_content() -%}
+<noscript>
+  <div class="container">
+    <div class="row">
+      <div class="col s12">
+        <div class="card red darken-1">
+          <div class="card-content white-text">
+            <span class="card-title">JavaScript is disabled</span>
+            <p>You have JavaScript disabled. Nopaque uses javascript and sockets to send data in realtime to you. For example showing you the status of your jobs and your corpora. Please activate JavaScript to make full use of nopaque.</p>
+            <p>Some services are still useable without Javascript.</p>
+          </div>
+          <div class="card-action">
+            <a href="#">What services can I still use?</a>
+            <a href="#">What services and functions are not available?</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</noscript>
+{% block page_content %}{% endblock %}
+{%- endmacro -%}
+
 {% macro show_metadata(query_metadata) %}
 
 <div class="col s12">
@@ -71,4 +94,4 @@ for (let collapsible of collapsibles) {
   }
 }
 </script>
-{% endmacro %}
\ No newline at end of file
+{% endmacro %}
diff --git a/web/app/templates/macros/materialize.html.j2 b/web/app/templates/utils/materialize.html.j2
similarity index 90%
rename from web/app/templates/macros/materialize.html.j2
rename to web/app/templates/utils/materialize.html.j2
index d7ae0cc5..a20006d3 100644
--- a/web/app/templates/macros/materialize.html.j2
+++ b/web/app/templates/utils/materialize.html.j2
@@ -48,10 +48,9 @@
 {% endmacro %}
 
 {% macro render_file_field(field) %}
-  {% set color = kwargs.pop('color', none) %}
   {% set placeholder = kwargs.pop('placeholder', '') %}
   <div class="file-field input-field">
-    <div class="btn" {% if color is not none %}style="background-color: {{ color }};"{% endif %}>
+    <div class="btn">
       <span>{{ field.label.text }}</span>
       {{ field(*args, **kwargs) }}
     </div>
@@ -78,8 +77,7 @@
 {% endmacro %}
 
 {% macro render_submit_field(field) %}
-  {% set color = kwargs.pop('color', none) %}
-  <button class="btn waves-effect waves-light" {% if color is not none %}style="background-color: {{ color }};"{% endif %} id="{{ field.id }}" name="{{ field.name }}" type="submit" value="{{ field.label.text }}">
+  <button class="btn waves-effect waves-light" id="{{ field.id }}" name="{{ field.name }}" type="submit" value="{{ field.label.text }}">
     {{ field.label.text }}
     {% if 'material_icon' in kwargs %}
       <i class="material-icons right">{{ kwargs.pop('material_icon') }}</i>
