diff --git a/.hgignore b/.hgignore
index 2cbcd4c8ab..807a7aee46 100644
--- a/.hgignore
+++ b/.hgignore
@@ -1,4 +1,3 @@
 syntax: glob
 *.pyc
 *~
-
diff --git a/.sass-cache/47c2162753299d6160744ee2ad10f568b60c57a1/_base.scssc b/.sass-cache/47c2162753299d6160744ee2ad10f568b60c57a1/_base.scssc
new file mode 100644
index 0000000000..ee4e461374
Binary files /dev/null and b/.sass-cache/47c2162753299d6160744ee2ad10f568b60c57a1/_base.scssc differ
diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-extends.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-extends.scssc
index f438598edd..9be0315739 100644
Binary files a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-extends.scssc and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-extends.scssc differ
diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-variables.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-variables.scssc
index c92131a99c..ff74ffee4b 100644
Binary files a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-variables.scssc and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base-variables.scssc differ
diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base.scssc
new file mode 100644
index 0000000000..ee4e461374
Binary files /dev/null and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_base.scssc differ
diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_courseware.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_courseware.scssc
index 5a169937bb..b10a49d10a 100644
Binary files a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_courseware.scssc and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_courseware.scssc differ
diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_layout.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_layout.scssc
index ce37621c5f..1213456810 100644
Binary files a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_layout.scssc and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_layout.scssc differ
diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_profile.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_profile.scssc
index c8bc02d6f1..fed2c7989d 100644
Binary files a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_profile.scssc and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/_profile.scssc differ
diff --git a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/application.scssc b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/application.scssc
index 40e2bb4dde..1436533955 100644
Binary files a/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/application.scssc and b/.sass-cache/d71392d31c3b10df78042d13a0384e71b83fa11e/application.scssc differ
diff --git a/courseware.html b/courseware.html
index 2202e09202..3937ead715 100644
--- a/courseware.html
+++ b/courseware.html
@@ -24,12 +24,12 @@ $('#hide_acc').click(function() {
 
 <%include file="navigation.html" />
 
-<section>
+<section class="main-content">
   <div id="accordion">
     ${accordion}
   </div>
 
-  <section class="main-content">
+  <section class="course-content">
     ${content}
   </section>
 </section>
diff --git a/navigation.html b/navigation.html
index 5ad3368e2f..ea1d1dc076 100644
--- a/navigation.html
+++ b/navigation.html
@@ -1,13 +1,15 @@
-<header>
-  <h1>Circuits and Electronics</h1>
+<div class="header-wrapper">
+  <header>
+    <h1>Circuits and Electronics</h1>
 
-  <nav>
-    <ul class="coursenav">
-      <li><a href="/courseware">Courseware</a></li>
-      <li><a href="/book">Textbook</a></li>
-      <li><a href="/discussion">Discussion</a></li>
-      <li><a href="/wiki">Wiki</a></li>
-      <li><a href="/profile">Profile</a></li>
-    </ul>
-  </nav>
-</header>
+    <nav>
+      <ul class="coursenav">
+        <li><a href="/courseware">Courseware</a></li>
+        <li><a href="/book">Textbook</a></li>
+        <li><a href="/discussion">Discussion</a></li>
+        <li><a href="/wiki">Wiki</a></li>
+        <li><a href="/profile">Profile</a></li>
+      </ul>
+    </nav>
+  </header>
+</div>
diff --git a/profile.html b/profile.html
index 4427762808..9bcbe4a27b 100644
--- a/profile.html
+++ b/profile.html
@@ -67,7 +67,7 @@ $(function() {
 
 <%include file="navigation.html" />
 
-<section class="profile-content">
+<section class="main-content">
   <section class="user-info">
 
     <h1>${name}</h1>
diff --git a/sass/_base-extends.scss b/sass/_base-extends.scss
index f1854eb288..80d84d53e3 100644
--- a/sass/_base-extends.scss
+++ b/sass/_base-extends.scss
@@ -16,3 +16,10 @@
   width: grid-width(8);
   float: left;
 }
+
+.wrapper {
+      margin: 0 auto;
+      max-width: $max-width;
+      width: grid-width(12);
+      text-align: left;
+}
diff --git a/sass/_base-variables.scss b/sass/_base-variables.scss
index 74c1a62bdb..7adc1d1617 100644
--- a/sass/_base-variables.scss
+++ b/sass/_base-variables.scss
@@ -33,6 +33,7 @@ $body-line-height: golden-ratio($body-font-size, 1);
 // color
 $light-gray: #f3f3f3;
 $dark-gray: #333;
+$mit-red: #993333;
 
 $text-color: $dark-gray;
 $border-color: $light-gray;
diff --git a/sass/_base.scss b/sass/_base.scss
new file mode 100644
index 0000000000..4d847f041d
--- /dev/null
+++ b/sass/_base.scss
@@ -0,0 +1,3 @@
+p {
+  margin-bottom: $body-line-height;
+}
diff --git a/sass/_courseware.scss b/sass/_courseware.scss
index d57fba2bd2..8f530e7760 100644
--- a/sass/_courseware.scss
+++ b/sass/_courseware.scss
@@ -1,7 +1,61 @@
 div#accordion {
-  @extend .sidebar;
+  @include box-shadow( inset -1px 0 0 #f6f6f6);
+  background: #e3e3e3;
+  border-right: 1px solid #d3d3d3;
+  display: table-cell;
+  font-family: $body-font-family;
+  // padding: $body-line-height 0;
+  text-shadow: 0 1px 0 #f6f6f6;
+  vertical-align: top;
+  width: 280px;
+
+  h3 {
+    &.ui-accordion-header {
+      color: #000;
+
+      a {
+        font-size: $body-font-size;
+        color: lighten($text-color, 10%);
+      }
+
+      &.ui-state-default {
+        background: none;
+        font-weight: normal;
+        border: none;
+        border-bottom: 1px solid #d3d3d3;
+        @include box-shadow(0 1px 0 #eee);
+      }
+
+      &.ui-state-hover {
+        border: none;
+        border-bottom: 1px solid #d3d3d3;
+      }
+
+      &.ui-state-active {
+        background: none;
+        border: 0;
+        color: #000;
+        font-weight: bold;
+        @include box-shadow(none);
+
+        a {
+          color: #000;
+        }
+      }
+    }
+  }
+
+  ul.ui-accordion-content {
+    background: #d6d6d6;
+    border: none;
+    font-size: 12px;
+    margin: 0;
+  }
 }
 
-section.main-content {
-  @extend .content;
+section.course-content {
+  @include box-sizing(border-box);
+  display: table-cell;
+  padding: $gw-gutter 0 $gw-gutter $gw-gutter;
+  vertical-align: top;
 }
diff --git a/sass/_layout.scss b/sass/_layout.scss
index 8abc9e165b..f3db5139c9 100644
--- a/sass/_layout.scss
+++ b/sass/_layout.scss
@@ -1,63 +1,106 @@
 html {
-  text-align: center;
-  margin: 0 $gw-gutter;
+  margin-top: 0;
 
   body {
     color: $dark-gray;
     font: $body-font-size $body-font-family;
-    margin: $body-line-height auto;
-    max-width: $max-width;
-    text-align: left;
-    width: grid-width(12);
+    text-align: center;
+    margin: 0;
+    background: #f3f3f3;
 
-    header {
-      @extend .clearfix;
-      border-bottom: 1px solid $border-color;
-      margin-bottom: $body-line-height;
+    div.header-wrapper {
+      @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%), 0 1px 1px #ccc);
+      @include linear-gradient(lighten($mit-red, 5%), darken($mit-red, 5%));
+      border-bottom: 1px solid darken($mit-red, 10%);
+      z-index: 99;
 
-      h1 {
-        border-right: 1px solid $border-color;
-        font-size: $body-font-size;
-        font-weight: bold;
-        margin: 0 $gw-gutter 0 0;
-        padding: $body-line-height $gw-gutter $body-line-height 0;
-        display: block;
-        float: left;
-      }
+      header {
+        @extend .clearfix;
+        @extend .wrapper;
+        @include box-sizing(border-box);
+        padding: 0 $body-line-height;
 
-      nav {
-        float: left;
-        display: block;
-        margin: 0;
+        h1 {
+          border-right: 1px solid $mit-red;
+          font-size: $body-font-size;
+          font-weight: bold;
+          margin: 0 $gw-gutter 0 0;
+          padding: 15px $gw-gutter 15px 0;
+          display: block;
+          float: left;
+          text-shadow: 0 1px 0 lighten($mit-red, 10%);
+        }
 
-        ul {
-          @extend .clearfix;
-          display: inline-block;
-          padding: $body-line-height 0;
+        nav {
+          float: left;
+          display: block;
           margin: 0;
 
-          li {
-            margin-right: $body-line-height;
+          ul {
+            @extend .clearfix;
             display: inline-block;
-            margin-bottom: 0;
+            padding: 15px 0;
+            margin: 0;
+
+            li {
+              margin-right: $body-line-height;
+              display: inline-block;
+              margin-bottom: 0;
+
+              a {
+                color: #fff;
+                text-shadow: 0 -1px 0 darken($mit-red, 10%);
+              }
+            }
           }
         }
       }
     }
 
-    section {
+    section.main-content {
       @extend .clearfix;
+      @extend .wrapper;
+      @include box-shadow(0 0px 1px #ccc);
+      @include box-sizing(border-box);
+      background: #fff;
+      border-top: 0;
+      border: 1px solid #ccc;
+      z-index: 0;
     }
 
     img {
       max-width: 100%;
       height: auto;
     }
+  }
 
-    footer {
-      padding: $body-line-height 0;
-      border-top: 1px solid $border-color;
-      margin-top: $body-line-height;
+  footer {
+    @extend .clearfix;
+    @extend .wrapper;
+    @include box-sizing(border-box);
+    color: #777;
+    margin-top: $body-line-height;
+    padding: 0 $body-line-height;
+
+    p {
+      float: left;
+
+      a {
+        color: #444;
+      }
+    }
+
+    ul {
+      float: right;
+
+      li {
+        display: inline-block;
+        margin-right: 20px;
+
+        a {
+          color: #444;
+        }
+      }
     }
   }
 }
diff --git a/sass/_profile.scss b/sass/_profile.scss
index c0003d7122..a8c9f60dc1 100644
--- a/sass/_profile.scss
+++ b/sass/_profile.scss
@@ -1,20 +1,17 @@
-section.profile-content {
+section.user-info {
+  width: grid-width(6);
+  float: left;
+  margin-right: $gw-gutter;
+}
 
-  section.user-info {
-    width: grid-width(6);
-    float: left;
-    margin-right: $gw-gutter;
-  }
+section.course-info {
+  width: grid-width(6);
+  float: left;
 
-  section.course-info {
-    width: grid-width(6);
-    float: left;
-
-    ul {
-      li {
-        display: inline-block;
-        padding-right: 1em;
-      }
+  ul {
+    li {
+      display: inline-block;
+      padding-right: 1em;
     }
   }
 }
diff --git a/sass/application.scss b/sass/application.scss
index e6a1729363..77b8cb0fe0 100644
--- a/sass/application.scss
+++ b/sass/application.scss
@@ -2,7 +2,7 @@
 @import "reset";
 
 // Base layout
-@import "base-variables", "base-extends";
+@import "base-variables", "base-extends", "base";
 @import "layout";
 
 // pages
diff --git a/staticbook.html b/staticbook.html
index 1ee9be4203..5c4f792b01 100644
--- a/staticbook.html
+++ b/staticbook.html
@@ -36,7 +36,7 @@ function next_page() {
 
 <%include file="navigation.html" />
 
-<section class="book-container">
+<section class="main-content">
   <ul id="booknav" class="treeview-booknav">
     <%include file="book_toc.html" />
   </ul>
diff --git a/video.html b/video.html
index 05f4c86933..f713b09c30 100644
--- a/video.html
+++ b/video.html
@@ -22,15 +22,14 @@
 </ol>
 
 <section class="video-controls">
-<ul>
-  <li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
-  <li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
-</ul>
-
-<div id=slider></div>
-<div id="vidtime">0:00/0:00</div>
-<div id="video_speeds"></div>
+  <ul>
+    <li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
+    <li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
+  </ul>
 
+  <div id=slider></div>
+  <div id="vidtime">0:00/0:00</div>
+  <div id="video_speeds"></div>
 </section>