diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
index dcacb0171..5c79ec3b2 100644
--- a/public/css/icinga/base.less
+++ b/public/css/icinga/base.less
@@ -46,6 +46,17 @@
 @tr-active-color: #E5F9FF;
 @tr-hover-color: #F5FDFF;
 
+// Menu colors
+@menu-bg-color: #494949;
+@menu-active-bg-color: #333;
+@menu-flyout-bg-color: @body-bg-color;
+@menu-color: @text-color-inverted;
+@menu-highlight-color: @icinga-blue;
+@menu-2ndlvl-color: #c4c4c4;
+@menu-2ndlvl-highlight-color: @text-color-inverted;
+@menu-flyout-bg-color: @body-bg-color;
+@menu-flyout-color: @text-color;
+
 // Font families
 @font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 @font-family-fixed: "Liberation Mono", "Lucida Console", Courier, monospace;
diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
index cee595064..806627fa2 100644
--- a/public/css/icinga/layout-structure.less
+++ b/public/css/icinga/layout-structure.less
@@ -6,15 +6,14 @@ html {
 
 #layout {
   height: 100%;
-  left: 0;
-  position: fixed;
-  top: 0;
   width: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
 }
 
 #header {
   width: 100%;
-
   padding-bottom: 3em;
   position: fixed;
   left: 0;
@@ -24,7 +23,6 @@ html {
 
 #sidebar {
   width: 12em;
-
   position: fixed;
   bottom: 0;
   left: 0;
@@ -32,9 +30,9 @@ html {
 }
 
 #main {
+  position: fixed;
   bottom: 0;
   left: 12em;
-  position: fixed;
   right: 0;
   top: 2.25em;
 }
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
index d5ed36a6f..5ecd9a535 100644
--- a/public/css/icinga/layout.less
+++ b/public/css/icinga/layout.less
@@ -56,8 +56,8 @@
   width: 100%;
 
   &:focus {
-    outline: none;
     opacity: .6;
+    outline: none;
   }
 }
 
@@ -127,7 +127,12 @@
 }
 
 // Mobile menu
+#layout.minimal-layout #sidebar {
+  background-color: @menu-bg-color;
+}
+
 #mobile-menu-toggle {
+  color: @menu-color;
   text-align: right;
 
   > button {
@@ -142,10 +147,6 @@
   }
 }
 
-#sidebar {
-  background-color: @gray-lighter;
-}
-
 .container,
 .error-message {
   // Don't outline containers and error messages when focused because they receive focus for accessibility only
@@ -246,7 +247,7 @@ html.no-js .controls > .tabs {
   z-index: 2;
 }
 
-// Collpased sidebar
+// Collapsed sidebar
 #layout.sidebar-collapsed {
   #header-logo-container {
     height: 3.167em;
@@ -300,8 +301,10 @@ html.no-js .controls > .tabs {
   }
 
   #search:focus {
-    background-color: @gray-lighter;
+    background-color: @menu-bg-color;
+    border-radius: 0 .25em .25em 0;
     box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
+    color: @menu-color;
     padding-left: 3.75em;
     width: 20em;
     position: fixed;
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 1c384ba9f..c8b765ae8 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -10,11 +10,14 @@
 @icon-width: 1.7em; // 1.5em width + 0.2em right margin
 
 #menu {
+  background-color: @menu-bg-color;
+  box-shadow: inset -.5em 0 1em rgba(0, 0, 0, .3);
   height: 100%;
   overflow: auto;
 }
 
 #layout:not(.minimal-layout) #menu {
+  // Space for the #toggle-sidebar button
   padding-bottom: 2.25em;
 }
 
@@ -23,21 +26,13 @@
 
   > a {
     &:focus {
-      color: @icinga-blue;
       outline: none;
     }
 
     &:hover {
-      color: @icinga-blue;
       text-decoration: none;
     }
   }
-
-  &.active {
-    > a {
-      color: @icinga-blue;
-    }
-  }
 }
 
 #layout:not(.sidebar-collapsed) #menu .nav-item > a {
@@ -54,28 +49,37 @@
 }
 
 #menu .nav-level-1 > .nav-item {
-  border-left: 5px solid transparent;
   line-height: 2.167em; // 26 px
+  color: @menu-color;
 
   &.active {
-    > a > .badge {
-      display: none;
+    > a {
+      font-weight: @font-weight-bold;
+      letter-spacing: .02em;
+
+      > .badge {
+        display: none;
+      }
     }
 
-    background-color: @body-bg-color;
-    border-color: @icinga-blue;
+    background-color: @menu-active-bg-color;
   }
 
   &.no-icon > a {
-    margin-left: @icon-width;
+    padding-left: @icon-width;
   }
 
   > a {
-    padding: 0.5em 0.5em; // 6px 6px
+    padding: 0.5em 0.5em 0.5em .75em;
+
+    &:focus, &:hover {
+      color: @menu-highlight-color;
+    }
   }
 
-  > a:active ~ .nav-level-2 > li {
-    display: block;
+  // Balance icon weight for non active menu items
+  &:not(.active) > a > i {
+    opacity: 0.8
   }
 }
 
@@ -83,11 +87,49 @@
   // Collapse menu by default
   display: none;
   line-height: 1.833em; // 22px
-  margin-left: @icon-width;
+  padding-left: @icon-width;
 
   > a {
+    color: @menu-2ndlvl-color;
     font-size: @font-size-small;
-    padding: 0.364em 0.545em; // 4px 6px
+    padding: 0.364em 0.545em 0.364em .8em;
+
+    &:hover, &:focus {
+      color: @menu-2ndlvl-highlight-color;
+    }
+  }
+
+  &.active {
+    background-color: @menu-highlight-color;
+    overflow: hidden;
+    position: relative;
+
+    > a {
+      &:focus, &:hover {
+        font-weight: @font-weight-bold;
+      }
+    }
+  }
+
+  // Little caret on active level-2 item
+  &.active:after {
+    background-color: @body-bg-color;
+    box-shadow: 0 0 1em 0 rgba(0,0,0,.6);
+    content: "";
+    display: block;
+    height: 1.25em;
+    width: 1.25em;
+    -webkit-transform: rotate(45deg);
+       -moz-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+            transform: rotate(45deg);
+    position: absolute;
+    top: .5em;
+    right: -.75em;
+  }
+
+  &.active > a {
+    color: @menu-color;
   }
 }
 
@@ -111,10 +153,14 @@
   line-height: 1;
   margin: 0 0.5em -.05em 0.25em;
   width: 1em;
+  -webkit-filter: invert(100%);
+     -moz-filter: invert(100%);
+      -ms-filter: invert(100%);
+          filter: invert(100%);
 }
 
-#menu .user-nav-item {
-  background-color: @gray-light;
+.nav-item:hover img.icon {
+  opacity: .6;
 }
 
 #menu input.search {
@@ -122,13 +168,13 @@
   background-size: 1em auto;
   border: none;
   border-left: 5px solid transparent;
+  color: @menu-color;
   line-height: 2.167em;
   padding-left: @icon-width + 0.5em;
   width: 100%;
 
   &.active {
-    background-color: @body-bg-color;
-    border-color: @icinga-blue;
+    background-color: @menu-active-bg-color;
   }
 }
 
@@ -139,6 +185,7 @@
 
 #menu .nav-level-2 > .badge-nav-item > a > .badge {
   margin-top: 0.2em;
+  margin-right: .5em
 }
 
 // Hovered menu
@@ -146,28 +193,52 @@
 #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active):hover {
   > .nav-level-2 {
     &:before {
-      border: 0.5em solid rgba(0, 0, 0, 0);
-      border-right-color: @text-color;
+      background-color: @menu-flyout-bg-color;
+      border-bottom: 1px solid @gray-light;
+      border-left:   1px solid @gray-light;
       content: "";
+      height: 1em;
+      margin-left: -.5em;
+      margin-top: 0.625em;
+      transform: rotate(45deg);
       width: 1em;
-      position: fixed;
-      margin-left: -1em;
-      margin-top: 0.5em;
+      position: absolute;
     }
 
-    background-color: @text-color;
-    color: @text-color-inverted;
+    background-color: @menu-flyout-bg-color;
+    border: 1px solid @gray-light;
+    border-radius: .25em;
+    box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
     padding: @vertical-padding 0;
-    position: fixed;
     width: 14em;
+    position: fixed;
 
     > .nav-item {
       display: block;
-      margin-left: 0.5em;
+      padding-left: 0;
+      position: relative;
 
-      > a:hover {
-        color: @text-color-inverted;
-        text-decoration: underline;
+      > a {
+        color: @menu-flyout-color;
+        padding-left: 1.5em;
+
+        &:hover, &:focus {
+          background-color: @tr-active-color;
+        }
+      }
+
+      &.active > a {
+        color: @menu-color;
+
+        &:focus, &:hover {
+          background-color: @menu-highlight-color;
+          font-weight: @font-weight-bold;
+        }
+      }
+
+      // Hide activity caret when displayed as flyout
+      &:after {
+        display: none;
       }
     }
   }
@@ -184,7 +255,7 @@
 #layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active):hover {
   > .nav-level-2 {
     // Position relative to parent
-    margin-left: 15.583em;
+    margin-left: 16em;
     margin-top: -3.167em;
   }
 }
@@ -192,7 +263,7 @@
 #layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item:hover {
   > .nav-level-2 {
     // Position relative to parent
-    margin-left: 3.583em;
+    margin-left: 4em;
     margin-top: -3.333em;
   }
 }
@@ -238,18 +309,20 @@
 .search-reset {
   background: none;
   border: 0;
+  color: @menu-color;
   cursor: pointer;
   display: none;
   height: 100%;
   padding: 0;
+  user-select: none;
   position: absolute;
   right: 0;
   top: 0;
-  user-select: none;
-}
 
-.search-reset:focus {
-  outline: 0;
+  &:focus, &:hover {
+    color: @menu-highlight-color;
+    outline: none;
+  }
 }
 
 // Override forms.less
@@ -305,15 +378,13 @@ input[type=text].search-input {
   background: none;
   border: none;
   padding: 0;
-
   color: @gray-light;
-
   position: absolute;
   bottom: 0;
   right: 0;
 
   i {
-    background: @body-bg-color;
+    background-color: @body-bg-color;
     border-radius: .25em 0 0 .25em;
     font-size: 1.5em;
     width: 2em;
@@ -325,7 +396,7 @@ input[type=text].search-input {
 
   &:hover, &:focus {
     i {
-      color: @icinga-blue;
+      color: @menu-highlight-color;
     }
   }
 }
diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
index 3af0a8b02..c88c4efb9 100644
--- a/public/css/icinga/responsive.less
+++ b/public/css/icinga/responsive.less
@@ -106,16 +106,6 @@
 #layout.twocols #col2 {
   border-left: 1px solid @gray-lighter;
   display: block;
-
-  > .controls > .tabs:before {
-    background-color: @icinga-blue;
-    content: "";
-    display: block;
-    height: 3em;
-    margin-left: -1px;
-    width: 1px;
-    position: fixed;
-  }
 }
 
 #layout.twocols > #main > .container {
diff --git a/public/img/icons/search.png b/public/img/icons/search.png
index a66c3ca95..638be2ecb 100644
Binary files a/public/img/icons/search.png and b/public/img/icons/search.png differ