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