diff --git a/homework.html b/homework.html
index 4aae9095e8..058f513280 100644
--- a/homework.html
+++ b/homework.html
@@ -4,6 +4,7 @@
 % for problem in homework['problems']:
   <li>
     <h2>${ problem['name'] }</h2>
+
     ${ problem['html'] }
 
     <section>
diff --git a/problem.html b/problem.html
index 67d74cedc8..965f5a9c38 100644
--- a/problem.html
+++ b/problem.html
@@ -1,23 +1,25 @@
 <h2>${ problem['name'] }</h2>
 
-  <p> ${ problem['html'] } </p>
+<section class="problem">
+  ${ problem['html'] }
 
   <section class="action">
     <input type="hidden" name="problem_id" value="${ problem['name'] }">
 
     % if check_button:
-      <input id="check_${ id }" type="button" value="Check ${ attempts }" >
+    <input id="check_${ id }" type="button" value="Check ${ attempts }" >
     % endif
     % if reset_button:
-      <input id="reset_${ id }" type="button" value="Reset ${ attempts }" >
+    <input id="reset_${ id }" type="button" value="Reset ${ attempts }" >
     % endif
     % if save_button:
-      <input id="save_${ id }" type="button" value="Save" >
+    <input id="save_${ id }" type="button" value="Save" >
     % endif
     % if answer_available:
-      <input id="show_${ id }" type="button" value="Show Answer" >
+    <input id="show_${ id }" type="button" value="Show Answer" >
     % endif
     % if explain :
-      <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
+    <a href="/courseware/6.002_Spring_2012/${ explain }" class="new-page">Explanation</a>
     % endif
   </section>
+</section>
diff --git a/problem_ajax.html b/problem_ajax.html
index fb8a98c765..7296b362ad 100644
--- a/problem_ajax.html
+++ b/problem_ajax.html
@@ -1 +1 @@
-<div id="main_${id}"></div>
+<section id="main_${id}" class="problems-wrapper"></section>
diff --git a/sass/_base-extends.scss b/sass/_base-extends.scss
index de1f917fca..c8c5e4b687 100644
--- a/sass/_base-extends.scss
+++ b/sass/_base-extends.scss
@@ -39,6 +39,7 @@
 
 .content {
   @include box-sizing(border-box);
+  @include box-shadow(inset 0 0 2px 3px #f3f3f3);
   display: table-cell;
   padding: lh();
   vertical-align: top;
@@ -46,8 +47,9 @@
 }
 
 .sidebar {
-  @include box-shadow( inset -1px 0 0 #f6f6f6);
+  @include box-shadow( inset 0 0 0 1px #f6f6f6);
   @include box-sizing(border-box);
+  @include border-radius(4px 0 0 4px);
   background: #e3e3e3;
   border-right: 1px solid #d3d3d3;
   display: table-cell;
@@ -106,6 +108,7 @@
   margin: (-$body-line-height) (-$body-line-height) $body-line-height;
   font-size: 12px;
   text-shadow: 0 1px 0 #fff;
+  @include box-shadow(inset 0 1px 0 #fff, inset 1px 0 0 #fff);
   @extend .clearfix;
 
   a {
diff --git a/sass/_base.scss b/sass/_base.scss
index a703cf208e..f0e86c7624 100644
--- a/sass/_base.scss
+++ b/sass/_base.scss
@@ -41,6 +41,14 @@ em {
   }
 }
 
+a:link, a:visited {
+  text-decoration:none;
+}
+
+a:hover {
+  text-decoration:underline;
+}
+
 input[type="submit"], input[type="button"], button {
   @extend .button;
 }
diff --git a/sass/_courseware-sequence-nav.scss b/sass/_courseware-sequence-nav.scss
new file mode 100644
index 0000000000..5a7b971fe2
--- /dev/null
+++ b/sass/_courseware-sequence-nav.scss
@@ -0,0 +1,142 @@
+nav.sequence-nav {
+  @extend .topbar;
+  margin-bottom: $body-line-height;
+
+  ol {
+    a {
+      @extend .block-link;
+    }
+
+    .inactive {
+      background-repeat: no-repeat;
+
+      &:hover {
+        background-color: lighten(#F6EFD4, 3%);
+      }
+    }
+
+    .visited {
+      background-color: shade(#F6EFD4, 10%);
+      background-repeat: no-repeat;
+      border-color: shade(#F6EFD4, 10%);
+
+      &:hover {
+        background-color: #F6EFD4;
+      }
+    }
+
+    .active {
+      // @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
+      @include box-shadow(0 1px 0 #fff);
+      background-color: #fff;
+      background-repeat: no-repeat;
+
+      &:hover {
+        background-color: #fff;
+      }
+    }
+
+    li {
+      border: none;
+      border-right: 1px solid darken(#F6EFD4, 10%);
+      @include box-shadow(1px 0 0 #fff);
+      cursor: pointer;
+      display: table-cell;
+      padding: lh(.75);
+      float: left;
+      width: 18px;
+
+      //problem
+      // &.seq_problem_inactive {
+      //   width: 14px;
+      //   background: url('/static/images/problem-icon.png') 13px 13px no-repeat;
+        // @extend .inactive;
+      // }
+
+      // &.seq_problem_visited {
+      //   width: 14px;
+      //   background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
+      //   &:hover {
+      //     background-color: #F6EFD4;
+      //   }
+      // }
+
+      // &.seq_problem_active {
+      //   width: 14px;
+      //   background: #FFFBEB url('/static/images/problem-icon.png') -22px 13px no-repeat;
+      //   @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
+
+      //   &:hover {
+      //     background-color: #F6EFD4;
+      //   }
+      // }
+
+      //video
+      &.seq_video_inactive {
+        @extend .inactive;
+        background-image: url('/static/images/video-icon.png');
+        background-position: 13px 15px;
+      }
+
+      &.seq_video_visited {
+        @extend .visited;
+        background-image: url('/static/images/video-icon.png');
+        background-position: -81px 15px;
+      }
+
+      &.seq_video_active {
+        @extend .active;
+        background-image: url('/static/images/video-icon.png');
+        background-position: -32px 15px;
+      }
+
+      //vertical
+      &.seq_vertical_inactive, &.seq_problem_inactive {
+        background-image: url('/static/images/vertical-icon.png');
+        background-position: -82px 15px;
+        @extend .inactive;
+      }
+
+      &.seq_vertical_visited, &.seq_problem_visited {
+        background-image: url('/static/images/vertical-icon.png');
+        background-position: 13px 15px;
+        @extend .visited;
+      }
+
+      &.seq_vertical_active, &.seq_problem_active {
+        background-image: url('/static/images/vertical-icon.png');
+        background-position: -35px 15px;
+        @extend .active;
+      }
+
+    }
+  }
+
+  ul {
+    float: right;
+    margin-right: 1px;
+
+    li {
+      float: left;
+
+      &.prev, &.next {
+        @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
+        background: darken(#F6EFD4, 5%);
+        border-left: 1px solid darken(#f6efd4, 20%);
+        color: darken(#F6EFD4, 80%);
+        float: right;
+        letter-spacing: 1px;
+        padding: lh(.75);
+        text-transform: uppercase;
+        cursor: pointer;
+
+        &:hover {
+          text-decoration: none;
+          color: darken(#F6EFD4, 60%);
+          text-decoration: none;
+          background: none;
+        }
+      }
+    }
+  }
+}
diff --git a/sass/_courseware-video.scss b/sass/_courseware-video.scss
index 389c23c370..f8067e703c 100644
--- a/sass/_courseware-video.scss
+++ b/sass/_courseware-video.scss
@@ -132,7 +132,9 @@ section.course-content {
           font-weight: bold;
 
           span {
+            @include inline-block();
             cursor: pointer;
+            margin-bottom: 0;
 
             &:hover {
               color: $mit-red;
@@ -146,7 +148,8 @@ section.course-content {
   ol.subtitles {
     float: left;
     width: flex-grid(3, 9);
-    min-height: 570px;
+    height: 530px;
+    overflow: hidden;
 
     li {
       margin-bottom: 0px;
diff --git a/sass/_courseware.scss b/sass/_courseware.scss
index 3c59e6e0c8..aae17b46fd 100644
--- a/sass/_courseware.scss
+++ b/sass/_courseware.scss
@@ -86,146 +86,115 @@ div.course-wrapper {
   section.course-content {
     @extend .content;
 
-    ol.vert-mod {
-     > li {
-        @extend .clearfix;
-        border-bottom: 1px solid #eee;
-        padding: 15px 0;
+    p {
+      margin-bottom: lh();
 
-        &:last-child {
-          border-bottom: none;
-        }
-
-        h2 {
-          margin-top: 0;
-          margin-bottom: 15px;
-        }
-
-        input[type="text"] {
-          display: inline-block;
-          margin: 8px 4px 4px 10px;
-        }
+      &:empty {
+        display: none;
+        margin-bottom: 0;
       }
     }
 
-    ol.sequence-nav {
-      margin-bottom: $body-line-height;
-      @extend .topbar;
+    .problem-set {
+      position: relative;
+      @extend .clearfix;
 
-      a {
-        @extend .block-link;
+      h2 {
+        margin-top: 0;
+        margin-bottom: 15px;
+        width: flex-grid(2, 9);
+        padding-right: flex-gutter(9);
+        border-right: 1px dotted #ccc;
+        @include box-sizing(border-box);
+        display: table-cell;
+        vertical-align: top;
+
+        @media screen and (max-width:910px) {
+          display: block;
+          width: auto;
+        }
       }
 
-      li {
-        border: none;
-        cursor: pointer;
+      section.problem {
         display: table-cell;
-        padding: lh(.75);
-        float: left;
+        width: flex-grid(7, 9);
+        padding-left: flex-gutter(9);
 
-        //problem
-        &.seq_problem_inactive {
-          width: 14px;
-          background: url('/static/images/problem-icon.png') 13px 13px no-repeat;
-          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
-
-          &:hover {
-            background-color: lighten(#F6EFD4, 3%);
-          }
+        @media screen and (max-width:910px) {
+          display: block;
+          width: auto;
         }
 
-        &.seq_problem_visited {
-          width: 14px;
-          background: shade(#F6EFD4, 4%) url('/static/images/problem-icon.png') -57px 13px no-repeat;
-          &:hover {
-            background-color: #F6EFD4;
+        span {
+          &.unanswered {
+            @include inline-block();
+            background: url('/static/images/unanswered-icon.png') center center no-repeat;
+            height: 14px;
+            position: relative;
+            top: 4px;
+            width: 14px;
+          }
+
+          &.correct {
+            @include inline-block();
+            background: url('/static/images/correct-icon.png') center center no-repeat;
+            height: 20px;
+            position: relative;
+            top: 6px;
+            width: 25px;
+          }
+
+          &.incorrect {
+            @include inline-block();
+            background: url('/static/images/incorrect-icon.png') center center no-repeat;
+            height: 20px;
+            width: 20px;
+            position: relative;
+            top: 6px;
           }
         }
+      }
 
-        &.seq_problem_active {
-          width: 14px;
-          background: #FFFBEB url('/static/images/problem-icon.png') -22px 13px no-repeat;
-          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
-
-          &:hover {
-            background-color: #F6EFD4;
-          }
+      div {
+        > span {
+          display: block;
+          margin-bottom: lh(.5);
         }
+      }
 
-        //video
-        &.seq_video_inactive {
-          width: 14px;
-          background: url('/static/images/video-icon.png') 13px 15px no-repeat;
-          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
+      input[type="text"] {
+        display: inline-block;
+      }
 
-          &:hover {
-            background-color: lighten(#F6EFD4, 3%);
-          }
-        }
+      center {
+        display: block;
+        margin: lh() 0;
+        border: 1px solid #ccc;
+        padding: lh();
+      }
 
-        &.seq_video_visited {
-          width: 14px;
-          background: shade(#F6EFD4, 4%) url('/static/images/video-icon.png') -81px 15px no-repeat;
-          &:hover {
-            background-color: #F6EFD4;
-          }
-        }
-
-        &.seq_video_active {
-          width: 14px;
-          background: #FFFBEB url('/static/images/video-icon.png') -32px 15px no-repeat;
-          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%),inset 1px 0 0 darken(#F6EFD4, 20%));
-          &:hover {
-            background-color: #F6EFD4;
-          }
-        }
+      section.action {
+        margin-top: lh();
+      }
+    }
 
 
-        //vertical
-        &.seq_vertical_inactive {
-          width: 14px;
-          background: url('/static/images/vertical-icon.png') -82px 15px no-repeat;
-          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 10%));
+    section.problems-wrapper, div#seq_content {
+      @extend .problem-set;
+    }
 
-          &:hover {
-            background-color: lighten(#F6EFD4, 3%);
-          }
-        }
+    ol.vert-mod {
+     > li {
+        @extend .clearfix;
+        @extend .problem-set;
+        border-bottom: 1px solid #ddd;
+        margin-bottom: 15px;
+        padding: 0 0 15px;
 
-        &.seq_vertical_visited {
-          width: 14px;
-          background: shade(#F6EFD4, 4%) url('/static/images/vertical-icon.png') 13px 15px no-repeat;
-          &:hover {
-            background-color: #F6EFD4;
-          }
-        }
-
-        &.seq_vertical_active {
-          width: 14px;
-          background: #FFFBEB url('/static/images/vertical-icon.png') -35px 15px no-repeat;
-          @include box-shadow(inset -1px 0 0 darken(#F6EFD4, 20%), inset 1px 0 0 darken(#F6EFD4, 20%));
-
-          &:hover {
-            background-color: #F6EFD4;
-          }
-        }
-
-        &.prev, &.next {
-          @include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
-          background: darken(#F6EFD4, 5%);
-          border-left: 1px solid darken(#f6efd4, 20%);
-          color: darken(#F6EFD4, 80%);
-          float: right;
-          letter-spacing: 1px;
-          padding: lh(.75);
-          text-transform: uppercase;
-
-          &:hover {
-            text-decoration: none;
-            color: darken(#F6EFD4, 60%);
-            text-decoration: none;
-            background: none;
-          }
+        &:last-child {
+          border-bottom: none;
+          margin-bottom: 0;
+          padding-bottom: 0;
         }
       }
     }
diff --git a/sass/_layout.scss b/sass/_layout.scss
index 2614e3b56c..8867ef5348 100644
--- a/sass/_layout.scss
+++ b/sass/_layout.scss
@@ -6,7 +6,7 @@ html {
     font: $body-font-size $body-font-family;
     text-align: center;
     margin: 0;
-    background: #f6f6f6;
+    background: #f4f4f4; //#f3f1e5
 
     div.header-wrapper {
       // @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
@@ -28,7 +28,7 @@ html {
           font-size: 20px;
           font-weight: 800;
           margin: 0 lh() 0 0;
-          padding: 17px lh() 17px 0;
+          padding: 17px lh() 14px 0;
           text-shadow: 0 1px 0 lighten($mit-red, 10%);
           line-height: lh();
         }
@@ -44,16 +44,16 @@ html {
           h2 {
             float: left;
             margin: 0 lh() 0 0;
-            padding: 19px lh() 12px 0;
+            padding: 19px lh() 9px 0;
             line-height: lh();
             border-right: 1px solid darken($mit-red, 5%);
 
             a {
               color: #fff;
+              text-decoration: none;
 
               &:hover {
                 color: rgba(#fff, .7);
-                text-decoration: none;
               }
             }
           }
@@ -61,7 +61,7 @@ html {
           ul {
             @extend .clearfix;
             display: inline-block;
-            padding: 19px 0 12px;
+            padding: 19px 0 9px;
             margin: 0;
 
             li {
@@ -72,6 +72,7 @@ html {
 
               a {
                 color: #fff;
+                text-decoration: none;
 
                 &:hover {
                   color: rgba(#fff, .7);
@@ -88,15 +89,17 @@ html {
     section.main-content {
       @extend .clearfix;
       @extend .wrapper;
-      @include box-shadow(0 0 4px #ddd);
       @include box-sizing(border-box);
+      @include border-radius(4px);
+      overflow: hidden;
       background: #fff;
       border-bottom: 1px solid #bbb;
 
       @media screen and (min-width: 1400px) {
-      margin-top: lh(.5);
-      @include border-radius(3px);
-      border: 1px solid #bbb;
+        // @include border-radius(3px);
+        @include box-shadow(0 0 4px #dfdfdf);
+        border: 1px solid #bbb;
+        margin-top: lh(.5);
       }
     }
 
diff --git a/sass/_theme.scss b/sass/_theme.scss
index 276bb6a694..31e45ae734 100644
--- a/sass/_theme.scss
+++ b/sass/_theme.scss
@@ -37,14 +37,6 @@ h3 {
   clear:both;
 }
 
-a:link, a:visited {
-  text-decoration:none;
-}
-
-a:hover {
-  text-decoration:underline;
-}
-
 #wrapper {
 	background: transparent url( images/css/page-vbg.jpg ) repeat-y scroll 50% 0px;
 	margin:0 auto ;
diff --git a/sass/application.scss b/sass/application.scss
index 6d046c2a6a..ad0298d720 100644
--- a/sass/application.scss
+++ b/sass/application.scss
@@ -8,7 +8,7 @@
 @import "leanmodal";
 
 // pages
-@import "courseware", "courseware-video";
+@import "courseware", "courseware-video", "courseware-sequence-nav";
 @import "textbook";
 @import "profile";
 @import "wiki-basic-html", "wiki-create", "wiki";
@@ -17,5 +17,5 @@
 @import "askbot-original", "discussion", "discussion-questions", "discussion-tags", "question-view" ;
 
 // left over
-@import "theme";
-@import "local";
+// @import "theme";
+// @import "local";
diff --git a/schematicinput.html b/schematicinput.html
index 8c7f7e0c83..3290de3b44 100644
--- a/schematicinput.html
+++ b/schematicinput.html
@@ -1,19 +1,23 @@
 <span>
-<input type="hidden" class="schematic" height="${height}" width="${width}" parts="${parts}" analyses="${analyses}" name="input_${id}" id="input_${id}" value="" initial_value=""/>
-<div id="value_${id}" style="display:none">${value}</div>
-<div id="initial_value_${id}" style="display:none">${initial_value}</div>
-<script>
-$("#input_${id}").attr("value",$("#value_${id}").text());
-$("#input_${id}").attr("initial_value",$("#initial_value_${id}").text());
-</script>
-<span id="answer_${id}"></span>
-% if state == 'unsubmitted':
+  <input type="hidden" class="schematic" height="${height}" width="${width}" parts="${parts}" analyses="${analyses}" name="input_${id}" id="input_${id}" value="" initial_value=""/>
+
+  <div id="value_${id}" style="display:none">${value}</div>
+  <div id="initial_value_${id}" style="display:none">${initial_value}</div>
+
+  <script>
+    $("#input_${id}").attr("value",$("#value_${id}").text());
+    $("#input_${id}").attr("initial_value",$("#initial_value_${id}").text());
+  </script>
+
+  <span id="answer_${id}"></span>
+  % if state == 'unsubmitted':
   <span class="ui-icon ui-icon-bullet" style="display:inline-block;" id="status_${id}"></span>
-% elif state == 'correct': 
+  % elif state == 'correct': 
   <span class="ui-icon ui-icon-check" style="display:inline-block;" id="status_${id}"></span>
-% elif state == 'incorrect':
+  % elif state == 'incorrect':
   <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
-% elif state == 'incomplete':
+  % elif state == 'incomplete':
   <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
-% endif
+  % endif
 </span>
+
diff --git a/seq_module.html b/seq_module.html
index 6608344e2f..b011815e68 100644
--- a/seq_module.html
+++ b/seq_module.html
@@ -1,12 +1,15 @@
-<ol class="sequence-nav">
+<nav class="sequence-nav">
+  <ol>
+    % for t in range(1,1+len(items)):
+    <li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
+    % endfor
+  </ol>
 
-  % for t in range(1,1+len(items)):
-  <li class="seq_inactive" id="tt_${ t }">&nbsp;</li>
-  % endfor
-
-  <li id="${ id }next" class="next">Next</li>
-  <li id="${ id }prev" class="prev">Previous</li>
-</ol>
+  <ul>
+    <li id="${ id }next" class="next">Next</li>
+    <li id="${ id }prev" class="prev">Previous</li>
+  </ul>
+</nav>
 
 
 <!-- <td colspan=${ len(items) }> -->
diff --git a/textinput.html b/textinput.html
index fbe9090df8..1473eadbf2 100644
--- a/textinput.html
+++ b/textinput.html
@@ -1,13 +1,15 @@
-<span>
-<input type="text" name="input_${id}" id="input_${id}" value="${value}" />
-<span id="answer_${id}"></span>
-% if state == 'unsubmitted':
-  <span class="ui-icon ui-icon-bullet" style="display:inline-block;" id="status_${id}"></span>
-% elif state == 'correct': 
-  <span class="ui-icon ui-icon-check" style="display:inline-block;" id="status_${id}"></span>
-% elif state == 'incorrect':
-  <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
-% elif state == 'incomplete':
-  <span class="ui-icon ui-icon-close" style="display:inline-block;" id="status_${id}"></span>
-% endif
-</span>
+<section class="text-input">
+  <input type="text" name="input_${id}" id="input_${id}" value="${value}" />
+
+  <span id="answer_${id}"></span>
+
+  % if state == 'unsubmitted':
+  <span class="unanswered" style="display:inline-block;" id="status_${id}"></span>
+  % elif state == 'correct': 
+  <span class="correct" id="status_${id}"></span>
+  % elif state == 'incorrect':
+  <span class="incorrect" id="status_${id}"></span>
+  % elif state == 'incomplete':
+  <span class="incorrect" id="status_${id}"></span>
+  % endif
+</section>
diff --git a/video.html b/video.html
index 7e13c80974..d32bbfb49c 100644
--- a/video.html
+++ b/video.html
@@ -27,7 +27,7 @@
 </div>
 
 <ol class="subtitles">
-  <li id="stt_n5"><div id="std_n7" onclick="title_seek(-7);"></div></li>
+  <!-- <li id="stt_n5"><div id="std_n7" onclick="title_seek(-7);"></div></li> -->
   <li id="stt_n4"><div id="std_n6" onclick="title_seek(-6);"></div></li>
   <li id="stt_n4"><div id="std_n5" onclick="title_seek(-5);"></div></li>
   <li id="stt_n4"><div id="std_n4" onclick="title_seek(-4);"></div></li>
@@ -42,5 +42,5 @@
   <li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
   <li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
   <li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
-  <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
+  <!-- <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li> -->
 </ol>