diff --git a/ui/src/index.js b/ui/src/index.js
index f6ed9c4..3a03ec6 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -1,4 +1,5 @@
 import './main.css'
+import './mailbox.css'
 import './navbar.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import { Elm } from './Main.elm'
diff --git a/ui/src/mailbox.css b/ui/src/mailbox.css
new file mode 100644
index 0000000..0ca2523
--- /dev/null
+++ b/ui/src/mailbox.css
@@ -0,0 +1,163 @@
+/** MAILBOX */
+
+.mailbox {
+  display: grid;
+  grid-gap: 1px 20px;
+  grid:
+    "ctrl mesg" auto
+    "list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
+  height: 100%;
+}
+
+.message-list-controls {
+  display: flex;
+  grid-area: ctrl;
+}
+
+.message-list-controls input[type="search"] {
+  flex: 1 1 auto;
+  padding: 2px 4px;
+}
+
+.message-list {
+  grid-area: list;
+  overflow-y: scroll;
+}
+
+@media (max-width: 999px) {
+  .mailbox {
+    grid:
+      "ctrl" auto
+      "list" auto
+      "mesg" auto / 1fr;
+    justify-self: center;
+    width: 100%;
+  }
+
+  .message-list {
+    overflow-y: visible;
+  }
+}
+
+.message-list-entry {
+  border-color: var(--border-color);
+  border-width: 1px;
+  border-style: none solid solid solid;
+  cursor: pointer;
+  padding: 5px 8px;
+}
+
+.message-list-entry.selected {
+  background-color: var(--selected-color);
+}
+
+.message-list-entry:first-child {
+  border-style: solid;
+}
+
+.message-list-entry .subject {
+  color: var(--high-color);
+}
+
+.message-list-entry.unseen .subject {
+  font-weight: bold;
+}
+
+.message-list-entry .from,
+.message-list-entry .date {
+  color: var(--low-color);
+  font-size: 85%;
+}
+
+
+/** MESSAGE */
+
+.message {
+  grid-area: mesg;
+  overflow: auto;
+}
+
+.message-header {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.05);
+  padding: 10px;
+  margin: 10px 0;
+}
+
+.message-header dt {
+  color: var(--low-color);
+  font-weight: bold;
+}
+
+.message-header dd {
+  color: var(--low-color);
+  padding-left: 10px;
+}
+
+@media (min-width: 1000px) {
+  .message-header {
+    display: grid;
+    grid-template: auto / 5em 1fr;
+  }
+
+  .message-header dt {
+    grid-column: 1;
+    text-align: right;
+  }
+
+  .message-header dd {
+    grid-column: 2;
+  }
+}
+
+.message-body {
+  padding: 5px;
+}
+
+.message-warn li {
+  margin-left: 20px;
+  padding-left: 0px;
+}
+
+.message-warn-severe {
+  font-weight: 700;
+}
+
+
+nav.tab-bar {
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  margin: 20px 0 10px 0;
+}
+
+nav.tab-bar a {
+  border-radius: 4px 4px 0 0;
+  display: block;
+  margin-bottom: -1px;
+  margin-right: 2px;
+  padding: 8px 15px;
+  text-decoration: none;
+}
+
+nav.tab-bar a.active {
+  color: var(--low-color);
+  border-color: var(--border-color) var(--border-color) var(--bg-color) var(--border-color);
+  border-style: solid;
+  border-width: 1px;
+}
+
+nav.tab-bar a:focus,
+nav.tab-bar a:hover {
+  background-color: var(--selected-color);
+}
+
+nav.tab-bar a.active:focus,
+nav.tab-bar a.active:hover {
+  background-color: var(--bg-color);
+}
+
+.attachments {
+  width: 100%;
+}
+
diff --git a/ui/src/main.css b/ui/src/main.css
index 01505ab..4e694a1 100644
--- a/ui/src/main.css
+++ b/ui/src/main.css
@@ -236,169 +236,6 @@ h3 {
   background-image: linear-gradient(to bottom, #d9534f 0, #c12e2a 100%);
 }
 
-/** MAILBOX */
-
-.mailbox {
-  display: grid;
-  grid-gap: 1px 20px;
-  grid:
-    "ctrl mesg" auto
-    "list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
-  height: 100%;
-}
-
-.message-list-controls {
-  display: flex;
-  grid-area: ctrl;
-}
-
-.message-list-controls input[type="search"] {
-  flex: 1 1 auto;
-  padding: 2px 4px;
-}
-
-.message-list {
-  grid-area: list;
-  overflow-y: scroll;
-}
-
-@media (max-width: 999px) {
-  .mailbox {
-    grid:
-      "ctrl" auto
-      "list" auto
-      "mesg" auto / 1fr;
-    justify-self: center;
-    width: 100%;
-  }
-
-  .message-list {
-    overflow-y: visible;
-  }
-}
-
-.message-list-entry {
-  border-color: var(--border-color);
-  border-width: 1px;
-  border-style: none solid solid solid;
-  cursor: pointer;
-  padding: 5px 8px;
-}
-
-.message-list-entry.selected {
-  background-color: var(--selected-color);
-}
-
-.message-list-entry:first-child {
-  border-style: solid;
-}
-
-.message-list-entry .subject {
-  color: var(--high-color);
-}
-
-.message-list-entry.unseen .subject {
-  font-weight: bold;
-}
-
-.message-list-entry .from,
-.message-list-entry .date {
-  color: var(--low-color);
-  font-size: 85%;
-}
-
-
-/** MESSAGE */
-
-.message {
-  grid-area: mesg;
-  overflow: auto;
-}
-
-.message-header {
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.05);
-  padding: 10px;
-  margin: 10px 0;
-}
-
-.message-header dt {
-  color: var(--low-color);
-  font-weight: bold;
-}
-
-.message-header dd {
-  color: var(--low-color);
-  padding-left: 10px;
-}
-
-@media (min-width: 1000px) {
-  .message-header {
-    display: grid;
-    grid-template: auto / 5em 1fr;
-  }
-
-  .message-header dt {
-    grid-column: 1;
-    text-align: right;
-  }
-
-  .message-header dd {
-    grid-column: 2;
-  }
-}
-
-.message-body {
-  padding: 5px;
-}
-
-.message-warn li {
-  margin-left: 20px;
-  padding-left: 0px;
-}
-
-.message-warn-severe {
-  font-weight: 700;
-}
-
-
-nav.tab-bar {
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  margin: 20px 0 10px 0;
-}
-
-nav.tab-bar a {
-  border-radius: 4px 4px 0 0;
-  display: block;
-  margin-bottom: -1px;
-  margin-right: 2px;
-  padding: 8px 15px;
-  text-decoration: none;
-}
-
-nav.tab-bar a.active {
-  color: var(--low-color);
-  border-color: var(--border-color) var(--border-color) var(--bg-color) var(--border-color);
-  border-style: solid;
-  border-width: 1px;
-}
-
-nav.tab-bar a:focus,
-nav.tab-bar a:hover {
-  background-color: var(--selected-color);
-}
-
-nav.tab-bar a.active:focus,
-nav.tab-bar a.active:hover {
-  background-color: var(--bg-color);
-}
-
-.attachments {
-  width: 100%;
-}
-
 /** STATUS */
 
 .metric-panel {
diff --git a/ui/src/navbar.css b/ui/src/navbar.css
index 431eadf..3f1e09c 100644
--- a/ui/src/navbar.css
+++ b/ui/src/navbar.css
@@ -1,10 +1,6 @@
 /** NAV BAR */
 
 :root {
-  --bg-color: #fff;
-  --primary-color: #333;
-  --border-color: #ddd;
-  --selected-color: #eee;
   --navbar-color: #9d9d9d;
   --navbar-bg: #222;
   --navbar-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);