diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py
index 7ebb2648ec..bd0dc2fb48 100644
--- a/cms/djangoapps/contentstore/views.py
+++ b/cms/djangoapps/contentstore/views.py
@@ -93,6 +93,8 @@ def login_page(request):
         'forgot_password_link': "//{base}/#forgot-password-modal".format(base=settings.LMS_BASE),
     })
 
+def howitworks(request):
+    return render_to_response('howitworks.html', {})
 
 # ==== Views for any logged-in user ==================================
 
diff --git a/cms/static/img/hiw-feature1.png b/cms/static/img/hiw-feature1.png
new file mode 100644
index 0000000000..3cfd48d066
Binary files /dev/null and b/cms/static/img/hiw-feature1.png differ
diff --git a/cms/static/img/hiw-feature2.png b/cms/static/img/hiw-feature2.png
new file mode 100644
index 0000000000..9442325dd5
Binary files /dev/null and b/cms/static/img/hiw-feature2.png differ
diff --git a/cms/static/img/hiw-feature3.png b/cms/static/img/hiw-feature3.png
new file mode 100644
index 0000000000..fa6b81ae89
Binary files /dev/null and b/cms/static/img/hiw-feature3.png differ
diff --git a/cms/static/img/logo-edx-studio-white.png b/cms/static/img/logo-edx-studio-white.png
new file mode 100644
index 0000000000..3e3ee63622
Binary files /dev/null and b/cms/static/img/logo-edx-studio-white.png differ
diff --git a/cms/static/img/logo-edx-studio.png b/cms/static/img/logo-edx-studio.png
new file mode 100644
index 0000000000..006194a195
Binary files /dev/null and b/cms/static/img/logo-edx-studio.png differ
diff --git a/cms/static/img/pl-1x1-000.png b/cms/static/img/pl-1x1-000.png
new file mode 100644
index 0000000000..b94b7a9746
Binary files /dev/null and b/cms/static/img/pl-1x1-000.png differ
diff --git a/cms/static/img/pl-1x1-fff.png b/cms/static/img/pl-1x1-fff.png
new file mode 100644
index 0000000000..7081c75d36
Binary files /dev/null and b/cms/static/img/pl-1x1-fff.png differ
diff --git a/cms/static/img/thumb-hiw-feature1.png b/cms/static/img/thumb-hiw-feature1.png
new file mode 100644
index 0000000000..b2dc0c00ee
Binary files /dev/null and b/cms/static/img/thumb-hiw-feature1.png differ
diff --git a/cms/static/img/thumb-hiw-feature2.png b/cms/static/img/thumb-hiw-feature2.png
new file mode 100644
index 0000000000..e96bcad1aa
Binary files /dev/null and b/cms/static/img/thumb-hiw-feature2.png differ
diff --git a/cms/static/img/thumb-hiw-feature3.png b/cms/static/img/thumb-hiw-feature3.png
new file mode 100644
index 0000000000..f694fca516
Binary files /dev/null and b/cms/static/img/thumb-hiw-feature3.png differ
diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index 7e55d2b8d8..776d42d1cf 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -39,6 +39,21 @@ $(document).ready(function() {
     $('.unit .item-actions .delete-button').bind('click', deleteUnit);
     $('.new-unit-item').bind('click', createNewUnit);
 
+    // nav-related
+    $('body').addClass('js');
+
+    $('.nav-dropdown .nav-item .title').click(function(e){
+
+        $subnav = $(this).parent().find('.nav-sub');
+        $title = $(this).parent().find('.title');
+
+        e.preventDefault();
+        $('.nav-dropdown .nav-item .title').removeClass('is-selected');
+        $('.nav-dropdown .nav-item .nav-sub').removeClass('is-shown');
+        $title.toggleClass('is-selected');
+        $subnav.toggleClass('is-shown');
+      });
+
     // toggling overview section details
     $(function(){
       if($('.courseware-section').length > 0) {
diff --git a/cms/static/sass/_account.scss b/cms/static/sass/_account.scss
new file mode 100644
index 0000000000..7376c41174
--- /dev/null
+++ b/cms/static/sass/_account.scss
@@ -0,0 +1,284 @@
+// login and sign up UI
+.signup, .signin {
+
+  .wrapper-content {
+    margin: 0;
+    padding: 0 $baseline;
+    position: relative;
+    width: 100%;
+  }
+
+  .content {
+    @include clearfix();
+    @include font-size(16);
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    color: $gray-d2;
+    
+    header {
+      position: relative;
+      margin-bottom: $baseline;
+      border-bottom: 1px solid $gray-l4;
+      padding-bottom: ($baseline/2);
+
+      h1 {
+        @include font-size(32);
+        float: none;
+        margin: 0;
+        padding: 0;
+        font-weight: 600;
+      }
+
+      .action {
+        @include font-size(13);
+        position: absolute;
+        right: 0;
+        top: 40%;
+      }
+    }
+
+    .introduction {
+      @include font-size(14);
+      margin: 0 0 $baseline 0;
+    }
+  }
+
+  .content-primary, .content-supplementary {
+    @include box-sizing(border-box);
+    float: left;
+  }
+
+  .content-primary {
+    width: flex-grid(8, 12);
+    margin-right: flex-gutter();
+
+    form {
+      @include box-sizing(border-box);
+      @include box-shadow(0 1px 2px $shadow-l1);
+      @include border-radius(2px);
+      width: 100%;
+      border: 1px solid $gray-l2;
+      padding: $baseline ($baseline*1.5);
+      background: $white;
+
+      .form-actions {
+        margin-top: $baseline;
+
+        .action-primary {
+          @include blue-button;
+          @include transition(all .15s);
+          @include font-size(15);
+          display:block;
+          width: 100%;
+          padding: ($baseline*0.75) ($baseline/2);
+          font-weight: 600;
+          text-transform: uppercase;
+        }
+      }
+
+      .list-input {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        .field {
+          margin: 0 0 ($baseline*0.75) 0;
+
+          &:last-child {
+            margin-bottom: 0;
+          }
+
+          &.required {
+
+            label {
+              font-weight: 600;
+            }
+
+            label:after {
+              margin-left: ($baseline/4);
+              content: "*";
+            }
+          }
+
+          label, input, textarea {
+            display: block;
+          }
+
+          label {
+            @include font-size(14);
+            @include transition(color, 0.15s, ease-in-out);
+            margin: 0 0 ($baseline/4) 0;
+
+            &.is-focused {
+              color: $blue;
+            }
+          }
+
+          input, textarea {
+            @include font-size(16);
+            height: 100%;
+            width: 100%;
+            padding: ($baseline/2);       
+
+            &.long {
+              width: 100%;
+            }
+
+            &.short {
+              width: 25%;
+            }
+
+            ::-webkit-input-placeholder {
+               color: $gray-l4;
+            }
+
+            :-moz-placeholder {
+               color: $gray-l3; 
+            }
+
+            ::-moz-placeholder {
+               color: $gray-l3;  
+            }
+
+            :-ms-input-placeholder {  
+               color: $gray-l3; 
+            }
+          }
+
+          textarea.long {
+            height: ($baseline*5);
+          }
+
+          input[type="checkbox"] {
+            display: inline-block;
+            margin-right: ($baseline/4);
+            width: auto;
+            height: auto;
+
+            & + label {
+              display: inline-block;
+            }
+          }
+
+          .tip {
+            @include font-size(13);
+            display: block;
+            margin-top: ($baseline/4);
+            color: $gray-l3;
+          }
+        }
+
+        .field-group {
+          @include clearfix();
+          margin: 0 0 ($baseline/2) 0;
+
+          .field {
+            display: block;
+            width: 47%;
+            border-bottom: none;
+            margin: 0 $baseline 0 0;
+            padding-bottom: 0;
+
+            &:nth-child(odd) {
+              float: left;
+            }
+
+            &:nth-child(even) {
+              float: right;
+              margin-right: 0;
+            }
+
+            input, textarea {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .content-supplementary {
+    width: flex-grid(4, 12);
+
+    .bit {
+      @include font-size(13);
+      margin: 0 0 $baseline 0;
+      border-bottom: 1px solid $gray-l4;
+      padding: 0 0 $baseline 0;
+      color: $gray-l1;
+
+      &:last-child {
+        margin-bottom: 0;
+        border: none;
+        padding-bottom: 0;
+      }
+
+      h3 {
+        @include font-size(14);
+        margin: 0 0 ($baseline/4) 0;
+        color: $gray-d2;
+        font-weight: 600;
+      }
+
+    }
+  }
+}
+
+.signup {
+
+}
+
+.signin {
+
+  #field-password {
+    position: relative;
+
+    .action-forgotpassword {
+      @include font-size(13);
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
+  }
+}
+
+// messages
+.message {
+  @include font-size(14);
+  display: block;
+}
+
+.message-status {
+  display: none;
+  @include border-top-radius(2px);
+  @include box-sizing(border-box);
+  border-bottom: 2px solid $yellow-d2;
+  margin: 0 0 $baseline 0;
+  padding: ($baseline/2) $baseline;
+  font-weight: 500;
+  background: $yellow-d1;
+  color: $white;
+
+  .ss-icon {
+    position: relative;
+    top: 3px;
+    @include font-size(16);
+    display: inline-block;
+    margin-right: ($baseline/2);
+  }
+
+  .text {
+    display: inline-block;
+  }
+
+  &.error {
+    border-color: shade($red, 50%);
+    background: tint($red, 20%);
+  }
+
+  &.is-shown {
+    display: block;
+  }
+}
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 6e5c547b87..2880908471 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -4,9 +4,13 @@
 //
 // -------------------------------------
 
+html {
+  font-size: 62.5%;
+}
+
 body {
     min-width: 980px;
-    background: rgb(240, 241, 245);
+    background: $gray-l5;
     font-size: 16px;
     line-height: 1.6;
     color: $baseFontColor;
@@ -42,6 +46,12 @@ h1 {
     margin-bottom: 30px;
 }
 
+.wrapper {
+  @include clearfix();
+  @include box-sizing(border-box);
+  width: 100%;
+}
+
 .main-wrapper {
     position: relative;
     margin: 0 40px;
@@ -70,11 +80,6 @@ h1 {
     float: right;
 }
 
-footer {
-    clear: both;
-    height: 100px;
-}
-
 input[type="text"],
 input[type="email"],
 input[type="password"],
@@ -417,4 +422,9 @@ body.show-wip {
     font-size: 20px;
     color: rgba(0, 0, 0, 0.85);
   }
+}
+
+// basic utility
+.sr {
+  @include text-sr();
 }
\ No newline at end of file
diff --git a/cms/static/sass/_extends.scss b/cms/static/sass/_extends.scss
new file mode 100644
index 0000000000..5907481bd1
--- /dev/null
+++ b/cms/static/sass/_extends.scss
@@ -0,0 +1,78 @@
+.faded-hr-divider {
+  @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-medium {
+  @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
+                                                    rgba(240,240,240, 1) 50%,
+                                                    rgba(240,240,240, 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(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 {
+  border: none;
+  @extend .faded-hr-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-hr-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 1px;
+  }
+}
+
+.fade-right-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1)));
+  border: none;
+}
+
+.fade-left-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
+                                                    rgba(200,200,200, 0)));
+  border: none;
+}
\ No newline at end of file
diff --git a/cms/static/sass/_footer.scss b/cms/static/sass/_footer.scss
new file mode 100644
index 0000000000..66a9ce0e95
--- /dev/null
+++ b/cms/static/sass/_footer.scss
@@ -0,0 +1,48 @@
+//studio global footer
+.wrapper-footer {
+  margin: ($baseline*1.5) 0 $baseline 0;
+  padding: $baseline;
+  position: relative;
+  width: 100%;
+
+  footer.primary {
+    @include clearfix();
+    @include font-size(13);
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    padding-top: $baseline;
+    border-top: 1px solid $gray-l4;
+    color: $gray-l2;
+
+    .colophon {
+      width: flex-grid(4, 12);
+      float: left;
+      margin-right: flex-gutter(2);
+    }
+
+    .nav-peripheral {
+      width: flex-grid(6, 12);
+      float: right;
+      text-align: right;
+
+      .nav-item {
+        display: inline-block;
+        margin-right: ($baseline/2);
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    a {
+      color: $gray-l1;
+
+      &:hover, &:active {
+        color: $blue;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss
index e031e16f50..e0648279a6 100644
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/_header.scss
@@ -1,109 +1,428 @@
-body.no-header {
-	.primary-header {
-		display: none;
-	}
+//studio global header and navigation
+.wrapper-header {
+  margin: 0 0 ($baseline*1.5) 0;
+  padding: $baseline;
+  border-bottom: 1px solid $gray;
+  @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+  background: $white;
+  height: 76px;
+  position: relative;
+  width: 100%;
+  z-index: 10;
+
+  a {
+    color: $baseFontColor;
+    display: block;
+
+    &:hover, &:active {
+      color: $blue;
+    }
+  }
+
+  header.primary {
+    @include clearfix();
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    color: $gray-l1;
+  }
 }
 
-@mixin active {
-	@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-	background-color: rgba(255, 255, 255, .3);
-	@include box-shadow(0 -1px 0 rgba(0, 0, 0, .2) inset, 0 1px 0 #fff inset);
-	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+.branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
+  display: inline-block;
+  vertical-align: top;
 }
 
-.primary-header {
-	width: 100%;
-	margin-bottom: 30px;
+.branding, .info-course, .nav-course {
+  margin: 0 ($baseline*0.75) 0 0;
+}
 
-	&.active-tab-courseware #courseware-tab {
-		@include active;
-	}
+.branding {
+  position: relative;
+  padding-right: ($baseline*0.75);
 
-	&.active-tab-assets #assets-tab {
-		@include active;
-	}
-	
-	&.active-tab-pages #pages-tab {
-		@include active;
-	}
+  a {
+    @include text-hide();
+    display: block;
+    width: 164px;
+    height: 32px;
+    background: transparent url('../img/logo-edx-studio.png') 0 0 no-repeat;
+  }
+}
 
-	&.active-tab-users #users-tab {
-		@include active;
-	}
+.info-course {
+  position: relative;
+  max-width: 200px;
+  margin-top: -3px;
+  padding-right: $baseline;
+  @include font-size(14);
 
-	&.active-tab-settings #settings-tab {
-		@include active;
-	}
+  &:before {
+    @extend .faded-vertical-divider;
+    content: "";
+    display: block;
+    height: 50px;
+    position: absolute;
+    right: 1px;
+    top: -8px;
+    width: 1px;
+  }
 
-	&.active-tab-import #import-tab {
-		@include active;
-	}
+  &:after {
+    @extend .faded-vertical-divider-light;
+    content: "";
+    display: block;
+    height: 50px;
+    position: absolute;
+    right: 0px;
+    top: -12px;
+    width: 1px;
+  }
 
-	&.active-tab-export #export-tab {
-		@include active;
-	}
+  .course-number, .course-title {
+    display: block;
+  }
 
-	.drop-icon {
-		margin-left: 5px;
-		font-size: 11px;
-	}
+  .course-number {
+    @include font-size(12);
+  }
 
-	.settings-icon {
-		font-size: 18px;
-		line-height: 18px;
-	}
+  .course-title {
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    @include font-size(16);
+    font-weight: 600;
+  }
+}
 
-	.class-nav-bar {
-		clear: both;
-		@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-		background-color: $lightBluishGrey;
-		@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
-	}
+// course info
+.nav-course {
+  width: 335px;
+  margin-top: -($baseline/4);
+  @include font-size(14);
 
-	.class-nav {
-		@include clearfix;		
+  > ol > .nav-item {
+    display: inline-block;
+    vertical-align: bottom;
+    width: 100px;
+    margin: 0 ($baseline/2) 0 0;
 
-		a {
-			float: left;
-			display: inline-block;
-			padding: 15px 25px 17px;
-			font-size: 15px;
-			color: #3c3c3c;
-			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+    &:last-child {
+      margin-right: 0;
+    }
 
-			&:hover {
-				@include linear-gradient(top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
-			}
-		}
+    .title {
+      display: block;
+      padding: 5px;
+      text-transform: uppercase;
+      font-weight: 600;
+      color: $gray-d3;
 
-		li {
-			float: left;
-		}
-	}
+      &:hover, &:active {
+        color: $blue;
+      }
 
-	.class {
-		@include clearfix;
-		height: 100%;
-		font-size: 12px;
-		color: rgb(163, 171, 184);
-		@include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .1));
-		background-color: rgb(47, 53, 63);
+      .label-prefix {
+        display: block;
+        @include font-size(11);
+        font-weight: 400;
+      }
 
-		a {
-			display: inline-block;
-			height: 20px;
-			padding: 5px 10px 6px;
-			color: rgb(163, 171, 184);			
-		}
+      .ss-icon {
+       
+      }
 
-		.home {
-			position: relative;
-			top: 1px;
-		}
+      &.is-selected {
+        color: $blue;
+      }
+    }
 
-		.log-out {
-			position: relative;
-			top: 3px;
-		}
-	}
+    // current state
+    &.is-current {
+
+      .title {
+        color: $blue;
+      }
+    }
+
+    // specific nav items
+    &.nav-course-courseware {
+    }
+
+    &.nav-course-settings {
+    }
+
+    &.nav-course-tools {
+    }
+  }
+}
+
+// account-based nav
+.nav-account {
+  float: right;
+  max-width: 300px;
+  min-width: 175px;
+  width: 20%;
+  margin-top: 10px;
+  @include font-size(14);
+  text-align: right;
+
+  .nav-account-username {
+    .ss-icon {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 3px;
+      @include font-size(12);
+    }
+
+    .account-username {
+      display: inline-block;
+      width: 80%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+// dropdown UI
+.nav-dropdown {
+
+  .nav-item {
+    position: relative;
+  }
+
+  .nav-sub {
+    @include border-radius(2px);
+    position: absolute;
+    top: 30px;
+    width: 125px;
+    border: 1px solid $gray-l2;
+    padding: ($baseline/4) ($baseline/2);
+    @include box-shadow(0 1px 5px 0 rgba(0,0,0, 0.1));
+    background: $white;
+
+    li {
+      margin: 0 0 ($baseline/4) 0;
+      border-bottom: 1px solid $gray-l5;
+      padding: 0 0($baseline/4) 0;
+      @include font-size(13);
+
+      &:last-child {
+        margin-bottom: 0;
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+
+      a {
+        display: block;
+      }
+    }
+
+    // arrows
+    &:after, &:before {
+
+    }
+
+    &:after {
+
+    }
+
+    &:before {
+
+    }
+  }
+
+  // vendor
+  .arrow_box {
+    position: relative;
+    background: #fff;
+    border: 1px solid #a1a1a1;
+  }
+  .arrow_box:after, .arrow_box:before {
+    bottom: 100%;
+    border: solid transparent;
+    content: " ";
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  .arrow_box:after {
+    border-color: rgba(255, 255, 255, 0);
+    border-bottom-color: #fff;
+    border-width: 10px;
+    left: 50%;
+    margin-left: -10px;
+  }
+  .arrow_box:before {
+    border-color: rgba(161, 161, 161, 0);
+    border-bottom-color: #a1a1a1;
+    border-width: 11px;
+    left: 50%;
+    margin-left: -11px;
+  }
+
+  // specific navs
+  &.nav-account {
+
+    .nav-sub {
+      right: 0;
+      text-align: left;
+    }
+  }
+
+  &.nav-course {
+
+    .nav-sub {
+      left: -5px;
+    }
+
+    .nav-course-courseware {
+
+      .nav-sub {
+        top: 50px;
+      }
+    }
+
+    .nav-course-settings {
+
+      .nav-sub {
+        top: 50px;
+      }
+    }
+
+    .nav-course-tools {
+
+      .nav-sub {
+      
+      }
+    }
+  }
+}
+
+// is-signed in
+.is-signedin {
+
+  &.course .branding {
+
+    &:before {
+      @extend .faded-vertical-divider;
+      content: "";
+      display: block;
+      height: 50px;
+      position: absolute;
+      right: 1px;
+      top: -8px;
+      width: 1px;
+    }
+
+    &:after {
+      @extend .faded-vertical-divider-light;
+      content: "";
+      display: block;
+      height: 50px;
+      position: absolute;
+      right: 0px;
+      top: -12px;
+      width: 1px;
+    }
+  }
+}
+
+// not signed in
+.not-signedin {
+
+  // unauthenticated nav
+  .nav-not-signedin {
+    float: right;
+    margin-top: ($baseline/4);
+
+    .nav-item {
+      @include font-size(16);
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 $baseline 0 0;
+      font-weight: 500;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .action {
+        margin-top: -($baseline/4);
+        display: inline-block;
+        padding: ($baseline/4) ($baseline/2);
+      }
+    }
+
+    // specific items
+    .nav-not-signedin-help {
+
+    }
+
+    .nav-not-signedin-signup {
+      margin-right: ($baseline/2);
+
+      .action-signup {
+        @include blue-button;
+        @include transition(all .15s);
+        @include font-size(14);
+        padding: ($baseline/4) ($baseline/2);
+        text-transform: uppercase;
+        font-weight: 600 !important;
+      }
+    }
+
+    .nav-not-signedin-signin {
+
+      .action-signin {
+        @include white-button;
+        @include transition(all .15s);
+        @include font-size(14);
+        padding: ($baseline/4) ($baseline/2);
+        text-transform: uppercase;
+        font-weight: 600 !important;
+      }
+    }
+  }
+}
+
+
+// active/current nav states
+body.howitworks .nav-not-signedin-hiw,
+body.signin .nav-not-signedin-signin,
+body.signup .nav-not-signedin-signup,
+body.course.outline .nav-course-courseware
+{
+
+  a {
+    color: $blue;
+  }
+}
+
+// js enabled 
+.js {
+
+  .nav-dropdown {
+
+    .nav-item .title {
+      cursor: pointer;
+    }
+  }
+
+  .nav-sub {
+    @include transition (opacity 1.0s ease-in-out 0s);
+    opacity: 0;
+    pointer-events: none;
+
+    &.is-shown {
+      opacity: 1.0;
+      pointer-events: auto;
+    }
+  }
 }
\ No newline at end of file
diff --git a/cms/static/sass/_index.scss b/cms/static/sass/_index.scss
index a3e210b558..5d27809094 100644
--- a/cms/static/sass/_index.scss
+++ b/cms/static/sass/_index.scss
@@ -1,79 +1,409 @@
-body.index {
-  > header {
-    display: none;
-  }
+// how it works/not signed in index
+.index {
 
-  > h1 {
-    font-weight: 300;
-    color: lighten($dark-blue, 40%);
-    text-shadow: 0 1px 0 #fff;
-    -webkit-font-smoothing: antialiased;
-    max-width: 600px;
-    text-align: center;
-    margin: 80px auto 30px;
-  }
+  &.not-signedin {
 
-  section.main-container {
-    border-right: 3px;
-    background: #FFF;
-    max-width: 600px;
-    margin: 0 auto;
-    display: block;
-    @include box-sizing(border-box);
-    border: 1px solid lighten( $dark-blue , 30% );
-    @include border-radius(3px);
-    overflow: hidden;
-    @include bounce-in-animation(.8s);
+    .wrapper-header {
+      margin-bottom: 0;
+    }
 
-    header {
-      border-bottom: 1px solid lighten($dark-blue, 50%);
-      @include linear-gradient(#fff, lighten($dark-blue, 62%));
-      @include clearfix();
-      @include box-shadow( 0 2px 0 $light-blue, inset 0 -1px 0 #fff);
-      text-shadow: 0 1px 0 #fff;
+    .wrapper-footer {
+      margin: 0;
+      border-top: 2px solid $gray-l3;
 
-      h1 {
-        font-size: 14px;
-        padding: 8px 20px;
-        float: left;
-        color: $dark-blue;
-        margin: 0;
-      }
-
-      a {
-        float: right;
-        padding: 8px 20px;
-        border-left: 1px solid lighten($dark-blue, 50%);
-        @include box-shadow( inset -1px 0 0 #fff);
-        font-weight: bold;
-        font-size: 22px;
-        line-height: 1;
-        color: $dark-blue;
+      footer.primary {
+        border: none;
+        margin-top: 0;
+        padding-top: 0;
       }
     }
 
-    ol {
-      list-style: none;
+    .wrapper-content-header, .wrapper-content-features, .wrapper-content-cta {
+      @include box-sizing(border-box);
       margin: 0;
-      padding: 0;
+      padding: 0 $baseline;
+      position: relative;
+      width: 100%;
+    }
 
-      li {
-        border-bottom: 1px solid lighten($dark-blue, 50%);
+    .content {
+      @include clearfix();
+      @include font-size(16);
+      max-width: $fg-max-width;
+      min-width: $fg-min-width;
+      width: flex-grid(12);
+      margin: 0 auto;
+      color: $gray-d2;
+    
+      header {
 
-        a {
-          display: block;
-          padding: 10px 20px;
+      }
 
-          &:hover {
-            color: $dark-blue;
-            background: lighten($yellow, 10%);
-            text-shadow: 0 1px 0 #fff;
+      h1, h2, h3, h4, h5, h6 {
+        color: $gray-d3;
+      }
+
+      h2 {
+
+      }
+
+      h3 {
+
+      }
+
+      h4 {
+
+      }
+    }
+
+    // welcome content
+    .wrapper-content-header {
+      padding-bottom: ($baseline*4);
+      padding-top: ($baseline*4);
+      background: $blue;
+    }
+
+    .content-header {
+      position: relative;
+      text-align: center;
+      color: $white;
+
+      h1 {
+        @include font-size(52);
+        float: none;
+        margin: 0 0 ($baseline/2) 0;
+        border-bottom: 1px solid $blue-l1;
+        padding: 0;
+        font-weight: 500;
+        color: $white;
+      }
+
+      .logo {
+        @include text-hide();
+        position: relative;
+        top: 3px;
+        display: inline-block;
+        vertical-align: baseline;
+        width: 282px;
+        height: 57px;
+        background: transparent url('../img/logo-edx-studio-white.png') 0 0 no-repeat;
+      }
+
+      .tagline {
+        @include font-size(24);
+        margin: 0;
+        color: $blue-l3;
+      }
+    }
+
+    .arrow_box {
+      position: relative;
+      background: #fff;
+      border: 4px solid #000;
+    }
+    .arrow_box:after, .arrow_box:before {
+      top: 100%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    .arrow_box:after {
+      border-color: rgba(255, 255, 255, 0);
+      border-top-color: #fff;
+      border-width: 30px;
+      left: 50%;
+      margin-left: -30px;
+    }
+    .arrow_box:before {
+      border-color: rgba(0, 0, 0, 0);
+      border-top-color: #000;
+      border-width: 36px;
+      left: 50%;
+      margin-left: -36px;
+    }
+
+    // feature content
+    .wrapper-content-features {
+      @include box-shadow(0 -1px ($baseline/4) $shadow);
+      padding-bottom: ($baseline*2);
+      padding-top: ($baseline*3);
+      background: $white;
+    }
+
+    .content-features {
+
+      .list-features {
+
+      }
+
+      // indiv features
+      .feature {
+        @include clearfix();
+        margin: 0 0 ($baseline*2) 0;
+        border-bottom: 1px solid $gray-l4;
+        padding: 0 0 ($baseline*2) 0;
+
+        .img {
+          @include box-sizing(border-box);
+          float: left;
+          width: flex-grid(3, 12);
+          margin-right: flex-gutter();
+
+          a {
+            @include box-sizing(border-box);
+            @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+            position: relative;
+            top: 0;
+            display: block;
+            overflow: hidden;
+            border: 1px solid $gray-l3;
+            padding: ($baseline/4);
+            background: $white;
+
+            .action-zoom {
+              @include transition(bottom .50s ease-in-out);
+              position: absolute;
+              bottom: -30px;
+              right: ($baseline/2);
+              opacity: 0;
+
+              .ss-icon {
+                @include font-size(18);
+                @include border-top-radius(3px);
+                display: inline-block;
+                padding: ($baseline/4) ($baseline/2);
+                background: $blue;
+                color: $white;
+                text-align: center;
+              }
+            }
+
+            &:hover {
+              border-color: $blue;
+
+              .action-zoom {
+                opacity: 1.0;
+                bottom: -2px;
+              }
+            }
+          }
+
+          img {
+            display: block;
+            width: 100%;
+            height: 100%;
           }
         }
 
-        &:last-child {
-          border-bottom: none;
+        .copy {
+          float: left;
+          width: flex-grid(9, 12);
+          margin-top: -($baseline/4);
+
+          h3 {
+            margin: 0 0 ($baseline/2) 0;
+            @include font-size(24);
+            font-weight: 600;
+          }
+
+          > p {
+            @include font-size(18);
+            color: $gray-d1;
+          }
+
+          strong {
+            color: $pink-l1;
+            font-weight: 500;
+          }
+
+          .list-proofpoints {
+            @include clearfix();
+            @include font-size(14);
+            width: flex-grid(9, 9);
+            margin: ($baseline*1.5) 0 0 0;
+
+            .proofpoint {
+              @include box-sizing(border-box);
+              @include border-radius(($baseline/4));
+              @include transition(color .50s ease-in-out);
+              position: relative;
+              top: 0;
+              float: left;
+              width: flex-grid(3, 9);
+              min-height: ($baseline*8);
+              margin-right: flex-gutter();
+              padding: ($baseline*0.75) $baseline;
+              color: $gray-l1;
+              cursor: pointer;
+
+              .title {
+                @include font-size(16);
+                margin: 0 0 ($baseline/4) 0;
+                font-weight: 500;
+                color: $gray-d3;
+              }
+
+              &:hover {
+                @include box-shadow(0 1px ($baseline/10) $shadow-l1);
+                background: $blue-l5;
+                top: -($baseline/5);
+
+                .title, strong {
+                  color: $blue;
+                }
+              }
+
+              &:last-child {
+                margin-right: 0;
+              }
+            }
+          }
         }
+
+
+        &:last-child {
+          margin-bottom: 0;
+          border: none;
+          padding-bottom: 0;
+        }
+
+        &:nth-child(even) {
+
+          .img {
+            float: right;
+            margin-right: 0;
+            margin-left: flex-gutter();
+          }
+
+          .copy {
+            float: right;
+            text-align: right;
+          }
+
+          .list-proofpoints {
+
+            .proofpoint {
+              float: right;
+              width: flex-grid(3, 9);
+              margin-left: flex-gutter();
+              margin-right: 0;
+
+              &:last-child {
+                margin-left: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // call to action content
+    .wrapper-content-cta {
+      padding-bottom: ($baseline*2);
+      padding-top: ($baseline*2);
+      background: $white;
+    }
+
+    .content-cta {
+      border-top: 1px solid $gray-l4;
+
+
+      .list-actions {
+        position: relative;
+        margin-top: -($baseline*1.5);
+
+        li {
+          width: flex-grid(6, 12); 
+          margin: 0 auto;
+        }
+
+        .action {
+          display: block;
+          width: 100%;
+          text-align: center;
+        }
+
+        .action-primary {
+          @include blue-button;
+          @include transition(all .15s);
+          @include font-size(18);
+          padding: ($baseline*0.75) ($baseline/2);
+          font-weight: 600;
+          text-align: center;
+          text-transform: uppercase;
+        }
+
+        .action-secondary {
+          @include font-size(14);
+          margin-top: ($baseline/2);
+        }
+      }
+    }
+  }
+
+  // js dependant
+  &.js {
+
+    .content-modal {
+      @include border-bottom-radius(2px);
+      @include box-sizing(border-box);
+      @include box-shadow(0 2px 4px $shadow-d1);
+      position: relative;
+      display: none;
+      width: 700px;
+      overflow: hidden;
+      border: 1px solid $gray-d1;
+      padding: ($baseline);
+      background: $white;
+
+      .action-modal-close {
+        @include transition(top .25s ease-in-out);
+        @include border-bottom-radius(3px);
+        position: absolute;
+        top: -3px;
+        right: $baseline;
+        padding: ($baseline/4) ($baseline/2) 0 ($baseline/2);
+        background: $gray-l3;
+        text-align: center;
+
+        .label {
+          @include text-sr();
+        }
+
+        .ss-icon {
+          @include font-size(18);
+          color: $white;
+        }
+
+        &:hover {
+          background: $blue;
+          top: 0;
+        }
+      }
+
+      img {
+        @include box-sizing(border-box);
+        width: 100%;
+        overflow-y: scroll;
+        padding: ($baseline/10);
+        border: 1px solid $gray-l4;
+      }
+
+      .title {
+        @include font-size(18);
+        margin: 0 0 ($baseline/2) 0;
+        font-weight: 600;
+        color: $gray-d3;
+      }
+
+      .description {
+        @include font-size(13);
+        margin-top: ($baseline/2);
+        color: $gray-l1;
       }
     }
   }
diff --git a/cms/static/sass/_modal.scss b/cms/static/sass/_modal.scss
index 854d1e1045..f9fbf81a8f 100644
--- a/cms/static/sass/_modal.scss
+++ b/cms/static/sass/_modal.scss
@@ -54,4 +54,16 @@
 		@include white-button;
 		margin-top: 13px;
 	}
+}
+
+// lean modal alternative
+#lean_overlay {
+	position: fixed;
+	z-index: 10000;
+	top: 0px;
+	left: 0px;
+	display: none;
+	height: 100%;
+	width: 100%;
+	background: $black;
 }
\ No newline at end of file
diff --git a/cms/static/sass/_subsection.scss b/cms/static/sass/_subsection.scss
index 32c983ee3a..a39c0d757a 100644
--- a/cms/static/sass/_subsection.scss
+++ b/cms/static/sass/_subsection.scss
@@ -1,3 +1,11 @@
+.subsection .main-wrapper {
+  margin: 40px;
+}
+
+.subsection .inner-wrapper {
+  @include clearfix();
+}
+
 .subsection-body {
 	padding: 32px 40px;
 	@include clearfix;
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index bdc76c811c..66a0dfaaa8 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -1,5 +1,5 @@
-.unit .main-wrapper,
-.subsection .main-wrapper {
+.unit .main-wrapper {
+  @include clearfix();
   margin: 40px;
 }
 
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index a783abeaeb..4d8e26b2f9 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -1,25 +1,85 @@
-$gw-column: 80px;
-$gw-gutter: 20px;
+$baseline: 20px;
 
+// grid
+$gw-column: ($baseline*3);
+$gw-gutter: $baseline;
 $fg-column: $gw-column;
 $fg-gutter: $gw-gutter;
 $fg-max-columns: 12;
-$fg-max-width: 1400px;
-$fg-min-width: 810px;
+$fg-max-width: 1280px;
+$fg-min-width: 900px;
 
+// type
 $sans-serif: 'Open Sans', $verdana;
 $body-line-height: golden-ratio(.875em, 1);
-
-$white: rgb(255,255,255);
-$black: rgb(0,0,0);
-$pink: rgb(182,37,104);
 $error-red: rgb(253, 87, 87);
 
-$baseFontColor: #3c3c3c;
-$offBlack: #3c3c3c;
+// colors - new for re-org
 $black: rgb(0,0,0);
 $white: rgb(255,255,255);
-$blue: #5597dd;
+
+$gray: rgb(127,127,127);
+$gray-l1: tint($gray,20%);
+$gray-l2: tint($gray,40%);
+$gray-l3: tint($gray,60%);
+$gray-l4: tint($gray,80%);
+$gray-l5: tint($gray,90%);
+$gray-d1: shade($gray,20%);
+$gray-d2: shade($gray,40%);
+$gray-d3: shade($gray,60%);
+$gray-d4: shade($gray,80%);
+
+$blue: rgb(85, 151, 221);
+$blue-l1: tint($blue,20%);
+$blue-l2: tint($blue,40%);
+$blue-l3: tint($blue,60%);
+$blue-l4: tint($blue,80%);
+$blue-l5: tint($blue,90%);
+$blue-d1: shade($blue,20%);
+$blue-d2: shade($blue,40%);
+$blue-d3: shade($blue,60%);
+$blue-d4: shade($blue,80%);
+
+$pink: rgb(183, 37, 103);
+$pink-l1: tint($pink,20%);
+$pink-l2: tint($pink,40%);
+$pink-l3: tint($pink,60%);
+$pink-l4: tint($pink,80%);
+$pink-l5: tint($pink,90%);
+$pink-d1: shade($pink,20%);
+$pink-d2: shade($pink,40%);
+$pink-d3: shade($pink,60%);
+$pink-d4: shade($pink,80%);
+
+$green: rgb(37, 184, 90);
+$green-l1: tint($green,20%);
+$green-l2: tint($green,40%);
+$green-l3: tint($green,60%);
+$green-l4: tint($green,80%);
+$green-l5: tint($green,90%);
+$green-d1: shade($green,20%);
+$green-d2: shade($green,40%);
+$green-d3: shade($green,60%);
+$green-d4: shade($green,80%);
+
+$yellow: rgb(231, 214, 143);
+$yellow-l1: tint($yellow,20%);
+$yellow-l2: tint($yellow,40%);
+$yellow-l3: tint($yellow,60%);
+$yellow-l4: tint($yellow,80%);
+$yellow-l5: tint($yellow,90%);
+$yellow-d1: shade($yellow,20%);
+$yellow-d2: shade($yellow,40%);
+$yellow-d3: shade($yellow,60%);
+$yellow-d4: shade($yellow,80%);
+
+$shadow: rgba(0,0,0,0.2);
+$shadow-l1: rgba(0,0,0,0.1);
+$shadow-d1: rgba(0,0,0,0.4);
+
+// colors - inherited 
+$baseFontColor: #3c3c3c;
+$offBlack: #3c3c3c;
 $orange: #edbd3c;
 $red: #b20610;
 $green: #108614;
@@ -34,4 +94,4 @@ $brightGreen: rgb(22, 202, 87);
 $disabledGreen: rgb(124, 206, 153);
 $darkGreen: rgb(52, 133, 76);
 $lightBluishGrey: rgb(197, 207, 223);
-$lightBluishGrey2: rgb(213, 220, 228);
+$lightBluishGrey2: rgb(213, 220, 228);
\ No newline at end of file
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index e3463477c1..dceac4233d 100644
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -1,4 +1,5 @@
 @import 'bourbon/bourbon';
+@import 'bourbon/addons/button';
 @import 'vendor/normalize';
 @import 'keyframes';
 
@@ -8,8 +9,10 @@
 @import "fonts";
 @import "variables";
 @import "cms_mixins";
+@import "extends";
 @import "base";
 @import "header";
+@import "footer";
 @import "dashboard";
 @import "courseware";
 @import "subsection";
@@ -26,6 +29,8 @@
 @import "modal";
 @import "alerts";
 @import "login";
+@import "account";
+@import "index";
 @import 'jquery-ui-calendar';
 
 @import 'content-types';
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 84f10fc2d1..dd32286544 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -5,23 +5,22 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <title><%block name="title"></%block></title>
+
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <meta name="path_prefix" content="${MITX_ROOT_URL}">
 
     <%static:css group='base-style'/>
     <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/skins/simple/style.css')}" />
     <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/markitup/sets/wiki/style.css')}" />
-    <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
     <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-symbolicons-block.css')}" />
+    <link rel="stylesheet" type="text/css" href="${static.url('css/vendor/symbolset.ss-standard.css')}" />
    
-    <title><%block name="title"></%block></title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-
-    <meta name="path_prefix" content="${MITX_ROOT_URL}">
-
     <%block name="header_extras"></%block>
   </head>
 
   <body class="<%block name='bodyclass'></%block> hide-wip">
-    <%include file="widgets/header.html" args="active_tab=active_tab"/>
+    <%include file="widgets/header.html" />
     <%include file="courseware_vendor_js.html"/>
 
     <script type="text/javascript" src="${static.url('js/vendor/json2.js')}"></script>
@@ -47,9 +46,9 @@
     </script>
 
     <%block name="content"></%block>
+    <%include file="widgets/footer.html" />
 
     <%block name="jsextra"></%block>
-
   </body>
 </html>
 
diff --git a/cms/templates/course_index.html b/cms/templates/course_index.html
index e490ad7817..a07801296f 100644
--- a/cms/templates/course_index.html
+++ b/cms/templates/course_index.html
@@ -1,5 +1,6 @@
 <%inherit file="base.html" />
 <%block name="title">Course Manager</%block>
+
 <%include file="widgets/header.html"/>
 
 <%block name="content">
diff --git a/cms/templates/course_info.html b/cms/templates/course_info.html
index 83d829efa0..26b268e343 100644
--- a/cms/templates/course_info.html
+++ b/cms/templates/course_info.html
@@ -3,7 +3,8 @@
 
 <!-- TODO decode course # from context_course into title -->
 <%block name="title">Course Info</%block>
-<%block name="bodyclass">course-info</%block>
+<%block name="bodyclass">is-signedin course course-info updates</%block>
+
 
 <%block name="jsextra">
   <script type="text/javascript" src="${static.url('js/template_loader.js')}"></script>
diff --git a/cms/templates/edit-static-page.html b/cms/templates/edit-static-page.html
index 02fe2308fa..368c4576b0 100644
--- a/cms/templates/edit-static-page.html
+++ b/cms/templates/edit-static-page.html
@@ -1,7 +1,7 @@
 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">Edit Static Page</%block>
-<%block name="bodyclass">edit-static-page</%block>
+<%block name="bodyclass">is-signedin course pages edit-static-page</%block>
 
 <%block name="content">
 <div class="main-wrapper">
diff --git a/cms/templates/edit-tabs.html b/cms/templates/edit-tabs.html
index c6ffb14124..701d482e19 100644
--- a/cms/templates/edit-tabs.html
+++ b/cms/templates/edit-tabs.html
@@ -1,7 +1,7 @@
 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">Tabs</%block>
-<%block name="bodyclass">static-pages</%block>
+<%block name="bodyclass">is-signedin course pages static-pages</%block>
 
 <%block name="jsextra">
   <script type='text/javascript'>
diff --git a/cms/templates/edit_subsection.html b/cms/templates/edit_subsection.html
index de5e14e0a9..7d20d449ff 100644
--- a/cms/templates/edit_subsection.html
+++ b/cms/templates/edit_subsection.html
@@ -7,8 +7,9 @@
 %>
 
 <%! from django.core.urlresolvers import reverse %>
-<%block name="bodyclass">subsection</%block>
 <%block name="title">CMS Subsection</%block>
+<%block name="bodyclass">is-signedin course subsection</%block>
+
 
 <%namespace name="units" file="widgets/units.html" />
 <%namespace name='static' file='static_content.html'/>
@@ -97,6 +98,7 @@
     </div>
   </div>
 </div>
+</div>
 </%block>
 
 <%block name="jsextra">
diff --git a/cms/templates/export.html b/cms/templates/export.html
index fcdd26458a..37210934f6 100644
--- a/cms/templates/export.html
+++ b/cms/templates/export.html
@@ -3,7 +3,7 @@
 
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">Export</%block>
-<%block name="bodyclass">export</%block>
+<%block name="bodyclass">is-signedin course export</%block>
 
 <%block name="content">
 <div class="main-wrapper">
diff --git a/cms/templates/howitworks.html b/cms/templates/howitworks.html
new file mode 100644
index 0000000000..b4812e99e6
--- /dev/null
+++ b/cms/templates/howitworks.html
@@ -0,0 +1,199 @@
+<%inherit file="base.html" />
+<%! from django.core.urlresolvers import reverse %>
+
+<%block name="title">Welcome to edX Studio</%block>
+<%block name="bodyclass">not-signedin index howitworks</%block>
+
+<%block name="content">
+
+<div class="wrapper-content-header wrapper">
+  <section class="content content-header">
+    <header>
+      <h1>Welcome to <span class="logo">edX Studio</span></h1>
+      <p class="tagline">Studio helps manage your courses online, so you can focus on teaching them</p>
+    </header>
+  </section>
+</div>
+
+<div class="wrapper-content-features wrapper">
+  <section class="content content-features">
+    <header>
+      <h2 class="sr">Studio's Many Features</h2>
+    </header>
+
+    <ol class="list-features">
+      <li class="feature">
+        <figure class="img zoom">
+          <a rel="modal" href="#hiw-feature1">
+            <img src="/static/img/thumb-hiw-feature1.png" alt="Studio Helps You Keep Your Courses Organized" />
+            <figcaption class="sr">Studio Helps You Keep Your Courses Organized</figcaption>
+            <span class="action-zoom">
+              <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
+            </span>
+          </a>
+        </figure>
+
+        <div class="copy">
+          <h3>Keeping Your Course Organized</h3>
+          <p>The backbone of your course is how it is organized. Studio offers an <strong>Outline</strong> editor, providing a simple hierarchy and easy drag and drop to help you and your students stay organized.</p>
+
+          <ul class="list-proofpoints">
+            <li class="proofpoint">
+              <h4 class="title">Simple Organization For Content</h4>
+              <p>Studio uses <strong>Sections</strong> and <strong>Learning Sequences</strong> to organize your content into a simple hierarchy.</p>
+            </li>
+
+            <li class="proofpoint">
+              <h4 class="title">Change Your Mind Anytime</h4>
+              <p>Draft your outline and build content anywhere. Simple drag and drop tools let your reorganize quickly.</p>
+            </li>
+
+            <li class="proofpoint">
+              <h4 class="title">Go A Week Or A Semester At A Time</h4>
+              <p>Build and release <strong>Sections</strong> to your students incrementally. You don't have to have it all done at once.</p>
+            </li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="feature">
+        <figure class="img zoom">
+        <a rel="modal" href="#hiw-feature2">
+          <img src="/static/img/thumb-hiw-feature2.png" alt="Studio Keeps Your Learning Sequences and Lectures, Together" />
+          <figcaption class="sr">Studio Keeps Your Learning Sequences and Lectures, Together</figcaption>
+          <span class="action-zoom">
+            <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
+          </span>
+        </a>
+        </figure>
+
+        <div class="copy">
+          <h3>Learning Sequences: Lectures and Exercises, Together </h3>
+          <p>The heart of the student experience is being immersed in <strong>Learning Sequences</strong> &mdash; short video lectures interleaved with exercises. Studio allows you to insert videos and author a wide variety of exercise types with just a few clicks. </p>
+
+          <ul class="list-proofpoints">
+            <li class="proofpoint">
+              <h4 class="title">Create Learning Pathways</h4>
+              <p>Help your students understand a small interactive piece at a time. <strong>Learning Sequences</strong> are built from <strong>Learning Units</strong>.</p>
+            </li>
+
+            <li class="proofpoint">
+              <h4 class="title">Work Visually, Organize Quickly</h4>
+              <p>Work visually and see exactly what your students will see. Reorganize your <strong>Learning Units</strong> with drag and drop.</p>
+            </li>
+
+            <li class="proofpoint">
+              <h4 class="title">A Broad Library of Problem Types</h4>
+              <p>It's more than just multiple choice. Studio has nearly a dozen types of problems to challenge your learners.</p>
+            </li>
+          </ul>
+        </div>
+      </li>
+
+      <li class="feature">
+        <figure class="img zoom">
+          <a rel="modal" href="#hiw-feature3">
+            <img src="/static/img/thumb-hiw-feature3.png" alt="Studio Gives You Simple, Fast, and Incremental Publishing. With Friends." />
+            <figcaption class="sr">Studio Gives You Simple, Fast, and Incremental Publishing. With Friends.</figcaption>
+            <span class="action-zoom">
+              <i class="ss-icon ss-symbolicons-block">&#xE002;</i>
+            </span>
+          </a>
+        </figure>
+
+        <div class="copy">
+          <h3>Simple, Fast, and Incremental Publishing. With Friends.</h3>
+          <p>Studio works like web applications you already know, yet understands how you build curriculum. Instant publishing to the web when you want it, incremental release when it makes sense. And with co-authors, you can have a whole team building a course, together.</p>
+
+          <ul class="list-proofpoints">
+            <li class="proofpoint">
+              <h4 class="title">Instant Changes</h4>
+              <p>Caught a bug? No problem. When you want, your changes to live when you hit Save.</p>
+            </li>
+
+            <li class="proofpoint">
+              <h4 class="title">Release-On Date Publishing</h4>
+              <p>When you've finished a <strong>Section</strong>, pick when you want it to go live and Studio takes care of the rest. Build your course incrementally.</p>
+            </li>
+
+            <li class="proofpoint">
+              <h4 class="title">Work in Teams</h4>
+              <p>Co-authors have full access to all the same authoring tools. Make your course better through a team effort.</p>
+            </li>
+          </ul>
+        </div>
+      </li>
+    </ol>
+  </section>
+</div>
+
+<div class="wrapper-content-cta wrapper">
+  <section class="content content-cta">
+    <header>
+      <h2 class="sr">Sign Up for Studio Today!</h2>
+    </header>
+    
+    <ul class="list-actions">
+      <li>
+        <a href="${reverse('signup')}" class="action action-primary">Sign Up &amp; Start Making an edX Course</a>
+      </li>
+      <li>
+        <a href="${reverse('login')}" class="action action-secondary">Already have a Studio Account? Sign In</a>
+      </li>
+    </ul>
+  </section>
+</div>
+
+<div class="content-modal" id="hiw-feature1">
+  <h3 class="title">Outlining Your Course</h3>
+  <figure>
+    <img src="/static/img/hiw-feature1.png" alt="" />
+    <figcaption class="description">Simple two-level outline to organize your couse. Drag and drop, and see your course at a glance.</figcaption>
+  </figure>
+
+  <a href="#" rel="view" class="action action-modal-close">
+    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <span class="label">close modal</span>
+  </a>
+</div>
+
+<div class="content-modal" id="hiw-feature2">
+  <h3 class="title">Editing a Learning Sequence</h3>
+  <figure>
+    <img src="/static/img/hiw-feature2.png" alt="" />
+    <figcaption class="description">Quickly create videos, text snippets, inline discussions, and a variety of problem types.</figcaption>
+  </figure>
+
+  <a href="#" rel="view" class="action action-modal-close">
+    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <span class="label">close modal</span>
+  </a>
+</div>
+
+<div class="content-modal" id="hiw-feature3">
+  <h3 class="title">Publishing on Date</h3>
+  <figure>
+    <img src="/static/img/hiw-feature3.png" alt="" />
+    <figcaption class="description">Simply set the date on a Section or Learning Sequence, and Studio will publish it to your students for you.</figcaption>
+  </figure>
+
+  <a href="#" rel="view" class="action action-modal-close">
+    <i class="ss-icon ss-symbolicons-block">&#x2421;</i>
+    <span class="label">close modal</span>
+  </a>
+</div>
+</%block>
+
+<%block name="jsextra">
+  <script type="text/javascript">
+    (function() {
+
+      // lean modal window
+      $('a[rel*=modal]').leanModal({overlay : 0.50, closeButton: '.action-modal-close' });
+      $('a.action-modal-close').click(function(e){
+        (e).preventDefault();
+      });
+
+    })(this)
+  </script>
+</%block>
\ No newline at end of file
diff --git a/cms/templates/import.html b/cms/templates/import.html
index e4f8019714..17df308d3b 100644
--- a/cms/templates/import.html
+++ b/cms/templates/import.html
@@ -3,7 +3,7 @@
 
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">Import</%block>
-<%block name="bodyclass">import</%block>
+<%block name="bodyclass">is-signedin course import</%block>
 
 <%block name="content">
 <div class="main-wrapper">
diff --git a/cms/templates/index.html b/cms/templates/index.html
index 92987babda..1172078893 100644
--- a/cms/templates/index.html
+++ b/cms/templates/index.html
@@ -1,6 +1,7 @@
 <%inherit file="base.html" />
-<%block name="bodyclass">index</%block>
+
 <%block name="title">Courses</%block>
+<%block name="bodyclass">is-signedin index dashboard</%block>
 
 <%block name="header_extras">
   <script type="text/template" id="new-course-template">
@@ -32,33 +33,33 @@
 </%block>
 
 <%block name="content">
-	<div class="main-wrapper">
-		<div class="inner-wrapper">
-			<h1>My Courses</h1>
-			<article class="my-classes">
-				% if user.is_active:
-				<a href="#" class="new-button new-course-button"><span class="plus-icon white"></span> New Course</a>
-				<ul class="class-list">
-					%for course, url in courses:
-			    <li>
-						<a href="${url}" class="class-name">
-							<span class="class-name">${course}</span>
-							<!--
-							<span class="detail">Started: 9/21/2012</span>
-							<span class="detail">Ends: 10/21/2012</span>
-							-->
-						</a>
-					</li>
-			    	%endfor
-				</ul>
-				% else:
-					<div class='warn-msg'>
-						<p>
-						In order to start authoring courses using edX studio, please click on the activation link in your email.
-						</p>
-					</div>
-				% endif
-			</article>
-		</div>
-	</div>
-</%block>
+  <div class="main-wrapper">
+    <div class="inner-wrapper">
+      <h1>My Courses</h1>
+      <article class="my-classes">
+        % if user.is_active:
+        <a href="#" class="new-button new-course-button"><span class="plus-icon white"></span> New Course</a>
+        <ul class="class-list">
+          %for course, url in courses:
+          <li>
+            <a href="${url}" class="class-name">
+              <span class="class-name">${course}</span>
+              <!--
+              <span class="detail">Started: 9/21/2012</span>
+              <span class="detail">Ends: 10/21/2012</span>
+              -->
+            </a>
+          </li>
+            %endfor
+        </ul>
+        % else:
+          <div class='warn-msg'>
+            <p>
+            In order to start authoring courses using edX studio, please click on the activation link in your email.
+            </p>
+          </div>
+        % endif
+      </article>
+    </div>
+  </div>
+</%block>
\ No newline at end of file
diff --git a/cms/templates/login.html b/cms/templates/login.html
index 580dd90309..079e6cb344 100644
--- a/cms/templates/login.html
+++ b/cms/templates/login.html
@@ -1,33 +1,59 @@
 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
-<%block name="title">Log in</%block>
-<%block name="bodyclass">no-header</%block>
+<%block name="title">Sign in</%block>
+<%block name="bodyclass">not-signedin signin</%block>
 
 <%block name="content">
 
-  <div class="edx-studio-logo-large"></div>
-
-  <article class="log-in-box">
+<div class="wrapper-content wrapper">
+  <section class="content">
     <header>
-      <h1>Log in to edX studio</h1>
+      <h1>Sign into edX Studio</h1>
+      <a href="" class="action action-signin">Don't have a Studio Account? Sign up!</a>
     </header>
-    <form class="log-in-form" id="login_form" action="login_post" method="post">
-      <div class="row">
-        <label>Email</label>
-        <input name="email" type="email" class="email-field" tabindex="1">
-      </div>
-      <div class="row">
-        <label>Password <a href="${forgot_password_link}" class="forgot-button">Forgot password?</a></label>
-        <input name="password" type="password" class="password-field" tabindex="2">
-      </div>
-      <div class="row form-actions">
-        <input name="submit" type="submit" value="Log In" class="log-in-button" tabindex="3">
-        <span class="or">or</span>
-        <a href="${reverse('signup')}" class="sign-up-button" tabindex="4">Sign up</a>
-      </div>
-    </form>
-  </article>
 
+    <article class="content-primary" role="main">
+      <form id="login_form" method="post" action="login_post">
+        
+        <fieldset>
+          <legend class="sr">Required Information to Sign into edX Studio</legend>
+          
+          <ol class="list-input">
+            <li class="field text required" id="field-email">
+              <label for="email">Email Address</label>
+              <input id="email" type="email" name="email" placeholder="e.g. jane.doe@gmail.com" />              
+            </li>
+
+            <li class="field text required" id="field-password">
+              <a href="${forgot_password_link}" class="action action-forgotpassword" tabindex="-1">Forgot password?</a>
+              <label for="password">Password</label>
+              <input id="password" type="password" name="password" />              
+            </li>
+          </ol>
+        </fieldset>
+
+        <div class="form-actions">
+          <button type="submit" id="submit" name="submit" class="action action-primary">Sign into edX Studio</button>
+        </div>
+
+        <!-- no honor code for CMS, but need it because we're using the lms student object -->
+        <input name="honor_code" type="checkbox" value="true" checked="true" hidden="true">
+      </form>
+    </article>
+
+    <aside class="content-supplementary" role="complimentary">
+      <h2 class="sr">Studio Support</h2>
+
+      <div class="bit">
+        <h3>Need Help?</h3>
+        <p>Having trouble with your account? Use <a href="" rel="external">our support center</a> to look over self help steps, find solutions others have found to the same problem, or let us know of your issue.</p>
+      </div>
+    </aside>
+  </section>
+</div>
+</%block>
+
+<%block name="jsextra">
 <script type="text/javascript">
 (function() {
   function getCookie(name) {
@@ -53,10 +79,10 @@
         if(json.success) {
           location.href = "${reverse('index')}";
         } else if($('#login_error').length == 0) {
-          $('#login_form').prepend('<div id="login_error">' + json.value + '</div>');
-          $('#login_error').slideDown(150);
+          $('#login_form').prepend('<div id="login_error" class="message message-status error">' + json.value + '</span></div>');
+          $('#login_error').addClass('is-shown');
         } else {
-          $('#login_error').stop().slideDown(150);
+          $('#login_error').stop().addClass('is-shown');
           $('#login_error').html(json.value);
         }
       }
@@ -64,5 +90,4 @@
   });
 })(this)
 </script>
-      
-</%block>
+</%block>
\ No newline at end of file
diff --git a/cms/templates/manage_users.html b/cms/templates/manage_users.html
index 36930f5386..3af4a80623 100644
--- a/cms/templates/manage_users.html
+++ b/cms/templates/manage_users.html
@@ -1,6 +1,7 @@
 <%inherit file="base.html" />
 <%block name="title">Course Staff Manager</%block>
-<%block name="bodyclass">users</%block>
+<%block name="bodyclass">is-signedin course users team</%block>
+
 
 <%block name="content">
 <div class="main-wrapper">
diff --git a/cms/templates/overview.html b/cms/templates/overview.html
index 20ddcead01..f0a32bfda4 100644
--- a/cms/templates/overview.html
+++ b/cms/templates/overview.html
@@ -7,6 +7,7 @@
 %>
 <%! from django.core.urlresolvers import reverse %>
 <%block name="title">CMS Courseware Overview</%block>
+<%block name="bodyclass">is-signedin course outline</%block>
 
 <%namespace name='static' file='static_content.html'/>
 <%namespace name="units" file="widgets/units.html" />
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index 8cd4246da9..9c204b750e 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -1,6 +1,7 @@
 <%inherit file="base.html" />
-<%block name="bodyclass">settings</%block>
 <%block name="title">Settings</%block>
+<%block name="bodyclass">is-signedin course settings</%block>
+
 
 <%namespace name='static' file='static_content.html'/>
 <%!
diff --git a/cms/templates/signup.html b/cms/templates/signup.html
index 2c60b758e6..caade2efd8 100644
--- a/cms/templates/signup.html
+++ b/cms/templates/signup.html
@@ -2,93 +2,140 @@
 <%! from django.core.urlresolvers import reverse %>
 
 <%block name="title">Sign up</%block>
-<%block name="bodyclass">no-header</%block>
+<%block name="bodyclass">not-signedin signup</%block>
 
 <%block name="content">
 
-<div class="edx-studio-logo-large"></div>
+<div class="wrapper-content wrapper">
+  <section class="content">
+    <header>
+      <h1>Sign Up for edX Studio</h1>
+      <a href="" class="action action-signin">Already have a Studio Account? Sign in</a>
+    </header>
 
-<article class="sign-up-box">
-  <header>
-    <h1>Register for edX studio</h1>
-  </header>
-  <form id="register_form" method="post">
-    <div id="register_error" name="register_error"></div>
-    <div class="row">
-      <label>Email</label>
-      <input name="email" type="email">
-    </div>
-    <div class="row">
-      <label>Password</label>
-      <input name="password" type="password">
-    </div>
-    <div class="row">
-      <label>Public Username</label>
-      <input name="username" type="text">
-    </div>
-    <div class="row">
-      <label>Full Name</label>
-      <input name="name" type="text">
-    </div>
-    <div class="row">
-      <div class="split">
-        <label>Your Location</label>
-        <input name="location" type="text">
+    <p class="introduction">Ready to start creating online courses? Sign up below and start creating your first edX course today.</p>
+
+    <article class="content-primary" role="main">
+      <form id="register_form" method="post" action="register_post">
+        <div id="register_error" name="register_error" class="message message-status message-status error">
+        </div>
+        
+        <fieldset>
+          <legend class="sr">Required Information to Sign Up for edX Studio</legend>
+          
+          <ol class="list-input">
+            <li class="field text required" id="field-email">
+              <label for="email">Email Address</label>
+              <input id="email" type="email" name="email" placeholder="e.g. jane.doe@gmail.com" />              
+            </li>
+
+            <li class="field text required" id="field-password">
+              <label for="password">Password</label>
+              <input id="password" type="password" name="password" />              
+            </li>
+
+            <li class="field text required" id="field-username">
+              <label for="username">Public Username</label>
+              <input id="username" type="text" name="username" placeholder="e.g. janedoe" />
+              <span class="tip tip-stacked">This will be used in public discussions with your courses and in our edX101 support forums</span>      
+            </li>
+
+            <li class="field text required" id="field-name">
+              <label for="name">Full Name</label>
+              <input id="name" type="text" name="name" placeholder="e.g. Jane Doe" />              
+            </li>
+
+            <li class="field-group">
+              <div class="field text" id="field-location">
+                <label for="location">Your Location</label>
+                <input class="short" id="location" type="text" name="location" />              
+              </div>
+
+              <div class="field text" id="field-language">
+                <label for="language">Preferred Language</label>
+                <input class="short" id="language" type="text" name="language" />              
+              </div>
+            </li>
+
+            <li class="field checkbox required" id="field-tos">
+              <input id="tos" name="terms_of_service" type="checkbox" value="true" />
+              <label for="tos">I agree to the Terms of Service</label>             
+            </li>
+          </ol>
+        </fieldset>
+
+        <div class="form-actions">
+          <button type="submit" id="submit" name="submit" class="action action-primary">Create My Account & Start Authoring Courses</button>
+        </div>
+
+        <!-- no honor code for CMS, but need it because we're using the lms student object -->
+        <input name="honor_code" type="checkbox" value="true" checked="true" hidden="true">
+      </form>
+    </article>
+
+    <aside class="content-supplementary" role="complimentary">
+      <h2 class="sr">Common Studio Questions</h2>
+
+      <div class="bit">
+        <h3>Who is Studio for?</h3>
+        <p>Studio is for anyone that wants to create online courses that leverage the global edX platform. Our users are often faculty members, teaching assistants and course staff, and members of instructional technology groups.</p>
       </div>
-      <div class="split">
-        <label>Preferred Language</label>
-        <input name="language" type="text">
+
+      <div class="bit">
+        <h3>How technically savvy do I need to be to create courses in Studio?</h3>
+        <p>Studio is designed to be easy to use by almost anyone familiar with common web-based authoring environments (Wordpress, Moodle, etc.). No programming knowledge is required, but for some of the more advanced features, a technical background would be helpful. As always, we are here to help, so don't hesitate to dive right in.</p>
       </div>
-    </div>
-    <div class="row">
-      <label class="terms-of-service">
-        <input name="terms_of_service" type="checkbox" value="true">
-        I agree to the
-        <a href="#">Terms of Service</a>
-      </label>
-    </div>
-    
-    <!-- no honor code for CMS, but need it because we're using the lms student object -->
-      <input name="honor_code" type="checkbox" value="true" checked="true" hidden="true">
 
-    <div class="row form-actions submit">
-      <input name="submit" type="submit" value="Create My Account" class="create-account-button">
-      <p class="enrolled">Already enrolled? <a href="/">Log In.</a></p>
-    </div>
-  </form>
-</article>
+      <div class="bit">
+        <h3>I've never authored a course online before. Is there help?</h3>
+        <p>Absolutely. We have created an online course, edX101, that describes some best practices: from filming video, creating exercises, to the basics of running an online course. Additionally, we're always here to help, just drop us a note.</p>
+      </div>
+    </aside>
+  </section>
+</div>
+</%block>
 
-<script type="text/javascript">
-  (function() {
-    function getCookie(name) {
-      return $.cookie(name);
-    }
+<%block name="jsextra">
+  <script type="text/javascript">
+    (function() {
 
-    function postJSON(url, data, callback) {
-      $.ajax({type:'POST',
-        url: url,
-        dataType: 'json',
-        data: data,
-        success: callback,
-        headers : {'X-CSRFToken':getCookie('csrftoken')}
+      $("form :input").focus(function() {
+        $("label[for='" + this.id + "']").addClass("is-focused");
+      }).blur(function() {
+        $("label").removeClass("is-focused");
       });
-    }
+  
 
-    $('form#register_form').submit(function(e) {
-      e.preventDefault();
-      var submit_data = $('#register_form').serialize();
+      function getCookie(name) {
+        return $.cookie(name);
+      }
 
-      postJSON('/create_account',
-        submit_data,
-        function(json) {
-          if(json.success) {
-            location.href = "${reverse('index')}";
-          } else {
-            $('#register_error').html(json.value).stop().slideDown(150);
+      // form validation
+      function postJSON(url, data, callback) {
+        $.ajax({type:'POST',
+          url: url,
+          dataType: 'json',
+          data: data,
+          success: callback,
+          headers : {'X-CSRFToken':getCookie('csrftoken')}
+        });
+      }
+
+      $('form#register_form').submit(function(e) {
+        e.preventDefault();
+        var submit_data = $('#register_form').serialize();
+
+        postJSON('/create_account',
+          submit_data,
+          function(json) {
+            if(json.success) {
+              location.href = "${reverse('index')}";
+            } else {
+              $('#register_error').html(json.value).stop().addClass('is-shown');
+            }
           }
-        }
-      );
-    });
-  })(this)
-</script>
+        );
+      });
+    })(this)
+  </script>
 </%block>
\ No newline at end of file
diff --git a/cms/templates/unit.html b/cms/templates/unit.html
index f3a779604e..968dae2cf0 100644
--- a/cms/templates/unit.html
+++ b/cms/templates/unit.html
@@ -1,8 +1,9 @@
 <%inherit file="base.html" />
 <%! from django.core.urlresolvers import reverse %>
 <%namespace name="units" file="widgets/units.html" />
-<%block name="bodyclass">unit</%block>
 <%block name="title">CMS Unit</%block>
+<%block name="bodyclass">is-signedin course unit</%block>
+
 <%block name="jsextra">
   <script type='text/javascript'>
   $(document).ready(function() {
diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html
new file mode 100644
index 0000000000..e0db473864
--- /dev/null
+++ b/cms/templates/widgets/footer.html
@@ -0,0 +1,30 @@
+<%! from django.core.urlresolvers import reverse %>
+
+<div class="wrapper-footer wrapper">
+  <footer class="primary" role="contentinfo">
+    <div class="colophon">
+      <p>&copy; 2013 <a href="http://www.edx.org" rel="external">edX</a>. All rights reversed.</p>
+    </div>
+    
+    <nav class="nav-peripheral">
+      <ol>
+        <li class="nav-item nav-peripheral-tos">
+          <a href="#">Terms of Service</a>
+        </li>
+        <li class="nav-item nav-peripheral-pp">
+          <a href="#">Privacy Policy</a>
+        </li>
+        <li class="nav-item nav-peripheral-help">
+          <a href="#">edX Studio Help</a>
+        </li>
+        <li class="nav-item nav-peripheral-contact">
+          <a href="#">Contact edX</a>
+        </li>
+        
+        % if user.is_authenticated():
+        <!-- add in zendesk/tender feedback form UI -->
+        % endif
+      </ol>
+    </nav>
+  </footer>
+</div>
\ No newline at end of file
diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html
index 5f41452339..de727b24c6 100644
--- a/cms/templates/widgets/header.html
+++ b/cms/templates/widgets/header.html
@@ -1,40 +1,109 @@
 <%! from django.core.urlresolvers import reverse %>
 
-<% active_tab_class = 'active-tab-' + active_tab if active_tab else '' %>
-<header class="primary-header ${active_tab_class}">  
-  <div class="class">
-    <div class="inner-wrapper">
-      <div class="left">        
-        % if context_course:
-          <% ctx_loc = context_course.location %>
-          <a href="/" class="home"><span class="small-home-icon"></span></a> › 
-          <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" class="class-name">${context_course.display_name}</a> ›
-        % endif
-      </div>
-
-      <div class="right">
-        <span class="username">${ user.username }</span>
-        % if user.is_authenticated():
-           <a href="${reverse('logout')}" class="log-out"><span class="log-out-icon"></span></a>
-        % else:
-           <a href="${reverse('login')}">Log in</a>
-        % endif
-      </div>
-    </div>
-  </div>
-  <nav class="class-nav-bar">
+<div class="wrapper-header wrapper">
+  <header class="primary" role="banner">
+    
+    <span class="wrapper wrapper-flex">
+      
+    </span>
+    
+    <h1 class="branding"><a href="/">edX Studio</a></h1>
+    
     % if context_course:
     <% ctx_loc = context_course.location %>
-    <ul class="class-nav inner-wrapper">
-      <li><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseware-tab'>Courseware</a></li>
-      <li><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='courseinfo-tab'>Course Info</a></li>
-      <li><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}" id='pages-tab'>Pages</a></li>
-      <li><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}" id='users-tab'>Users</a></li>
-      <li><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='assets-tab'>Assets</a></li>
-      <li><a href="${reverse('course_settings', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='settings-tab'>Settings</a></li>
-      <li><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='import-tab'>Import</a></li>
-      <li><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}" id='export-tab'>Export</a></li>
-    </ul>
+    <div class="info-course">
+      <h2 class="sr">Current Course:</h2>
+      <a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">
+      <span class="course-number">PH207x:</span>
+      <span class="course-title">${context_course.display_name}</span>
+      </a>
+    </div>
+    
+    <nav class="nav-course primary nav-dropdown" role="navigation">
+      <h2 class="sr">PH207x's Navigation:</h2>
+
+      <ol>
+        <li class="nav-item nav-course-courseware">
+          <h3 class="title"><span class="label-prefix">Course </span>Content <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
+          
+          <div class="nav-sub">
+            <ul>
+              <li class="nav-item"><a href="${reverse('course_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Outline</a></li>
+              <li class="nav-item"><a href="${reverse('course_info', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Updates</a></li>
+              <li class="nav-item"><a href="${reverse('edit_tabs', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, coursename=ctx_loc.name))}">Pages/Tabs</a></li>
+              <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Files &amp; Uploads</a></li>
+            </ul>
+          </div>
+        </li>
+
+        <li class="nav-item nav-course-settings">
+          <h3 class="title"><span class="label-prefix">Course </span>Settings <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
+          
+          <div class="nav-sub">
+            <ul>
+              <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Schedule &amp; Details</a></li>
+              <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Grading</a></li>
+              <li class="nav-item"><a href="${reverse('manage_users', kwargs=dict(location=ctx_loc))}">Course Team</a></li>
+              <li class="nav-item"><a href="${reverse('asset_index', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Advanced Settings</a></li>
+            </ul>
+          </div>
+        </li>
+
+        <li class="nav-item nav-course-tools">
+          <h3 class="title">Tools <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i></h3>
+          
+          <div class="nav-sub">
+            <ul>
+              <li class="nav-item"><a href="${reverse('import_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Import</a></li>
+              <li class="nav-item"><a href="${reverse('export_course', kwargs=dict(org=ctx_loc.org, course=ctx_loc.course, name=ctx_loc.name))}">Export</a></li>
+            </ul>
+          </div>
+        </li>
+      </ol>
+    </nav>
     % endif
-  </nav>
-</header>
+    
+    % if user.is_authenticated():    
+    <nav class="nav-account nav-is-signedin nav-dropdown">
+      <h2 class="sr">Currently logged in as:</h2>
+      <ol>
+        <li class="nav-item nav-account-username">
+          <a href="#" class="title">
+            <span class="account-username">
+              <i class="ss-icon ss-symbolicons-standard">&#x1F464;</i> 
+              ${ user.username }
+            </span>
+            <i class="ss-icon ss-symbolicons-block icon-expand">&#x25BE;</i>
+          </a>
+
+          <div class="nav-sub">
+            <ul>
+              <li class="nav-item"><a href="#">My Courses</a></li>
+              <li class="nav-item"><a href="#">Help</a></li>
+              <li class="nav-item"><a class="action action-logout" href="${reverse('logout')}">Logout</a></li>
+            </ul>
+          </div>
+        </li>
+      </ol>
+    </nav>
+    % else:
+    <nav class="nav-not-signedin">
+      <h2 class="sr">You're not currently signed in</h2>
+      <ol>
+        <li class="nav-item nav-not-signedin-hiw">
+          <a href="#">How Studio Works</a>
+        </li>
+        <li class="nav-item nav-not-signedin-help">
+          <a href="#">Studio Help</a>
+        </li>
+        <li class="nav-item nav-not-signedin-signup">
+          <a class="action action-signup" href="${reverse('signup')}">Sign Up</a>
+        </li>
+        <li class="nav-item nav-not-signedin-signin">
+          <a class="action action-signin" href="${reverse('login')}">Sign In</a>
+        </li>
+      </ol>
+    </nav>
+    % endif
+  </header>
+</div>
\ No newline at end of file
diff --git a/cms/urls.py b/cms/urls.py
index c928e74d19..e5c50afdd1 100644
--- a/cms/urls.py
+++ b/cms/urls.py
@@ -76,6 +76,7 @@ urlpatterns = ('',
 
 # User creation and updating views
 urlpatterns += (
+    url(r'^howitworks$', 'contentstore.views.howitworks', name='howitworks'),
     url(r'^signup$', 'contentstore.views.signup', name='signup'),
 
     url(r'^create_account$', 'student.views.create_account'),
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 58a92d1ee6..7ff5a0b886 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -1,18 +1,38 @@
+// font-sizing
 @function em($pxval, $base: 16) {
   @return #{$pxval / $base}em;
 }
 
-// Line-height
+@mixin font-size($sizeValue: 1.6){
+  font-size: $sizeValue + px;
+  font-size: ($sizeValue/10) + rem;
+}
+
+// line-height
 @function lh($amount: 1) {
   @return $body-line-height * $amount;
 }
 
-@mixin hide-text(){
-  text-indent: -9999px;
+// image-replacement hidden text
+@mixin text-hide() {
+  text-indent: -100%;
+  white-space: nowrap;
   overflow: hidden;
-  display: block;
 }
 
+// hidden elems - screenreaders
+@mixin text-sr() {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}
+
+// vertical and horizontal centering
 @mixin vertically-and-horizontally-centered ( $height, $width ) {
   left: 50%;
   margin-left: -$width / 2;
@@ -21,4 +41,4 @@
   min-width: $width;
   position: absolute;
   top: 150px;
-}
+}
\ No newline at end of file