diff --git a/lms/static/js/toggle_login_modal.js b/lms/static/js/toggle_login_modal.js
index f1e53ea14f..1ff06fa76c 100644
--- a/lms/static/js/toggle_login_modal.js
+++ b/lms/static/js/toggle_login_modal.js
@@ -1,8 +1,20 @@
 $(document).ready(function () {
-  $('a.login').click(function() {
-    $('.modal-wrapper').addClass("visible");
+  $('a#login').click(function() {
+    $('.modal.login-modal').addClass("visible");
+    $('.modal-overlay').addClass("visible");
   });
   $('div.close-modal').click(function() {
-    $('.modal-wrapper').removeClass("visible");
+    $('.modal.login-modal').removeClass("visible");
+    $('.modal-overlay').removeClass("visible");
+  });
+
+  $('a#signup').click(function() {
+    $('.modal.signup-modal').addClass("visible");
+    $('.modal-overlay').addClass("visible");
+  });
+  $('div.close-modal').click(function() {
+    $('.modal.signup-modal').removeClass("visible");
+    $('.modal-overlay').removeClass("visible");
   });
 });
+
diff --git a/lms/static/sass/_base_extends.scss b/lms/static/sass/_base_extends.scss
index 193f649d42..6049170ea3 100644
--- a/lms/static/sass/_base_extends.scss
+++ b/lms/static/sass/_base_extends.scss
@@ -1,11 +1,57 @@
 .faded-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.8) 15%, rgb(200,200,200) 50%, rgba(200,200,200, 0.8) 85%, rgba(255,255,255, 0)));
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-hr-divider-light {
+  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.8) 50%,
+                                                    rgba(255,255,255, 0)));
   height: 1px;
   width: 100%;
 }
 
 .faded-vertical-divider {
-  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(200,200,200, 0.6) 25%, rgb(200,200,200) 50%, rgba(200,200,200, 0.6) 75%, rgba(255,255,255, 0)));
+  @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
   height: 100%;
   width: 1px;
 }
+
+.faded-vertical-divider-light {
+  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.6) 50%,
+                                                    rgba(255,255,255, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+.vertical-divider {
+  @extend .faded-vertical-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-vertical-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    left: 1px;
+  }
+}
+
+.horizontal-divider {
+  @extend .faded-hr-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-hr-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 1px;
+  }
+}
diff --git a/lms/static/sass/_base_mixins.scss b/lms/static/sass/_base_mixins.scss
index 7fd69b62be..bcff3e0d67 100644
--- a/lms/static/sass/_base_mixins.scss
+++ b/lms/static/sass/_base_mixins.scss
@@ -1,9 +1,9 @@
 @mixin vertically-and-horizontally-centered ( $height, $width ) {
   left: 50%;
   margin-left: -$width / 2;
-  margin-top: -$height / 2;
+  //margin-top: -$height / 2;
   min-height: $height;
   min-width: $width;
-  position: fixed;
-  top: 35%;
+  position: absolute;
+  top: 150px;
 }
diff --git a/lms/static/sass/_index.scss b/lms/static/sass/_index.scss
index 9c480a3a1f..3429ec80fc 100644
--- a/lms/static/sass/_index.scss
+++ b/lms/static/sass/_index.scss
@@ -87,7 +87,7 @@
           }
 
           a {
-            @include button(shiny, $pink);
+            @include button(shiny, $blue);
             @include box-sizing(border-box);
             @include border-radius(3px);
             @include inline-block;
@@ -95,20 +95,7 @@
             padding: 15px 0px;
             text-transform: uppercase;
             text-align: center;
-            width: flex-grid(6);
-
-            &:first-child {
-              margin-right: flex-gutter();
-            }
-
-            &.find-courses {
-              @include button(shiny, $blue);
-              @include box-sizing(border-box);
-              @include border-radius(3px);
-              @include inline-block;
-              font: normal italic 1.2rem/1.6rem $serif;
-              padding: 15px 0px;
-            }
+            width: flex-grid(12);
           }
 
           form {
diff --git a/lms/static/sass/_shared_forms.scss b/lms/static/sass/_shared_forms.scss
index 2e2c68e7c6..4967970170 100644
--- a/lms/static/sass/_shared_forms.scss
+++ b/lms/static/sass/_shared_forms.scss
@@ -34,7 +34,7 @@ form {
   }
 
   input[type="submit"] {
-    @include button(shiny, $pink);
+    @include button(shiny, $blue);
     @include border-radius(3px);
     font: normal italic 1.2rem/1.6rem $serif;
     height: 35px;
diff --git a/lms/static/sass/_shared_header.scss b/lms/static/sass/_shared_header.scss
index 879f734993..1d1dde37d5 100644
--- a/lms/static/sass/_shared_header.scss
+++ b/lms/static/sass/_shared_header.scss
@@ -18,236 +18,233 @@ header.app {
     display: block;
     float: left;
     height: 100%;
-    margin: 16px 30px 0px 0px;
+    margin: 16px 15px 0px 0px;
     position: relative;
 
-    &::after {
-      @extend .faded-vertical-divider;
-      content: "";
-      display: block;
-      height: 50px;
-      position: absolute;
-      right: -15px;
-      top: -12px;
+    img {
+      position: relative;
+      z-index: 2;
     }
-  }
-
-  a.discover-courses {
-    @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
-    border: 1px solid rgb(200,200,200);
-    @include border-radius(3px);
-    @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
-    color: $base-font-color;
-    display: block;
-    float: left;
-    font: normal 1rem/1.2rem $sans-serif;
-    height: 15px;
-    margin-top: 12px;
-    padding: 8px 10px;
-    text-decoration: none;
-    text-transform: uppercase;
-    text-shadow: 0 1px rgba(255,255,255, 0.6);
 
     &:hover {
-    }
-  }
-
-  nav.guest {
-    float: right;
-
-    ol {
-      font-size: 0em;
-
-      li {
-        @include inline-block;
-        margin-top: 12px;
-        padding: 0px 5px;
-        position: relative;
-        vertical-align: bottom;
-
-        &:last-child {
-          padding-right: 0px;
-        }
-
-        a {
-          @include border-radius(3px);
-          border: 1px solid transparent;
-          color: $base-font-color;
-          display: block;
-          font: normal italic 1.2rem/1.2rem $serif;
-          height: 15px;
-          padding: 8px;
-          text-decoration: none;
-          text-transform: lowercase;
-          text-shadow: 0 1px rgba(255,255,255, 0.6);
-
-          &:hover {
-            background: rgb(220,220,220);
-            @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
-            border-color: rgb(200,200,200);
-            @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
-            color: $base-font-color;
-          }
-        }
+      &::before {
+        @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
+        content: "";
+        display: block;
+        height: 90px;
+        left: -20px;
+        position: absolute;
+        top: -32px;
+        width: 90px;
+        z-index: 1;
       }
     }
   }
 
-  nav.user {
-    float: right;
+  .divider {
+    @extend .vertical-divider;
+    @include inline-block;
+    height: 40px;
+    vertical-align: middle;
+  }
+
+
+  nav {
+    height: 40px;
+    margin-top: 8px;
+
+    &.find-courses {
+      float: left;
+    }
+
+    &.guest {
+      float: right;
+    }
 
     ol {
       font-size: 0em;
 
       li {
-        border-right: 1px solid rgb(200,200,200);
         @include inline-block;
-        margin-top: 10px;
-        padding: 0px 5px;
-        position: relative;
-        vertical-align: bottom;
+        vertical-align: top;
+      }
+
+      li.secondary {
+        margin: 0px 15px;
 
         a {
           @include border-radius(3px);
+          border: 1px solid transparent;
+          @include box-sizing(border-box);
           color: $lighter-base-font-color;
           display: block;
-          font: normal italic 1.2rem/1.2rem $serif;
-          height: 15px;
-          padding: 10px;
+          font: normal italic 1.2rem/1.4rem $serif;
+          height: 30px;
+          @include inline-block;
+          margin: 5px 15px 5px 0px;
+          padding: 7px 2px;
           text-decoration: none;
           text-transform: lowercase;
-          text-shadow: 0 1px rgba(255,255,255, 0.4);
+          text-shadow: 0 1px rgba(255,255,255, 0.6);
+          vertical-align: middle;
+
+          &:last-child {
+            margin-right: 0px;
+          }
 
           &:hover {
-            background: rgb(220,220,220);
             color: $base-font-color;
           }
-
-          &.active {
-            background: rgb(220,220,220);
-            color: $base-font-color;
-          }
-
-          &.options {
-            font: normal 1.2rem/1.2rem $sans-serif;
-            padding-right: 10px;
-            text-transform: none;
-          }
-
-          &.user-link {
-            font: normal 1.2rem/1.2rem $sans-serif;
-            padding: 10px 10px 10px 45px;
-            text-transform: none;
-
-            @media screen and (max-width: 768px) {
-              font-size: 0em;
-              padding: 10px 0px;
-              width: 38px;
-            }
-
-            .avatar {
-              background: rgb(220,220,220);
-              @include border-radius(3px);
-              border: 1px solid rgb(180,180,180);
-              @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
-              height: 22px;
-              @include inline-block;
-              left: 15px;
-              overflow: hidden;
-              position: absolute;
-              top: 5px;
-              width: 22px;
-
-              &::after {
-                @include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
-                content: "";
-                display: block;
-                height: 100%;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                width: 100%;
-              }
-
-              img {
-                @include border-radius(4px);
-                display: block;
-                min-height: 100%;
-                min-width: 100%;
-                height: 100%;
-              }
-            }
-          }
         }
+      }
 
-        ol.user-options {
-          @include border-radius(4px);
-          @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
-          border: 1px solid rgb(200,200,200);
-          background: rgb(220,220,220);
-          display: none;
-          right: 4px;
-          padding: 5px 10px;
-          position: absolute;
-          top: 50px;
-          width: 170px;
-          z-index: 3;
+      li.primary {
+        position: relative;
 
-          &.expanded {
-            display: block;
+        a {
+          border: 1px solid transparent;
+          @include border-radius(3px);
+          @include box-sizing(border-box);
+          color: $base-font-color;
+          display: block;
+          font: normal 1.2rem/1.4rem $sans-serif;
+          height: 38px;
+          @include inline-block;
+          margin: 1px 5px;
+          padding: 10px 8px;
+          text-decoration: none;
+          text-transform: uppercase;
+          text-shadow: 0 1px rgba(255,255,255, 0.6);
+          vertical-align: middle;
+
+          &:hover, &.active {
+            @include background-image(linear-gradient(-90deg, rgb(245,245,245) 0%, rgb(243,243,243) 50%, rgb(237,237,237) 50%, rgb(235,235,235) 100%));
+            border-color: rgb(200,200,200);
+            @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
           }
+        }
+      }
+    }
 
-          &::before {
-            background: transparent;
-            border: {
-              top: 8px solid rgb(220,220,220);
-              right: 8px solid rgb(220,220,220);
-              bottom: 8px solid transparent;
-              left: 8px solid transparent;
-            }
-            @include box-shadow(1px 0 0 0 rgb(200,200,200), 0 -1px 0 0 rgb(200,200,200));
+    &.user {
+      float: right;
+
+      a.user-link {
+        padding: 9px 8px 11px 40px;
+        position: relative;
+        text-transform: none;
+
+        @media screen and (max-width: 768px) {
+          font-size: 0em;
+          padding: 10px 0px;
+          width: 38px;
+        }
+
+        .avatar {
+          background: rgb(220,220,220);
+          @include border-radius(3px);
+          border: 1px solid rgb(180,180,180);
+          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+          height: 22px;
+          @include inline-block;
+          left: 8px;
+          overflow: hidden;
+          position: absolute;
+          top: 6px;
+          width: 22px;
+
+          &::after {
+            @include background-image(linear-gradient((-60deg), rgba(0,0,0, 0) 0%, rgba(0,0,0, 0.1) 50%, rgba(0,0,0, 0.2) 50%, rgba(0,0,0, 0.3) 100%));
             content: "";
             display: block;
-            height: 0px;
+            height: 100%;
             position: absolute;
-            @include transform(rotate(-45deg));
-            right: 10px;
-            top: -7px;
-            width: 0px;
+            right: 0px;
+            top: 0px;
+            width: 100%;
           }
 
-          li {
-            border: {
-              top: 1px solid rgb(200,200,200);
-              right: none;
-              bottom: none;
-              left: none;
-            }
-            margin: 0px;
-            padding: 0px;
+          img {
+            @include border-radius(4px);
+            display: block;
+            min-height: 100%;
+            min-width: 100%;
+            height: 100%;
+          }
+        }
+      }
+
+      ol.user-options {
+        @include border-radius(4px);
+        @include box-shadow(0 1px 6px 0 rgba(0,0,0, 0.3));
+        border: 1px solid rgb(0,0,0);
+        @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.9) 0%,
+                                                          rgba(0,0,0, 0.7) 100%));
+        display: none;
+        right: 0px;
+        padding: 5px 10px;
+        position: absolute;
+        top: 52px;
+        width: 150px;
+        z-index: 3;
+
+        &.expanded {
+          display: block;
+        }
+
+        &::before {
+          background: transparent;
+          border: {
+            top: 6px solid rgba(0,0,0, 1);
+            right: 6px solid rgba(0,0,0, 1);
+            bottom: 6px solid transparent;
+            left: 6px solid transparent;
+          }
+          @include box-shadow(1px 0 0 0 rgb(0,0,0), 0 -1px 0 0 rgb(0,0,0));
+          content: "";
+          display: block;
+          height: 0px;
+          position: absolute;
+          @include transform(rotate(-45deg));
+          right: 12px;
+          top: -6px;
+          width: 0px;
+        }
+
+        li {
+          display: block;
+          border-top: 1px solid rgba(0,0,0, 0.4);
+          @include box-shadow(inset 0 1px 0 0 rgba(255,255,255, 0.05));
+
+          &:first-child {
+            border: none;
+            @include box-shadow(none);
+          }
+
+          > a {
+            @include box-sizing(border-box);
+            color: rgba(255,255,255, 0.9);
+            display: block;
+            font: normal italic 1.2rem/1.4rem $serif;
+            height: auto;
+            margin: 5px 0px;
+            overflow: hidden;
+            padding: 3px 5px 4px;
+            text-shadow: none;
+            text-overflow: ellipsis;
+            text-transform: none;
+            @include transition(padding, 0.1s, linear);
+            white-space: nowrap;
             width: 100%;
 
-            &:first-child {
-              border: none;
-            }
-
-            a {
-              @include box-sizing(border-box);
-              display: block;
-              font: normal 1rem/1.2rem $sans-serif;
-              height: auto;
-              margin: 5px 0px;
-              overflow: hidden;
-              padding: 5px;
-              text-overflow: ellipsis;
-              @include transition(padding, 0.1s, linear);
-              white-space: nowrap;
-              width: 100%;
-
-              &:hover {
-                background: rgb(255,255,255);
-                padding: 5px 8px;
-              }
+            &:hover {
+              background: $blue;
+              @include background-image(linear-gradient(-90deg, lighten($blue, 15%) 0%,
+                                                                rgba($blue, 1) 100%));
+              border-color: rgba(0,0,0, 1);
+              @include box-shadow(none);
+              padding-left: 8px;
+              text-shadow: 0 -1px rgba(0,0,0, 0.2);
             }
           }
         }
diff --git a/lms/static/sass/_shared_login_modal.scss b/lms/static/sass/_shared_login_modal.scss
deleted file mode 100644
index b2dbb3994e..0000000000
--- a/lms/static/sass/_shared_login_modal.scss
+++ /dev/null
@@ -1,179 +0,0 @@
-.modal-wrapper {
-  @include background-image(radial-gradient(50% 50%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.7)));
-  bottom: 0;
-  content: "";
-  display: none;
-  left: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  z-index: 5;
-
-  &.visible {
-    display: block;
-  }
-
-  .login-modal {
-    background: rgba(0,0,0, 0.6);
-    border: 1px solid rgba(0, 0, 0, 0.9);
-    @include border-radius(4px);
-    @include box-shadow(0 10px 60px 10px rgba(0,0,0, 0.5));
-    color: #fff;
-    padding: 10px;
-    width: grid-width(7);
-    @include vertically-and-horizontally-centered(400px, grid-width(7));
-    z-index: 10;
-
-    .inner-wrapper {
-      @include background-image(linear-gradient(-90deg, rgb(245,245,245), rgb(225,225,225)));
-      @include border-radius(4px);
-      border: 1px solid rgba(0, 0, 0, 0.9);
-      @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
-      height: 380px;
-      overflow: hidden;
-      padding: 30px;
-      position: relative;
-
-      &::before {
-        @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 1) 0%, rgba(255,255,255, 0) 100%));
-        content: "";
-        display: block;
-        height: 400px;
-        left: 0px;
-        margin: 0 auto;
-        position: absolute;
-        bottom: -140px;
-        width: 100%;
-      }
-
-      header {
-        margin-bottom: 30px;
-        padding-top: 5px;
-        position: relative;
-        z-index: 2;
-
-        &::after {
-          @extend .faded-hr-divider;
-          bottom: 0px;
-          content: "";
-          display: block;
-          position: absolute;
-        }
-
-        h3 {
-          color: $lighter-base-font-color;
-          font: normal 1.4rem/1.8rem $serif;
-          padding-bottom: 20px;
-          text-align: center;
-          text-shadow: 0 1px rgba(255,255,255, 0.4);
-          text-transform: uppercase;
-          vertical-align: middle;
-        }
-
-      }
-
-      form {
-        @include clearfix;
-        position: relative;
-        z-index: 2;
-
-        label {
-          display: none;
-        }
-
-        label.remember-me {
-          background: rgb(230,230,230);
-          border: 1px solid rgb(200,200,200);
-          @include border-radius(3px);
-          @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
-          display: block;
-          margin-bottom: 60px;
-          padding: 8px 10px;
-          position: relative;
-
-          &::before {
-            @extend .faded-hr-divider;
-            bottom: -30px;
-            content: "";
-            display: block;
-            position: absolute;
-          }
-        }
-
-        input[type="checkbox"] {
-          margin-right: 5px;
-        }
-
-        input[type="email"],
-        input[type="password"] {
-          display: block;
-          height: 45px;
-          margin-bottom: 20px;
-          width: 100%;
-        }
-
-        input[type="submit"] {
-          display: block;
-          height: 45px;
-          margin: 0 auto;
-          width: 70%;
-        }
-      }
-
-      .login-extra {
-        padding: 15px 0px;
-        position: relative;
-
-
-        p {
-          color: $lighter-base-font-color;
-          font: normal italic 1.2rem/1.6rem $serif;
-          text-align: center;
-
-          a {
-            color: $lighter-base-font-color;
-            font: normal italic 1.2rem/1.6rem $serif;
-            text-decoration: underline;
-          }
-
-          span + a {
-            margin-left: 15px;
-          }
-        }
-      }
-
-      .close-modal {
-        //background: rgb(240,240,240);
-        //border: 1px solid rgba(180,180,180, 0.7);
-        @include border-radius(2px);
-        //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.1));
-        cursor: pointer;
-        @include inline-block;
-        padding: 5px 10px;
-        position: absolute;
-        right: 5px;
-        top: 5px;
-        @include transition(all, 0.15s, ease-out);
-
-        .inner {
-          p {
-            color: $lighter-base-font-color;
-            font: normal 1.2rem/1.2rem $sans-serif;
-            text-align: center;
-            text-shadow: 0 1px rgba(255,255,255, 0.8);
-            @include transition(all, 0.15s, ease-out);
-          }
-        }
-
-        &:hover {
-          //background: rgb(235,235,235);
-          //@include box-shadow(0 1px 0 0 rgba(255,255,255, 0.4), inset 0 0 2px 0 rgba(0,0,0, 0.125));
-
-          p {
-            color: $base-font-color;
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/lms/static/sass/_shared_modal.scss b/lms/static/sass/_shared_modal.scss
new file mode 100644
index 0000000000..e729164cab
--- /dev/null
+++ b/lms/static/sass/_shared_modal.scss
@@ -0,0 +1,254 @@
+.modal-overlay {
+  //background: rgba(255,255,255, 0.7);
+  @include background-image(radial-gradient(50% 30%, circle cover, rgba(0,0,0, 0.3), rgba(0,0,0, 0.8)));
+  bottom: 0;
+  content: "";
+  display: none;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 5;
+
+  &.visible {
+    display: block;
+  }
+}
+
+.modal {
+  background: rgba(0,0,0, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.9);
+  @include border-radius(0px);
+  @include box-shadow(0 15px 80px 15px rgba(0,0,0, 0.5));
+  color: #fff;
+  display: none;
+  left: 50%;
+  margin-left: -(grid-width(6)) / 2;
+  padding: 8px;
+  position: absolute;
+  top: 170px;
+  width: grid-width(6);
+  z-index: 10;
+
+  &.visible {
+    display: block;
+  }
+
+  .inner-wrapper {
+    background: rgb(240,240,240);
+    @include border-radius(0px);
+    border: 1px solid rgba(0, 0, 0, 0.9);
+    @include box-shadow(inset 0 1px 0 0 rgba(255, 255, 255, 0.7));
+    overflow: hidden;
+    padding-bottom: 30px;
+    position: relative;
+
+    header {
+      margin-bottom: 30px;
+      overflow: hidden;
+      padding: 28px 20px 0px;
+      position: relative;
+      z-index: 2;
+
+      &::before {
+        @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
+        content: "";
+        display: block;
+        height: 400px;
+        left: 0px;
+        margin: 0 auto;
+        position: absolute;
+        top: -140px;
+        width: 100%;
+        z-index: 1;
+      }
+
+      hr {
+        @extend .faded-hr-divider-light;
+        border: none;
+        margin: 0px;
+        position: relative;
+        z-index: 2;
+
+        &::after {
+          @extend .faded-hr-divider;
+          bottom: 0px;
+          content: "";
+          display: block;
+          position: absolute;
+          top: -1px;
+        }
+      }
+
+      h3 {
+        color: $lighter-base-font-color;
+        font: normal 1.4rem/1.8rem $serif;
+        padding-bottom: 20px;
+        text-align: center;
+        text-shadow: 0 1px rgba(255,255,255, 0.4);
+        text-transform: uppercase;
+        vertical-align: middle;
+        position: relative;
+        z-index: 2;
+      }
+
+    }
+
+    form {
+      margin-bottom: 12px;
+      padding: 0px 40px;
+      position: relative;
+      z-index: 2;
+
+      label {
+        display: none;
+      }
+
+      input[type="checkbox"] {
+        margin-right: 5px;
+      }
+
+      input[type="email"],
+      input[type="text"],
+      input[type="password"] {
+        background: rgb(255,255,255);
+        display: block;
+        height: 45px;
+        margin-bottom: 20px;
+        width: 100%;
+      }
+
+      label.remember-me,
+      label.terms-of-service,
+      label.honor-code {
+        background: rgb(233,233,233);
+        border: 1px solid rgb(200,200,200);
+        @include border-radius(3px);
+        @include box-shadow(0 1px 0 0 rgba(255,255,255, 0.6));
+        display: block;
+        margin-bottom: 20px;
+        padding: 8px 10px;
+
+        &:hover {
+          background: rgb(230,230,230);
+        }
+
+        a {
+          font: normal 1.2rem/1.6rem $serif;
+          text-decoration: underline;
+
+          &:hover {
+          }
+        }
+      }
+
+      .honor-code-summary {
+        margin-bottom: 20px;
+        padding: 0px;
+        position: relative;
+
+        p {
+          color: $lighter-base-font-color;
+          font: 300 1.2rem/1.6rem $sans-serif;
+        }
+
+        hr {
+          @extend .faded-hr-divider-light;
+          border: none;
+          margin-top: 30px;
+          position: relative;
+          z-index: 2;
+
+          &::after {
+            @extend .faded-hr-divider;
+            bottom: 0px;
+            content: "";
+            display: block;
+            position: absolute;
+            top: -1px;
+          }
+        }
+
+        ul {
+          @include box-sizing(border-box);
+          margin: 0;
+          padding: 0 0 0 20px;
+          width: 100%;
+
+          li {
+            color: $lighter-base-font-color;
+            font: 300 1.2rem/1.6rem $sans-serif;
+            margin-bottom: 10px;
+
+            &:last-child {
+              margin-bottom: 0px;
+            }
+          }
+        }
+      }
+
+      .submit {
+        padding-top: 10px;
+
+        input[type="submit"] {
+          display: block;
+          height: 45px;
+          margin: 0 auto;
+          width: 100%;
+        }
+      }
+    }
+
+    .login-extra {
+      position: relative;
+      z-index: 2;
+
+      p {
+        color: $lighter-base-font-color;
+        font: normal italic 1.2rem/1.6rem $serif;
+        text-align: center;
+
+        a {
+          color: $lighter-base-font-color;
+          font: normal italic 1.2rem/1.6rem $serif;
+          text-decoration: underline;
+
+          &:hover {
+            color: $base-font-color;
+          }
+        }
+
+        span + a {
+          margin-left: 15px;
+        }
+      }
+    }
+
+    .close-modal {
+      @include border-radius(2px);
+      cursor: pointer;
+      @include inline-block;
+      padding: 10px;
+      position: absolute;
+      right: 2px;
+      top: 0px;
+      z-index: 3;
+
+      .inner {
+        p {
+          color: $lighter-base-font-color;
+          font: normal 1.2rem/1.2rem $sans-serif;
+          text-align: center;
+          text-shadow: 0 1px rgba(255,255,255, 0.8);
+          @include transition(all, 0.15s, ease-out);
+        }
+      }
+
+      &:hover {
+        p {
+          color: $base-font-color;
+        }
+      }
+    }
+  }
+}
diff --git a/lms/static/sass/application.css b/lms/static/sass/application.css
index 0c86acd807..d82ceba1d3 100755
--- a/lms/static/sass/application.css
+++ b/lms/static/sass/application.css
@@ -340,24 +340,58 @@ a:link, a:visited {
   .container:after {
     clear: both; }
 
-.faded-hr-divider, .modal-wrapper .login-modal .inner-wrapper header::after, .modal-wrapper .login-modal .inner-wrapper form label.remember-me::before, .home .university-partners:before, .home .university-partners:after {
-  background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
-  background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
-  background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
-  background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
-  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.8) 15%, #c8c8c8 50%, rgba(200, 200, 200, 0.8) 85%, rgba(255, 255, 255, 0));
+.faded-hr-divider, .horizontal-divider, .modal .inner-wrapper header hr::after, .modal .inner-wrapper form .honor-code-summary hr::after, .home .university-partners:before, .home .university-partners:after {
+  background-image: -webkit-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+  background-image: -moz-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+  background-image: -ms-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+  background-image: -o-linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+  background-image: linear-gradient(180deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
   height: 1px;
   width: 100%; }
 
-.faded-vertical-divider, header.app a.logo::after {
-  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
-  background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
-  background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
-  background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
-  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 25%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 75%, rgba(255, 255, 255, 0));
+.faded-hr-divider-light, .horizontal-divider::after, .modal .inner-wrapper header hr, .modal .inner-wrapper form .honor-code-summary hr {
+  background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+  background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+  background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+  background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0));
+  height: 1px;
+  width: 100%; }
+
+.faded-vertical-divider, .vertical-divider, header.app .divider {
+  background-image: -webkit-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+  background-image: -moz-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+  background-image: -ms-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+  background-image: -o-linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
+  background-image: linear-gradient(90deg, rgba(200, 200, 200, 0) 0%, #c8c8c8 50%, rgba(200, 200, 200, 0));
   height: 100%;
   width: 1px; }
 
+.faded-vertical-divider-light, .vertical-divider::after, header.app .divider::after {
+  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+  background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+  background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+  background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
+  height: 100%;
+  width: 1px; }
+
+.vertical-divider, header.app .divider {
+  position: relative; }
+  .vertical-divider::after, header.app .divider::after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 1px; }
+
+.horizontal-divider {
+  position: relative; }
+  .horizontal-divider::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 1px; }
+
 .animation-title-appear {
   -webkit-animation: title-appear 4.65s ease-out;
   -moz-animation: title-appear 4.65s ease-out;
@@ -843,29 +877,29 @@ form {
       box-shadow: 0 0 6px 0 rgba(29, 157, 217, 0.4), inset 0 0 4px 0 rgba(0, 0, 0, 0.15);
       outline: none; }
   form input[type="submit"] {
-    border: 1px solid #410017;
-    border-bottom: 1px solid #380000;
+    border: 1px solid #002e88;
+    border-bottom: 1px solid #001e5f;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
-    -webkit-box-shadow: inset 0 1px 0 0 #db4274;
-    -moz-box-shadow: inset 0 1px 0 0 #db4274;
-    box-shadow: inset 0 1px 0 0 #db4274;
+    -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
+    -moz-box-shadow: inset 0 1px 0 0 #42bae5;
+    box-shadow: inset 0 1px 0 0 #42bae5;
     color: white;
     display: inline-block;
     font-size: 14px;
     font-weight: bold;
-    background-color: #b62568;
-    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b62568), color-stop(50%, #7e0047), color-stop(50%, #600038), color-stop(100%, #67003a));
-    background-image: -webkit-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
-    background-image: -moz-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
-    background-image: -ms-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
-    background-image: -o-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
-    background-image: linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+    background-color: #1d9dd9;
+    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
+    background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+    background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+    background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+    background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+    background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
     padding: 8px 20px;
     text-align: center;
     text-decoration: none;
-    text-shadow: 0 -1px 1px #2a0000;
+    text-shadow: 0 -1px 1px #001067;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
@@ -880,17 +914,17 @@ form {
     vertical-align: top; }
     form input[type="submit"]:hover:not(:disabled) {
       cursor: pointer;
-      background-color: #a91656;
-      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029));
-      background-image: -webkit-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
-      background-image: -moz-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
-      background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
-      background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
-      background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); }
+      background-color: #108ec7;
+      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
+      background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+      background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+      background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+      background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+      background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
     form input[type="submit"]:active:not(:disabled) {
-      -webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
-      -moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
-      box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; }
+      -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
+      -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
+      box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
     form input[type="submit"]:disabled {
       opacity: 0.5;
       cursor: not-allowed; }
@@ -996,69 +1030,104 @@ header.app {
     display: block;
     float: left;
     height: 100%;
-    margin: 16px 30px 0px 0px;
+    margin: 16px 15px 0px 0px;
     position: relative; }
-    header.app a.logo::after {
+    header.app a.logo img {
+      position: relative;
+      z-index: 2; }
+    header.app a.logo:hover::before {
+      background-image: -webkit-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+      background-image: -moz-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+      background-image: -ms-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+      background-image: -o-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+      background-image: radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
       content: "";
       display: block;
-      height: 50px;
+      height: 90px;
+      left: -20px;
       position: absolute;
-      right: -15px;
-      top: -12px; }
-  header.app a.discover-courses {
-    background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-    background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-    background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-    background-image: -o-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-    background-image: linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
-    border: 1px solid #c8c8c8;
-    -webkit-border-radius: 3px;
-    -moz-border-radius: 3px;
-    border-radius: 3px;
-    -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-    -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-    color: #3c3c3c;
-    display: block;
-    float: left;
-    font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
-    height: 15px;
-    margin-top: 12px;
-    padding: 8px 10px;
-    text-decoration: none;
-    text-transform: uppercase;
-    text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
-  header.app nav.guest {
-    float: right; }
-    header.app nav.guest ol {
+      top: -32px;
+      width: 90px;
+      z-index: 1; }
+  header.app .divider {
+    display: inline-block;
+    vertical-align: baseline;
+    zoom: 1;
+    *display: inline;
+    *vertical-align: auto;
+    height: 40px;
+    vertical-align: middle; }
+  header.app nav {
+    height: 40px;
+    margin-top: 8px; }
+    header.app nav.find-courses {
+      float: left; }
+    header.app nav.guest {
+      float: right; }
+    header.app nav ol {
       font-size: 0em; }
-      header.app nav.guest ol li {
+      header.app nav ol li {
         display: inline-block;
         vertical-align: baseline;
         zoom: 1;
         *display: inline;
         *vertical-align: auto;
-        margin-top: 12px;
-        padding: 0px 5px;
-        position: relative;
-        vertical-align: bottom; }
-        header.app nav.guest ol li:last-child {
-          padding-right: 0px; }
-        header.app nav.guest ol li a {
+        vertical-align: top; }
+      header.app nav ol li.secondary {
+        margin: 0px 15px; }
+        header.app nav ol li.secondary a {
           -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
           border-radius: 3px;
           border: 1px solid transparent;
-          color: #3c3c3c;
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          color: #a0a0a0;
           display: block;
-          font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif;
-          height: 15px;
-          padding: 8px;
+          font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
+          height: 30px;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto;
+          margin: 5px 15px 5px 0px;
+          padding: 7px 2px;
           text-decoration: none;
           text-transform: lowercase;
-          text-shadow: 0 1px rgba(255, 255, 255, 0.6); }
-          header.app nav.guest ol li a:hover {
-            background: #dcdcdc;
+          text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+          vertical-align: middle; }
+          header.app nav ol li.secondary a:last-child {
+            margin-right: 0px; }
+          header.app nav ol li.secondary a:hover {
+            color: #3c3c3c; }
+      header.app nav ol li.primary {
+        position: relative; }
+        header.app nav ol li.primary a {
+          border: 1px solid transparent;
+          -webkit-border-radius: 3px;
+          -moz-border-radius: 3px;
+          border-radius: 3px;
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          color: #3c3c3c;
+          display: block;
+          font: normal 1.2rem/1.4rem "Open Sans", Verdana, Geneva, sans-serif;
+          height: 38px;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto;
+          margin: 1px 5px;
+          padding: 10px 8px;
+          text-decoration: none;
+          text-transform: uppercase;
+          text-shadow: 0 1px rgba(255, 255, 255, 0.6);
+          vertical-align: middle; }
+          header.app nav ol li.primary a:hover, header.app nav ol li.primary a.active {
             background-image: -webkit-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
             background-image: -moz-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
             background-image: -ms-linear-gradient(-90deg, #f5f5f5 0%, #f3f3f3 50%, #ededed 50%, #ebebeb 100%);
@@ -1067,165 +1136,147 @@ header.app {
             border-color: #c8c8c8;
             -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
             -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-            box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-            color: #3c3c3c; }
-  header.app nav.user {
-    float: right; }
-    header.app nav.user ol {
-      font-size: 0em; }
-      header.app nav.user ol li {
-        border-right: 1px solid #c8c8c8;
-        display: inline-block;
-        vertical-align: baseline;
-        zoom: 1;
-        *display: inline;
-        *vertical-align: auto;
-        margin-top: 10px;
-        padding: 0px 5px;
+            box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6); }
+    header.app nav.user {
+      float: right; }
+      header.app nav.user a.user-link {
+        padding: 9px 8px 11px 40px;
         position: relative;
-        vertical-align: bottom; }
-        header.app nav.user ol li a {
+        text-transform: none; }
+        @media screen and (max-width: 768px) {
+          header.app nav.user a.user-link {
+            font-size: 0em;
+            padding: 10px 0px;
+            width: 38px; } }
+        header.app nav.user a.user-link .avatar {
+          background: #dcdcdc;
           -webkit-border-radius: 3px;
           -moz-border-radius: 3px;
           border-radius: 3px;
-          color: #a0a0a0;
-          display: block;
-          font: normal italic 1.2rem/1.2rem Georgia, Cambria, "Times New Roman", Times, serif;
-          height: 15px;
-          padding: 10px;
-          text-decoration: none;
-          text-transform: lowercase;
-          text-shadow: 0 1px rgba(255, 255, 255, 0.4); }
-          header.app nav.user ol li a:hover {
-            background: #dcdcdc;
-            color: #3c3c3c; }
-          header.app nav.user ol li a.active {
-            background: #dcdcdc;
-            color: #3c3c3c; }
-          header.app nav.user ol li a.options {
-            font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
-            padding-right: 10px;
-            text-transform: none; }
-          header.app nav.user ol li a.user-link {
-            font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
-            padding: 10px 10px 10px 45px;
-            text-transform: none; }
-            @media screen and (max-width: 768px) {
-              header.app nav.user ol li a.user-link {
-                font-size: 0em;
-                padding: 10px 0px;
-                width: 38px; } }
-            header.app nav.user ol li a.user-link .avatar {
-              background: #dcdcdc;
-              -webkit-border-radius: 3px;
-              -moz-border-radius: 3px;
-              border-radius: 3px;
-              border: 1px solid #b4b4b4;
-              -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-              -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-              box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-              height: 22px;
-              display: inline-block;
-              vertical-align: baseline;
-              zoom: 1;
-              *display: inline;
-              *vertical-align: auto;
-              left: 15px;
-              overflow: hidden;
-              position: absolute;
-              top: 5px;
-              width: 22px; }
-              header.app nav.user ol li a.user-link .avatar::after {
-                background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
-                content: "";
-                display: block;
-                height: 100%;
-                position: absolute;
-                right: 0px;
-                top: 0px;
-                width: 100%; }
-              header.app nav.user ol li a.user-link .avatar img {
-                -webkit-border-radius: 4px;
-                -moz-border-radius: 4px;
-                border-radius: 4px;
-                display: block;
-                min-height: 100%;
-                min-width: 100%;
-                height: 100%; }
-        header.app nav.user ol li ol.user-options {
-          -webkit-border-radius: 4px;
-          -moz-border-radius: 4px;
-          border-radius: 4px;
-          -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-          -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-          box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
-          border: 1px solid #c8c8c8;
-          background: #dcdcdc;
-          display: none;
-          right: 4px;
-          padding: 5px 10px;
+          border: 1px solid #b4b4b4;
+          -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+          -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+          box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+          height: 22px;
+          display: inline-block;
+          vertical-align: baseline;
+          zoom: 1;
+          *display: inline;
+          *vertical-align: auto;
+          left: 8px;
+          overflow: hidden;
           position: absolute;
-          top: 50px;
-          width: 170px;
-          z-index: 3; }
-          header.app nav.user ol li ol.user-options.expanded {
-            display: block; }
-          header.app nav.user ol li ol.user-options::before {
-            background: transparent;
-            border-top: 8px solid #dcdcdc;
-            border-right: 8px solid #dcdcdc;
-            border-bottom: 8px solid transparent;
-            border-left: 8px solid transparent;
-            -webkit-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
-            -moz-box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
-            box-shadow: 1px 0 0 0 #c8c8c8, 0 -1px 0 0 #c8c8c8;
+          top: 6px;
+          width: 22px; }
+          header.app nav.user a.user-link .avatar::after {
+            background-image: -webkit-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+            background-image: -moz-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+            background-image: -ms-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+            background-image: -o-linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
+            background-image: linear-gradient(-60deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.3) 100%);
             content: "";
             display: block;
-            height: 0px;
+            height: 100%;
             position: absolute;
-            -webkit-transform: rotate(-45deg);
-            -moz-transform: rotate(-45deg);
-            -ms-transform: rotate(-45deg);
-            -o-transform: rotate(-45deg);
-            transform: rotate(-45deg);
-            right: 10px;
-            top: -7px;
-            width: 0px; }
-          header.app nav.user ol li ol.user-options li {
-            border-top: 1px solid #c8c8c8;
-            border-right: none;
-            border-bottom: none;
-            border-left: none;
-            margin: 0px;
-            padding: 0px;
+            right: 0px;
+            top: 0px;
             width: 100%; }
-            header.app nav.user ol li ol.user-options li:first-child {
-              border: none; }
-            header.app nav.user ol li ol.user-options li a {
-              -webkit-box-sizing: border-box;
-              -moz-box-sizing: border-box;
-              box-sizing: border-box;
-              display: block;
-              font: normal 1rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
-              height: auto;
-              margin: 5px 0px;
-              overflow: hidden;
-              padding: 5px;
-              text-overflow: ellipsis;
-              -webkit-transition: padding, 0.1s, linear;
-              -moz-transition: padding, 0.1s, linear;
-              -ms-transition: padding, 0.1s, linear;
-              -o-transition: padding, 0.1s, linear;
-              transition: padding, 0.1s, linear;
-              white-space: nowrap;
-              width: 100%; }
-              header.app nav.user ol li ol.user-options li a:hover {
-                background: white;
-                padding: 5px 8px; }
+          header.app nav.user a.user-link .avatar img {
+            -webkit-border-radius: 4px;
+            -moz-border-radius: 4px;
+            border-radius: 4px;
+            display: block;
+            min-height: 100%;
+            min-width: 100%;
+            height: 100%; }
+      header.app nav.user ol.user-options {
+        -webkit-border-radius: 4px;
+        -moz-border-radius: 4px;
+        border-radius: 4px;
+        -webkit-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+        -moz-box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.3);
+        border: 1px solid black;
+        background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        background-image: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        background-image: -ms-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        background-image: -o-linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        background-image: linear-gradient(-90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 100%);
+        display: none;
+        right: 0px;
+        padding: 5px 10px;
+        position: absolute;
+        top: 52px;
+        width: 150px;
+        z-index: 3; }
+        header.app nav.user ol.user-options.expanded {
+          display: block; }
+        header.app nav.user ol.user-options::before {
+          background: transparent;
+          border-top: 6px solid black;
+          border-right: 6px solid black;
+          border-bottom: 6px solid transparent;
+          border-left: 6px solid transparent;
+          -webkit-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
+          -moz-box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
+          box-shadow: 1px 0 0 0 black, 0 -1px 0 0 black;
+          content: "";
+          display: block;
+          height: 0px;
+          position: absolute;
+          -webkit-transform: rotate(-45deg);
+          -moz-transform: rotate(-45deg);
+          -ms-transform: rotate(-45deg);
+          -o-transform: rotate(-45deg);
+          transform: rotate(-45deg);
+          right: 12px;
+          top: -6px;
+          width: 0px; }
+        header.app nav.user ol.user-options li {
+          display: block;
+          border-top: 1px solid rgba(0, 0, 0, 0.4);
+          -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+          -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
+          box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }
+          header.app nav.user ol.user-options li:first-child {
+            border: none;
+            -webkit-box-shadow: none;
+            -moz-box-shadow: none;
+            box-shadow: none; }
+          header.app nav.user ol.user-options li > a {
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            color: rgba(255, 255, 255, 0.9);
+            display: block;
+            font: normal italic 1.2rem/1.4rem Georgia, Cambria, "Times New Roman", Times, serif;
+            height: auto;
+            margin: 5px 0px;
+            overflow: hidden;
+            padding: 3px 5px 4px;
+            text-shadow: none;
+            text-overflow: ellipsis;
+            text-transform: none;
+            -webkit-transition: padding, 0.1s, linear;
+            -moz-transition: padding, 0.1s, linear;
+            -ms-transition: padding, 0.1s, linear;
+            -o-transition: padding, 0.1s, linear;
+            transition: padding, 0.1s, linear;
+            white-space: nowrap;
+            width: 100%; }
+            header.app nav.user ol.user-options li > a:hover {
+              background: #1d9dd9;
+              background-image: -webkit-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              background-image: -moz-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              background-image: -ms-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              background-image: -o-linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              background-image: linear-gradient(-90deg, #5abbe9 0%, #1d9dd9 100%);
+              border-color: black;
+              -webkit-box-shadow: none;
+              -moz-box-shadow: none;
+              box-shadow: none;
+              padding-left: 8px;
+              text-shadow: 0 -1px rgba(0, 0, 0, 0.2); }
 
 .courses {
   -webkit-box-sizing: border-box;
@@ -1629,12 +1680,12 @@ header.app {
         border-radius: 0px 3px 3px 0px;
         height: 36px; }
 
-.modal-wrapper {
-  background-image: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
-  background-image: -moz-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
-  background-image: -ms-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
-  background-image: -o-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
-  background-image: radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
+.modal-overlay {
+  background-image: -webkit-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
+  background-image: -moz-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
+  background-image: -ms-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
+  background-image: -o-radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
+  background-image: radial-gradient(50% 30%, circle cover, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
   bottom: 0;
   content: "";
   display: none;
@@ -1643,163 +1694,203 @@ header.app {
   right: 0;
   top: 0;
   z-index: 5; }
-  .modal-wrapper.visible {
+  .modal-overlay.visible {
     display: block; }
-  .modal-wrapper .login-modal {
-    background: rgba(0, 0, 0, 0.6);
+
+.modal {
+  background: rgba(0, 0, 0, 0.6);
+  border: 1px solid rgba(0, 0, 0, 0.9);
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  -webkit-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
+  -moz-box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
+  box-shadow: 0 15px 80px 15px rgba(0, 0, 0, 0.5);
+  color: #fff;
+  display: none;
+  left: 50%;
+  margin-left: -242.5px;
+  padding: 8px;
+  position: absolute;
+  top: 170px;
+  width: 485px;
+  z-index: 10; }
+  .modal.visible {
+    display: block; }
+  .modal .inner-wrapper {
+    background: #f0f0f0;
+    -webkit-border-radius: 0px;
+    -moz-border-radius: 0px;
+    border-radius: 0px;
     border: 1px solid rgba(0, 0, 0, 0.9);
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    -webkit-box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5);
-    -moz-box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5);
-    box-shadow: 0 10px 60px 10px rgba(0, 0, 0, 0.5);
-    color: #fff;
-    padding: 10px;
-    width: 570px;
-    left: 50%;
-    margin-left: -285px;
-    margin-top: -200px;
-    min-height: 400px;
-    min-width: 570px;
-    position: fixed;
-    top: 35%;
-    z-index: 10; }
-    .modal-wrapper .login-modal .inner-wrapper {
-      background-image: -webkit-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
-      background-image: -moz-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
-      background-image: -ms-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
-      background-image: -o-linear-gradient(-90deg, #f5f5f5, #e1e1e1);
-      background-image: linear-gradient(-90deg, #f5f5f5, #e1e1e1);
-      -webkit-border-radius: 4px;
-      -moz-border-radius: 4px;
-      border-radius: 4px;
-      border: 1px solid rgba(0, 0, 0, 0.9);
-      -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
-      -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
-      box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
-      height: 380px;
+    -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
+    -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
+    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
+    overflow: hidden;
+    padding-bottom: 30px;
+    position: relative; }
+    .modal .inner-wrapper header {
+      margin-bottom: 30px;
       overflow: hidden;
-      padding: 30px;
-      position: relative; }
-      .modal-wrapper .login-modal .inner-wrapper::before {
-        background-image: -webkit-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
-        background-image: -moz-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
-        background-image: -ms-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
-        background-image: -o-radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
-        background-image: radial-gradient(50% 50%, circle closest-side, white 0%, rgba(255, 255, 255, 0) 100%);
+      padding: 28px 20px 0px;
+      position: relative;
+      z-index: 2; }
+      .modal .inner-wrapper header::before {
+        background-image: -webkit-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+        background-image: -moz-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+        background-image: -ms-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+        background-image: -o-radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
+        background-image: radial-gradient(50% 50%, circle closest-side, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
         content: "";
         display: block;
         height: 400px;
         left: 0px;
         margin: 0 auto;
         position: absolute;
-        bottom: -140px;
-        width: 100%; }
-      .modal-wrapper .login-modal .inner-wrapper header {
-        margin-bottom: 30px;
-        padding-top: 5px;
+        top: -140px;
+        width: 100%;
+        z-index: 1; }
+      .modal .inner-wrapper header hr {
+        border: none;
+        margin: 0px;
         position: relative;
         z-index: 2; }
-        .modal-wrapper .login-modal .inner-wrapper header::after {
+        .modal .inner-wrapper header hr::after {
           bottom: 0px;
           content: "";
           display: block;
-          position: absolute; }
-        .modal-wrapper .login-modal .inner-wrapper header h3 {
-          color: #a0a0a0;
-          font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
-          padding-bottom: 20px;
-          text-align: center;
-          text-shadow: 0 1px rgba(255, 255, 255, 0.4);
-          text-transform: uppercase;
-          vertical-align: middle; }
-      .modal-wrapper .login-modal .inner-wrapper form {
-        zoom: 1;
+          position: absolute;
+          top: -1px; }
+      .modal .inner-wrapper header h3 {
+        color: #a0a0a0;
+        font: normal 1.4rem/1.8rem Georgia, Cambria, "Times New Roman", Times, serif;
+        padding-bottom: 20px;
+        text-align: center;
+        text-shadow: 0 1px rgba(255, 255, 255, 0.4);
+        text-transform: uppercase;
+        vertical-align: middle;
         position: relative;
         z-index: 2; }
-        .modal-wrapper .login-modal .inner-wrapper form:before, .modal-wrapper .login-modal .inner-wrapper form:after {
-          content: "";
-          display: table; }
-        .modal-wrapper .login-modal .inner-wrapper form:after {
-          clear: both; }
-        .modal-wrapper .login-modal .inner-wrapper form label {
-          display: none; }
-        .modal-wrapper .login-modal .inner-wrapper form label.remember-me {
-          background: #e6e6e6;
-          border: 1px solid #c8c8c8;
-          -webkit-border-radius: 3px;
-          -moz-border-radius: 3px;
-          border-radius: 3px;
-          -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-          -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-          box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
-          display: block;
-          margin-bottom: 60px;
-          padding: 8px 10px;
-          position: relative; }
-          .modal-wrapper .login-modal .inner-wrapper form label.remember-me::before {
-            bottom: -30px;
+    .modal .inner-wrapper form {
+      margin-bottom: 12px;
+      padding: 0px 40px;
+      position: relative;
+      z-index: 2; }
+      .modal .inner-wrapper form label {
+        display: none; }
+      .modal .inner-wrapper form input[type="checkbox"] {
+        margin-right: 5px; }
+      .modal .inner-wrapper form input[type="email"],
+      .modal .inner-wrapper form input[type="text"],
+      .modal .inner-wrapper form input[type="password"] {
+        background: white;
+        display: block;
+        height: 45px;
+        margin-bottom: 20px;
+        width: 100%; }
+      .modal .inner-wrapper form label.remember-me,
+      .modal .inner-wrapper form label.terms-of-service,
+      .modal .inner-wrapper form label.honor-code {
+        background: #e9e9e9;
+        border: 1px solid #c8c8c8;
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+        -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+        box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6);
+        display: block;
+        margin-bottom: 20px;
+        padding: 8px 10px; }
+        .modal .inner-wrapper form label.remember-me:hover,
+        .modal .inner-wrapper form label.terms-of-service:hover,
+        .modal .inner-wrapper form label.honor-code:hover {
+          background: #e6e6e6; }
+        .modal .inner-wrapper form label.remember-me a,
+        .modal .inner-wrapper form label.terms-of-service a,
+        .modal .inner-wrapper form label.honor-code a {
+          font: normal 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+          text-decoration: underline; }
+      .modal .inner-wrapper form .honor-code-summary {
+        margin-bottom: 20px;
+        padding: 0px;
+        position: relative; }
+        .modal .inner-wrapper form .honor-code-summary p {
+          color: #a0a0a0;
+          font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif; }
+        .modal .inner-wrapper form .honor-code-summary hr {
+          border: none;
+          margin-top: 30px;
+          position: relative;
+          z-index: 2; }
+          .modal .inner-wrapper form .honor-code-summary hr::after {
+            bottom: 0px;
             content: "";
             display: block;
-            position: absolute; }
-        .modal-wrapper .login-modal .inner-wrapper form input[type="checkbox"] {
-          margin-right: 5px; }
-        .modal-wrapper .login-modal .inner-wrapper form input[type="email"],
-        .modal-wrapper .login-modal .inner-wrapper form input[type="password"] {
-          display: block;
-          height: 45px;
-          margin-bottom: 20px;
+            position: absolute;
+            top: -1px; }
+        .modal .inner-wrapper form .honor-code-summary ul {
+          -webkit-box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          box-sizing: border-box;
+          margin: 0;
+          padding: 0 0 0 20px;
           width: 100%; }
-        .modal-wrapper .login-modal .inner-wrapper form input[type="submit"] {
+          .modal .inner-wrapper form .honor-code-summary ul li {
+            color: #a0a0a0;
+            font: 300 1.2rem/1.6rem "Open Sans", Verdana, Geneva, sans-serif;
+            margin-bottom: 10px; }
+            .modal .inner-wrapper form .honor-code-summary ul li:last-child {
+              margin-bottom: 0px; }
+      .modal .inner-wrapper form .submit {
+        padding-top: 10px; }
+        .modal .inner-wrapper form .submit input[type="submit"] {
           display: block;
           height: 45px;
           margin: 0 auto;
-          width: 70%; }
-      .modal-wrapper .login-modal .inner-wrapper .login-extra {
-        padding: 15px 0px;
-        position: relative; }
-        .modal-wrapper .login-modal .inner-wrapper .login-extra p {
+          width: 100%; }
+    .modal .inner-wrapper .login-extra {
+      position: relative;
+      z-index: 2; }
+      .modal .inner-wrapper .login-extra p {
+        color: #a0a0a0;
+        font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
+        text-align: center; }
+        .modal .inner-wrapper .login-extra p a {
           color: #a0a0a0;
           font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
-          text-align: center; }
-          .modal-wrapper .login-modal .inner-wrapper .login-extra p a {
-            color: #a0a0a0;
-            font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
-            text-decoration: underline; }
-          .modal-wrapper .login-modal .inner-wrapper .login-extra p span + a {
-            margin-left: 15px; }
-      .modal-wrapper .login-modal .inner-wrapper .close-modal {
-        -webkit-border-radius: 2px;
-        -moz-border-radius: 2px;
-        border-radius: 2px;
-        cursor: pointer;
-        display: inline-block;
-        vertical-align: baseline;
-        zoom: 1;
-        *display: inline;
-        *vertical-align: auto;
-        padding: 5px 10px;
-        position: absolute;
-        right: 5px;
-        top: 5px;
+          text-decoration: underline; }
+          .modal .inner-wrapper .login-extra p a:hover {
+            color: #3c3c3c; }
+        .modal .inner-wrapper .login-extra p span + a {
+          margin-left: 15px; }
+    .modal .inner-wrapper .close-modal {
+      -webkit-border-radius: 2px;
+      -moz-border-radius: 2px;
+      border-radius: 2px;
+      cursor: pointer;
+      display: inline-block;
+      vertical-align: baseline;
+      zoom: 1;
+      *display: inline;
+      *vertical-align: auto;
+      padding: 10px;
+      position: absolute;
+      right: 2px;
+      top: 0px;
+      z-index: 3; }
+      .modal .inner-wrapper .close-modal .inner p {
+        color: #a0a0a0;
+        font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
+        text-align: center;
+        text-shadow: 0 1px rgba(255, 255, 255, 0.8);
         -webkit-transition: all, 0.15s, ease-out;
         -moz-transition: all, 0.15s, ease-out;
         -ms-transition: all, 0.15s, ease-out;
         -o-transition: all, 0.15s, ease-out;
         transition: all, 0.15s, ease-out; }
-        .modal-wrapper .login-modal .inner-wrapper .close-modal .inner p {
-          color: #a0a0a0;
-          font: normal 1.2rem/1.2rem "Open Sans", Verdana, Geneva, sans-serif;
-          text-align: center;
-          text-shadow: 0 1px rgba(255, 255, 255, 0.8);
-          -webkit-transition: all, 0.15s, ease-out;
-          -moz-transition: all, 0.15s, ease-out;
-          -ms-transition: all, 0.15s, ease-out;
-          -o-transition: all, 0.15s, ease-out;
-          transition: all, 0.15s, ease-out; }
-        .modal-wrapper .login-modal .inner-wrapper .close-modal:hover p {
-          color: #3c3c3c; }
+      .modal .inner-wrapper .close-modal:hover p {
+        color: #3c3c3c; }
 
 .home {
   margin: 50px 10px 100px; }
@@ -1900,29 +1991,29 @@ header.app {
             -moz-box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35);
             box-shadow: 0 0 16px 0 rgba(29, 157, 217, 0.35); }
           .home > header .welcome .signup-wrapper .sign-up a {
-            border: 1px solid #410017;
-            border-bottom: 1px solid #380000;
+            border: 1px solid #002e88;
+            border-bottom: 1px solid #001e5f;
             -webkit-border-radius: 5px;
             -moz-border-radius: 5px;
             border-radius: 5px;
-            -webkit-box-shadow: inset 0 1px 0 0 #db4274;
-            -moz-box-shadow: inset 0 1px 0 0 #db4274;
-            box-shadow: inset 0 1px 0 0 #db4274;
+            -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
+            -moz-box-shadow: inset 0 1px 0 0 #42bae5;
+            box-shadow: inset 0 1px 0 0 #42bae5;
             color: white;
             display: inline-block;
             font-size: 14px;
             font-weight: bold;
-            background-color: #b62568;
-            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b62568), color-stop(50%, #7e0047), color-stop(50%, #600038), color-stop(100%, #67003a));
-            background-image: -webkit-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
-            background-image: -moz-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
-            background-image: -ms-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
-            background-image: -o-linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
-            background-image: linear-gradient(top, #b62568 0%, #7e0047 50%, #600038 50%, #67003a 100%);
+            background-color: #1d9dd9;
+            background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
+            background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+            background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+            background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+            background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
+            background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
             padding: 8px 20px;
             text-align: center;
             text-decoration: none;
-            text-shadow: 0 -1px 1px #2a0000;
+            text-shadow: 0 -1px 1px #001067;
             -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
             box-sizing: border-box;
@@ -1938,78 +2029,23 @@ header.app {
             padding: 15px 0px;
             text-transform: uppercase;
             text-align: center;
-            width: 48.744%; }
+            width: 100%; }
             .home > header .welcome .signup-wrapper .sign-up a:hover:not(:disabled) {
               cursor: pointer;
-              background-color: #a91656;
-              background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a91656), color-stop(50%, #740035), color-stop(50%, #590026), color-stop(100%, #600029));
-              background-image: -webkit-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
-              background-image: -moz-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
-              background-image: -ms-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
-              background-image: -o-linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%);
-              background-image: linear-gradient(top, #a91656 0%, #740035 50%, #590026 50%, #600029 100%); }
+              background-color: #108ec7;
+              background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
+              background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+              background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+              background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+              background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
+              background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
             .home > header .welcome .signup-wrapper .sign-up a:active:not(:disabled) {
-              -webkit-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
-              -moz-box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white;
-              box-shadow: inset 0 0 20px 0 #470000, 0 1px 0 white; }
+              -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
+              -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
+              box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
             .home > header .welcome .signup-wrapper .sign-up a:disabled {
               opacity: 0.5;
               cursor: not-allowed; }
-            .home > header .welcome .signup-wrapper .sign-up a:first-child {
-              margin-right: 2.513%; }
-            .home > header .welcome .signup-wrapper .sign-up a.find-courses {
-              border: 1px solid #002e88;
-              border-bottom: 1px solid #001e5f;
-              -webkit-border-radius: 5px;
-              -moz-border-radius: 5px;
-              border-radius: 5px;
-              -webkit-box-shadow: inset 0 1px 0 0 #42bae5;
-              -moz-box-shadow: inset 0 1px 0 0 #42bae5;
-              box-shadow: inset 0 1px 0 0 #42bae5;
-              color: white;
-              display: inline-block;
-              font-size: 14px;
-              font-weight: bold;
-              background-color: #1d9dd9;
-              background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1d9dd9), color-stop(50%, #006bb8), color-stop(50%, #0052a9), color-stop(100%, #0057ab));
-              background-image: -webkit-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-              background-image: -moz-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-              background-image: -ms-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-              background-image: -o-linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-              background-image: linear-gradient(top, #1d9dd9 0%, #006bb8 50%, #0052a9 50%, #0057ab 100%);
-              padding: 8px 20px;
-              text-align: center;
-              text-decoration: none;
-              text-shadow: 0 -1px 1px #001067;
-              -webkit-box-sizing: border-box;
-              -moz-box-sizing: border-box;
-              box-sizing: border-box;
-              -webkit-border-radius: 3px;
-              -moz-border-radius: 3px;
-              border-radius: 3px;
-              display: inline-block;
-              vertical-align: baseline;
-              zoom: 1;
-              *display: inline;
-              *vertical-align: auto;
-              font: normal italic 1.2rem/1.6rem Georgia, Cambria, "Times New Roman", Times, serif;
-              padding: 15px 0px; }
-              .home > header .welcome .signup-wrapper .sign-up a.find-courses:hover:not(:disabled) {
-                cursor: pointer;
-                background-color: #108ec7;
-                background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #108ec7), color-stop(50%, #005fa6), color-stop(50%, #004897), color-stop(100%, #004d9a));
-                background-image: -webkit-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
-                background-image: -moz-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
-                background-image: -ms-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
-                background-image: -o-linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%);
-                background-image: linear-gradient(top, #108ec7 0%, #005fa6 50%, #004897 50%, #004d9a 100%); }
-              .home > header .welcome .signup-wrapper .sign-up a.find-courses:active:not(:disabled) {
-                -webkit-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-                -moz-box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white;
-                box-shadow: inset 0 0 20px 0 #00295f, 0 1px 0 white; }
-              .home > header .welcome .signup-wrapper .sign-up a.find-courses:disabled {
-                opacity: 0.5;
-                cursor: not-allowed; }
           .home > header .welcome .signup-wrapper .sign-up form input[type="text"],
           .home > header .welcome .signup-wrapper .sign-up form input[type="email"],
           .home > header .welcome .signup-wrapper .sign-up form input[type="password"] {
@@ -2555,7 +2591,7 @@ nav.course-material {
     padding-bottom: 20px;
     position: relative;
     width: 31.658%; }
-    .course-info .sidebar .faded-vertical-divider, .course-info .sidebar header.app a.logo::after, header.app .course-info .sidebar a.logo::after {
+    .course-info .sidebar .faded-vertical-divider, .course-info .sidebar .vertical-divider, .course-info .sidebar header.app .divider, header.app .course-info .sidebar .divider {
       background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
       background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
       background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(200, 200, 200, 0.6) 10%, #c8c8c8 50%, rgba(200, 200, 200, 0.6) 90%, rgba(255, 255, 255, 0));
diff --git a/lms/static/sass/application.scss b/lms/static/sass/application.scss
index 836f461195..bb30fb8dc3 100644
--- a/lms/static/sass/application.scss
+++ b/lms/static/sass/application.scss
@@ -10,7 +10,7 @@
 @import 'shared_header';
 @import 'shared_list_of_courses';
 @import 'shared_course_filter';
-@import 'shared_login_modal';
+@import 'shared_modal';
 
 @import 'index';
 @import 'dashboard';
diff --git a/lms/templates/about.html b/lms/templates/about.html
new file mode 100644
index 0000000000..498f2da40c
--- /dev/null
+++ b/lms/templates/about.html
@@ -0,0 +1,3 @@
+<%inherit file="main.html" />
+
+<h1>About Us</h1>
diff --git a/lms/templates/index.html b/lms/templates/index.html
index 07967c8668..5bc997891b 100644
--- a/lms/templates/index.html
+++ b/lms/templates/index.html
@@ -22,7 +22,6 @@
         <div class="signup-wrapper">
           <section class="sign-up">
               <a href="#" class="find-courses">Find Courses</a>
-              <a href="#" class="create-account">Sign Up</a>
           </section>
         </div>
       </section>
diff --git a/lms/templates/jobs.html b/lms/templates/jobs.html
new file mode 100644
index 0000000000..c60ae34484
--- /dev/null
+++ b/lms/templates/jobs.html
@@ -0,0 +1,3 @@
+<%inherit file="main.html" />
+
+<h1>Jobs</h1>
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
index 756f86869f..9cf0c031be 100644
--- a/lms/templates/login_modal.html
+++ b/lms/templates/login_modal.html
@@ -1,39 +1,41 @@
 <%namespace name='static' file='static_content.html'/>
 
-<section class="modal-wrapper">
-  <section class="login-modal">
-    <div class="inner-wrapper">
-      <header>
-        <h3>Log In</h3>
-      </header>
+<section class="modal login-modal">
+  <div class="inner-wrapper">
+    <header>
+      <h3>Log In</h3>
+      <hr>
+    </header>
 
-      <form id="login_form" method="post">
-        <label>E-mail</label>
-        <input name="email" type="email" placeholder="e-mail">
-        <label>Password</label>
-        <input name="password" type="password" placeholder="password">
-        <label class="remember-me">
-          <input name="remember" type="checkbox">
-          Remember me
-        </label>
+    <form id="login_form" method="post">
+      <label>E-mail</label>
+      <input name="email" type="email" placeholder="E-mail">
+      <label>Password</label>
+      <input name="password" type="password" placeholder="Password">
+      <label class="remember-me">
+        <input name="remember" type="checkbox">
+        Remember me
+      </label>
+      <div class="submit">
         <input name="submit" type="submit" value="Submit">
-      </form>
+      </div>
+    </form>
 
-      <section class="login-extra">
-        <p>
-          <span>Not enrolled? <a href="#">Sign up.</a></span>
-          <a href="#" class="pwd-reset">Forgot password?</a>
-        </p>
-      </section>
+    <section class="login-extra">
+      <p>
+        <span>Not enrolled? <a href="#">Sign up.</a></span>
+        <a href="#" class="pwd-reset">Forgot password?</a>
+      </p>
+    </section>
 
-      <div class="close-modal">
-        <div class="inner">
-          <p>&#10005;</p>
-        </div>
+    <div class="close-modal">
+      <div class="inner">
+        <p>&#10005;</p>
       </div>
     </div>
-  </section>
+  </div>
 </section>
+
 <script type="text/javascript">
   function getCookie(name) {
     var cookieValue = null;
@@ -68,7 +70,7 @@ function postJSON(url, data, callback) {
       submit_data,
       function(json) {
       if(json.success) {
-      location.href="/info";
+      location.href="/courses";
       } else if($('#login_error').length == 0) {
       $('#login_form').prepend('<div id="login_error">Email or password is incorrect.</div>');
       } else {
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index 4c0c2d68de..fe1656cfc2 100644
--- a/lms/templates/navigation.html
+++ b/lms/templates/navigation.html
@@ -7,21 +7,35 @@
     <a href="${ MITX_ROOT_URL }" class="logo">
       <img src="${static.url('images/logo.png')}" />
     </a>
-    <a href="/courses" class="discover-courses">Find Courses</a>
+    <nav class="find-courses">
+      <ol>
+        <li class="primary">
+          <div class="divider"></div>
+          <a href="/courses">Find Courses</a>
+          <div class="divider"></div>
+        </li>
+        <li class="secondary">
+          <a href="/about">About</a>
+          <a href="#">Blog</a>
+          <a href="/jobs">Jobs</a>
+        </li>
+      </ol>
+    </nav>
 
     %if user.is_authenticated():
-    <h1>${ settings.COURSE_TITLE }</h1>
     <nav class="user">
       <ol>
-        <li>
+        <li class="primary">
+          <div class="divider"></div>
           <a href="/dashboard" class="user-link">
             <span class="avatar"><img src="${static.url('images/profile.jpg')}" /></span>
             Neil deGrasse Tyson
           </a>
-        </li>
-        <li>
+          <div class="divider"></div>
           <a href="#" class="options">&#9662</a>
+          <div class="divider"></div>
           <ol class="user-options">
+            <li><a href="#">Account Settings</a></li>
             <li><a href="#">Help</a></li>
             <li><a href="/logout">Log Out</a></li>
           </ol>
@@ -32,20 +46,12 @@
     %else:
     <nav class="guest">
       <ol>
-        <li>
-          <a href="#">About</a>
-        </li>
-        <li>
-          <a href="#">Blog</a>
-        </li>
-        <li>
-          <a href="#">Jobs</a>
-        </li>
-        <li>
-          <a href="#" class="login">Log In</a>
-        </li>
-        <li>
-          <a href="#">Sign Up</a>
+        <li class="primary">
+          <div class="divider"></div>
+          <a href="#" id="login">Log In</a>
+          <div class="divider"></div>
+          <a href="#" id="signup">Sign Up</a>
+          <div class="divider"></div>
         </li>
       </ol>
     </nav>
@@ -55,4 +61,8 @@
 
 %if not user.is_authenticated():
   <%include file="login_modal.html" />
+  <%include file="signup_modal.html" />
+
+  <section class="modal-overlay">
+  </section>
 %endif
diff --git a/lms/templates/signup_modal.html b/lms/templates/signup_modal.html
new file mode 100644
index 0000000000..5b02d9a0b8
--- /dev/null
+++ b/lms/templates/signup_modal.html
@@ -0,0 +1,71 @@
+<%namespace name='static' file='static_content.html'/>
+
+<section class="modal signup-modal">
+  <div class="inner-wrapper">
+    <header>
+      <h3>Sign Up for edX</h3>
+      <hr>
+    </header>
+
+    <form id="login_form" method="post">
+      <label>E-mail</label>
+      <input name="email" type="email" placeholder="E-mail">
+      <label>Password</label>
+      <input name="password" type="password" placeholder="Password">
+      <label>Public Username</label>
+      <input name="username" type="text" placeholder="Public Username">
+      <label>Full Name</label>
+      <input name="fullname" type="text" placeholder="Full Name">
+      <label>Your Location</label>
+      <input name="location" type="text" placeholder="Your Location">
+      <label>Prefered Language</label>
+      <input name="language" type="text" placeholder="Prefered Language">
+      <label class="terms-of-service">
+        <input name="terms-of-service" type="checkbox">
+        I agree to the
+        <a href="#">Terms of Service</a>
+      </label>
+      <label class="honor-code">
+        <input name="honor-code" type="checkbox">
+        I agree to the
+        <a href="#">Honor Code</a>
+        , sumarized below as:
+      </label>
+
+        <div class="honor-code-summary">
+          <ul>
+            <li>
+              <p>Complete all mid-terms and final exams with only my own work.</p>
+            </li>
+            <li>
+              <p>Maintain only one account, and not share the username or password.</p>
+            </li>
+            <li>
+              <p>Not engage in any activity that would dishonestly improve my results, or improve or hurt those of others.</p>
+            </li>
+            <li>
+              <p>Not post answers to problems that are being used to assess student performance.</p>
+            </li>
+          </ul>
+          <hr>
+        </div>
+
+
+      <div class="submit">
+        <input name="submit" type="submit" value="Create My Account">
+      </div>
+    </form>
+
+    <section class="login-extra">
+      <p>
+        <span>Already have an account? <a href="#">Login.</a></span>
+      </p>
+    </section>
+
+    <div class="close-modal">
+      <div class="inner">
+        <p>&#10005;</p>
+      </div>
+    </div>
+  </div>
+</section>