diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 7f5dcacf8b..22a5a7e128 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -367,4 +367,32 @@ body.show-wip {
   .delete-icon {
     margin-right: 4px;
   }
+}
+
+.tooltip {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  padding: 0 10px;
+  border-radius: 3px;
+  background: rgba(0, 0, 0, 0.85);
+  font-size: 11px;
+  font-weight: normal;
+  line-height: 26px;
+  color: #fff;
+  pointer-events: none;
+  opacity: 0;
+  @include transition(opacity 0.1s ease-out);
+
+  &:after {
+    content: '▾';
+    display: block;
+    position: absolute;
+    bottom: -14px;
+    left: 50%;
+    margin-left: -7px;
+    font-size: 20px;
+    color: rgba(0, 0, 0, 0.85);
+  }
 }
\ No newline at end of file
diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss
index 2f43bfd208..b4db2f096e 100644
--- a/cms/static/sass/_cms_mixins.scss
+++ b/cms/static/sass/_cms_mixins.scss
@@ -51,14 +51,14 @@
 	@include button;
 	border: 1px solid $darkGrey;
 	border-radius: 3px;
-	@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%);
+	@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
 	background-color: #dfe5eb;
 	@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
-	color: #5d6779;
-
+	color: #778192;
+	
 	&:hover {
 		background-color: #f2f6f9;
-		color: #5d6779;
+		color: #778192;
 	}
 }
 
diff --git a/cms/static/sass/_course-info.scss b/cms/static/sass/_course-info.scss
index 6eb08943b1..2ec22ebfea 100644
--- a/cms/static/sass/_course-info.scss
+++ b/cms/static/sass/_course-info.scss
@@ -1,77 +1,179 @@
-body.updates {
+.course-info {
 	h2 {
 		margin-bottom: 24px;
 		font-size: 22px;
 		font-weight: 300;
 	}
+
+	.course-info-wrapper {
+		display: table;
+		width: 100%;
+		clear: both;
+	}
+
+	.main-column,
+	.course-handouts {
+		float: none;
+		display: table-cell;
+	}
+
+	.main-column {
+		border-radius: 3px 0 0 3px;
+		border-right-color: $mediumGrey;
+	}
+
+	.CodeMirror {
+    border: 1px solid #3c3c3c;
+    background: #fff;
+    color: #3c3c3c;
+  }
 }
 
 .course-updates {
 	padding: 30px 40px;
+	margin: 0;
 
-	li {
-		padding: 24px 0 32px;
+	.update-list > li {
+		padding: 34px 0 42px;
 		border-top: 1px solid #cbd1db;
-	}
 
-	h3 {
-		margin-bottom: 18px;
-		font-size: 14px;
-		font-weight: 700;
-		color: #646464;
-		letter-spacing: 1px;
-		text-transform: uppercase;
+		&.editing {
+			position: relative;
+			z-index: 1001;
+			padding: 0;
+			border-top: none;
+			border-radius: 3px;
+			background: #fff;
+
+			.post-preview {
+				display: none;
+			}
+		}
+
+		h1 {
+			float: none;
+			font-size: 24px;
+			font-weight: 300;
+		}
+
+		h2 {
+			margin-bottom: 18px;
+			font-size: 14px;
+			font-weight: 700;
+			line-height: 30px;
+			color: #646464;
+			letter-spacing: 1px;
+			text-transform: uppercase;
+		}
+
+		h3 {
+			margin: 34px 0 11px;
+			font-size: 16px;
+			font-weight: 700;
+		}
 	}
 
 	.update-contents {
-		padding-left: 30px;
-
 		p {
-			font-size: 14px;
-			line-height: 18px;
+			font-size: 16px;
+			line-height: 25px;
 		}
 
 		p + p {
-			margin-top: 18px;
+			margin-top: 25px;
+		}
+
+		.primary {
+			border: 1px solid #ddd;
+			background: #f6f6f6;
+			padding: 20px;
 		}
 	}
 
 	.new-update-button {
-		@include grey-button;
+		@include blue-button;
 		display: block;
 		text-align: center;
-		padding: 12px 0;
+		padding: 18px 0;
 		margin-bottom: 28px;
 	}
 
 	.new-update-form {
 		@include edit-box;
 		margin-bottom: 24px;
+		padding: 30px;
+		border: none;
 
 		textarea {
 			height: 180px;
 		}
 	}
+
+	.post-actions {
+		float: right;
+
+		.edit-button,
+		.delete-button{
+			float: left;
+			@include white-button;
+	    padding: 3px 10px 4px;
+	    margin-left: 7px;
+	    font-size: 12px;
+	    font-weight: 400;
+
+	    .edit-icon,
+	    .delete-icon {
+	      margin-right: 4px;
+	    }
+		}
+	}
 }
 
 .course-handouts {
-	padding: 15px 20px;
+	width: 30%;
+	padding: 20px 30px;
+	margin: 0;
+	border-radius: 0 3px 3px 0;
+	border-left: none;
+	background: $lightGrey;
 
-	.new-handout-button {
-		@include grey-button;
-		display: block;
-		text-align: center;
-		padding: 12px 0;
-		margin-bottom: 28px;
+	h2 {
+		font-size: 18px;
+		font-weight: 700;
 	}
 
-	li {
-		margin-bottom: 10px;
+	.edit-button {
+		float: right;
+		@include white-button;
+    padding: 3px 10px 4px;
+    margin-left: 7px;
+    font-size: 12px;
+    font-weight: 400;
+
+    .edit-icon,
+    .delete-icon {
+      margin-right: 4px;
+    }
+	}
+
+	.handouts-content {
 		font-size: 14px;
 	}
 
-	.new-handout-form {
-		@include edit-box;
-		margin-bottom: 24px;
+	.treeview-handoutsnav li {
+		margin-bottom: 12px;
+	}
+}
+
+.edit-handouts-form {
+	@include edit-box;
+	position: absolute;
+	right: 0;
+	z-index: 10001;
+	width: 800px;
+	padding: 30px;
+
+	textarea {
+		height: 300px;
 	}
 }
\ No newline at end of file
diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss
index 094b6183dd..2fda5b9453 100644
--- a/cms/static/sass/_courseware.scss
+++ b/cms/static/sass/_courseware.scss
@@ -146,7 +146,7 @@ input.courseware-unit-search-input {
 
 	.section-name-edit {
 		input {
-			font-size: 16px;	
+			font-size: 16px;
 		}
 		
 		.save-button {
@@ -205,7 +205,7 @@ input.courseware-unit-search-input {
 .new-section-name-save,
 .new-subsection-name-save {
 	@include blue-button;
-	padding: 2px 20px 5px;
+	padding: 6px 20px 8px;
 	margin: 0 5px;
 	color: #fff !important;
 }
diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss
index c6d775ed12..4a63a8a885 100644
--- a/cms/static/sass/_graphics.scss
+++ b/cms/static/sass/_graphics.scss
@@ -137,6 +137,10 @@
 	height: 11px;
 	margin-right: 8px;
 	background: url(../img/plus-icon.png) no-repeat;
+
+	&.white {
+		background: url(../img/plus-icon-white.png) no-repeat;
+	}
 }
 
 .plus-icon-small {
diff --git a/cms/static/sass/_mixins.scss b/cms/static/sass/_mixins.scss
deleted file mode 100644
index 58a92d1ee6..0000000000
--- a/cms/static/sass/_mixins.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@function em($pxval, $base: 16) {
-  @return #{$pxval / $base}em;
-}
-
-// Line-height
-@function lh($amount: 1) {
-  @return $body-line-height * $amount;
-}
-
-@mixin hide-text(){
-  text-indent: -9999px;
-  overflow: hidden;
-  display: block;
-}
-
-@mixin vertically-and-horizontally-centered ( $height, $width ) {
-  left: 50%;
-  margin-left: -$width / 2;
-  //margin-top: -$height / 2;
-  min-height: $height;
-  min-width: $width;
-  position: absolute;
-  top: 150px;
-}
diff --git a/cms/static/sass/_mixins.scss b/cms/static/sass/_mixins.scss
new file mode 120000
index 0000000000..0c1b1f5b81
--- /dev/null
+++ b/cms/static/sass/_mixins.scss
@@ -0,0 +1 @@
+../../../common/static/sass/_mixins.scss
\ No newline at end of file
diff --git a/cms/static/sass/_static-pages.scss b/cms/static/sass/_static-pages.scss
index 628d537f90..c8ffa0316c 100644
--- a/cms/static/sass/_static-pages.scss
+++ b/cms/static/sass/_static-pages.scss
@@ -6,6 +6,72 @@
     padding: 12px 0;
   }
 
+  .unit-body {
+    padding: 30px 40px;
+  }
+
+  .components > li {
+    margin: 0;
+    border-radius: 0;
+
+    &.new-component-item {
+      margin-top: 20px;
+    }
+  }
+
+  .component {
+    border: 1px solid $mediumGrey;
+    border-top: none;
+
+    &:first-child {
+      border-top: 1px solid $mediumGrey;
+    }
+
+    &:hover {
+      border: 1px solid $mediumGrey;
+      border-top: none;
+
+      &:first-child {
+        border-top: 1px solid $mediumGrey;
+      }
+
+      .drag-handle {
+        background: url(../img/drag-handles.png) center no-repeat $lightGrey;
+      }
+    }
+
+    .drag-handle {
+      top: 0;
+      right: 0;
+      z-index: 11;
+      width: 35px;
+      border: none;
+      background: url(../img/drag-handles.png) center no-repeat $lightGrey;
+
+      &:hover {
+        background: url(../img/drag-handles.png) center no-repeat $lightGrey;
+      }
+    }
+
+    .component-actions {
+      top: 26px;
+      right: 44px;
+    }
+  }
+
+  .component.editing {
+    .xmodule_display {
+      display: none;
+    }
+  }
+
+  .xmodule_display {
+    padding: 20px 20px 22px;
+    font-size: 24px;
+    font-weight: 300;
+    background: $lightGrey;
+  }
+
   .static-page-item {
     position: relative;    
     margin: 10px 0;
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index 220bec507d..fdf737fc12 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -4,6 +4,7 @@
 }
 
 .main-column {
+  clear: both;
   float: left;
   width: 70%;
 }
@@ -54,94 +55,11 @@
       position: relative;
       z-index: 10;
       margin: 20px 40px;
-      border: 1px solid #d1ddec;
-      border-radius: 3px;
-      background: #fff;
-      @include transition(none);
-
-      &:hover {
-        border-color: #6696d7;
-
-        .drag-handle,
-        .component-actions a {
-          background-color: $blue;
-        }
-
-        .drag-handle {
-          border-color: $blue;
-        }
-      }
-
-      &.editing {
-        border-color: #6696d7;
-
-        .drag-handle,
-        .component-actions {
-          display: none;
-        }
-      }
-
-      &.component-placeholder {
-        border-color: #6696d7;
-      }
-
-      .xmodule_display {
-        padding: 40px 20px 20px;
-      }
-
-      .component-actions {
-        position: absolute;
-        top: 4px;
-        right: 4px;
-        @include transition(opacity .15s);
-      }
-
-      .edit-button,
-      .delete-button {
-        float: left;
-        padding: 3px 10px 4px;
-        margin-left: 3px;
-        border: 1px solid #fff;
-        border-radius: 3px;
-        background: #d1ddec;
-        font-size: 12px;
-        color: #fff;
-        @include transition(all .15s);
-
-        &:hover {
-          background-color: $blue;
-          color: #fff;
-        }
-
-        .edit-icon,
-        .delete-icon {
-          margin-right: 4px;
-        }
-      }
-
-      .drag-handle {
-        position: absolute;
-        display: block;
-        top: -1px;
-        right: -16px;
-        z-index: -1;
-        width: 15px;
-        height: 100%;
-        border-radius: 0 3px 3px 0;
-        border: 1px solid #d1ddec;
-        background: url(../img/white-drag-handles.png) center no-repeat #d1ddec;
-        cursor: move;
-        @include transition(all .15s);
-      }
 
       &.new-component-item {
         padding: 0;
-        border: 1px solid #8891a1;
-        border-radius: 3px;
-        @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-        background-color: #d1dae3;
-        @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
-        @include transition(background-color .15s, border-color .15s);
+        border: none;
+        border-radius: 0;
 
         &.adding {
           background-color: $blue;
@@ -223,8 +141,63 @@
     }
   }
 
+  .component {
+    border: 1px solid #d1ddec;
+    border-radius: 3px;
+    background: #fff;
+    @include transition(none);
+
+    &:hover {
+      border-color: #6696d7;
+
+      .drag-handle {
+        background-color: $blue;
+        border-color: $blue;
+      }
+    }
+
+    &.editing {
+      border-color: #6696d7;
+
+      .drag-handle,
+      .component-actions {
+        display: none;
+      }
+    }
+
+    &.component-placeholder {
+      border-color: #6696d7;
+    }
+
+    .component-actions {
+      position: absolute;
+      top: 7px;
+      right: 9px;
+      @include transition(opacity .15s);
+
+      a {
+        color: $darkGrey;
+      }
+    }
+
+    .drag-handle {
+      position: absolute;
+      display: block;
+      top: -1px;
+      right: -16px;
+      z-index: -1;
+      width: 15px;
+      height: 100%;
+      border-radius: 0 3px 3px 0;
+      border: 1px solid #d1ddec;
+      background: url(../img/white-drag-handles.png) center no-repeat #d1ddec;
+      cursor: move;
+      @include transition(all .15s);
+    }
+  }
+
   .xmodule_display {
-    padding: 10px 20px;
+    padding: 40px 20px 20px;
   }
 
   .component-editor {
diff --git a/cms/static/sass/_users.scss b/cms/static/sass/_users.scss
index 7c60ee5c3b..bca9b4f2fb 100644
--- a/cms/static/sass/_users.scss
+++ b/cms/static/sass/_users.scss
@@ -2,11 +2,6 @@
   .user-overview {
     @extend .window;
     padding: 30px 40px;
-
-    .details {
-      margin-bottom: 20px;
-      font-size: 14px;
-    }
   }
 
   .new-user-button {
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index 8666dc192c..fec65e4e11 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -13,11 +13,8 @@ $body-line-height: golden-ratio(.875em, 1);
 $pink: rgb(182,37,104);
 $error-red: rgb(253, 87, 87);
 
-$offBlack: #3c3c3c;
 $blue: #5597dd;
 $orange: #edbd3c;
-$red: #b20610;
-$green: #108614;
 $lightGrey: #edf1f5;
 $mediumGrey: #ced2db;
 $darkGrey: #8891a1;