diff --git a/ui/src/navbar.css b/ui/src/navbar.css
index d0b905b..431eadf 100644
--- a/ui/src/navbar.css
+++ b/ui/src/navbar.css
@@ -1,13 +1,21 @@
 /** 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%);
+  --navbar-height: 50px;
 }
 
 .navbar {
-  background-color: #222;
-  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
+  background-color: var(--navbar-bg);
+  background-image: var(--navbar-image);
   text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
+  min-height: var(--navbar-height);
 }
 
 .main-nav {
@@ -39,6 +47,11 @@
   text-decoration: none;
 }
 
+.navbar-brand a {
+  display: inline-block;
+  padding: 12px 15px;
+}
+
 .navbar li {
   color: var(--navbar-color);
 }
@@ -53,15 +66,15 @@ li.navbar-active span,
   color: #ffffff;
 }
 
-.navbar-dropdown-content {
-}
-
 .navbar-dropdown-content a {
-  background: transparent !important;
   color: var(--navbar-color) !important;
   display: block;
 }
 
+.navbar-dropdown-content a:hover {
+  color: #ffffff !important;
+}
+
 .navbar-mailbox {
   padding: 15px;
 }
@@ -76,11 +89,12 @@ li.navbar-active span,
 @media screen and (min-width: 1000px) {
   .main-nav,
   .navbar-bg {
-    height: 50px;
+    height: var(--navbar-height);
   }
 
   .navbar {
     align-items: center;
+    background: none;
     display: flex;
   }
 
@@ -91,9 +105,13 @@ li.navbar-active span,
     padding: 0;
   }
 
+  .main-nav.active {
+    display: flex;
+  }
+
   .navbar-bg {
-    background-color: #222;
-    background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
+    background-color: var(--navbar-bg);
+    background-image: var(--navbar-image);
     grid-column: 1 / 4;
     grid-row: 1;
     width: 100%;
@@ -108,6 +126,11 @@ li.navbar-active span,
     margin: 0 auto;
   }
 
+  .navbar-mailbox {
+    order: 1;
+    padding: 8px 0 !important;
+  }
+
   .navbar-mailbox input {
     margin-top: 1px;
   }
@@ -130,11 +153,15 @@ li.navbar-active span,
 
   .navbar-dropdown-content a {
     color: var(--primary-color) !important;
-    display: block;
     padding: 5px 15px;
   }
 
   .navbar-dropdown-content a:hover {
+    color: var(--primary-color) !important;
     background-color: var(--selected-color);
   }
+
+  .navbar-toggle {
+    display: none;
+  }
 }