most of the styling and function changes made

cms/static/sass/_base.scss

@@ -180,6 +180,11 @@ code {
         padding: 20px;
     }
 
+    .details {
+      margin-bottom: 30px;
+      font-size: 14px;
+    }
+
     h4 {
         padding: 6px 14px;
         border-bottom: 1px solid #cbd1db;
@@ -337,4 +342,14 @@ body.show-wip {
         content: '';
         @extend .spinner-icon;
     }
+}
+
+.new-button {
+    @include grey-button;
+    padding: 20px 0;
+    text-align: center;
+
+    &.big {
+        display: block;
+    }
 }
\ No newline at end of file

cms/static/sass/_courseware.scss

@@ -5,12 +5,7 @@ input.courseware-unit-search-input {
 }
 
 .courseware-overview {
-	.new-courseware-section-button {
-		@include grey-button;
-		display: block;
-		text-align: center;
-		padding: 12px 0;
-	}
+	
 }
 
 .courseware-section {

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 {

cms/static/sass/_lms.scss

-.components li {
+.component {
   font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   line-height: 1.6;

cms/static/sass/_static-pages.scss

@@ -6,6 +6,65 @@
     padding: 12px 0;
   }
 
+  .unit-body {
+    padding: 30px 40px;
+  }
+
+  .components > li {
+    margin: 20px 0;
+  }
+
+  .component {
+    border: none;
+
+    &:hover {
+      border: none;
+
+      .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;
+    }
+
+    .edit-button,
+    .delete-button {
+      // @include grey-button;
+      border: none;
+      background: none;
+      color: $darkGrey;
+    }
+  }
+
+  .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;

cms/static/sass/_unit.scss

@@ -54,94 +54,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 +140,86 @@
     }
   }
 
+  .component {
+    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;
+    }
+
+    .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);
+    }
+  }
+
   .xmodule_display {
-    padding: 10px 20px;
+    padding: 40px 20px 20px;
   }
 
   .component-editor {

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 {

cms/templates/edit-tabs.html

@@ -21,6 +21,9 @@
       <h1>Static Tabs</h1>
     </div>
     <article class="unit-body window">
+      <div class="details">
+        <p>Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
+      </div>
       <div class="tab-list">
         <ol class='components'>
           % for id in components:
@@ -28,7 +31,7 @@
           % endfor
                    
           <li class="new-component-item">
-            <a href="#" class="new-component-button new-tab">
+            <a href="#" class="new-button big new-tab">
               <span class="plus-icon"></span>New Tab
             </a>
           </li>

cms/templates/overview.html

@@ -75,7 +75,7 @@
       <h1>Courseware</h1>
       <div class="page-actions"></div>
       <article class="courseware-overview" data-course-id="${context_course.location.url()}">
-        <a href="#" class="new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
+        <a href="#" class="new-button big new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
         % for section in sections:
         <section class="courseware-section branch" data-id="${section.location}">
           <header>

cms/templates/unit.html

@@ -33,7 +33,7 @@
             <li class="component" data-id="${id}"/>
             % endfor
             <li class="new-component-item">
-              <a href="#" class="new-component-button">
+              <a href="#" class="new-component-button new-button big">
                 <span class="plus-icon"></span>New Component
               </a>
               <div class="new-component">