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;