diff --git a/web/app/static/css/nopaque.css b/web/app/static/css/nopaque.css
index f1e6f5e0..c4a41cc9 100644
--- a/web/app/static/css/nopaque.css
+++ b/web/app/static/css/nopaque.css
@@ -1,3 +1,29 @@
+/* Service colos setup
+ * file-setup ~ light: #??????, normal: #d5dc95, dark: #a1b300
+ * ocr ~ light: #??????, normal: #a9d8c8, dark: #00a58b
+ * nlp ~ light: #??????, normal: #98acd2, dark: #0064a3
+ * corpus-analysis ~ light: #??????, normal: #aa9cc9, dark: #6b3f89
+ */
+#sidenav-main-file-setup {
+  background-color: #d5dc95;
+  border-left: 10px solid #a1b300;
+}
+
+#sidenav-main-ocr {
+  background-color: #a9d8c8;
+  border-left: 10px solid #00a58b;
+}
+
+#sidenav-main-nlp {
+  background-color: #98acd2;
+  border-left: 10px solid #0064a3;
+}
+
+#sidenav-main-corpus-analysis {
+  background-color: #aa9cc9;
+  border-left: 10px solid #6b3f89;
+}
+
 /*
  * ### 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 8a9511ca..4a7355cb 100644
--- a/web/app/templates/nopaque.html.j2
+++ b/web/app/templates/nopaque.html.j2
@@ -108,10 +108,10 @@
         <li><a href="{{ url_for('main.dashboard', _anchor='jobs') }}" style="padding-left: 47px;"><i class="material-icons">work</i>My Jobs</a></li>
         <li><div class="divider"></div></li>
         <li><a class="subheader">Processes and Services</a></li>
-        <li><a href="{{ url_for('services.service', service='file-setup') }}"><i class="material-icons">burst_mode</i>File setup</a></li>
-        <li><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
-        <li><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
-        <li><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus analysis</a></li>
+        <li id="sidenav-main-file-setup"><a href="{{ url_for('services.service', service='file-setup') }}"><i class="material-icons">burst_mode</i>File setup</a></li>
+        <li id="sidenav-main-ocr"><a href="{{ url_for('services.service', service='ocr') }}"><i class="material-icons">find_in_page</i>OCR</a></li>
+        <li id="sidenav-main-nlp"><a href="{{ url_for('services.service', service='nlp') }}"><i class="material-icons">format_textdirection_l_to_r</i>NLP</a></li>
+        <li id="sidenav-main-corpus-analysis"><a href="{{ url_for('services.service', service='corpus_analysis') }}"><i class="material-icons">search</i>Corpus analysis</a></li>
         <li><div class="divider"></div></li>
         <li><a class="subheader">Account</a></li>
         {% if current_user.is_authenticated %}