diff --git a/src/resources.cpp b/src/resources.cpp
index f8ff5fe..0559e27 100644
--- a/src/resources.cpp
+++ b/src/resources.cpp
@@ -42,6 +42,7 @@ Resources::Resources()
     INIT_RESOURCE("/favicon-152.png", favicon_152_png, CONTENT_TYPE_PNG);
     INIT_RESOURCE("/icon.png", icon_png, CONTENT_TYPE_PNG);
     INIT_RESOURCE("/js/app.js", js_app_js, CONTENT_TYPE_JS);
+    INIT_RESOURCE("/css/app.css", css_app_css, CONTENT_TYPE_CSS);
 
     if(const char* baseUrl = getenv("LAMINAR_BASE_URL")) {
         // The administrator needs to customize the <base href>. Unfortunately this seems
diff --git a/src/resources/css/app.css b/src/resources/css/app.css
new file mode 100644
index 0000000..2240e15
--- /dev/null
+++ b/src/resources/css/app.css
@@ -0,0 +1,84 @@
+body, html { height: 100%; }
+.navbar { margin-bottom: 0; border-radius: 0; }
+.navbar-brand { margin: 0 -15px; padding: 7px 15px }
+.navbar-brand>img { display: inline; }
+a.navbar-btn { color: #9d9d9d; }
+a.navbar-btn.active { color: #fff; }
+a.navbar-btn:hover { color: #fff; text-decoration: none; }
+a.navbar-btn:focus { color: #fff; }
+.bell { margin: 8px 15px; color: #9d9d9d; }
+.bell:hover { text-decoration: none; color: #9d9d9d; cursor: pointer; }
+.bell.active { color: #333; }
+dt,dd { line-height: 2; }
+canvas {
+ width: 100% !important;
+ max-width: 800px;
+ height: auto !important;
+}
+.progress {
+ height: 10px;
+ margin-top: 5px;
+ margin-bottom: 0;
+}
+table#joblist tr:first-child td { border-top: 0; }
+#popup-connecting {
+  position: fixed;
+  background: white;
+  border: 1px solid #ddd;
+  bottom: 10px;
+  right: 10px;
+  padding: 20px;
+}
+/* status icons */
+span.status {
+  display: inline-block;
+  width: 1em;
+  text-align: center;
+  font-family: sans-serif;
+}
+span.success { color: forestgreen; }
+span.failed { color: firebrick; }
+span.aborted { color: indigo; }
+span.spin {
+  color: steelblue;
+  animation: 2s linear infinite spin;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+/* chart overlay */
+li.chart-overlay {
+  position: absolute;
+  display: inline-block;
+  background: white;
+  border: 1px solid lightgray;
+  padding: 3px;
+}
+/* sort indicators */
+a.sort {
+  position: relative;
+  margin-left: 7px;
+}
+a.sort:before, a.sort:after {
+  border: 4px solid transparent;
+  content: "";
+  position: absolute;
+  display: block;
+  height: 0;
+  width: 0;
+  right: 0;
+  top: 50%;
+}
+a.sort:before {
+  border-bottom-color: #ccc;
+  margin-top: -9px;
+}
+a.sort:after {
+  border-top-color: #ccc;
+  margin-top: 1px;
+}
+a.sort.dsc:after { border-top-color: #000; }
+a.sort.asc:before { border-bottom-color: #000; }
+a.sort:hover { text-decoration: none; cursor:pointer; }
+a.sort:not(.asc):hover:before { border-bottom-color: #777;  }
+a.sort:not(.dsc):hover:after { border-top-color: #777;  }
diff --git a/src/resources/index.html b/src/resources/index.html
index 49dab3a..299b915 100644
--- a/src/resources/index.html
+++ b/src/resources/index.html
@@ -15,95 +15,9 @@
  <script src="https://cdn.jsdelivr.net/npm/ansi_up@1.3.0/ansi_up.js" integrity="sha256-2UR0QYPMTIY0yP5S6ubBS7wFNKhn8uW7pV5E3LlvI6U=" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js" integrity="sha256-R4pqcOYV8lt7snxMQO/HSbVCFRPMdrhAFMH+vr9giYI=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.5/dist/css/bootstrap.min.css" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc=" crossorigin="anonymous">
+ <link href="css/app.css" rel="stylesheet">
  <link href="custom/style.css" rel="stylesheet">
  <script src="js/app.js" defer></script>
- <style>
-  body, html { height: 100%; }
-  .navbar { margin-bottom: 0; border-radius: 0; }
-  .navbar-brand { margin: 0 -15px; padding: 7px 15px }
-  .navbar-brand>img { display: inline; }
-  a.navbar-btn { color: #9d9d9d; }
-  a.navbar-btn.active { color: #fff; }
-  a.navbar-btn:hover { color: #fff; text-decoration: none; }
-  a.navbar-btn:focus { color: #fff; }
-  .bell { margin: 8px 15px; color: #9d9d9d; }
-  .bell:hover { text-decoration: none; color: #9d9d9d; cursor: pointer; }
-  .bell.active { color: #333; }
-  dt,dd { line-height: 2; }
-  canvas {
-   width: 100% !important;
-   max-width: 800px;
-   height: auto !important;
-  }
-  .progress {
-   height: 10px;
-   margin-top: 5px;
-   margin-bottom: 0;
-  }
-  table#joblist tr:first-child td { border-top: 0; }
-  #popup-connecting {
-    position: fixed;
-    background: white;
-    border: 1px solid #ddd;
-    bottom: 10px;
-    right: 10px;
-    padding: 20px;
-  }
-  /* status icons */
-  span.status {
-    display: inline-block;
-    width: 1em;
-    text-align: center;
-    font-family: sans-serif;
-  }
-  span.success { color: forestgreen; }
-  span.failed { color: firebrick; }
-  span.aborted { color: indigo; }
-  span.spin {
-    color: steelblue;
-    animation: 2s linear infinite spin;
-  }
-  @keyframes spin {
-    to { transform: rotate(360deg); }
-  }
-  /* chart overlay */
-  li.chart-overlay {
-    position: absolute;
-    display: inline-block;
-    background: white;
-    border: 1px solid lightgray;
-    padding: 3px;
-  }
-  /* sort indicators */
-  a.sort {
-    position: relative;
-    margin-left: 7px;
-  }
-  a.sort:before, a.sort:after {
-    border: 4px solid transparent;
-    content: "";
-    position: absolute;
-    display: block;
-    height: 0;
-    width: 0;
-    right: 0;
-    top: 50%;
-  }
-  a.sort:before {
-    border-bottom-color: #ccc;
-    margin-top: -9px;
-  }
-  a.sort:after {
-    border-top-color: #ccc;
-    margin-top: 1px;
-  }
-  a.sort.dsc:after { border-top-color: #000; }
-  a.sort.asc:before { border-bottom-color: #000; }
-  a.sort:hover { text-decoration: none; cursor:pointer; }
-  a.sort:not(.asc):hover:before { border-bottom-color: #777;  }
-  a.sort:not(.dsc):hover:after { border-top-color: #777;  }
-
- </style>
 </head>
 <body>
  <template id="home"><div>
@@ -339,4 +253,3 @@
  </div>
 </body>
 </html>
-