diff --git a/src/header.html b/src/header.html
index 13584cf..73cb837 100644
--- a/src/header.html
+++ b/src/header.html
@@ -8,8 +8,9 @@
 </header>
 <div class="header__functions-wrapper">
     <div class="logo__wrapper"></div>
+    <button id="header__server-name">Server BLZ_109284.209.01</button>
     <div class="header__functions">
-        <a href="">Server health<span class="status-light__error">Error</span></a>
+        <a href="" id="header__server-health">Server health<span class="status-light__error">Error</span></a>
         <a href="power-operations.html" class="header__server-power" role="button">Server power<span class="status-light__good">On</span></a>
         <p class="header__refresh">Page last refreshed <span>3:20:12 Feb 12 2017</span></p>
         <button class="header__page-refresh"><img src="img/icon-refresh-white.svg" alt="refresh page" role="button"/></button>
diff --git a/src/index.html b/src/index.html
index f0c4d67..ae797bf 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,8 +7,7 @@
     <link rel="stylesheet" href="css/main.css">
     <script src="js/vendor/vendor.min.js"></script>
 </head>
-<body>
-
+<body id="login">
 <div class="login__wrapper">
     <div class="row">
         <div class="columns large-6">
@@ -19,14 +18,15 @@
     </div>
     <div class="row">
         <div class="columns large-6 login__desc">
-            <h1>BMC Advanced System Management</h1>
-            <p>Build Version: 1.00.102</p>
-            <div class="login__server-info">
-                <h3>Server ID: 29000000166668</h3>
-                <p>Power SL-22LC</p>
-                <p>Server status: <span class="login__status">Operational</span></p>
-                <!-- if status is not operational add "error" class and change text -->
-            </div>
+            <h1>OpenBMC Advanced System Management</h1>
+            <ul class="login__server-info">
+                <li><p class="login__info-label">Build version</p><p>1.00.102</p></li>
+                <li><p class="login__info-label">Server ID</p><p>29000000166668</p></li>
+                <li><p class="login__info-label">Server model</p><p>Power SL-22LC</p></li>
+                <!-- ping server to see if powered on. Change status-light and txt accordingly. Status message is planned to be hardcoded message were display via local JS.  -->
+                <li><p class="login__info-label">Server power</p><p class="status-light__disabled">Off</p></li>
+                <li><p class="login__info-label">Status message</p><p>BMC was reset by user</p></li>
+            </ul>
         </div>
         <div class="columns large-6">
             <form id="login__form" role="form">
@@ -34,12 +34,11 @@
                 <input type="text" id="username" name="username" required>
 
                 <label for="password">Password</label>
-                <input type="password" id="password" name="password" required>
+                <input type="password" id="password" name="password" class="input__error" required>
 
                 <input id="login__submit" class="btn-primary" type="submit" value="Log in" role="button">
 
-                <p class="login__error-msg hide" role="alert">Invalid login attempt</p>
-                <!-- if login is invalid remove "hide" class to pop error -->
+                <p class="login__error-msg" role="alert">Incorrect username or password</p>
             </form>
         </div>
     </div>
diff --git a/src/js/main.js b/src/js/main.js
index 9c1437c..b321e0d 100755
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -4,6 +4,7 @@
     header();
     nav();
 
+
     // Load logo
     function loadLogo() {
         $('.logo__wrapper').load('logo.html', function () {
@@ -47,7 +48,7 @@
 
             // include logo into header
             loadLogo();
-        })
+        });
     }
 
     // load navigation - pass in header height
@@ -89,7 +90,6 @@
                     parent.find(subnavClass).css("display", "block").addClass('opened');
 
                 });
-
             }
         });
     }
diff --git a/src/navigation.html b/src/navigation.html
index ddfa648..88b6169 100644
--- a/src/navigation.html
+++ b/src/navigation.html
@@ -45,7 +45,7 @@
     </ul>
     <ul class="nav__second-level btn-overview">
         <li tabindex="2"><a href="">System Overview</a></li>
-        <li tabindex="3"class="active"><a href="power-operations.html">Server power operations</a></li>
+        <li tabindex="3"class="active"><a href="power-operations.html">Server power operations </a></li>
         <li tabindex="4"><a href="">Power consumption</a></li>
         <li tabindex="5"><a href="">Remote console</a></li>
     </ul>
diff --git a/src/scss/base/_colors.scss b/src/scss/base/_colors.scss
index 449bfb1..2fa98e8 100644
--- a/src/scss/base/_colors.scss
+++ b/src/scss/base/_colors.scss
@@ -3,7 +3,7 @@
 $black: #333;
 $darkgrey: #666;
 $lightgrey: #ccc;
-$field__disabled: #F4F8F8;
+$field__disabled: #d8d8d8;
 $btn__disabled-txt: #a6a5a6;
 $btn__disabled-bg: #d8d8d8;
 
@@ -16,7 +16,7 @@
 // Light Background
 $lightbg__grey: #b8c1c1;
 $lightbg__accent: #ebf0fc;
-$lightbg__primary: #1a273b;
+$lightbg__primary: #3c6df0;
 
 // Primary Button colors
 $primebtn__bg: #3c6df0;
diff --git a/src/scss/base/_forms.scss b/src/scss/base/_forms.scss
index 97c24eb..074ba14 100644
--- a/src/scss/base/_forms.scss
+++ b/src/scss/base/_forms.scss
@@ -19,15 +19,15 @@
 input[type='text'],
 textarea {
   border-radius: 0px;
-  border: 1px solid $lightbg__grey;
+  border: 1px solid $lightgrey;
   height: 3.1em;
-  transition: all 1s ease;
   margin: 0 0 1em 0;
-  background: $lightbg__grey;
-  box-shadow: 0px 0px 0px;
+  background: $white;
+  box-shadow: 0 0 0;
+  transition: none !important;
   &:focus {
     border-color: $lightbg__accent;
-    box-shadow: 0px 0px 0px;
+    border-bottom: 5px solid $lightbg__primary;
   }
   &:disabled, .disabled {
     background: $field__disabled;
@@ -35,7 +35,6 @@
   }
   &.input__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 a259c6b..578a866 100644
--- a/src/scss/base/_mixins.scss
+++ b/src/scss/base/_mixins.scss
@@ -51,29 +51,3 @@
 @mixin bgImage__arrowDown-grey {
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: #b8c1c1'></polygon></svg>");
 }
-
-@mixin status-light {
-  content: '\25CF';
-  display: inline-block;
-  font-size: 1.4em;
-  color: $status-ok;
-  margin-right: .3em;
-}
-
-@mixin status-light__good {
-  @include status-light;
-  color: $status-ok;
-
-}
-
-@mixin status-light__error {
-  @include status-light;
-  color: $error-color;
-
-}
-
-@mixin status-light__disabled {
-  @include status-light;
-  color: $darkgrey;
-
-}
diff --git a/src/scss/components/_all.scss b/src/scss/components/_all.scss
index 81974ba..7fad716 100644
--- a/src/scss/components/_all.scss
+++ b/src/scss/components/_all.scss
@@ -1,3 +1,4 @@
+@import "status";
 @import "systemUser";
 @import "login";
 @import "alerts";
diff --git a/src/scss/components/_login.scss b/src/scss/components/_login.scss
index 0485dbd..088f42a 100644
--- a/src/scss/components/_login.scss
+++ b/src/scss/components/_login.scss
@@ -1,15 +1,24 @@
+#login {
+  @include mediaQuery(medium) {
+    background: linear-gradient(to right, #FFFFFF 49.999%, #e6e9ed 50%);
+    @include fastTransition-all;
+  }
+}
+
 .login__wrapper {
   position: relative;
   padding-top: 1em;
   color: $black;
-  .row {max-width: 1040px;}
-  @include mediaQuery(small){
+  .row {
+    max-width: 1040px;
+  }
+  @include mediaQuery(small) {
     left: 50%;
     top: 50%;
     transform: translateY(-50%);
     margin-left: -50%;
   }
-  @include mediaQuery(medium){
+  @include mediaQuery(medium) {
     left: 0;
     margin-left: 0;
   }
@@ -30,47 +39,77 @@
   padding: 1em 0;
   display: block;
   overflow: hidden;
-  @include mediaQuery(small){
+  @include mediaQuery(small) {
     max-width: 50%;
   }
-  @include mediaQuery(medium){
+  @include mediaQuery(medium) {
     padding: 0 0 0 5em;
-    border-left: 1px solid $lightbg__grey;
-    max-width:100%;
+    max-width: 100%;
   }
   @include fastTransition-all;
 }
 
-
-
 .login__desc {
   text-align: left;
   h1 {
     font-size: 2em;
-    margin-bottom: 0em;
+    margin-bottom: 0;
+    font-weight: bold;
+    @include mediaQuery(small) {
+      max-width: 50%;
+    }
+    @include mediaQuery(medium) {
+      max-width: 100%;
+    }
   }
 }
 
 .login__server-info {
   margin-top: 2em;
-  p {margin-bottom: 0;}
-  h3 {margin-bottom: .3rem;}
+  margin-left: 0;
+  padding-left: 0;
+  list-style-type: none;
+  @include mediaQuery(small) {
+    max-width: 50%;
+  }
+  @include mediaQuery(medium) {
+    max-width: 90%;
+  }
+  li {
+    padding: 1em 0;
+    border-top: 1px solid $lightgrey;
+  }
+  p {
+    margin-bottom: 0;
+    display: inline-block;
+    font-family: courier, helvetica, arial, sans-serif;
+    font-weight: 700;
+  }
+  .login__info-label {
+    display: inline-block;
+    min-width: 200px;
+    @include fontFamily;
+  }
 }
 
 .login__status {
   color: $status-ok;
-  &.error {color: $error-color;}
+  &.error {
+    color: $error-color;
+  }
 }
 
 .login__error-msg {
-  background: $alert__error;
+  background: lighten($error-color, 20%);
   padding: 1em;
   text-align: center;
-  font-size: .95em;
+  font-size: 1em;
   border: 1px solid $error-color;
+  color: $black;
+  font-family: Courier, Helvetica, Arial, sans-serif;
+  font-weight: 700;
 
-
-  @include mediaQuery(medium){
-    max-width:100%;
+  @include mediaQuery(medium) {
+    max-width: 100%;
   }
 }
\ No newline at end of file
diff --git a/src/scss/components/_status.scss b/src/scss/components/_status.scss
new file mode 100644
index 0000000..30cb2db
--- /dev/null
+++ b/src/scss/components/_status.scss
@@ -0,0 +1,60 @@
+//status light states
+@mixin status-light {
+  content: '\25CF';
+  display: inline-block;
+  font-size: 2em;
+  color: $status-ok;
+  margin-right: .1em;
+  transform: translateY(2px);
+}
+
+@mixin status-light__good {
+  @include status-light;
+  color: $status-ok;
+
+}
+
+@mixin status-light__error {
+  @include status-light;
+  color: $error-color;
+
+}
+
+@mixin status-light__disabled {
+  @include status-light;
+  color: $darkgrey;
+
+}
+
+@mixin status-light__warn {
+  @include status-light;
+  color: $darkgrey;
+
+}
+
+.status-light__disabled {
+  color: $darkgrey;
+  &::before {
+    @include status-light__disabled;
+  }
+}
+
+.status-light__good {
+  &::before {
+    @include status-light__good;
+  }
+}
+
+.status-light__error {
+  color: $error-color;
+  &::before {
+    @include status-light__error;
+  }
+}
+
+.status-light__warn {
+  color: $status-warn;
+  &::before {
+    @include status-light__error;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
index f0431ca..9b7dff5 100644
--- a/src/scss/layout/_header.scss
+++ b/src/scss/layout/_header.scss
@@ -42,17 +42,29 @@
 
 .header__functions-wrapper {
   color: $white;
-  background: $lightbg__primary;
+  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 {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
+    padding-top: .5em;
+    //position: absolute;
+    //top: 50%;
+    //transform: translateY(-50%);
   }
 
   #header__logo {
@@ -64,6 +76,21 @@
     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;
@@ -71,29 +98,14 @@
     right: 0;
     bottom: 0;
     background: $darkbg__primary;
+    z-index: 100;
+    @include fastTransition-all;
     span {
       display: block;
       color: $white;
       font-size: 1em;
-      &.status-light__disabled {
-        color: $darkgrey;
-        &::before {
-          @include status-light__disabled;
-        }
-      }
-      &.status-light__good{
-        &::before {
-          @include status-light__good;
-        }
-      }
-      &.status-light__error{
-        color: $error-color;
-        &::before {
-          @include status-light__error;
-        }
-      }
     }
-    a,  p, button {
+    a, p, button {
       display: block;
       float: left;
       text-decoration: none;
@@ -103,21 +115,40 @@
       padding: 1.250em 1.688em;
       height: 100%;
       font-size: 0.875em;
-      line-height: 1.3;
-      > span {font-size: 1rem;
-        font-weight: bold;}
+      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.6;
+      line-height: 1.8;
+      margin-top: -4px;
     }
   }
   .header__server-power,
-  .header__page-refresh{
+  .header__page-refresh {
     &:hover {
-      background: rgba(60,109,240,.4);
+      background: rgba(60, 109, 240, .4);
     }
   }
   .header__page-refresh {
@@ -127,4 +158,6 @@
       width: 24px;
     }
   }
-}// end header__functions-wrapper
+}
+
+// end header__functions-wrapper
diff --git a/src/scss/layout/_navigation.scss b/src/scss/layout/_navigation.scss
index 7a2d33c..bb08579 100644
--- a/src/scss/layout/_navigation.scss
+++ b/src/scss/layout/_navigation.scss
@@ -106,7 +106,7 @@
     @include fastTransition-all;
   }
   a {
-    padding: 1.2em .6em 1.2em 1em;
+    padding: 1.2em 1em 1.2em 1em;
     display: block;
     color: $black;
     text-decoration: none;