diff --git a/cms/static/sass/_header.scss b/cms/static/sass/_header.scss
index e0648279a6..dbe2606887 100644
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/_header.scss
@@ -1,4 +1,6 @@
-//studio global header and navigation
+// studio global header and navigation
+// ====================
+
 .wrapper-header {
   margin: 0 0 ($baseline*1.5) 0;
   padding: $baseline;
@@ -29,6 +31,27 @@
   }
 }
 
+// ====================
+
+// basic layout
+.wrapper-left, .wrapper-right {
+  @include box-sizing(border-box);
+}
+
+.wrapper-left {
+  width: flex-grid(10, 12);
+  float: left;
+  margin-right: flex-gutter();
+}
+
+.wrapper-right {
+  width: flex-grid(2, 12);
+  float: right;
+}
+
+// ====================
+
+// specific elements - branding
 .branding, .info-course, .nav-course, .nav-account, .nav-unauth, .nav-pitch {
   display: inline-block;
   vertical-align: top;
@@ -51,6 +74,9 @@
   }
 }
 
+// ====================
+
+// specific elements - course name/info
 .info-course {
   position: relative;
   max-width: 200px;
@@ -98,7 +124,9 @@
   }
 }
 
-// course info
+// ====================
+
+// specific elements - course nav
 .nav-course {
   width: 335px;
   margin-top: -($baseline/4);
@@ -160,9 +188,10 @@
   }
 }
 
-// account-based nav
+// ====================
+
+// specific elements - account-based nav
 .nav-account {
-  float: right;
   max-width: 300px;
   min-width: 175px;
   width: 20%;
@@ -188,7 +217,9 @@
   }
 }
 
-// dropdown UI
+// ====================
+
+// UI - dropdown
 .nav-dropdown {
 
   .nav-item {
@@ -236,7 +267,7 @@
     }
   }
 
-  // vendor
+  // UI - dropdown - vendor
   .arrow_box {
     position: relative;
     background: #fff;
@@ -267,7 +298,7 @@
     margin-left: -11px;
   }
 
-  // specific navs
+  // UI - dropdown - specific navs
   &.nav-account {
 
     .nav-sub {
@@ -305,7 +336,9 @@
   }
 }
 
-// is-signed in
+// ====================
+
+// STATE: is-signed in
 .is-signedin {
 
   &.course .branding {
@@ -334,10 +367,12 @@
   }
 }
 
-// not signed in
+// ====================
+
+// STATE: not signed in
 .not-signedin {
 
-  // unauthenticated nav
+  // STATE: not signed in - unauthenticated nav
   .nav-not-signedin {
     float: right;
     margin-top: ($baseline/4);
@@ -347,7 +382,6 @@
       display: inline-block;
       vertical-align: middle;
       margin: 0 $baseline 0 0;
-      font-weight: 500;
 
       &:last-child {
         margin-right: 0;
@@ -360,7 +394,7 @@
       }
     }
 
-    // specific items
+    // STATE: not signed in - specific items
     .nav-not-signedin-help {
 
     }
@@ -374,7 +408,7 @@
         @include font-size(14);
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
-        font-weight: 600 !important;
+        font-weight: 600;
       }
     }
 
@@ -386,14 +420,15 @@
         @include font-size(14);
         padding: ($baseline/4) ($baseline/2);
         text-transform: uppercase;
-        font-weight: 600 !important;
+        font-weight: 600;
       }
     }
   }
 }
 
+// ====================
 
-// active/current nav states
+// STATE: active/current nav states
 body.howitworks .nav-not-signedin-hiw,
 body.signin .nav-not-signedin-signin,
 body.signup .nav-not-signedin-signup,
@@ -405,7 +440,9 @@ body.course.outline .nav-course-courseware
   }
 }
 
-// js enabled 
+// ====================
+
+// STATE: js enabled 
 .js {
 
   .nav-dropdown {
diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html
index de727b24c6..993f2d7cd9 100644
--- a/cms/templates/widgets/header.html
+++ b/cms/templates/widgets/header.html
@@ -2,108 +2,108 @@
 
 <div class="wrapper-header wrapper">
   <header class="primary" role="banner">
-    
-    <span class="wrapper wrapper-flex">
+
+    <div class="wrapper wrapper-left ">
+      <h1 class="branding"><a href="/">edX Studio</a></h1>
       
-    </span>
-    
-    <h1 class="branding"><a href="/">edX Studio</a></h1>
-    
-    % if context_course:
-    <% ctx_loc = context_course.location %>
-    <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>
+      % if context_course:
+      <% ctx_loc = context_course.location %>
+      <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
     </div>
     
-    <nav class="nav-course primary nav-dropdown" role="navigation">
-      <h2 class="sr">PH207x's Navigation:</h2>
+    <div class="wrapper wrapper-right">
+      % 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>
 
-      <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
-    
-    % 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
+            <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      
+    </div>
   </header>
 </div>
\ No newline at end of file