diff --git a/src/scss/base/_all.scss b/src/scss/base/_all.scss
index bc61b44..5e10e93 100644
--- a/src/scss/base/_all.scss
+++ b/src/scss/base/_all.scss
@@ -5,4 +5,5 @@
 @import 'core';
 @import 'typography';
 @import 'utility';
+@import 'buttons';
 @import 'forms';
diff --git a/src/scss/base/_buttons.scss b/src/scss/base/_buttons.scss
new file mode 100644
index 0000000..3703722
--- /dev/null
+++ b/src/scss/base/_buttons.scss
@@ -0,0 +1,40 @@
+button, .button, input[type="submit"] {
+  font-weight: bold;
+  font-size: 1em;
+  text-transform: none;
+  border-radius: 3px;
+  padding: .8rem 3.5rem;
+  height: auto;
+  &:hover {
+    cursor: pointer;
+  }
+  &.disabled {
+    border: 2px solid $lightgrey;
+    color: $lightgrey;
+  }
+}
+
+.disabled {
+  button, .button, input[type="submit"] {
+    opacity: 0.2;
+    &:hover {
+      cursor: default;
+      background: transparent;
+    }
+  }
+}
+
+.btn-primary {
+  color: $primebtn__text;
+  background: $primebtn__bg;
+}
+.btn-secondary {
+  color: $secbtn__text;
+  background: transparent;
+  border: 2px solid $secbtn__border;
+  &:hover {
+    background: $lightbg__accent;
+    cursor: pointer;
+    background: $secbtn__bg;
+  }
+}
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index fe9f2dc..c013e08 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -1,20 +1,30 @@
 // Global
 $white: #fff;
 $black: #333;
+$darkgrey: #666;
+$lightgrey: #ccc;
 $field__disabled: #F4F8F8;
-$error: #FF5C49;
-$status-ok: #098145;
+
 
 // Dark background
 $darkbg__grey: #E3ECEC;
 $darkbg__accent: #79a6f6;
-$darkbg__primary: #1d3458;
+$darkbg__primary: #19273c;
 $active: #648FFF;
 
-// White Background
+// Light Background
 $lightbg__grey: #b8c1c1;
-$lightbg__accent: #3c6df0;
-$lightbg__primary: #19273c;
+$lightbg__accent: #ebf0fc;
+$lightbg__primary: #1a273b;
+
+// Primary Button colors
+$primebtn__bg: #3c6df0;
+$primebtn__text: $white;
+
+// Secondary Button colors
+$secbtn__bg: #ebf0fc;
+$secbtn__border: #3f71ec;
+$secbtn__text: #3f71ec;
 
 // Alerts
 $alert__error: rgba(230, 35, 37, 0.3);
@@ -25,4 +35,13 @@
 $links: #648FFF;
 $links__hover: $lightbg__accent;
 $links__visited: #5A3EC8;
-$links__disabled: rgba(27, 40, 52, 0.70);
\ No newline at end of file
+$links__disabled: rgba(27, 40, 52, 0.70);
+
+// Navigation
+$nav__top-level-color: #1a273b;
+$nav__second-level-color: #e6e9ed;
+
+// Status colors
+$error-color: #FF5C49;
+$status-ok: #34bc6e;
+$status-ok-light: #bcefce;
\ No newline at end of file
diff --git a/src/scss/base/_core.scss b/src/scss/base/_core.scss
index 37aaf46..13ba9e6 100644
--- a/src/scss/base/_core.scss
+++ b/src/scss/base/_core.scss
@@ -5,32 +5,9 @@
   color: $black;
 }
 
-.container {
-  max-width: 1440px;
-}
-
 p {
   margin-bottom: .8em;
-  @include fastTransition-all;
-}
-
-button, .button, input[type="submit"] {
-  color: $white;
-  background: $lightbg__primary;
-  border: 1px solid $lightbg__primary;
-  font-weight: normal;
-  font-size: 1em;
-  text-transform: none;
-  border-radius: 0;
-  padding: .5rem 2rem;
-  height: auto;
-  line-height: 2.5em;
-  &:hover {
-    background: $lightbg__accent;
-    //box-shadow: inset 0 0 0 2px $lightbg__primary;
-    cursor: pointer;
-    @include fastTransition-all;
-  }
+  transition: margin .05s;
 }
 
 a {
@@ -41,7 +18,7 @@
   &:hover {
     color: $links__hover;
   }
-  focus {
+  :focus {
     color: $links;
   }
 }
\ No newline at end of file
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index c4f7eed..97c24eb 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -34,7 +34,7 @@
     border: 1px solid $lightbg__grey;
   }
   &.input__error {
-    border-color: $error;
+    border-color: $error-color;
     background: rgba(230, 35, 37, 0.1);
   }
 }
diff --git a/src/scss/base/_mixins.scss b/src/scss/base/_mixins.scss
index 4b7a1eb..e26c10d 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -1,8 +1,3 @@
-
-$lightbg__grey: #b8c1c1;
-$lightbg__accent: #3c6df0;
-$lightbg__primary: #19273c;
-
 //Breakpoints mixin
 @mixin mediaQuery($breakpoint) {
   @if $breakpoint == "x-small" {
diff --git a/src/scss/base/_typography.scss b/src/scss/base/_typography.scss
index b20397f..8c70067 100644
--- a/src/scss/base/_typography.scss
+++ b/src/scss/base/_typography.scss
@@ -19,26 +19,28 @@
   font-weight: 300;
   margin: 0 0 .8rem;
   line-height: 1;
+  color: #333;
 }
 
-h1 {
+h1, .h1 {
   font-size: 2.3rem;
 }
 
-h2 {
+h2, .h2 {
   font-size: 1.8rem;
 }
 
-h3 {
+h3, .h3 {
   font-size: 1.3rem;
-}
-
-h4 {
-  font-size: 1.125rem;
   letter-spacing: -.08rem;
 }
 
-h5 {
+h4, .h4 {
+  font-size: 1.125rem;
+  letter-spacing: -.04rem;
+}
+
+h5, .h5 {
   font-size: 1rem;
   letter-spacing: -.05rem;
 }
diff --git a/src/scss/base/_utility.scss b/src/scss/base/_utility.scss
index 2886bf1..3d5a8ce 100644
--- a/src/scss/base/_utility.scss
+++ b/src/scss/base/_utility.scss
@@ -1,6 +1,5 @@
 .inline {
   display: inline-block;
-  line-height: 2;
 }
 
 .disabled {
@@ -14,7 +13,7 @@
   clear: both;
 }
 .error {
-  color: $error;
+  color: $error-color;
 }
 
 .hide {
@@ -47,10 +46,18 @@
   margin: 0px !important;
 }
 
+.no-padding {
+  padding:0px !important;
+}
+
 .no-bottom-margin {
   margin-bottom: 0px !important;
 }
 
 .no-top-margin {
   margin-top: 0px !important;
+}
+
+.transitionAll {
+  transition: all .5s ease;
 }
\ No newline at end of file
diff --git a/src/scss/components/_all.scss b/src/scss/components/_all.scss
index 98ede4a..81974ba 100644
--- a/src/scss/components/_all.scss
+++ b/src/scss/components/_all.scss
@@ -1,3 +1,4 @@
 @import "systemUser";
 @import "login";
-@import "alerts";
\ No newline at end of file
+@import "alerts";
+@import "power-ops";
\ No newline at end of file
diff --git a/src/scss/components/_login.scss b/src/scss/components/_login.scss
index ed2626c..f5d73d8 100644
--- a/src/scss/components/_login.scss
+++ b/src/scss/components/_login.scss
@@ -59,7 +59,7 @@
 
 .login__status {
   color: $status-ok;
-  &.error {color: $error;}
+  &.error {color: $error-color;}
 }
 
 .login__error-msg {
@@ -67,7 +67,7 @@
   padding: 1em;
   text-align: center;
   font-size: .95em;
-  border: 1px solid $error;
+  border: 1px solid $error-color;
 
 
   @include mediaQuery(medium){
diff --git a/src/scss/components/_power-ops.scss b/src/scss/components/_power-ops.scss
new file mode 100644
index 0000000..1d4d2d8
--- /dev/null
+++ b/src/scss/components/_power-ops.scss
@@ -0,0 +1,133 @@
+// Power Operations SCSS
+
+#power-operations {
+
+  .h4 {
+    font-weight: bold;
+  }
+
+  // Power op time stamp
+  .power__status-log {
+    color: $darkgrey;
+  }
+
+  // Power Curernt status wrapper
+  .power__current-status {
+    border-bottom: 1px solid $lightbg__grey;
+    margin: 3.625em 0 1.2em 0;
+    .h4 {
+      padding: 0;
+      margin: 0 0 .5em 0;
+    }
+  }
+
+  // Power state indicator on/off
+  .power__state {
+    span:before {
+      content: '\25CF';
+      display: inline-block;
+      font-size: 1.2em;
+      color: $darkgrey;
+      margin-right: .3em;
+      @include slowTransition-all;
+    }
+  }
+
+  // Power bar indicator
+  .power__indicator-bar {
+    font-weight: bold;
+    padding: 1.4em 3em;
+    margin-bottom: 3.750em;
+    background-size: 200% 100%;
+    background-image: linear-gradient(to right, $status-ok-light 50%, $lightgrey 50%);
+    background-position: 100%;
+    transition: background-position 2s ease;
+    p {
+      padding: 0;
+      margin: 0;
+    }
+    &.power__state-on {
+      background-position: -200%;
+      .power__state {
+        span:before {
+          color: $status-ok;
+        }
+      }
+    }
+    &.power__state-off {
+      background-position: -100%;
+      color: $darkgrey;
+      .power__state {
+        span:before {
+          color: $darkgrey;
+        }
+      }
+    }
+  }
+
+  // Power button options
+  .power-option {
+    border-top: 1px solid $lightgrey;
+    padding: 1.8em 0 1em 1.8em;
+    position: relative;
+    overflow: hidden;
+    min-height: 1px;
+    .btn-secondary {
+      margin-bottom: .5em;
+    }
+    // Confirmation message for power option
+    .power__confirm {
+      position: absolute;
+      top: 0;
+      transform: translateY(-100%);
+      width: 100%;
+      margin-left: -1.8em;
+      z-index: 5;
+      background: $darkbg__primary;
+      color: $white;
+      padding: 2em 2em 1.55em 2em;
+      &.active {
+        transform: translateY(0);
+        @include fastTransition-all;
+      }
+    }
+    &.disabled {
+      @include fastTransition-all;
+    }
+  }
+}
+
+// Power confirmation buttons
+.power__confirm-buttons {
+  .btn-primary {
+    background: transparent;
+    border: 2px solid $white;
+    padding: 1em 2.2em;
+    margin: 0 10px;
+    border-radius: 4px;
+    &:focus,
+    &:hover {
+      background: $primebtn__bg;
+      border: 2px solid $primebtn__bg;
+    }
+  }
+  @include mediaQuery(large) {
+    float: right;
+  }
+}
+
+// Power confirmation message
+.power__confirm-message {
+  display: inline-block;
+}
+
+// Power confirmation message icon
+.power__confirm-message i::before {
+  content: '\26A0';
+  color: $white;
+  display: inline-block;
+  font-size: 2em;
+  vertical-align: middle;
+  font-style: normal;
+  margin-right: 15px;
+}
diff --git a/src/scss/components/_systemUser.scss b/src/scss/components/_systemUser.scss
index 8ab1535..beb96f0 100644
--- a/src/scss/components/_systemUser.scss
+++ b/src/scss/components/_systemUser.scss
@@ -16,8 +16,5 @@
       width: 20px;
       border-radius: 10px;
       vertical-align: middle;
-      //position: relative;
-      //top: 50%;
-      //transform: translateY(-50%);
     }
 }
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;
+      }
+    }
   }
 }