diff --git a/cms/static/sass/_account.scss b/cms/static/sass/_account.scss
new file mode 100644
index 0000000000..b04f4fb13d
--- /dev/null
+++ b/cms/static/sass/_account.scss
@@ -0,0 +1,223 @@
+// 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/2);
+      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(7, 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 !important;
+          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%;
+            }
+          }
+
+          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 {
+
+
+}
+
+// @include transition(all 1s ease-in-out);
\ No newline at end of file
diff --git a/cms/static/sass/_footer.scss b/cms/static/sass/_footer.scss
index 888959bc59..f15eb1c54a 100644
--- a/cms/static/sass/_footer.scss
+++ b/cms/static/sass/_footer.scss
@@ -1,46 +1,48 @@
-// footer
+//studio global footer
 .wrapper-footer {
   margin: ($baseline*1.5) 0 $baseline 0;
   padding: $baseline;
   position: relative;
   width: 100%;
-}
 
-footer {
-  @include clearfix();
-  @include font-size(13);
-  width: flex-grid(12);
-  margin: 0 auto;
-  padding-top: $baseline;
-  border-top: 1px solid $gray-l4;
-  color: $gray;
+  footer {
+    @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);
-  }
+    .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-peripheral {
+      width: flex-grid(6, 12);
+      float: right;
+      text-align: right;
 
-    .nav-item {
-      display: inline-block;
-      margin-right: $baseline;
+      .nav-item {
+        display: inline-block;
+        margin-right: ($baseline/2);
 
-      &:last-child {
-        margin-right: 0;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+
+    a {
+      color: $gray-l1;
+
+      &:hover, &:active {
+        color: $blue;
       }
     }
   }
-
-  a {
-    color: $gray;
-
-    &: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 b4bae2c629..b7a02d5256 100644
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/_header.scss
@@ -1,4 +1,4 @@
-// header
+//studio global header and navigation
 .wrapper-header {
   margin: 0 0 ($baseline*1.5) 0;
   padding: $baseline;
@@ -18,13 +18,15 @@
       color: $blue;
     }
   }
-}
 
-.header {
-  @include clearfix();
-  max-width: 1280px;
-  margin: 0 auto;
-  color: $lightGrey;
+  .header {
+    @include clearfix();
+    max-width: $fg-max-width;
+    min-width: $fg-min-width;
+    width: flex-grid(12);
+    margin: 0 auto;
+    color: $lightGrey;
+  }
 }
 
 .branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
@@ -91,7 +93,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     @include font-size(16);
-    font-weight: 550;
+    font-weight: 600;
 
   }
 }
@@ -116,7 +118,7 @@
       display: block;
       padding: 5px;
       text-transform: uppercase;
-      font-weight: 550;
+      font-weight: 600;
 
       &:hover, &:active {
         color: $blue;
@@ -343,7 +345,7 @@
       display: inline-block;
       vertical-align: middle;
       margin: 0 $baseline 0 0;
-      font-weight: 550;
+      font-weight: 600;
 
       &:last-child {
         margin-right: 0;
@@ -353,7 +355,6 @@
         margin-top: -($baseline/4);
         display: inline-block;
         padding: ($baseline/4) ($baseline/2);
-        font-weight: 550;
       }
     }
 
@@ -363,10 +364,14 @@
     }
 
     .nav-not-signedin-signup {
+      margin-right: ($baseline/2);
 
       .action-signup {
         @include blue-button;
         @include transition(all .15s);
+        @include font-size(14);
+        text-transform: uppercase;
+        font-weight: 600 !important;
       }
     }
 
@@ -375,6 +380,9 @@
       .action-signin {
         @include white-button;
         @include transition(all .15s);
+        @include font-size(14);
+        text-transform: uppercase;
+        font-weight: 600 !important;
       }
     }
   }
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index 6489b271a4..4d8e26b2f9 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -1,13 +1,13 @@
 $baseline: 20px;
 
 // grid
-$gw-column: 80px;
-$gw-gutter: 20px;
+$gw-column: ($baseline*3);
+$gw-gutter: $baseline;
 $fg-column: $gw-column;
 $fg-gutter: $gw-gutter;
 $fg-max-columns: 12;
 $fg-max-width: 1280px;
-$fg-min-width: 980px;
+$fg-min-width: 900px;
 
 // type
 $sans-serif: 'Open Sans', $verdana;
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index 0ba5aa6321..f77b5ca15b 100644
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -29,6 +29,7 @@
 @import "modal";
 @import "alerts";
 @import "login";
+@import "account";
 @import 'jquery-ui-calendar';
 
 @import 'content-types';
diff --git a/cms/templates/signup.html b/cms/templates/signup.html
index 50f0f53e2c..1c542fb437 100644
--- a/cms/templates/signup.html
+++ b/cms/templates/signup.html
@@ -6,89 +6,133 @@
 
 <%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">
+        <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>
+      </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().slideDown(150);
+            }
           }
-        }
-      );
-    });
-  })(this)
-</script>
+        );
+      });
+    })(this)
+  </script>
 </%block>
\ No newline at end of file
diff --git a/cms/templates/widgets/footer.html b/cms/templates/widgets/footer.html
index e064742160..1cd387f7ed 100644
--- a/cms/templates/widgets/footer.html
+++ b/cms/templates/widgets/footer.html
@@ -1,7 +1,7 @@
 <%! from django.core.urlresolvers import reverse %>
 
 <div class="wrapper-footer wrapper">
-  <footer class="main" role="navigation">
+  <footer class="main" role="contentinfo">
     <div class="colophon">
       <p>&copy; 2013 <a href="http://www.edx.org" rel="external">edX</a>. All rights reversed.</p>
     </div>