diff --git a/web/app/templates/jobs/job.html.j2 b/web/app/templates/jobs/job.html.j2
index 70cf4736..20fda0f3 100644
--- a/web/app/templates/jobs/job.html.j2
+++ b/web/app/templates/jobs/job.html.j2
@@ -1,168 +1,171 @@
 {% extends "nopaque.html.j2" %}
-
-{% set headline = '<i class="left material-icons service" data-service="{service}" style="font-size: inherit;"></i>Job ({service}) - {title}'.format(service=job.service, title=job.title) %}
+{% from '_constants.html.j2' import COLORS %}
 
 {% if job.service == 'file-setup' %}
+  {% set border_color = COLORS.file_setup_darken %}
   {% set main_class = 'file-setup-color lighten' %}
+  {% set scheme_color = COLORS.file_setup_darken %}
 {% elif job.service == 'nlp' %}
+  {% set border_color = COLORS.nlp_darken %}
   {% set main_class = 'nlp-color lighten' %}
+  {% set scheme_color = COLORS.nlp_darken %}
 {% elif job.service == 'ocr' %}
+  {% set border_color = COLORS.ocr_darken %}
   {% set main_class = 'ocr-color lighten' %}
+  {% set scheme_color = COLORS.ocr_darken %}
 {% endif %}
+
+{% block main_attribs %} class="{{ main_class }}"{% endblock main_attribs %}
+
 {% block page_content %}
+<div class="container">
+  <div class="row">
+    <div class="col s12">
+      <h1><i class="left material-icons service" data-service="{{ job.service }}" style="font-size: inherit;"></i>Job ({{ job.service }}) - {{ job.title }}</h1>
+    </div>
 
-{% if job.service == 'file-setup' %}
-  {{ Macros.insert_color_scheme(file_setup_color_darken) }}
-  {% set border_color = file_setup_color_darken %}
-{% elif job.service == 'nlp' %}
-  {{ Macros.insert_color_scheme(nlp_color_darken) }}
-  {% set border_color = nlp_color_darken %}
-{% elif job.service == 'ocr' %}
-  {{ Macros.insert_color_scheme(ocr_color_darken) }}
-  {% set border_color = ocr_color_darken %}
-{% endif %}
+    <div class="col s12">
+      <div class="card" style="border-top: 10px solid {{border_color}}">
+        <div class="card-content">
+          <div class="row">
+            <div class="col s8 m9 l10">
+              <span class="card-title title">{{ job.title }}</span>
+            </div>
 
-<div class="col s12">
-  <div class="card" style="border-top: 10px solid {{border_color}}">
-    <div class="card-content">
-      <div class="row">
-        <div class="col s8 m9 l10">
-          <span class="card-title title">{{ job.title }}</span>
-        </div>
-
-        <div class="col s4 m3 l2 right-align">
-          <span class="chip status white-text"></span>
-          <div class="active preloader-wrapper small" id="progress-indicator">
-            <div class="spinner-layer spinner-blue-only">
-              <div class="circle-clipper left">
-                <div class="circle"></div>
+            <div class="col s4 m3 l2 right-align">
+              <span class="chip status white-text"></span>
+              <div class="active preloader-wrapper small" id="progress-indicator">
+                <div class="spinner-layer spinner-blue-only">
+                  <div class="circle-clipper left">
+                    <div class="circle"></div>
+                  </div>
+                  <div class="gap-patch">
+                    <div class="circle"></div>
+                  </div>
+                  <div class="circle-clipper right">
+                    <div class="circle"></div>
+                  </div>
+                </div>
               </div>
-              <div class="gap-patch">
-                <div class="circle"></div>
+            </div>
+
+            <div class="col s12">
+              <p class="description">{{ job.description }}</p>
+            </div>
+
+            <div class="col s12">&nbsp;</div>
+
+            <div class="col s12 m6">
+              <div class="input-field">
+                <input disabled id="creation-date" type="text" value="{{ job.creation_date.strftime('%d/%m/%Y, %H:%M:%S %p') }}">
+                <label for="creation-date">Creation date</label>
               </div>
-              <div class="circle-clipper right">
-                <div class="circle"></div>
+            </div>
+
+            <div class="col s12 m6">
+              <div class="input-field">
+                <input class="end-date" disabled id="end-date" type="text" value="">
+                <label for="end-date">End date</label>
+              </div>
+            </div>
+
+            <div class="col s12 m4">
+              <div class="input-field">
+                <input disabled id="service" type="text" value="{{ job.service }}">
+                <label for="service">Service</label>
+              </div>
+            </div>
+
+            <div class="col s12 m4">
+              <div class="input-field">
+                <input disabled id="service-args" type="text" value="{{ job.service_args|e }}">
+                <label for="service-args">Service arguments</label>
+              </div>
+            </div>
+
+            <div class="col s12 m4">
+              <div class="input-field">
+                <input disabled id="service-version" type="text" value="{{ job.service_version }}">
+                <label for="service-version">Service version</label>
               </div>
             </div>
           </div>
         </div>
-
-        <div class="col s12">
-          <p class="description">{{ job.description }}</p>
+        <div class="card-action right-align">
+          {% if current_user.is_administrator() and job.status == 'failed' %}
+          <a href="{{ url_for('jobs.restart', job_id=job.id) }}" class="btn waves-effect waves-light"><i class="material-icons left">repeat</i>Restart</a>
+          {% endif %}
+          <!-- <a href="#" class="btn disabled waves-effect waves-light"><i class="material-icons left">settings</i>Export Parameters</a> -->
+          <a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete</a>
         </div>
+      </div>
+    </div>
 
-        <div class="col s12">&nbsp;</div>
-
-        <div class="col s12 m6">
-          <div class="input-field">
-            <input disabled id="creation-date" type="text" value="{{ job.creation_date.strftime('%d/%m/%Y, %H:%M:%S %p') }}">
-            <label for="creation-date">Creation date</label>
-          </div>
-        </div>
-
-        <div class="col s12 m6">
-          <div class="input-field">
-            <input class="end-date" disabled id="end-date" type="text" value="">
-            <label for="end-date">End date</label>
-          </div>
-        </div>
-
-        <div class="col s12 m4">
-          <div class="input-field">
-            <input disabled id="service" type="text" value="{{ job.service }}">
-            <label for="service">Service</label>
-          </div>
-        </div>
-
-        <div class="col s12 m4">
-          <div class="input-field">
-            <input disabled id="service-args" type="text" value="{{ job.service_args|e }}">
-            <label for="service-args">Service arguments</label>
-          </div>
-        </div>
-
-        <div class="col s12 m4">
-          <div class="input-field">
-            <input disabled id="service-version" type="text" value="{{ job.service_version }}">
-            <label for="service-version">Service version</label>
+    <div class="col s12">
+      <div class="card">
+        <div class="card-content" id="inputs">
+          <div class="row">
+            <div class="col s12 m2">
+              <span class="card-title"><i class="left material-icons" style="font-size: inherit;">input</i>Inputs</span>
+              <p>Original input files.</p>
+            </div>
+            <div class="col s12 m10">
+              <ul class="pagination paginationTop"></ul>
+              <table class="highlight responsive-table">
+                <thead>
+                  <tr>
+                    <th class="sort" data-sort="filename">Filename</th>
+                    <th>{# Actions #}</th>
+                  </tr>
+                </thead>
+                <tbody class="list">
+                </tbody>
+              </table>
+              <ul class="pagination paginationBottom"></ul>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="card-action right-align">
-      {% if current_user.is_administrator() and job.status == 'failed' %}
-      <a href="{{ url_for('jobs.restart', job_id=job.id) }}" class="btn waves-effect waves-light"><i class="material-icons left">repeat</i>Restart</a>
-      {% endif %}
-      <!-- <a href="#" class="btn disabled waves-effect waves-light"><i class="material-icons left">settings</i>Export Parameters</a> -->
-      <a data-target="delete-job-modal" class="waves-effect waves-light btn red modal-trigger"><i class="material-icons left">delete</i>Delete</a>
-    </div>
-  </div>
-</div>
 
-<div class="col s12">
-  <div class="card">
-    <div class="card-content" id="inputs">
-      <div class="row">
-        <div class="col s12 m2">
-          <span class="card-title"><i class="left material-icons" style="font-size: inherit;">input</i>Inputs</span>
-          <p>Original input files.</p>
-        </div>
-        <div class="col s12 m10">
-          <ul class="pagination paginationTop"></ul>
-          <table class="highlight responsive-table">
-            <thead>
-              <tr>
-                <th class="sort" data-sort="filename">Filename</th>
-                <th>{# Actions #}</th>
-              </tr>
-            </thead>
-            <tbody class="list">
-            </tbody>
-          </table>
-          <ul class="pagination paginationBottom"></ul>
+    <div class="col s12">
+      <div class="card">
+        <div class="card-content">
+          <div class="row">
+            <div class="col s12 m2">
+              <span class="card-title"><i class="left material-icons" style="font-size: inherit;">done</i>Results</span>
+              <p>Processed result files.</p>
+            </div>
+            <div class="col s12 m10">
+              <table class="highlight responsive-table">
+                <thead>
+                  <tr>
+                    <th>Result Type</th>
+                    <th>Archive Name</th>
+                    <th>{# Actions #}</th>
+                  </tr>
+                </thead>
+                <tbody class="results">
+                  <tr class="show-if-only-child">
+                    <td colspan="3">
+                      <span class="card-title">
+                        <i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...
+                      </span>
+                      <p>
+                        No results available (yet). Is the job already completed?
+                      </p>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </div>
 
-<div class="col s12">
-  <div class="card">
-    <div class="card-content">
-      <div class="row">
-        <div class="col s12 m2">
-          <span class="card-title"><i class="left material-icons" style="font-size: inherit;">done</i>Results</span>
-          <p>Processed result files.</p>
-        </div>
-        <div class="col s12 m10">
-          <table class="highlight responsive-table">
-            <thead>
-              <tr>
-                <th>Result Type</th>
-                <th>Archive Name</th>
-                <th>{# Actions #}</th>
-              </tr>
-            </thead>
-            <tbody class="results">
-              <tr class="show-if-only-child">
-                <td colspan="3">
-                  <span class="card-title">
-                    <i class="left material-icons" style="font-size: inherit;">file_download</i>Nothing here...
-                  </span>
-                  <p>
-                    No results available (yet). Is the job already completed?
-                  </p>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-
 <!-- Modals -->
 <div id="delete-job-modal" class="modal">
   <div class="modal-content">
@@ -174,8 +177,10 @@
     <a class="btn modal-close red waves-effect waves-light" href="{{ url_for('jobs.delete_job', job_id=job.id) }}"><i class="material-icons left">delete</i>Delete</a>
   </div>
 </div>
+{% endblock page_content %}
 
-
+{% block scripts %}
+{{ super() }}
 <script type="module">
 import {RessourceList} from '../../static/js/nopaque.lists.js';
 class InformationUpdater {
@@ -309,13 +314,9 @@ class InformationUpdater {
 var informationUpdater = new InformationUpdater({{ job.id }}, false);
 {% else %}
 var informationUpdater = new InformationUpdater({{ job.id }}, true);
-document.addEventListener("DOMContentLoaded", () => {
-  nopaque.socket.emit("foreign_user_data_stream_init", {{ job.user_id }});
-});
+nopaque.socket.emit("foreign_user_data_stream_init", {{ job.user_id }});
 {% endif %}
 let jobInputsList = new RessourceList("inputs", null, "JobInput");
-document.addEventListener("DOMContentLoaded", () => {
-  jobInputsList._add({{ job_inputs|tojson|safe }});
-});
+jobInputsList._add({{ job_inputs|tojson|safe }});
 </script>
-{% endblock %}
+{% endblock scripts %}