diff --git a/src/scss/layout/_all.scss b/src/scss/layout/_all.scss
index 1122ffe..f78538c 100644
--- a/src/scss/layout/_all.scss
+++ b/src/scss/layout/_all.scss
@@ -1,2 +1,3 @@
 @import 'header';
 @import 'navigation';
+@import 'content';
diff --git a/src/scss/layout/_content.scss b/src/scss/layout/_content.scss
new file mode 100644
index 0000000..5c690c6
--- /dev/null
+++ b/src/scss/layout/_content.scss
@@ -0,0 +1,10 @@
+// Content layout styles
+
+.content__container {
+  padding-top: 3.75em;
+  margin-left: $nav__toplvlWidth;
+  @include fastTransition-all;
+  @include mediaQuery(medium){
+    margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
+  }
+}
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
index 9bbe7e8..b86fcd7 100644
--- a/src/scss/layout/_header.scss
+++ b/src/scss/layout/_header.scss
@@ -22,7 +22,7 @@
 }
 header {
   position: relative;
-  background: $black;
+  background: $lightbg__primary;
   color: $white;
   padding: .8em;
 
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
index 024e869..0b07e5f 100644
--- a/src/scss/layout/_navigation.scss
+++ b/src/scss/layout/_navigation.scss
@@ -1,5 +1,9 @@
+$nav__toplvlWidth: 120px;
+$nav__seclvlWidth: 240px;
+
+// Top level navigation
 #nav__top-level {
-  background: $black;
+  background: $nav__top-level-color;
   height: 100%;
   position: fixed;
   left: 0;
@@ -8,7 +12,11 @@
   z-index: 99;
   list-style-type: none;
   margin: 0;
-  li { margin: 0; }
+  padding: 0;
+  width: $nav__toplvlWidth;
+  li {
+    margin: 0;
+  }
   .button, button, a {
     background: transparent;
     height: auto;
@@ -21,6 +29,7 @@
     text-align: center;
     margin-bottom: 0;
     white-space: normal;
+    border-radius: 0;
     .nav__icon {
       color: $white;
       max-height: 40px;
@@ -33,7 +42,7 @@
     p {
       margin: 0;
       font-size: .9em;
-      line-height:1.2rem;
+      line-height: 1.2rem;
     }
 
     .nav__icon-help__outer {
@@ -46,7 +55,7 @@
       fill: $white;
     }
     &:hover {
-      background: $white;
+      background: $nav__second-level-color;
       fill: $black;
       color: $black;
       padding: 1em;
@@ -55,32 +64,74 @@
         stroke: $black;
       }
       .nav__icon-help__inner {
-        fill: $black;
+        fill: $lightbg__primary;
       }
     }
   }
   .opened {
-    background: $white;
+    background: $nav__second-level-color;
     fill: $black;
     color: $black;
+    .nav__icon-help__outer {
+      stroke: $lightbg__primary;
+    }
   }
 }
 
+// Second Level Navigation
 .nav__second-level {
   position: fixed;
+  background: $nav__second-level-color;
   top: 0;
   bottom: 0;
-  left: 0;
+  left: -$nav__toplvlWidth;
+  width: $nav__seclvlWidth;
   z-index: 97;
-  display: block;
-  background: $white;
-  padding: 10px .6em;
+  display: none;
+  padding: 0;
   margin: 0;
   list-style-type: none;
-  transition: all ease-out 0.5s;
-  box-shadow: 0 2px 5px 0 $black;
+  transition: left .5s ease;
+  @include mediaQuery(medium) {
+    left: $nav__toplvlWidth;
+  }
+  &.btn-dashboard {
+    display: block;
+  }
   &.opened {
-    transition: all ease-out .8s;
+    left: $nav__toplvlWidth;
+    @include fastTransition-all;
+  }
+  a {
+    padding: 1.2em .6em 1.2em 1.9em;
+    display: block;
+    color: $black;
+    text-decoration: none;
+    position: relative;
+  }
 
+  li {
+    a:after{
+      content: '\203A';
+      position: absolute;
+      font-size: 2em;
+      font-weight: 700;
+      top: 50%;
+      right: 2em;
+      transform: translateY(-59%);
+      color: #4b5d78;
+      opacity: 0;
+    }
+    &.active,
+    &:focus,
+    &:hover {
+      background: $white;
+      a {font-weight: bold; color: #4b5d78;}
+      a:after {
+        opacity: 1;
+        right: .5em;
+        @include fastTransition-all;
+      }
+    }
   }
 }