diff --git a/app/common/styles/base/icons.scss b/app/common/styles/base/icons.scss
index 7b7e981..2c803d2 100644
--- a/app/common/styles/base/icons.scss
+++ b/app/common/styles/base/icons.scss
@@ -78,6 +78,11 @@
   background-image: url(/assets/images/icon-on.svg);
 }
 
+.icon__off {
+  @include status-icon;
+  background-image: url(/assets/images/icon-off.svg);
+}
+
 .icon__info{
   margin-top: -4px;
   margin-right: .5em;
diff --git a/app/common/styles/base/mixins.scss b/app/common/styles/base/mixins.scss
index d13f2ce..79b0f34 100644
--- a/app/common/styles/base/mixins.scss
+++ b/app/common/styles/base/mixins.scss
@@ -40,28 +40,6 @@
   font-weight: 700;
 }
 
-//Navigation icons
-@mixin navIcons {
-  color: $white;
-  fill: $white;
-  max-height: 40px;
-  stroke-width: .5;
-  display: block;
-  width: 40px;
-  margin: 0 auto .5em auto;
-  .st0 {
-    fill: none;
-    stroke: #fff;
-    stroke-width: 2;
-    stroke-miterlimit: 10;
-  }
-  .st1 {
-    fill: none;
-    stroke: #fff;
-    stroke-width: 4;
-    stroke-miterlimit: 10;
-  }
-}
 
 //Transitions mixin
 @mixin fastTransition-all {
diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 2d818a9..997ab7c 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -1,6 +1,29 @@
 $nav__toplvlWidth: 125px;
 $nav__seclvlWidth: 240px;
 
+//Navigation icons
+@mixin navIcons {
+  color: $white;
+  fill: $white;
+  max-height: 40px;
+  stroke-width: .5;
+  display: block;
+  width: 40px;
+  margin: 0 auto .5em auto;
+  .st0 {
+    fill: none;
+    stroke: $white;
+    stroke-width: 2;
+    stroke-miterlimit: 10;
+  }
+  .st1 {
+    fill: none;
+    stroke: $white;
+    stroke-width: 4;
+    stroke-miterlimit: 10;
+  }
+}
+
 .nav__wrapper {
   height: 100%;
   position: fixed;
@@ -11,7 +34,6 @@
 // Top level navigation
 #nav__top-level {
   background: $nav__top-level-color;
-  //height: 100%;
   position: absolute;
   left: 0;
   top: 0;
@@ -44,7 +66,7 @@
     border-radius: 0;
     text-decoration: none;
     border-top: 1px solid transparent;
-    border-bottom: 1px solid transparent;
+    border-bottom: 1px solid $darkgrey;
     a {
       margin-bottom: 5px;
     }
@@ -52,27 +74,16 @@
       margin: 1em 0 0 0;
       display: block;
       font-size: .9em;
-      font-weight: 700;
+      font-weight: 400;
       line-height: 1rem;
     }
-
-    .nav__icon-help__outer {
-      fill: transparent;
-      stroke: $white;
-      stroke-miterlimit: 10;
-      stroke-width: 1px;
-    }
-    .nav__icon-help__Inner {
-      fill: $white;
-    }
     &:hover {
       background: $nav__second-level-color;
       fill: $black;
       color: $medblue;
       padding: 1em;
       border-radius: 0;
-      border-top: 1px solid $medgrey;
-      border-bottom: 1px solid $medgrey;
+      border-bottom: 1px solid $lightgrey;
       .nav__icon-help__outer {
         stroke: $black;
       }
@@ -96,10 +107,8 @@
   .opened {
     background: $nav__second-level-color;
     fill: $black;
-    color: $medblue;
-    .nav__icon-help__outer {
-      stroke: $lightbg__primary;
-    }
+    color: darken($medblue, 10%);
+    border-bottom: 1px solid $lightgrey;
     .nav-icon {
       fill: $medblue;
       color: $medblue;