diff --git a/app/common/styles/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index f8f5a6f..519c3ee 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -1,34 +1,14 @@
-$nav__toplvlWidth: 125px;
-$nav__seclvlWidth: 240px;
-$nav__top-level-color: $base-01--01;
-$nav__second-level-color: $base-02--06;
-$nav__second-level-text-color: $base-02--01;
+$nav__toplvlWidth: 240px;
+$nav__top-level-color: $color--blue-100;
+$nav__top-level-text-secondary: $color--grey-20;
+$nav__second-level-text-primary: $color--teal-50;
+$nav__second-level-text-secondary: $primary-light;
+$nav__hover-over-outline: $color--grey-40;
 
 //Navigation icons
-@mixin navIcons {
-  color: $primary-light;
-  fill: $primary-light;
-  max-height: 40px;
-  stroke-width: .5;
-  display: block;
-  margin: .5em auto;
-  .st0 {
-    fill: none;
-    stroke: $primary-light;
-    stroke-width: 2;
-    stroke-miterlimit: 10;
-  }
-  .st1 {
-    fill: none;
-    stroke: $primary-light;
-    stroke-width: 4;
-    stroke-miterlimit: 10;
-  }
-}
-
 .nav__wrapper {
   height: 100%;
-  position: fixed;
+  position: absolute;
   top: 0;
   z-index: 100;
 }
@@ -36,158 +16,156 @@
 // Top level navigation
 #nav__top-level {
   background: $nav__top-level-color;
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
   bottom: 0;
   list-style-type: none;
-  margin: 0;
-  padding: 0;
+  padding: 22px 0 0 0;
+  margin: 130px 0 0 0;
   width: $nav__toplvlWidth;
   overflow-y: auto;
-  li {
+  >li {
     margin: 0;
+    height: 3em;
+    &.opened{
+      height: inherit;
+      .nav-link{
+        color: $primary-light;
+      }
+    }
   }
   > li > a,
   > li > button {
-    height: 120px;
+    height: 3.3em;
   }
-  //svg icons
-  .nav-icon {
-    @include navIcons;
-    width: 100%;
-    height: 100%;
-    svg {
-      width: 36px;
-      height: auto;
-    }
-  }
-  .nav-icon__control,
-  .nav-icon__key {
-    svg {
-      width: 30px;
-    }
-  }
-  .button, button, a {
-    background: transparent;
-    border: 0;
-    color: $primary-light;
-    fill: $primary-light;
-    width: 100%;
-    padding: 1em;
-    display: block;
-    text-align: center;
-    margin-bottom: 0;
-    white-space: normal;
-    border-radius: 0;
-    text-decoration: none;
-    border-top: 1px solid transparent;
-    border-bottom: 1px solid $border-color-02;
-    font-weight: normal;
-    font-size: .9em;
-    line-height: 1.2;
+  button,
+  a,
+  span {
     &:hover {
-      background: $primary-light;
-      fill: $primary-dark;
-      color: $primary-action;
-      padding: 1em;
+      &.opened{
+        color: $primary-light;
+      }
+    }
+  }
+  .nav-icon {
+      height: 26px;
+      float: left;
+      margin: 2px 0 0 1px;
+      width: 26px;
+      fill: $primary-light;
+      svg {
+        height: inherit;
+        width:  26px;
+        max-width: inherit;
+        fill: $primary-light;
+      }
+  }
+  .nav-link {
+      float: left;
+      font-size: 15px;
+      padding: 9px 0 0 7px;
+      margin-left: 5px;
+      &:focus{
+        outline: 0;
+      }
+    }
+}
+
+.nav__wrapper button {
+  background: transparent;
+  border: 0;
+  color: $primary-light;
+  width: 95%;
+  padding: 5px 5px 9px 10px;
+  margin: 0 0 0 6px;
+  display: block;
+  text-align: center;
+  white-space: normal;
+  border-radius: 0;
+  text-decoration: none;
+  border: 1px solid transparent;
+  font-weight: normal;
+  font-size: 13px;
+  &:hover,
+  &:focus {
+    background: fade-out(#ffffff, 0.9);
+    color: $nav__top-level-text-secondary;
+    border-radius: 0;
+    border: 1px solid $nav__hover-over-outline;
+    outline: 0;
+  }
+  .icon {
+    margin-left: .3em;
+    margin-top: .6em;
+  }
+  img {
+    width: 2em;
+    height: 2em;
+  }
+}
+
+.nav__second-level  {
+  list-style-type: none;
+  opacity: 0;
+  left: $nav__toplvlWidth;
+  padding: 0;
+  margin: 0;
+  transform: scaleY(0);
+  transform-origin: 0 0;
+  transition: all $duration--moderate-01 $standard-easing--expressive;
+  overflow: hidden;
+  line-height: 0;
+  a {
+    color: $primary-light;
+    width: 95%;
+    padding: 6px 5px 8px 50px;
+    margin: 0 0 0 6px;
+    white-space: normal;
+    text-decoration: none;
+    border: 1px solid transparent;
+    font-weight: normal;
+    font-size: .8rem;
+    &:hover,
+    &:focus {
+      background: fade-out(#ffffff, 0.9);
+      color: $nav__second-level-text-secondary;
       border-radius: 0;
-      border-bottom: 1px solid $border-color-01;
-      .nav__icon-help__outer {
-        stroke: $primary-dark;
-      }
-      .nav__icon-help__inner {
-        fill: $primary-action;
-      }
-      .nav-icon {
-        fill: $primary-action;
-        color: $primary-action;
-        .st0 {
-          stroke: $primary-action;
-        }
-        .st1 {
-          fill: $primary-action;
-          color: $primary-action;
-          stroke: $primary-action;
-        }
-      }
+      border-color: $nav__hover-over-outline;
+      outline: 0;
     }
   }
-  .opened {
-    background: $nav__second-level-color;
-    fill: $primary-dark;
-    color: darken($primary-action, 10%);
-    border-bottom: 1px solid $border-color-01;
-    .nav-icon {
-      fill: $primary-action;
-      color: $primary-action;
-      .st0 {
-        stroke: $primary-action;
-      }
-      .st1 {
-        fill: $primary-action;
-        color: $primary-action;
-        stroke: $primary-action;
-      }
+  &.opened {
+    line-height: 1.1;
+    overflow: visible;
+    opacity: 1;
+    transform: scaleY(1);
+    transition: all $duration--moderate-01 $standard-easing--expressive;
+    li a{
+      display:block;
     }
   }
 
-  // Second Level Navigation
-  .nav__second-level {
-    position: fixed;
-    background: $nav__second-level-color;
-    top: 0;
-    bottom: 0;
-    left: -245px;
-    width: $nav__seclvlWidth;
-    z-index: -1;
-    padding: 0;
+  li:hover
+  {
+    margin-left: 17px;
     margin: 0;
-    list-style-type: none;
-    display: block;
-    transition: left $duration--slow-01 $standard-easing--productive;
-    &.opened {
-      left: $nav__toplvlWidth;
-      box-shadow: 7px 0 28px -10px $base-02--02;
+    padding: 0;
+    a{
+      padding-left: 50px;
     }
-    a {
-      padding: 1.2em 1em 1.2em 1em;
-      display: block;
-      color: $primary-dark;
-      text-decoration: none;
-      position: relative;
-      font-weight: 400;
-      text-align: left;
-      border-bottom: 1px solid transparent;
-      &:hover {
-        background: $primary-light;
-      }
-    }
+  }
 
-    li {
-      a:after{
-        content: '\203A';
-        position: absolute;
-        font-size: 2em;
-        font-weight: 700;
-        top: 50%;
-        right: .6em;
-        transform: translateY(-59%);
-        color: $nav__second-level-text-color;
-        opacity: 0;
+  li {
+    &:focus,
+    &:hover {
+      a {
+        color: $nav__second-level-text-secondary;
       }
-      &.active {
-        a {font-weight: 700;}
-      }
-      &.active,
-      &:focus,
-      &:hover {
-        a {color: $nav__second-level-text-color;}
-        a:after {
-          opacity: 1;
-          right: .3em;
-          @include fastTransition-all;
-        }
+    }
+    &.active {
+      a span {
+        color: $nav__second-level-text-primary;
       }
     }
   }