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 5b755e8..4591f5c 100644
--- a/app/common/styles/directives/app-navigation.scss
+++ b/app/common/styles/directives/app-navigation.scss
@@ -30,6 +30,7 @@
     margin-bottom: 0;
     white-space: normal;
     border-radius: 0;
+    text-decoration: none;
     .nav__icon {
       color: $white;
       max-height: 40px;
@@ -92,13 +93,12 @@
   padding: 0;
   margin: 0;
   list-style-type: none;
-  @include slowTransition-all;
+  @include fastTransition-all;
   &.opened {
     left: $nav__toplvlWidth;
     box-shadow: 7px 0 28px -10px $darkgrey;
-    @include slowTransition-all;
+    @include fastTransition-all;
   }
-
   a {
     padding: 1.2em 1em 1.2em 1em;
     display: block;
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 84b613c..1547e30 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -1,4 +1,6 @@
 // Content layout styles
+$nav__toplvlWidth: 120px;
+$nav__seclvlWidth: 240px;
 
 // Page header
 .page-header {
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
deleted file mode 100644
index 9b7dff5..0000000
--- a/app/common/styles/layout/header.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-$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/layout/index.scss b/app/common/styles/layout/index.scss
index f78538c..6c33f26 100644
--- a/app/common/styles/layout/index.scss
+++ b/app/common/styles/layout/index.scss
@@ -1,3 +1 @@
-@import 'header';
-@import 'navigation';
 @import 'content';
diff --git a/app/common/styles/layout/navigation.scss b/app/common/styles/layout/navigation.scss
deleted file mode 100644
index 2568637..0000000
--- a/app/common/styles/layout/navigation.scss
+++ /dev/null
@@ -1,144 +0,0 @@
-$nav__toplvlWidth: 120px;
-$nav__seclvlWidth: 240px;
-
-// Top level navigation
-#nav__top-level {
-  background: $nav__top-level-color;
-  height: 100%;
-  position: fixed;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 99;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  width: $nav__toplvlWidth;
-  display: block;
-  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;
-    border-radius: 0;
-    text-decoration: none;
-    .nav__icon {
-      color: $white;
-      max-height: 40px;
-      stroke-width: .5;
-      margin-bottom: -.5em;
-    }
-    a {
-      margin-bottom: 5px;
-    }
-    span {
-      margin: 1em 0 0 0;
-      display: block;
-      font-size: .9em;
-      font-weight: normal;
-      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: $black;
-      padding: 1em;
-      border-radius: 0;
-      .nav__icon-help__outer {
-        stroke: $black;
-      }
-      .nav__icon-help__inner {
-        fill: $lightbg__primary;
-      }
-    }
-  }
-  .opened {
-    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;
-  width: $nav__seclvlWidth;
-  z-index: 0;
-  padding: 0;
-  margin: 0;
-  display: none;
-  list-style-type: none;
-  @include fastTransition-all;
-  @include mediaQuery(medium) {
-    left: 0;
-    &.btn-overview {
-      display: none;
-    }
-  }
-  &.opened {
-    left: $nav__toplvlWidth;
-    z-index: 100;
-    display: block;
-    @include fastTransition-all;
-  }
-
-  a {
-    padding: 1.2em 1em 1.2em 1em;
-    display: block;
-    color: $black;
-    text-decoration: none;
-    position: relative;
-    font-weight: 400;
-  }
-  li {
-    a:after{
-      content: '\203A';
-      position: absolute;
-      font-size: 2em;
-      font-weight: 700;
-      top: 50%;
-      right: .6em;
-      transform: translateY(-59%);
-      color: #4b5d78;
-      opacity: 0;
-    }
-    &.active {background: $white;}
-    &.active,
-    &:focus,
-    &:hover {
-      a {color: #4b5d78;}
-      a:after {
-        opacity: 1;
-        right: .3em;
-        @include fastTransition-all;
-      }
-    }
-  }
-}