diff --git a/app/common/styles/directives/app-header.scss b/app/common/styles/directives/app-header.scss
index e69de29..9b7dff5 100644
--- a/app/common/styles/directives/app-header.scss
+++ b/app/common/styles/directives/app-header.scss
@@ -0,0 +1,163 @@
+$logoHeight: 30px;
+$logoMaxHeight: 100px;
+$logoMaxWidth: 125px;
+
+#header__wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+
+.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/directives/app-navigation.scss b/app/common/styles/directives/app-navigation.scss
index 2d818a9..8e69b7f 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 $nav__toplvlWidth: 125px;
 $nav__seclvlWidth: 240px;
 
@@ -13,6 +14,16 @@
   background: $nav__top-level-color;
   //height: 100%;
   position: absolute;
+=======
+$nav__toplvlWidth: 120px;
+$nav__seclvlWidth: 240px;
+
+// Top level navigation
+#nav__top-level {
+  background: $nav__top-level-color;
+  height: 100%;
+  position: fixed;
+>>>>>>> 4c1a3dd... Major update to code structure
   left: 0;
   top: 0;
   bottom: 0;
@@ -21,6 +32,7 @@
   margin: 0;
   padding: 0;
   width: $nav__toplvlWidth;
+<<<<<<< HEAD
   overflow-y: auto;
   li {
     margin: 0;
@@ -29,6 +41,11 @@
   .nav-icon {
     @include navIcons;
   }
+=======
+  li {
+    margin: 0;
+  }
+>>>>>>> 4c1a3dd... Major update to code structure
   .button, button, a {
     background: transparent;
     height: auto;
@@ -42,9 +59,18 @@
     margin-bottom: 0;
     white-space: normal;
     border-radius: 0;
+<<<<<<< HEAD
     text-decoration: none;
     border-top: 1px solid transparent;
     border-bottom: 1px solid transparent;
+=======
+    .nav__icon {
+      color: $white;
+      max-height: 40px;
+      stroke-width: .5;
+      margin-bottom: -.5em;
+    }
+>>>>>>> 4c1a3dd... Major update to code structure
     a {
       margin-bottom: 5px;
     }
@@ -52,7 +78,11 @@
       margin: 1em 0 0 0;
       display: block;
       font-size: .9em;
+<<<<<<< HEAD
       font-weight: 700;
+=======
+      font-weight: normal;
+>>>>>>> 4c1a3dd... Major update to code structure
       line-height: 1rem;
     }
 
@@ -68,17 +98,24 @@
     &:hover {
       background: $nav__second-level-color;
       fill: $black;
+<<<<<<< HEAD
       color: $medblue;
       padding: 1em;
       border-radius: 0;
       border-top: 1px solid $medgrey;
       border-bottom: 1px solid $medgrey;
+=======
+      color: $black;
+      padding: 1em;
+      border-radius: 0;
+>>>>>>> 4c1a3dd... Major update to code structure
       .nav__icon-help__outer {
         stroke: $black;
       }
       .nav__icon-help__inner {
         fill: $lightbg__primary;
       }
+<<<<<<< HEAD
       .nav-icon {
         fill: $medblue;
         color: $medblue;
@@ -91,11 +128,14 @@
           stroke: $medblue;
         }
       }
+=======
+>>>>>>> 4c1a3dd... Major update to code structure
     }
   }
   .opened {
     background: $nav__second-level-color;
     fill: $black;
+<<<<<<< HEAD
     color: $medblue;
     .nav__icon-help__outer {
       stroke: $lightbg__primary;
@@ -112,6 +152,12 @@
         stroke: $medblue;
       }
     }
+=======
+    color: $black;
+    .nav__icon-help__outer {
+      stroke: $lightbg__primary;
+    }
+>>>>>>> 4c1a3dd... Major update to code structure
   }
 }
 
@@ -121,11 +167,16 @@
   background: $nav__second-level-color;
   top: 0;
   bottom: 0;
+<<<<<<< HEAD
   left: -245px;
+=======
+  left: -$nav__toplvlWidth;
+>>>>>>> 4c1a3dd... Major update to code structure
   width: $nav__seclvlWidth;
   z-index: 97;
   padding: 0;
   margin: 0;
+<<<<<<< HEAD
   list-style-type: none;
   @include fastTransition-all;
   &.opened {
@@ -133,6 +184,23 @@
     box-shadow: 7px 0 28px -10px $darkgrey;
     @include fastTransition-all;
   }
+=======
+  display: none;
+  list-style-type: none;
+  @include fastTransition-all;
+  @include mediaQuery(medium) {
+    left: $nav__toplvlWidth;
+    &.btn-overview {
+      display: block;
+    }
+  }
+  &.opened {
+    left: $nav__toplvlWidth;
+    display: block;
+    @include fastTransition-all;
+  }
+
+>>>>>>> 4c1a3dd... Major update to code structure
   a {
     padding: 1.2em 1em 1.2em 1em;
     display: block;