diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index b1a7942..ac201b9 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -2,50 +2,12 @@
 $nav__toplvlWidth: 120px;
 $nav__seclvlWidth: 240px;
 
-// Page header
-.page-header {
-  position: relative;
-  border-bottom: 1px solid $lightbg__grey;
-  margin: 1.625em 0 1.2em 0;
-  padding-left: 0;
-  overflow: hidden;
-  .h4 {
-    padding: 0;
-    margin: 0 0 .5em 0;
-    font-weight: bold;
-  }
-}
-
 .content__container {
   margin-left: $nav__toplvlWidth;
   padding: 1em .1em;
   transition: left 1s ease;
   @include mediaQuery(x-small){
-    //margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
+    margin-left: $nav__toplvlWidth + $nav__seclvlWidth;
     padding: 1rem 2rem;
   }
 }
-
-section.row {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.content-header {
-  font-weight: 700;
-  margin-bottom: 0;
-  margin-top: 2em;
-}
-
-.content-label, label {
-  color: $darkgrey;
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: .75em;
-  margin-bottom: 0;
-}
-
-.subhead {
-  border-bottom: 1px solid $medgrey;
-  padding-bottom: .5em;
-}
\ No newline at end of file
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index fe06d0b..9bbe7e8 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -1,15 +1,15 @@
-$logoHeight: 30px;
+
+$logoHeight: 40px;
 $logoMaxHeight: 100px;
 $logoMaxWidth: 125px;
 
 #header__wrapper {
   position: fixed;
-  top: 0;
+  top:0;
   left: 0;
-  right: 0;
-  z-index: 300;
+  right:0;
+  z-index: 100;
 }
-
 .app__version {
   margin-left: 1em;
   display: none;
@@ -20,144 +20,32 @@
     transform: translateY(-50%);
   }
 }
-
 header {
   position: relative;
-  background: #000;
+  background: $black;
   color: $white;
-  overflow: hidden;
-}
+  padding: .8em;
 
-.header__logout {
-  float: right;
-  display: inline-block;
-  color: $white;
-  font-size: .9em;
-  text-decoration: none;
-  padding: 1em;
-  &:visited {
-    color: $white;
-  }
-}
-
-.header__functions-wrapper {
-  color: $white;
-  background: $darkbg__primary;
-  padding: 0 1.1em;
-  box-sizing: border-box;
-  display: block;
-  position: relative;
-  overflow: hidden;
-  min-height: 5em;
-  #header__server-name {
-    //margin-top: .8em;
-    font-size: 1.5em;
-    font-weight: 500;
-    color: $white;
-    padding: .9em;
-    height: 100%;
-    background: transparent;
-    max-width: 350px;
-    white-space: nowrap;
-  }
   .logo__wrapper {
-    padding-top: .5em;
-    //position: absolute;
-    //top: 50%;
-    //transform: translateY(-50%);
+    display: inline-block;
   }
 
   #header__logo {
     vertical-align: middle;
-    margin: 1em;
+    margin-right: 1em;
     float: left;
-    height: $logoHeight; //required for <SVG> logos - can remove if using img
+    height:$logoHeight; //required for <SVG> logos - can remove if using img
     max-height: $logoMaxHeight;
     max-width: $logoMaxWidth;
     width: auto;
   }
-  #header__funct-icon {
-    display: block;
-    font-size: 2.3em;
-    color: $white;
-    padding: 0;
-    &:before {
-      content: '\2261';
-      line-height: .5;
-      font-size: 2em;
-      padding: 0 .3em;
-    }
-    @include mediaQuery(medium) {
-      display: none;
-    }
-  }
 
-  .header__functions {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background: $darkbg__primary;
-    z-index: 100;
-    @include fastTransition-all;
-    span {
-      display: block;
-      color: $white;
-      font-size: 1em;
-    }
-    a, p, button {
-      display: block;
-      float: left;
-      text-decoration: none;
-      border-left: 1px solid #384456;
-      color: $lightgrey;
-      margin: 0;
-      padding: 1.250em 1.688em;
-      height: 100%;
-      font-size: 0.875em;
-      line-height: 1;
-      > span {
-        font-size: 1rem;
-        font-weight: bold;
-      }
-    }
-  }
-
-  // hide/show header functions based on screen size
-  .header__functions > #header__server-health {
-    display: none;
-    @include mediaQuery(small) {
-      display: block;
-    }
-  }
-
-  .header__functions > .header__refresh {
-    display: none;
-    @include mediaQuery(medium) {
-      display: block;
-    }
-  }
-
-  .header__functions {
-    .header__refresh {
-      color: $lightgrey;
-      line-height: 1.8;
-      margin-top: -4px;
-    }
-  }
-  .header__server-power,
-  .header__page-refresh {
-    &:hover {
-      background: rgba(60, 109, 240, .4);
-    }
-  }
-  .header__page-refresh {
-    img {
-      stroke: $white;
-      height: 22px;
-      width: 24px;
-    }
-  }
 }
 
-// end header__functions-wrapper
+.header__functions-wrapper {
+  color: $white;
+  background: green;
+  padding: 1em 1.1em;
+  box-sizing: border-box;
+  display: block;
+}
diff --git a/app/common/styles/layout/header.scss~HEAD b/app/common/styles/layout/header.scss~HEAD
new file mode 100644
index 0000000..fe06d0b
--- /dev/null
+++ b/app/common/styles/layout/header.scss~HEAD
@@ -0,0 +1,163 @@
+$logoHeight: 30px;
+$logoMaxHeight: 100px;
+$logoMaxWidth: 125px;
+
+#header__wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 300;
+}
+
+.app__version {
+  margin-left: 1em;
+  display: none;
+  @include mediaQuery(x-small) {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+header {
+  position: relative;
+  background: #000;
+  color: $white;
+  overflow: hidden;
+}
+
+.header__logout {
+  float: right;
+  display: inline-block;
+  color: $white;
+  font-size: .9em;
+  text-decoration: none;
+  padding: 1em;
+  &:visited {
+    color: $white;
+  }
+}
+
+.header__functions-wrapper {
+  color: $white;
+  background: $darkbg__primary;
+  padding: 0 1.1em;
+  box-sizing: border-box;
+  display: block;
+  position: relative;
+  overflow: hidden;
+  min-height: 5em;
+  #header__server-name {
+    //margin-top: .8em;
+    font-size: 1.5em;
+    font-weight: 500;
+    color: $white;
+    padding: .9em;
+    height: 100%;
+    background: transparent;
+    max-width: 350px;
+    white-space: nowrap;
+  }
+  .logo__wrapper {
+    padding-top: .5em;
+    //position: absolute;
+    //top: 50%;
+    //transform: translateY(-50%);
+  }
+
+  #header__logo {
+    vertical-align: middle;
+    margin: 1em;
+    float: left;
+    height: $logoHeight; //required for <SVG> logos - can remove if using img
+    max-height: $logoMaxHeight;
+    max-width: $logoMaxWidth;
+    width: auto;
+  }
+  #header__funct-icon {
+    display: block;
+    font-size: 2.3em;
+    color: $white;
+    padding: 0;
+    &:before {
+      content: '\2261';
+      line-height: .5;
+      font-size: 2em;
+      padding: 0 .3em;
+    }
+    @include mediaQuery(medium) {
+      display: none;
+    }
+  }
+
+  .header__functions {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: $darkbg__primary;
+    z-index: 100;
+    @include fastTransition-all;
+    span {
+      display: block;
+      color: $white;
+      font-size: 1em;
+    }
+    a, p, button {
+      display: block;
+      float: left;
+      text-decoration: none;
+      border-left: 1px solid #384456;
+      color: $lightgrey;
+      margin: 0;
+      padding: 1.250em 1.688em;
+      height: 100%;
+      font-size: 0.875em;
+      line-height: 1;
+      > span {
+        font-size: 1rem;
+        font-weight: bold;
+      }
+    }
+  }
+
+  // hide/show header functions based on screen size
+  .header__functions > #header__server-health {
+    display: none;
+    @include mediaQuery(small) {
+      display: block;
+    }
+  }
+
+  .header__functions > .header__refresh {
+    display: none;
+    @include mediaQuery(medium) {
+      display: block;
+    }
+  }
+
+  .header__functions {
+    .header__refresh {
+      color: $lightgrey;
+      line-height: 1.8;
+      margin-top: -4px;
+    }
+  }
+  .header__server-power,
+  .header__page-refresh {
+    &:hover {
+      background: rgba(60, 109, 240, .4);
+    }
+  }
+  .header__page-refresh {
+    img {
+      stroke: $white;
+      height: 22px;
+      width: 24px;
+    }
+  }
+}
+
+// end header__functions-wrapper
diff --git a/app/common/styles/layout/index.scss b/app/common/styles/layout/index.scss
index 4183519..1122ffe 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1,2 +1,2 @@
 @import 'header';
-@import 'content';
+@import 'navigation';
diff --git a/app/common/styles/layout/index.scss~HEAD b/app/common/styles/layout/index.scss~HEAD
new file mode 100644
index 0000000..4183519
--- /dev/null
+++ b/app/common/styles/layout/index.scss~HEAD
@@ -0,0 +1,2 @@
+@import 'header';
+@import 'content';
diff --git a/app/common/styles/layout/navigation.scss b/app/common/styles/layout/navigation.scss
new file mode 100644
index 0000000..024e869
--- /dev/null
+++ b/app/common/styles/layout/navigation.scss
@@ -0,0 +1,86 @@
+#nav__top-level {
+  background: $black;
+  height: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 99;
+  list-style-type: none;
+  margin: 0;
+  li { margin: 0; }
+  .button, button, a {
+    background: transparent;
+    height: auto;
+    border: 0;
+    color: $white;
+    fill: $white;
+    width: 100%;
+    padding: 1em;
+    display: block;
+    text-align: center;
+    margin-bottom: 0;
+    white-space: normal;
+    .nav__icon {
+      color: $white;
+      max-height: 40px;
+      stroke-width: .5;
+      margin-bottom: -.5em;
+    }
+    a {
+      margin-bottom: 5px;
+    }
+    p {
+      margin: 0;
+      font-size: .9em;
+      line-height:1.2rem;
+    }
+
+    .nav__icon-help__outer {
+      fill: transparent;
+      stroke: $white;
+      stroke-miterlimit: 10;
+      stroke-width: 1px;
+    }
+    .nav__icon-help__Inner {
+      fill: $white;
+    }
+    &:hover {
+      background: $white;
+      fill: $black;
+      color: $black;
+      padding: 1em;
+      border-radius: 0;
+      .nav__icon-help__outer {
+        stroke: $black;
+      }
+      .nav__icon-help__inner {
+        fill: $black;
+      }
+    }
+  }
+  .opened {
+    background: $white;
+    fill: $black;
+    color: $black;
+  }
+}
+
+.nav__second-level {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 97;
+  display: block;
+  background: $white;
+  padding: 10px .6em;
+  margin: 0;
+  list-style-type: none;
+  transition: all ease-out 0.5s;
+  box-shadow: 0 2px 5px 0 $black;
+  &.opened {
+    transition: all ease-out .8s;
+
+  }
+}