diff --git a/cms/djangoapps/contentstore/course_info_model.py b/cms/djangoapps/contentstore/course_info_model.py
index 8c8aed549d..589db4ac56 100644
--- a/cms/djangoapps/contentstore/course_info_model.py
+++ b/cms/djangoapps/contentstore/course_info_model.py
@@ -1,13 +1,15 @@
 from xmodule.modulestore.exceptions import ItemNotFoundError
 from xmodule.modulestore import Location
 from xmodule.modulestore.django import modulestore
-from lxml import html, etree
+from lxml import html
 import re
 from django.http import HttpResponseBadRequest
 import logging
+import django.utils
 
-## TODO store as array of { date, content } and override  course_info_module.definition_from_xml
-## This should be in a class which inherits from XmlDescriptor
+# # TODO store as array of { date, content } and override  course_info_module.definition_from_xml
+# # This should be in a class which inherits from XmlDescriptor
+log = logging.getLogger(__name__)
 
 
 def get_course_updates(location):
@@ -26,9 +28,11 @@ def get_course_updates(location):
 
     # purely to handle free formed updates not done via editor. Actually kills them, but at least doesn't break.
     try:
-        course_html_parsed = etree.fromstring(course_updates.data)
-    except etree.XMLSyntaxError:
-        course_html_parsed = etree.fromstring("<ol></ol>")
+        course_html_parsed = html.fromstring(course_updates.data)
+    except:
+        log.error("Cannot parse: " + course_updates.data)
+        escaped = django.utils.html.escape(course_updates.data)
+        course_html_parsed = html.fromstring("<ol><li>" + escaped + "</li></ol>")
 
     # Confirm that root is <ol>, iterate over <li>, pull out <h2> subs and then rest of val
     course_upd_collection = []
@@ -64,9 +68,11 @@ def update_course_updates(location, update, passed_id=None):
 
     # purely to handle free formed updates not done via editor. Actually kills them, but at least doesn't break.
     try:
-        course_html_parsed = etree.fromstring(course_updates.data)
-    except etree.XMLSyntaxError:
-        course_html_parsed = etree.fromstring("<ol></ol>")
+        course_html_parsed = html.fromstring(course_updates.data)
+    except:
+        log.error("Cannot parse: " + course_updates.data)
+        escaped = django.utils.html.escape(course_updates.data)
+        course_html_parsed = html.fromstring("<ol><li>" + escaped + "</li></ol>")
 
     # No try/catch b/c failure generates an error back to client
     new_html_parsed = html.fromstring('<li><h2>' + update['date'] + '</h2>' + update['content'] + '</li>')
@@ -85,12 +91,19 @@ def update_course_updates(location, update, passed_id=None):
             passed_id = course_updates.location.url() + "/" + str(idx)
 
         # update db record
-        course_updates.data = etree.tostring(course_html_parsed)
+        course_updates.data = html.tostring(course_html_parsed)
         modulestore('direct').update_item(location, course_updates.data)
 
-        return {"id" : passed_id,
-                "date" : update['date'],
-                "content" :update['content']}
+        if (len(new_html_parsed) == 1):
+            content = new_html_parsed[0].tail
+        else:
+            content = "\n".join([html.tostring(ele)
+                for ele in new_html_parsed[1:]])
+
+        return {"id": passed_id,
+                "date": update['date'],
+                "content": content}
+
 
 def delete_course_update(location, update, passed_id):
     """
@@ -108,9 +121,11 @@ def delete_course_update(location, update, passed_id):
     # TODO use delete_blank_text parser throughout and cache as a static var in a class
     # purely to handle free formed updates not done via editor. Actually kills them, but at least doesn't break.
     try:
-        course_html_parsed = etree.fromstring(course_updates.data)
-    except etree.XMLSyntaxError:
-        course_html_parsed = etree.fromstring("<ol></ol>")
+        course_html_parsed = html.fromstring(course_updates.data)
+    except:
+        log.error("Cannot parse: " + course_updates.data)
+        escaped = django.utils.html.escape(course_updates.data)
+        course_html_parsed = html.fromstring("<ol><li>" + escaped + "</li></ol>")
 
     if course_html_parsed.tag == 'ol':
         # ??? Should this use the id in the json or in the url or does it matter?
@@ -121,7 +136,7 @@ def delete_course_update(location, update, passed_id):
             course_html_parsed.remove(element_to_delete)
 
         # update db record
-        course_updates.data = etree.tostring(course_html_parsed)
+        course_updates.data = html.tostring(course_html_parsed)
         store = modulestore('direct')
         store.update_item(location, course_updates.data)
 
@@ -132,7 +147,6 @@ def get_idx(passed_id):
     """
     From the url w/ idx appended, get the idx.
     """
-    # TODO compile this regex into a class static and reuse for each call
-    idx_matcher = re.search(r'.*/(\d+)$', passed_id)
+    idx_matcher = re.search(r'.*?/?(\d+)$', passed_id)
     if idx_matcher:
         return int(idx_matcher.group(1))
diff --git a/cms/djangoapps/contentstore/tests/test_contentstore.py b/cms/djangoapps/contentstore/tests/test_contentstore.py
index d04e1a6332..615ffb6ed0 100644
--- a/cms/djangoapps/contentstore/tests/test_contentstore.py
+++ b/cms/djangoapps/contentstore/tests/test_contentstore.py
@@ -101,6 +101,20 @@ class ContentStoreToyCourseTest(ModuleStoreTestCase):
 
         self.assertEqual(reverse_tabs, course_tabs)
 
+    def test_import_polls(self):
+        import_from_xml(modulestore(), 'common/test/data/', ['full'])
+
+        module_store = modulestore('direct')
+        found = False
+
+        item = None
+        items = module_store.get_items(['i4x', 'edX', 'full', 'poll_question', None, None])
+        found = len(items) > 0
+
+        self.assertTrue(found)
+        # check that there's actually content in the 'question' field
+        self.assertGreater(len(items[0].question),0)
+
     def test_delete(self):
         import_from_xml(modulestore(), 'common/test/data/', ['full'])
 
diff --git a/cms/djangoapps/contentstore/tests/test_course_updates.py b/cms/djangoapps/contentstore/tests/test_course_updates.py
index 6a3a1e21f7..38608ee94d 100644
--- a/cms/djangoapps/contentstore/tests/test_course_updates.py
+++ b/cms/djangoapps/contentstore/tests/test_course_updates.py
@@ -1,31 +1,135 @@
 from contentstore.tests.test_course_settings import CourseTestCase
 from django.core.urlresolvers import reverse
 import json
+from webob.exc import HTTPServerError
+from django.http import HttpResponseBadRequest
 
 
 class CourseUpdateTest(CourseTestCase):
     def test_course_update(self):
         # first get the update to force the creation
-        url = reverse('course_info', kwargs={'org': self.course_location.org, 'course': self.course_location.course,
-                                       'name': self.course_location.name})
+        url = reverse('course_info',
+            kwargs={'org': self.course_location.org,
+                'course': self.course_location.course,
+                'name': self.course_location.name})
         self.client.get(url)
 
-        content = '<iframe width="560" height="315" src="http://www.youtube.com/embed/RocY-Jd93XU" frameborder="0"></iframe>'
+        init_content = '<iframe width="560" height="315" src="http://www.youtube.com/embed/RocY-Jd93XU" frameborder="0">'
+        content = init_content + '</iframe>'
         payload = {'content': content,
                    'date': 'January 8, 2013'}
-        url = reverse('course_info', kwargs={'org': self.course_location.org, 'course': self.course_location.course,
-                                             'provided_id': ''})
+        url = reverse('course_info_json', kwargs={'org': self.course_location.org,
+            'course': self.course_location.course,
+            'provided_id': ''})
 
         resp = self.client.post(url, json.dumps(payload), "application/json")
 
         payload = json.loads(resp.content)
 
-        self.assertHTMLEqual(content, payload['content'], "single iframe")
+        self.assertHTMLEqual(payload['content'], content)
 
-        url = reverse('course_info', kwargs={'org': self.course_location.org, 'course': self.course_location.course,
-                                             'provided_id': payload['id']})
-        content += '<div>div <p>p</p></div>'
+        first_update_url = reverse('course_info_json',
+            kwargs={'org': self.course_location.org,
+                'course': self.course_location.course,
+                'provided_id': payload['id']})
+        content += '<div>div <p>p<br/></p></div>'
         payload['content'] = content
+        resp = self.client.post(first_update_url, json.dumps(payload),
+            "application/json")
+
+        self.assertHTMLEqual(content, json.loads(resp.content)['content'],
+            "iframe w/ div")
+
+        # now put in an evil update
+        content = '<ol/>'
+        payload = {'content': content,
+                   'date': 'January 11, 2013'}
+        url = reverse('course_info_json',
+            kwargs={'org': self.course_location.org,
+                'course': self.course_location.course,
+                'provided_id': ''})
+
         resp = self.client.post(url, json.dumps(payload), "application/json")
 
-        self.assertHTMLEqual(content, json.loads(resp.content)['content'], "iframe w/ div")
+        payload = json.loads(resp.content)
+
+        self.assertHTMLEqual(content, payload['content'], "self closing ol")
+
+        url = reverse('course_info_json',
+            kwargs={'org': self.course_location.org,
+                'course': self.course_location.course,
+                'provided_id': ''})
+        resp = self.client.get(url)
+        payload = json.loads(resp.content)
+        self.assertTrue(len(payload) == 2)
+
+        # can't test non-json paylod b/c expect_json throws error
+        # try json w/o required fields
+        self.assertContains(
+            self.client.post(url, json.dumps({'garbage': 1}),
+                "application/json"),
+            'Failed to save', status_code=400)
+
+        # now try to update a non-existent update
+        url = reverse('course_info_json',
+            kwargs={'org': self.course_location.org,
+                'course': self.course_location.course,
+                'provided_id': '9'})
+        content = 'blah blah'
+        payload = {'content': content,
+                   'date': 'January 21, 2013'}
+        self.assertContains(
+            self.client.post(url, json.dumps(payload), "application/json"),
+            'Failed to save', status_code=400)
+
+        # update w/ malformed html
+        content = '<garbage tag No closing brace to force <span>error</span>'
+        payload = {'content': content,
+                   'date': 'January 11, 2013'}
+        url = reverse('course_info_json', kwargs={'org': self.course_location.org,
+            'course': self.course_location.course,
+            'provided_id': ''})
+
+        resp = self.client.post(url, json.dumps(payload), "application/json")
+
+        payload = json.loads(resp.content)
+
+        self.assertContains(
+            self.client.post(url, json.dumps(payload), "application/json"),
+            '<garbage')
+
+        # now try to delete a non-existent update
+        url = reverse('course_info_json', kwargs={'org': self.course_location.org,
+            'course': self.course_location.course,
+            'provided_id': '19'})
+        payload = {'content': content,
+                   'date': 'January 21, 2013'}
+        self.assertContains(self.client.delete(url), "delete", status_code=400)
+
+        # now delete a real update
+        content = 'blah blah'
+        payload = {'content': content,
+                   'date': 'January 28, 2013'}
+        url = reverse('course_info_json', kwargs={'org': self.course_location.org,
+            'course': self.course_location.course,
+            'provided_id': ''})
+        resp = self.client.post(url, json.dumps(payload), "application/json")
+        payload = json.loads(resp.content)
+        this_id = payload['id']
+        self.assertHTMLEqual(content, payload['content'], "single iframe")
+        # first count the entries
+        url = reverse('course_info_json',
+            kwargs={'org': self.course_location.org,
+                'course': self.course_location.course,
+                'provided_id': ''})
+        resp = self.client.get(url)
+        payload = json.loads(resp.content)
+        before_delete = len(payload)
+
+        url = reverse('course_info_json',
+            kwargs={'org': self.course_location.org,
+                'course': self.course_location.course,
+                'provided_id': this_id})
+        resp = self.client.delete(url)
+        payload = json.loads(resp.content)
+        self.assertTrue(len(payload) == before_delete - 1)
diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py
index 9264b91971..8fd3efaabd 100644
--- a/cms/djangoapps/contentstore/views.py
+++ b/cms/djangoapps/contentstore/views.py
@@ -54,12 +54,12 @@ from auth.authz import INSTRUCTOR_ROLE_NAME, STAFF_ROLE_NAME, create_all_course_
 from .utils import get_course_location_for_item, get_lms_link_for_item, compute_unit_state, get_date_display, UnitState, get_course_for_item, get_url_reverse
 
 from xmodule.modulestore.xml_importer import import_from_xml
-from contentstore.course_info_model import get_course_updates,\
+from contentstore.course_info_model import get_course_updates, \
     update_course_updates, delete_course_update
 from cache_toolbox.core import del_cached_content
 from xmodule.timeparse import stringify_time
 from contentstore.module_info_model import get_module_info, set_module_info
-from models.settings.course_details import CourseDetails,\
+from models.settings.course_details import CourseDetails, \
     CourseSettingsEncoder
 from models.settings.course_grading import CourseGradingModel
 from contentstore.utils import get_modulestore
@@ -73,7 +73,7 @@ log = logging.getLogger(__name__)
 
 COMPONENT_TYPES = ['customtag', 'discussion', 'html', 'problem', 'video']
 
-ADVANCED_COMPONENT_TYPES = ['annotatable','combinedopenended', 'peergrading']
+ADVANCED_COMPONENT_TYPES = ['annotatable', 'combinedopenended', 'peergrading']
 ADVANCED_COMPONENT_CATEGORY = 'advanced'
 ADVANCED_COMPONENT_POLICY_KEY = 'advanced_modules'
 
@@ -315,7 +315,7 @@ def edit_unit(request, location):
             category = ADVANCED_COMPONENT_CATEGORY
 
         if category in component_types:
-            #This is a hack to create categories for different xmodules
+            # This is a hack to create categories for different xmodules
             component_templates[category].append((
                 template.display_name_with_default,
                 template.location.url(),
@@ -410,7 +410,7 @@ def assignment_type_update(request, org, course, category, name):
     if request.method == 'GET':
         return HttpResponse(json.dumps(CourseGradingModel.get_section_grader_type(location)),
                             mimetype="application/json")
-    elif request.method == 'POST':   # post or put, doesn't matter.
+    elif request.method == 'POST':  # post or put, doesn't matter.
         return HttpResponse(json.dumps(CourseGradingModel.update_section_grader_type(location, request.POST)),
                             mimetype="application/json")
 
@@ -824,7 +824,7 @@ def upload_asset(request, org, course, coursename):
     if thumbnail_content is not None:
         content.thumbnail_location = thumbnail_location
 
-    #then commit the content
+    # then commit the content
     contentstore().save(content)
     del_cached_content(content.location)
 
@@ -867,7 +867,7 @@ def manage_users(request, location):
     })
 
 
-def create_json_response(errmsg = None):
+def create_json_response(errmsg=None):
     if errmsg is not None:
         resp = HttpResponse(json.dumps({'Status': 'Failed', 'ErrMsg': errmsg}))
     else:
@@ -1103,14 +1103,22 @@ def course_info_updates(request, org, course, provided_id=None):
     real_method = get_request_method(request)
 
     if request.method == 'GET':
-        return HttpResponse(json.dumps(get_course_updates(location)), mimetype="application/json")
-    elif real_method == 'DELETE':  # coming as POST need to pull from Request Header X-HTTP-Method-Override    DELETE
-        return HttpResponse(json.dumps(delete_course_update(location, request.POST, provided_id)), mimetype="application/json")
+        return HttpResponse(json.dumps(get_course_updates(location)),
+            mimetype="application/json")
+    elif real_method == 'DELETE':
+        try:
+            return HttpResponse(json.dumps(delete_course_update(location,
+                request.POST, provided_id)), mimetype="application/json")
+        except:
+            return HttpResponseBadRequest("Failed to delete",
+                content_type="text/plain")
     elif request.method == 'POST':
         try:
-            return HttpResponse(json.dumps(update_course_updates(location, request.POST, provided_id)), mimetype="application/json")
+            return HttpResponse(json.dumps(update_course_updates(location,
+                request.POST, provided_id)), mimetype="application/json")
         except:
-            return HttpResponseBadRequest("Failed to save: malformed html", content_type="text/plain")
+            return HttpResponseBadRequest("Failed to save",
+                content_type="text/plain")
 
 
 @expect_json
@@ -1229,7 +1237,7 @@ def course_settings_updates(request, org, course, name, section):
         # Cannot just do a get w/o knowing the course name :-(
         return HttpResponse(json.dumps(manager.fetch(Location(['i4x', org, course, 'course', name])), cls=CourseSettingsEncoder),
                             mimetype="application/json")
-    elif request.method == 'POST':   # post or put, doesn't matter.
+    elif request.method == 'POST':  # post or put, doesn't matter.
         return HttpResponse(json.dumps(manager.update_from_json(request.POST), cls=CourseSettingsEncoder),
                             mimetype="application/json")
 
@@ -1262,7 +1270,7 @@ def course_grader_updates(request, org, course, name, grader_index=None):
                             mimetype="application/json")
 
 
-## NB: expect_json failed on ["key", "key2"] and json payload
+# # NB: expect_json failed on ["key", "key2"] and json payload
 @login_required
 @ensure_csrf_cookie
 def course_advanced_updates(request, org, course, name):
@@ -1565,7 +1573,7 @@ def generate_export_course(request, org, course, name):
     logging.debug('root = {0}'.format(root_dir))
 
     export_to_xml(modulestore('direct'), contentstore(), loc, root_dir, name)
-    #filename = root_dir / name + '.tar.gz'
+    # filename = root_dir / name + '.tar.gz'
 
     logging.debug('tar file being generated at {0}'.format(export_file.name))
     tf = tarfile.open(name=export_file.name, mode='w:gz')
diff --git a/cms/static/coffee/src/views/unit.coffee b/cms/static/coffee/src/views/unit.coffee
index 7f5fa4adce..13c7e53f02 100644
--- a/cms/static/coffee/src/views/unit.coffee
+++ b/cms/static/coffee/src/views/unit.coffee
@@ -34,7 +34,10 @@ class CMS.Views.UnitEdit extends Backbone.View
 
     @$('.components').sortable(
       handle: '.drag-handle'
-      update: (event, ui) => @model.save(children: @components())
+      update: (event, ui) =>
+        payload = children : @components()
+        options = success : => @model.unset('children')
+        @model.save(payload, options)
       helper: 'clone'
       opacity: '0.5'
       placeholder: 'component-placeholder'
@@ -109,7 +112,14 @@ class CMS.Views.UnitEdit extends Backbone.View
       id: $component.data('id')
     }, =>
       $component.remove()
-      @model.save(children: @components())
+      # b/c we don't vigilantly keep children up to date
+      # get rid of it before it hurts someone
+      # sorry for the js, i couldn't figure out the coffee equivalent
+      `_this.model.save({children: _this.components()},
+          {success: function(model) {
+              model.unset('children');
+          }}
+      );`
     )
 
   deleteDraft: (event) ->
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 3f8d1f9b6d..cadb442b7c 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -1,7 +1,7 @@
-// studio base styling
+// studio - base styling
 // ====================
 
-// basic reset
+// basic setup
 html {
   font-size: 62.5%;
   overflow-y: scroll;
@@ -9,7 +9,7 @@ html {
 
 body {
   @include font-size(16);
-  min-width: 980px;
+  min-width: $fg-min-width;
   background: $gray-l5;
   line-height: 1.6;
   color: $baseFontColor;
@@ -351,10 +351,11 @@ h1 {
 // layout - grandfathered
 .main-wrapper {
   position: relative;
-  margin: 0 40px;
+  margin: 40px;
 }
 
 .inner-wrapper {
+  @include clearfix();
   position: relative;
   max-width: 1280px;
   margin: auto;
@@ -364,6 +365,12 @@ h1 {
   }
 }
 
+.main-column {
+  clear: both;
+  float: left;
+  width: 70%;
+}
+
 .sidebar {
   float: right;
   width: 28%;
@@ -379,109 +386,6 @@ h1 {
 
 // ====================
 
-// forms
-input[type="text"],
-input[type="email"],
-input[type="password"],
-textarea.text {
-  padding: 6px 8px 8px;
-  @include box-sizing(border-box);
-  border: 1px solid $mediumGrey;
-  border-radius: 2px;
-  @include linear-gradient($lightGrey, tint($lightGrey, 90%));
-  background-color: $lightGrey;
-  @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
-  font-family: 'Open Sans', sans-serif;
-  font-size: 11px;
-  color: $baseFontColor;
-  outline: 0;
-
-  &::-webkit-input-placeholder,
-  &:-moz-placeholder,
-  &:-ms-input-placeholder {
-      color: #979faf;
-  }
-
-  &:focus {
-    @include linear-gradient($paleYellow, tint($paleYellow, 90%));
-    outline: 0;
-  }
-
-  &[disabled] {
-    border-color: $gray-l4;
-    color: $gray-l2;
-  }
-
-  &[readonly] {
-    border-color: $gray-l4;
-    color: $gray-l1;
-
-    &:focus {
-      @include linear-gradient($lightGrey, tint($lightGrey, 90%));
-      outline: 0;
-    }
-  }
-}
-
-// forms - specific
-input.search {
-  padding: 6px 15px 8px 30px;
-  @include box-sizing(border-box);
-  border: 1px solid $darkGrey;
-  border-radius: 20px;
-  background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
-  font-family: 'Open Sans', sans-serif;
-  color: $baseFontColor;
-  outline: 0;
-
-  &::-webkit-input-placeholder {
-      color: #979faf;
-  }
-}
-
-label {
-  font-size: 12px;
-}
-
-code {
-  padding: 0 4px;
-  border-radius: 3px;
-  background: #eee;
-  font-family: Monaco, monospace;
-}
-
-.CodeMirror {
-  font-size: 13px;
-  border: 1px solid $darkGrey;
-  background: #fff;
-}
-
-.text-editor {
-  width: 100%;
-  min-height: 80px;
-  padding: 10px;
-  @include box-sizing(border-box);
-  border: 1px solid $mediumGrey;
-  @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
-  background-color:  #edf1f5;
-  @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
-  font-family: Monaco, monospace;
-}
-
-// ====================
-
-// UI - chrome
-.window {
-  @include clearfix();
-  @include border-radius(3px);
-  @include box-shadow(0 1px 1px $shadow-l1);
-  margin-bottom: $baseline;
-  border: 1px solid $gray-l2;
-  background: $white;
-}
-
-// ====================
-
 // UI - actions
 .new-unit-item,
 .new-subsection-item,
@@ -866,14 +770,4 @@ body.hide-wip {
   .wip-box {
     display: none;
   }
-}
-
-// ====================
-
-// needed fudges for now
-body.dashboard {
-
-  .my-classes {
-    margin-top: $baseline;
-  }
 }
\ No newline at end of file
diff --git a/cms/static/sass/_calendar.scss b/cms/static/sass/_calendar.scss
deleted file mode 100644
index 4c007bb561..0000000000
--- a/cms/static/sass/_calendar.scss
+++ /dev/null
@@ -1,367 +0,0 @@
-section.cal {
-  @include box-sizing(border-box);
-  @include clearfix;
-  padding: 20px;
-
-  > header {
-    display: none;
-    @include clearfix;
-    margin-bottom: 10px;
-    opacity: .4;
-    @include transition;
-    text-shadow: 0 1px 0 #fff;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    h2 {
-      @include inline-block();
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      font-size: 14px;
-      padding: 6px 6px 6px 0;
-      font-size: 12px;
-      margin: 0;
-    }
-
-    ul {
-      @include inline-block;
-      float: right;
-      margin: 0;
-      padding: 0;
-
-      &.actions {
-        float: left;
-      }
-
-      li  {
-        @include inline-block;
-        margin-right: 6px;
-        border-right: 1px solid #ddd;
-        padding: 0 6px 0 0;
-
-        &:last-child {
-          border-right: 0;
-          margin-right: 0;
-          padding-right: 0;
-        }
-
-        a {
-          @include inline-block();
-          font-size: 12px;
-          @include inline-block;
-          margin: 0 6px;
-          font-style: italic;
-        }
-
-        ul {
-          @include inline-block();
-          margin: 0;
-
-          li {
-            @include inline-block();
-            padding: 0;
-            border-left: 0;
-          }
-        }
-      }
-    }
-  }
-
-  ol {
-    list-style: none;
-    @include clearfix;
-    border: 1px solid lighten( $dark-blue , 30% );
-    background: #FFF;
-    width: 100%;
-    @include box-sizing(border-box);
-    margin: 0;
-    padding: 0;
-    @include box-shadow(0 0 5px lighten($dark-blue, 45%));
-    @include border-radius(3px);
-    overflow: hidden;
-
-    > li {
-      border-right: 1px solid lighten($dark-blue, 40%);
-      border-bottom: 1px solid lighten($dark-blue, 40%);
-      @include box-sizing(border-box);
-      float: left;
-      width: flex-grid(3) + ((flex-gutter() * 3) / 4);
-      background-color: $light-blue;
-      @include box-shadow(inset 0 0 0 1px lighten($light-blue, 8%));
-
-      &:hover {
-        li.create-module {
-          opacity: 1;
-        }
-      }
-
-      &:nth-child(4n) {
-        border-right: 0;
-      }
-
-      header {
-        border-bottom: 1px solid lighten($dark-blue, 40%);
-        @include box-shadow(0 2px 2px $light-blue);
-        display: block;
-        margin-bottom: 2px;
-        background: #FFF;
-
-        h1 {
-          font-size: 14px;
-          text-transform: uppercase;
-          border-bottom: 1px solid lighten($dark-blue, 60%);
-          padding: 6px;
-          color: $bright-blue;
-          margin: 0;
-
-          a {
-            color: $bright-blue;
-            display: block;
-            padding: 6px;
-            margin: -6px;
-
-            &:hover {
-              color: darken($bright-blue, 10%);
-              background: lighten($yellow, 10%);
-            }
-          }
-        }
-
-        ul {
-          margin: 0;
-          padding: 0;
-
-          li {
-            background: #fff;
-            color: #888;
-            border-bottom: 0;
-            font-size: 12px;
-            @include box-shadow(none);
-          }
-        }
-      }
-
-      ul {
-        list-style: none;
-        margin: 0 0 1px 0;
-        padding: 0;
-
-        li {
-          border-bottom: 1px solid darken($light-blue, 6%);
-          // @include box-shadow(0 1px 0 lighten($light-blue, 4%));
-          overflow: hidden;
-          position: relative;
-          text-shadow: 0 1px 0 #fff;
-
-          &:hover {
-            background-color: lighten($yellow, 14%);
-
-            a.draggable {
-              background-color: lighten($yellow, 14%);
-              opacity: 1;
-            }
-          }
-
-          &.editable {
-            padding: 3px 6px;
-          }
-
-          a {
-            color: lighten($dark-blue, 10%);
-            display: block;
-            padding: 6px 35px 6px 6px;
-
-            &:hover {
-              background-color: lighten($yellow, 10%);
-            }
-
-            &.draggable {
-              background-color: $light-blue;
-              opacity: .3;
-              padding: 0;
-
-              &:hover {
-                background-color: lighten($yellow, 10%);
-              }
-            }
-          }
-
-          &.create-module {
-            position: relative;
-            opacity: 0;
-            @include transition(all 3s ease-in-out);
-            background: darken($light-blue, 2%);
-
-            > div {
-              background: $dark-blue;
-              @include box-shadow(0 0 5px darken($light-blue, 60%));
-              @include box-sizing(border-box);
-              display: none;
-              margin-left: 3%;
-              padding: 10px;
-              @include position(absolute, 30px 0 0 0);
-              width: 90%;
-              z-index: 99;
-
-              ul {
-                li {
-                  border-bottom: 0;
-                  background: none;
-
-                  input {
-                    @include box-sizing(border-box);
-                    width: 100%;
-                  }
-
-                  select {
-                    @include box-sizing(border-box);
-                    width: 100%;
-
-                    option {
-                      font-size: 14px;
-                    }
-                  }
-
-                  div {
-                    margin-top: 10px;
-                  }
-
-                  a {
-                    color: $light-blue;
-                    float: right;
-
-                    &:first-child {
-                      float: left;
-                    }
-
-                    &:hover {
-                      color: #fff;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  section.new-section {
-    margin: 10px 0 40px;
-    @include inline-block();
-    position: relative;
-
-    > a {
-      @extend .button;
-      display: block;
-    }
-
-    section {
-      display: none;
-      @include position(absolute, 30px 0 0 0);
-      background: rgba(#000, .8);
-      min-width: 300px;
-      padding: 10px;
-      @include box-sizing(border-box);
-      @include border-radius(3px);
-      z-index: 99;
-
-      &:before {
-        content: "  ";
-        display: block;
-        background: rgba(#000, .8);
-        width: 10px;
-        height: 10px;
-        @include position(absolute, -5px 0 0 20%);
-        @include transform(rotate(45deg));
-      }
-
-      form {
-
-        ul {
-          list-style: none;
-
-          li {
-            border-bottom: 0;
-            background: none;
-            margin-bottom: 6px;
-
-            input {
-              width: 100%;
-              @include box-sizing(border-box);
-              border-color: #000;
-              padding: 6px;
-            }
-
-            select {
-              width: 100%;
-              @include box-sizing(border-box);
-
-              option {
-                font-size: 14px;
-              }
-            }
-
-            a {
-              float: right;
-
-              &:first-child {
-                float: left;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-body.content
-section.cal {
-  width: flex-grid(3);
-  float: left;
-  overflow: scroll;
-  @include box-sizing(border-box);
-  opacity: .4;
-  @include transition();
-
-  &:hover {
-    opacity: 1;
-  }
-
-  > header {
-    @include transition;
-    overflow: hidden;
-
-    > a {
-      display: none;
-    }
-
-    ul {
-      float: none;
-      display: block;
-
-      li {
-
-        ul {
-          display: inline;
-        }
-      }
-    }
-  }
-
-  ol {
-    li {
-      @include box-sizing(border-box);
-      width: 100%;
-      border-right: 0;
-
-      &.create-module {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/cms/static/sass/_cms_mixins.scss b/cms/static/sass/_cms_mixins.scss
index b8d9a8ae2e..015a94b762 100644
--- a/cms/static/sass/_cms_mixins.scss
+++ b/cms/static/sass/_cms_mixins.scss
@@ -1,3 +1,6 @@
+// studio - utilities - mixins and extends
+// ====================
+
 @mixin clearfix {
 	&:after {
 		content: '';
diff --git a/cms/static/sass/_courseware.scss b/cms/static/sass/_courseware.scss
deleted file mode 100644
index 45ea111b6f..0000000000
--- a/cms/static/sass/_courseware.scss
+++ /dev/null
@@ -1,689 +0,0 @@
-
-input.courseware-unit-search-input {
-    float: left;
-    width: 260px;
-    background-color: #fff;
-}
-
-.branch {
-
-    .section-item {
-      @include clearfix();
-
-      .details {
-        display: block;
-        float: left;
-        margin-bottom: 0;
-        width: 650px;
-      }
-
-      .gradable-status {
-        float: right;
-        position: relative;
-        top: -4px;
-        right: 50px;
-        width: 145px;
-
-        .status-label {
-          position: absolute;
-          top: 2px;
-          right: -5px;
-          display: none;
-          width: 110px;
-          padding: 5px 40px 5px 10px;
-          @include border-radius(3px);
-          color: $lightGrey;
-          text-align: right;
-          font-size: 12px;
-          font-weight: bold;
-          line-height: 16px;
-        }
-
-        .menu-toggle {
-              z-index: 10;
-              position: absolute;
-              top: 0;
-              right: 5px;
-              padding: 5px;
-              color: $mediumGrey;
-
-              &:hover, &.is-active {
-                color: $blue;
-              }
-            }
-
-            .menu {
-              z-index: 1;
-              display: none;
-              opacity: 0.0;
-              position: absolute;
-              top: -1px;
-              left: 5px;
-              margin: 0;
-              padding: 8px 12px;
-              background: $white;
-              border: 1px solid $mediumGrey;
-              font-size: 12px;
-              @include border-radius(4px);
-              @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
-              @include transition(opacity .15s);
-
-
-              li {
-                width: 115px;
-                margin-bottom: 3px;
-                padding-bottom: 3px;
-                border-bottom: 1px solid $lightGrey;
-
-                &:last-child {
-                  margin-bottom: 0;
-                  padding-bottom: 0;
-                  border: none;
-
-                  a {
-                    color: $darkGrey;
-                  }
-                }
-              }
-
-          a {
-            color: $blue;
-
-            &.is-selected {
-              font-weight: bold;
-            }
-          }
-        }
-
-        // dropdown state
-        &.is-active {
-
-          .menu {
-            z-index: 1000;
-            display: block;
-            opacity: 1.0;
-          }
-
-          .menu-toggle {
-            z-index: 10000;
-          }
-        }
-
-        // set state
-        &.is-set {
-
-          .menu-toggle {
-            color: $blue;
-          }
-
-          .status-label {
-            display: block;
-            color: $blue;
-          }
-        }
-      }
-    }
-  }
-
-
-.courseware-section {
-    position: relative;
-    background: #fff;
-    border-radius: 3px;
-    border: 1px solid $mediumGrey;
-    margin-top: 15px;
-    padding-bottom: 12px;
-    @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
-
-    &:first-child {
-        margin-top: 0;
-    }
-
-    &.collapsed {
-        padding-bottom: 0;
-    }
-
-    label {
-        float: left;
-        line-height: 29px;
-    }
-
-    .datepair {
-        float: left;
-        margin-left: 10px;
-    }
-
-    .section-published-date {
-        position: absolute;
-        top: 19px;
-        right: 90px;
-        padding: 4px 10px;
-        border-radius: 3px;
-        background: $lightGrey;
-        text-align: right;
-
-        .published-status {
-            font-size: 12px;
-            margin-right: 15px;
-
-            strong {
-                font-weight: bold;
-            }
-        }
-
-        .schedule-button {
-            @include blue-button;
-        }
-
-        .edit-button {
-            @include blue-button;
-        }
-
-        .schedule-button,
-        .edit-button {
-            font-size: 11px;
-            padding: 3px 15px 5px;
-        }
-    }
-
-    .datepair .date,
-    .datepair .time {
-        padding-left: 0;
-        padding-right: 0;
-        border: none;
-        background: none;
-        @include box-shadow(none);
-        font-size: 13px;
-        font-weight: bold;
-        color: $blue;
-        cursor: pointer;
-    }
-
-    .datepair .date {
-        width: 80px;
-    }
-
-    .datepair .time {
-        width: 65px;
-    }
-
-    &.collapsed .subsection-list,
-    .collapsed .subsection-list,
-    .collapsed > ol {
-        display: none !important;
-    }
-
-    header {
-        min-height: 75px;
-        @include clearfix();
-
-        .item-details, .section-published-date {
-
-        }
-
-        .item-details {
-            display: inline-block;
-            padding: 20px 0 10px 0;
-            @include clearfix();
-
-            .section-name {
-              float: left;
-              margin-right: 10px;
-              width: 350px;
-              font-size: 19px;
-              font-weight: bold;
-              color: $blue;
-            }
-
-            .section-name-span {
-              cursor: pointer;
-              @include transition(color .15s);
-
-              &:hover {
-                color: $orange;
-              }
-            }
-
-            .section-name-edit {
-              position: relative;
-              width: 400px;
-              background: $white;
-
-              input {
-            font-size: 16px;        
-          }
-                            
-          .save-button {
-            @include blue-button;
-            padding: 7px 20px 7px;
-            margin-right: 5px;
-          }
-
-          .cancel-button {
-            @include white-button;
-            padding: 7px 20px 7px;
-          }
-        }
-
-        .section-published-date {
-          float: right;
-          width: 265px;
-          margin-right: 220px;                              
-          @include border-radius(3px);
-          background: $lightGrey;
-
-          .published-status {
-            font-size: 12px;
-            margin-right: 15px;
-
-            strong {
-              font-weight: bold;
-            }
-          }
-
-          .schedule-button {
-            @include blue-button;
-          }
-
-          .edit-button {
-            @include blue-button;
-          }
-
-          .schedule-button,
-          .edit-button {
-            font-size: 11px;
-            padding: 3px 15px 5px;
-           
-            }
-          }
-
-          .gradable-status {
-            position: absolute;
-            top: 20px;
-            right: 70px;
-            width: 145px;
-
-            .status-label {
-              position: absolute;
-              top: 0;
-              right: 2px;
-              display: none;
-              width: 100px;
-              padding: 10px 35px 10px 10px;
-              @include border-radius(3px);
-              background: $lightGrey;
-              color: $lightGrey;
-              text-align: right;
-              font-size: 12px;
-              font-weight: bold;
-              line-height: 16px;
-            }
-
-            .menu-toggle {
-              z-index: 10;
-              position: absolute;
-              top: 2px;
-              right: 5px;
-              padding: 5px;
-              color: $lightGrey;
-
-              &:hover, &.is-active {
-                color: $blue;
-              }
-            }
-
-            .menu {
-              z-index: 1;
-              display: none;
-              opacity: 0.0;
-              position: absolute;
-              top: -1px;
-              left: 2px;
-              margin: 0;
-              padding: 8px 12px;
-              background: $white;
-              border: 1px solid $mediumGrey;
-              font-size: 12px;
-              @include border-radius(4px);
-              @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
-              @include transition(opacity .15s);
-              @include transition(display .15s);
-
-
-              li {
-                width: 115px;
-                margin-bottom: 3px;
-                padding-bottom: 3px;
-                border-bottom: 1px solid $lightGrey;
-
-                &:last-child {
-                  margin-bottom: 0;
-                  padding-bottom: 0;
-                  border: none;
-
-                  a {
-                    color: $darkGrey;
-                  }
-                }
-              }
-
-              a {
-
-                &.is-selected {
-                  font-weight: bold;
-                }
-              }
-          }
-
-          // dropdown state
-          &.is-active {
-
-            .menu {
-              z-index: 1000;
-              display: block;
-              opacity: 1.0;
-            }
-
-
-          .menu-toggle {
-            z-index: 10000;
-          }
-        }
-
-        // set state
-        &.is-set {
-
-          .menu-toggle {
-            color: $blue;
-          }
-
-          .status-label {
-            display: block;
-            color: $blue;
-          }
-        }
-
-        float: left;
-        padding: 21px 0 0;
-      }
-    }
-
-        .item-actions {         
-            margin-top: 21px;
-            margin-right: 12px;
-
-            .edit-button,
-            .delete-button {
-                margin-top: -3px;
-            }
-        }
-
-        .expand-collapse-icon {
-            float: left;
-            margin: 29px 6px 16px 16px;
-            @include transition(none);
-
-            &.expand {
-                background-position: 0 0;
-            }
-
-            &.collapsed {
-                
-            }
-        }
-
-        .drag-handle {
-            margin-left: 11px;
-        }
-    }
-
-    h3 {
-        font-size: 19px;
-        font-weight: 700;
-        color: $blue;
-    }
-
-    .section-name-span {
-        cursor: pointer;
-        @include transition(color .15s);
-
-        &:hover {
-            color: $orange;
-        }
-    }
-
-    .section-name-form {
-        margin-bottom: 15px;
-    }
-
-    .section-name-edit {
-        input {
-            font-size: 16px;
-        }
-        
-        .save-button {
-            @include blue-button;
-            padding: 7px 20px 7px;
-            margin-right: 5px;
-        }
-
-        .cancel-button {
-            @include white-button;
-            padding: 7px 20px 7px;
-        }
-    }
-
-    h4 {
-        font-size: 12px;
-        color: #878e9d;
-
-        strong {
-            font-weight: bold;
-        }
-    }
-
-    .list-header {
-        @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
-        background-color: #ced2db;
-        border-radius: 3px 3px 0 0;
-    }
-
-    .subsection-list {
-        margin: 0 12px;
-
-        > ol {
-            @include tree-view;
-            border-top-width: 0;
-        }
-    }
-
-    &.new-section {
-
-        header {
-            height: auto;
-            @include clearfix();
-        }
-
-        .expand-collapse-icon {
-            visibility: hidden;
-        }
-
-        .item-details {
-          padding: 25px 0 0 0;
-
-          .section-name {
-            float: none;
-            width: 100%;
-          }
-        }
-    }
-}
-
-.toggle-button-sections {
-    display: none;
-    position: relative;
-    float: right;
-    margin-top: 10px;
-
-    font-size: 13px;
-    color: $darkGrey;
-
-    &.is-shown {
-        display: block;
-    }
-
-    .ss-icon {
-        @include border-radius(20px);
-        position: relative;
-        top: -1px;
-        display: inline-block;
-        margin-right: 2px;
-        line-height: 5px;
-        font-size: 11px;
-    }
-
-    .label {
-        display: inline-block;
-    }
-}
-
-.new-section-name,
-.new-subsection-name-input {
-    width: 515px;
-}
-
-.new-section-name-save,
-.new-subsection-name-save {
-    @include blue-button;
-    padding: 4px 20px 7px;
-    margin: 0 5px;
-    color: #fff !important;
-}
-
-.new-section-name-cancel,
-.new-subsection-name-cancel {
-    @include white-button;
-    padding: 4px 20px 7px;
-    color: #8891a1 !important;
-}
-
-.dummy-calendar {
-    display: none;
-    position: absolute;
-    top: 55px;
-    left: 110px;
-    z-index: 9999;
-    border: 1px solid #3C3C3C;
-    @include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
-}
-
-.unit-name-input {
-    padding: 20px 40px;
-
-    label {
-        display: block;
-    }
-
-    input {
-        width: 100%;
-        font-size: 20px;
-    }
-}
-
-.preview {
-    background: url(../img/preview.jpg) center top no-repeat;
-}
-
-.edit-subsection-publish-settings {
-    display: none;
-    position: fixed;
-    top: 100px;
-    left: 50%;
-    z-index: 99999;
-    width: 600px;
-    margin-left: -300px;
-    background: #fff;
-    text-align: center;
-
-    .settings {
-        padding: 40px;
-    }
-
-    h3 {
-        font-size: 34px;
-        font-weight: 300;
-    }
-
-    .picker {
-        margin: 30px 0 65px;
-    }
-
-    .description {
-        margin-top: 30px;
-        font-size: 14px;
-        line-height: 20px;
-    }
-
-    strong {
-        font-weight: 700;
-    }
-
-    .start-date,
-    .start-time {
-        font-size: 19px;
-    }
-
-    .save-button {
-        @include blue-button;
-        margin-right: 10px;
-    }
-
-    .cancel-button {
-        @include white-button;
-    }
-
-    .save-button,
-    .cancel-button {
-        font-size: 16px;
-    }
-}
-
-.collapse-all-button {
-    float: right;
-    margin-top: 10px;
-    font-size: 13px;
-    color: $darkGrey;
-}
-
-// sort/drag and drop
-.ui-droppable {
-    @include transition (padding 0.5s ease-in-out 0s);
-    min-height: 20px;
-    padding: 0;
-
-    &.dropover {
-        padding: 15px 0;
-    }
-}
-
-.ui-draggable-dragging {
-    @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
-    border: 1px solid $darkGrey;
-    opacity : 0.2;
-    &:hover {
-        opacity : 1.0;    
-        .section-item {
-            background: $yellow !important;
-        }
-    }
-
-    // hiding unit button - temporary fix until this semantically corrected
-    .new-unit-item {
-      display: none;
-    }
-}
-
-ol.ui-droppable .branch:first-child .section-item {
-    border-top: none;
-}
-
diff --git a/cms/static/sass/_dashboard.scss b/cms/static/sass/_dashboard.scss
deleted file mode 100644
index 0d4d046e57..0000000000
--- a/cms/static/sass/_dashboard.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-.class-list {
-	margin-top: 20px;
-	border-radius: 3px;
-	border: 1px solid $darkGrey;	
-	background: #fff;
-	@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
-
-	li {
-		position: relative;
-		border-bottom: 1px solid $mediumGrey;
-
-		&:last-child {
-			border-bottom: none;
-		}
-
-		.class-link {
-			z-index: 100;
-			display: block;
-			padding: 20px 25px;
-			line-height: 1.3;
-			
-			&:hover {
-				background: $paleYellow;
-
-				+ .view-live-button {
-					opacity: 1.0;
-					pointer-events: auto;
-				}
-			}
-		}
-	}
-
-	.class-name {
-		display: block;
-		font-size: 19px;
-		font-weight: 300;
-	}
-
-	.detail {
-		font-size: 14px;
-		font-weight: 400;
-		margin-right: 20px;
-		color: #3c3c3c;
-	}
-
-	// view live button
-	.view-live-button {
-		z-index: 10000;
-		position: absolute;
-		top: 15px;
-		right: $baseline;		
-		padding: ($baseline/4) ($baseline/2);
-		opacity: 0;
-		pointer-events: none;
-
-		&:hover {
-			opacity: 1.0;
-			pointer-events: auto;
-		}
-	}
-}
-
-.new-course {
-	padding: 15px 25px;
-	margin-top: 20px;
-	border-radius: 3px;
-	border: 1px solid $darkGrey;	
-	background: #fff;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-	@include clearfix;
-
-	.row {
-		margin-bottom: 15px;
-		@include clearfix;
-	}
-
-	.column {
-		float: left;
-		width: 48%;
-	}
-
-	.column:first-child {
-		margin-right: 4%;
-	}
-
-	.course-info {
-		width: 600px;
-	}
-
-	label {
-		display: block;
-		font-size: 13px;
-		font-weight: 700;
-	}
-
-	.new-course-org,
-	.new-course-number,
-	.new-course-name {
-		width: 100%;
-	}
-
-	.new-course-name {
-		font-size: 19px;
-		font-weight: 300;
-	}
-
-	.new-course-save {
-		@include blue-button;
-	}
-
-	.new-course-cancel {
-		@include white-button;
-	}
-}
\ No newline at end of file
diff --git a/cms/static/sass/_extends.scss b/cms/static/sass/_extends.scss
deleted file mode 100644
index 5907481bd1..0000000000
--- a/cms/static/sass/_extends.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-.faded-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1) 50%,
-                                                    rgba(200,200,200, 0)));
-  height: 1px;
-  width: 100%;
-}
-
-.faded-hr-divider-medium {
-  @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
-                                                    rgba(240,240,240, 1) 50%,
-                                                    rgba(240,240,240, 0)));
-  height: 1px;
-  width: 100%;
-}
-
-.faded-hr-divider-light {
-  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
-                                                    rgba(255,255,255, 0.8) 50%,
-                                                    rgba(255,255,255, 0)));
-  height: 1px;
-  width: 100%;
-}
-
-.faded-vertical-divider {
-  @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1) 50%,
-                                                    rgba(200,200,200, 0)));
-  height: 100%;
-  width: 1px;
-}
-
-.faded-vertical-divider-light {
-  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
-                                                    rgba(255,255,255, 0.6) 50%,
-                                                    rgba(255,255,255, 0)));
-  height: 100%;
-  width: 1px;
-}
-
-.vertical-divider {
-  @extend .faded-vertical-divider;
-  position: relative;
-
-  &::after {
-    @extend .faded-vertical-divider-light;
-    content: "";
-    display: block;
-    position: absolute;
-    left: 1px;
-  }
-}
-
-.horizontal-divider {
-  border: none;
-  @extend .faded-hr-divider;
-  position: relative;
-
-  &::after {
-    @extend .faded-hr-divider-light;
-    content: "";
-    display: block;
-    position: absolute;
-    top: 1px;
-  }
-}
-
-.fade-right-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
-                                                    rgba(200,200,200, 1)));
-  border: none;
-}
-
-.fade-left-hr-divider {
-  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
-                                                    rgba(200,200,200, 0)));
-  border: none;
-}
\ No newline at end of file
diff --git a/cms/static/sass/_landing.scss b/cms/static/sass/_landing.scss
deleted file mode 100644
index 16f1b5b5a7..0000000000
--- a/cms/static/sass/_landing.scss
+++ /dev/null
@@ -1,126 +0,0 @@
-// This is a temporary page, which will be replaced once we have a more extensive course catalog and marketing site for edX labs.
-
-.class-landing {
-	
-	.main-wrapper {
-		width: 700px !important;
-		margin: 100px auto;
-	}
-
-	.class-info {		
-		padding: 30px 40px 40px;
-		@extend .window;
-
-		hgroup {
-			padding-bottom: 26px;
-			border-bottom: 1px solid $mediumGrey;
-		}
-
-		h1 {
-			float: none;
-			font-size: 30px;
-			font-weight: 300;
-			margin: 0;
-		}
-
-		h2 {
-			color: #5d6779;
-		}
-
-		.class-actions {
-			@include clearfix;
-			padding: 15px 0;
-			margin-bottom: 18px;
-			border-bottom: 1px solid $mediumGrey;
-		}
-
-		.log-in-form {
-			@include clearfix;
-			padding: 15px 0 20px;
-			margin-bottom: 18px;
-			border-bottom: 1px solid $mediumGrey;
-
-			.log-in-submit-button {
-				@include blue-button;
-				padding: 6px 20px	8px;
-				margin: 24px 0 0;
-			}
-
-			.column {
-				float: left;
-				width: 41%;
-				margin-right: 1%;
-
-				&.submit {
-					width: 16%;
-					margin-right: 0;
-				}
-
-				label {
-					float: left;
-				}
-			}
-
-			input {
-				width: 100%;
-				font-family: $sans-serif;
-				font-size: 13px;
-			}
-
-			.forgot-button {
-				float: right;
-				margin-bottom: 6px;
-				font-size: 12px;
-			}
-		}
-
-		.sign-up-button {
-			@include blue-button;
-			display: block;
-			width: 250px;
-			margin: auto;
-		}
-
-		.log-in-button {
-			@include white-button;
-			float: right;
-		}
-
-		.sign-up-button,
-		.log-in-button {
-			padding: 8px 0 12px;
-			font-size: 18px;
-			font-weight: 300;
-			text-align: center;
-		}
-
-		.class-description {
-			margin-top: 30px;
-			font-size: 14px;
-		}
-
-		p + p {
-			margin-top: 22px;
-		}
-	}
-
-	.edx-labs-logo-small {
-		display: block;
-		width: 124px;
-		height: 30px;
-		margin: auto;
-		background: url(../img/edx-labs-logo-small.png) no-repeat;
-		text-indent: -9999px;
-		overflow: hidden;
-	}
-
-	.edge-logo {
-		display: block;
-		width: 143px;
-		height: 39px;
-		margin: auto;
-		background: url(../images/edge-logo-small.png) no-repeat;
-		text-indent: -9999px;
-		overflow: hidden;
-	}
-}
\ No newline at end of file
diff --git a/cms/static/sass/_layout.scss b/cms/static/sass/_layout.scss
deleted file mode 100644
index 43308a973c..0000000000
--- a/cms/static/sass/_layout.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-body {
-  @include clearfix();
-  height: 100%;
-  font: 14px $body-font-family;
-  background-color: lighten($dark-blue, 62%);
-  background-image: url('/static/img/noise.png');
-
-  > section {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  > header {
-    background: $dark-blue;
-    @include background-image(url('/static/img/noise.png'), linear-gradient(lighten($dark-blue, 10%), $dark-blue));
-    border-bottom: 1px solid darken($dark-blue, 15%);
-    @include box-shadow(inset 0 -1px 0 lighten($dark-blue, 10%));
-    @include box-sizing(border-box);
-    color: #fff;
-    display: block;
-    float: none;
-    padding: 0 20px;
-    text-shadow: 0 -1px 0 darken($dark-blue, 15%);
-    width: 100%;
-
-    nav {
-      @include clearfix;
-
-      > a {
-        @include hide-text;
-        background: url('/static/img/menu.png') 0 center no-repeat;
-        border-right: 1px solid darken($dark-blue, 10%);
-        @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
-        display: block;
-        float: left;
-        height: 19px;
-        padding: 8px 10px 8px 0;
-        width: 14px;
-
-        &:hover, &:focus {
-          opacity: .7;
-        }
-      }
-
-      h2 {
-        border-right: 1px solid darken($dark-blue, 10%);
-        @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
-        float: left;
-        font-size: 14px;
-        margin: 0;
-        text-transform: uppercase;
-        -webkit-font-smoothing: antialiased;
-
-        a {
-          color: #fff;
-          padding: 8px 20px;
-          display: block;
-
-          &:hover {
-            background-color: rgba(darken($dark-blue, 15%), .5);
-            color: $yellow;
-          }
-        }
-      }
-
-      a {
-        color: rgba(#fff, .8);
-
-        &:hover {
-          color: rgba(#fff, .6);
-        }
-      }
-
-      ul {
-        float: left;
-        margin: 0;
-        padding: 0;
-        @include clearfix;
-
-        &.user-nav {
-          float: right;
-          border-left: 1px solid darken($dark-blue, 10%);
-        }
-
-        li {
-          border-right: 1px solid darken($dark-blue, 10%);
-          float: left;
-          @include box-shadow(1px 0 0 lighten($dark-blue, 10%));
-
-          a {
-            padding: 8px 20px;
-            display: block;
-
-            &:hover {
-              background-color: rgba(darken($dark-blue, 15%), .5);
-              color: $yellow;
-            }
-
-            &.new-module {
-              &:before {
-                @include inline-block;
-                content: "+";
-                font-weight: bold;
-                margin-right: 10px;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.content {
-    section.main-content {
-      border-left: 2px solid $dark-blue;
-      @include box-sizing(border-box);
-      width: flex-grid(9) + flex-gutter();
-      float: left;
-      @include box-shadow( -2px 0 0 lighten($dark-blue, 55%));
-      @include transition();
-      background: #FFF;
-    }
-  }
-}
diff --git a/cms/static/sass/_lms.scss b/cms/static/sass/_lms.scss
deleted file mode 100644
index 1ddc48edaf..0000000000
--- a/cms/static/sass/_lms.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.component {
-  font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
-  font-size: 16px;
-  line-height: 1.6;
-  color: #3c3c3c;
-
-  a {
-    color: #1d9dd9;
-    text-decoration: none;
-  }
-
-  p {
-    font-size: 16px;
-    line-height: 1.6;
-  }
-
-  h1 {
-    float: none;
-  }
-
-  h2 {
-    color: #646464;
-    font-size: 19px;
-    font-weight: 300;
-    letter-spacing: 1px;
-    margin-bottom: 15px;
-    margin-left: 0;
-    text-transform: uppercase;
-  }
-
-  h3 {
-    font-size: 19px;
-    font-weight: 400;
-  }
-
-  h4 {
-    background: none;
-    padding: 0;
-    border: none;
-    @include box-shadow(none);
-    font-size: 16px;
-    font-weight: 400;
-  }
-
-  code {  
-    margin: 0 2px;
-    padding: 0px 5px;
-    border-radius: 3px;
-    border: 1px solid #eaeaea;
-    white-space: nowrap;
-    font-family: Monaco, monospace;
-    font-size: 14px;
-    background-color: #f8f8f8;
-  }
-
-  p + h2, ul + h2, ol + h2, p + h3 {
-    margin-top: 40px;
-  }
-
-  p + p, ul + p, ol + p {
-    margin-top: 20px;
-  }
-
-  p {
-    color: #3c3c3c;
-    font: normal 1em/1.6em;
-    margin: 0px;
-  }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_login.scss b/cms/static/sass/_login.scss
deleted file mode 100644
index c2bff74638..0000000000
--- a/cms/static/sass/_login.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-.edx-studio-logo-large {
-	display: block;
-	width: 224px;
-	height: 45px;
-	margin: 100px auto 30px;
-	background: url(../img/edx-studio-large.png) no-repeat;
-}
-
-.sign-up-box,
-.log-in-box {
-	width: 500px;
-	margin: auto;
-	border-radius: 3px;
-
-	header {
-		height: 36px;
-		border-radius: 3px 3px 0 0;
-		border: 1px solid #2c2e33;
-		@include linear-gradient(top, #686b76, #54565e);
-		color: #fff;
-		@include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2), 0 -1px 0px rgba(255, 255, 255, 0.05) inset, 0 1px 0 rgba(255, 255, 255, .25) inset);
-
-		h1 {
-			float: none;
-			margin: 5px 0;
-			font-size: 15px;
-			font-weight: 300;
-			text-align: center;
-		}
-	}
-
-	form {
-		padding: 40px;
-		border: 1px solid $darkGrey;
-		border-top-width: 0;
-		border-radius: 0 0 3px 3px;
-		background: #fff;
-		@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
-	}
-
-	label {
-		display: block;
-		margin-bottom: 5px;
-		font-size: 13px;
-		font-weight: 700;
-	}
-
-	input[type="text"],
-	input[type="email"],
-	input[type="password"] {
-		width: 100%;
-		font-size: 20px;
-		font-weight: 300;
-	}
-
-	.row {
-		@include clearfix;
-		margin-bottom: 24px;
-
-		.split {
-			float: left;
-			width: 48%;
-
-			&:first-child {
-				margin-right: 4%;
-			}
-		}
-	}
-
-	.form-actions {
-		@include clearfix;
-		margin-top: 32px;
-		margin-bottom: 5px;
-		text-align: center;
-	}
-
-	.log-in-button,
-	.create-account-button {
-		@include blue-button;
-		padding: 8px 0 10px;
-		font-family: $sans-serif;
-		@include transition(all .15s);
-	}
-
-	.create-account-button {
-		padding: 10px 40px 12px;
-		margin-bottom: 10px;
-	}
-
-	.enrolled {
-		font-size: 14px;
-	}
-
-	.sign-up-button {
-		@include white-button;
-		padding: 7px 0 9px;
-	}
-
-	.log-in-button,
-	.sign-up-button {
-		@include box-sizing(border-box);
-		float: left;
-		width: 45%;
-	}
-
-	.or {
-		float: left;
-		display: inline-block;
-		width: 10%;
-		font-size: 15px;
-		line-height: 36px;
-		color: $darkGrey;
-		text-align: center;
-	}
-
-	.forgot-button {
-		float: right;
-		font-size: 11px;
-		font-weight: 400;
-		line-height: 21px;
-	}
-
-	.log-in-extra {
-		margin-top: 10px;
-		text-align: right;
-		font-size: 13px;
-	}
-
-	#login_error,
-	#register_error {
-		display: none;
-		margin-bottom: 30px;
-		padding: 5px 10px;
-		border-radius: 3px;
-		background: $error-red;
-		font-size: 14px;
-		color: #fff;
-	}
-}
\ No newline at end of file
diff --git a/cms/static/sass/_module-header.scss b/cms/static/sass/_module-header.scss
deleted file mode 100644
index e2af263618..0000000000
--- a/cms/static/sass/_module-header.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-section.video-new, section.video-edit, section.problem-new, section.problem-edit  {
-  position: absolute;
-  top: 72px;
-  right: 0;
-  background: #fff;
-  width: flex-grid(6);
-  @include box-shadow(0 0 6px #666);
-  border: 1px solid #333;
-  border-right: 0;
-  z-index: 4;
-
-  > header {
-    background: #666;
-    @include clearfix;
-    color: #fff;
-    padding: 6px;
-    border-bottom: 1px solid #333;
-    -webkit-font-smoothing: antialiased;
-
-    h2 {
-      float: left;
-      font-size: 14px;
-    }
-
-    a {
-      color: #fff;
-
-      &.save-update {
-        float: right;
-      }
-
-      &.cancel {
-        float: left;
-      }
-    }
-
-  }
-
-  > section {
-    padding: 20px;
-
-    > header {
-      h1 {
-        font-size: 24px;
-        margin: 12px 0;
-      }
-
-      section {
-        &.status-settings {
-          ul {
-            list-style: none;
-            @include border-radius(2px);
-            border: 1px solid #999;
-            @include inline-block();
-
-            li {
-              @include inline-block();
-              border-right: 1px solid #999;
-              padding: 6px;
-
-              &:last-child {
-                border-right: 0;
-              }
-
-              &.current {
-                background: #eee;
-              }
-            }
-          }
-
-          a.settings {
-            @include inline-block();
-            margin: 0 20px;
-            border: 1px solid #999;
-            padding: 6px;
-          }
-
-          select {
-            float: right;
-          }
-        }
-
-        &.meta {
-          background: #eee;
-          padding: 10px;
-          margin: 20px 0;
-          @include clearfix();
-
-          div {
-            float: left;
-            margin-right: 20px;
-
-            h2 {
-              font-size: 14px;
-              @include inline-block();
-            }
-
-            p {
-              @include inline-block();
-            }
-          }
-        }
-      }
-    }
-
-    section.notes {
-      margin-top: 20px;
-      padding: 6px;
-      background: #eee;
-      border: 1px solid #ccc;
-
-      textarea {
-        @include box-sizing(border-box);
-        display: block;
-        width: 100%;
-      }
-
-      h2 {
-        font-size: 14px;
-        margin-bottom: 6px;
-      }
-
-      input[type="submit"]{
-         margin-top: 10px;
-      }
-    }
-  }
-}
diff --git a/cms/static/sass/_problem.scss b/cms/static/sass/_problem.scss
deleted file mode 100644
index 66acacf65c..0000000000
--- a/cms/static/sass/_problem.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-section.problem-new, section.problem-edit {
-  > section {
-    textarea {
-      @include box-sizing(border-box);
-      display: block;
-      width: 100%;
-    }
-
-    div.preview {
-      background: #eee;
-      @include box-sizing(border-box);
-      height: 40px;
-      padding: 10px;
-      width: 100%;
-    }
-
-    a.save {
-      @extend .button;
-      @include inline-block();
-      margin-top: 20px;
-    }
-  }
-}
-
diff --git a/cms/static/sass/_reset.scss b/cms/static/sass/_reset.scss
index ee03a0fca3..87a6e51232 100644
--- a/cms/static/sass/_reset.scss
+++ b/cms/static/sass/_reset.scss
@@ -1,3 +1,10 @@
+// studio - utilities - reset
+// ====================
+
+// * {
+// 	@include box-sizing(border-box);
+// }
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -18,7 +25,7 @@ time, mark, audio, video {
 	font: inherit;
 	vertical-align: baseline;
 }
-/* HTML5 display-role reset for older browsers */
+
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
 	display: block;
@@ -38,12 +45,6 @@ q:before, q:after {
 	content: none;
 }
 
-/* remember to define visible focus styles! 
-:focus {
-	outline: ?????;
-} */
-
-/* remember to highlight inserts somehow! */
 ins {
 	text-decoration: none;
 }
@@ -56,10 +57,11 @@ table {
 	border-spacing: 0;
 }
 
-/* Reset styles to remove ui-lightness jquery ui theme 
-from the tabs component (used in the add component problem tab menu) 
-*/
+// ====================
 
+// grandfathered styles
+
+// reset styles to remove ui-lightness jquery ui theme from the tabs component (used in the add component problem tab menu)
 .ui-tabs {
 	padding: 0;
 	white-space: normal;
@@ -118,10 +120,7 @@ from the tabs component (used in the add component problem tab menu)
 	padding: 0;
 }
 
-/* reapplying the tab styles from unit.scss after 
-removing jquery ui ui-lightness styling 
-*/
-
+// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling 
 .problem-type-tabs {
 	border:none;
 	list-style-type: none;
@@ -146,26 +145,4 @@ removing jquery ui ui-lightness styling
 			border: 0px;
 		}
 	}
-/*
-	li {
-		float:left;
-		display:inline-block;
-		text-align:center;
-		width: auto;
-		//@include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-		//background-color: tint($lightBluishGrey, 20%);
-		//@include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
-		opacity:.8;
-
-		&:hover {
-		  opacity:1;
-		}
-
-		&.current {
-		  border: 0px;
-		  //@include active;
-		  opacity:1;
-		}
-	}
-*/
 }
\ No newline at end of file
diff --git a/cms/static/sass/_section.scss b/cms/static/sass/_section.scss
deleted file mode 100644
index 97818326be..0000000000
--- a/cms/static/sass/_section.scss
+++ /dev/null
@@ -1,239 +0,0 @@
-section#unit-wrapper {
-  section.filters {
-    @include clearfix;
-    display: none;
-    opacity: .4;
-    margin-bottom: 10px;
-    @include transition;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    h2 {
-      @include inline-block();
-      text-transform: uppercase;
-      letter-spacing: 1px;
-      font-size: 14px;
-      padding: 6px 6px 6px 0;
-      font-size: 12px;
-      margin: 0;
-    }
-
-    ul {
-      @include clearfix();
-      list-style: none;
-      margin: 0;
-      padding: 0;
-
-      li {
-        @include inline-block;
-        margin-right: 6px;
-        border-right: 1px solid #ddd;
-        padding-right: 6px;
-
-        &.search {
-          float: right;
-          border: 0;
-        }
-
-        a {
-          &.more {
-            font-size: 12px;
-            @include inline-block;
-            margin: 0 6px;
-            font-style: italic;
-          }
-        }
-      }
-    }
-  }
-
-  div.content {
-    display: table;
-    border: 1px solid lighten($dark-blue, 40%);
-    width: 100%;
-    @include border-radius(3px);
-    @include box-shadow(0 0 4px lighten($dark-blue, 50%));
-
-    section {
-      header {
-        background: #fff;
-        padding: 6px;
-        border-bottom: 1px solid lighten($dark-blue, 60%);
-        @include clearfix;
-
-        h2 {
-          color: $bright-blue;
-          // float: left;
-          font-size: 14px;
-          letter-spacing: 1px;
-          // line-height: 20px;
-          text-transform: uppercase;
-          margin: 0;
-        }
-      }
-
-      &.modules {
-        @include box-sizing(border-box);
-        display: table-cell;
-        width: flex-grid(6, 9);
-        border-right: 1px solid lighten($dark-blue, 40%);
-
-        &.empty {
-          text-align: center;
-          vertical-align: middle;
-
-          a {
-            @extend .button;
-            @include inline-block();
-            margin-top: 10px;
-          }
-        }
-
-        ol {
-          list-style: none;
-          margin: 0;
-          padding: 0;
-
-          li {
-            border-bottom: 1px solid lighten($dark-blue, 60%);
-
-            a {
-              color: #000;
-            }
-
-            ol {
-              list-style: none;
-              margin: 0;
-              padding: 0;
-
-              li {
-                padding: 6px;
-                position: relative;
-
-                &:last-child {
-                  border-bottom: 0;
-                }
-
-                &:hover {
-                  background-color: lighten($yellow, 10%);
-
-                  a.draggable {
-                    opacity: 1;
-                  }
-                }
-
-                a.draggable {
-                  float: right;
-                  opacity: .4;
-                }
-
-                &.group {
-                  padding: 0;
-
-                  header {
-                    padding: 6px;
-                    background: none;
-
-                    h3 {
-                      font-size: 14px;
-                      margin: 0;
-                    }
-                  }
-
-                  ol {
-                    border-left: 4px solid #999;
-                    border-bottom: 0;
-                    margin: 0;
-                    padding: 0;
-
-                    li {
-                      &:last-child {
-                        border-bottom: 0;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &.scratch-pad {
-        @include box-sizing(border-box);
-        display: table-cell;
-        width: flex-grid(3, 9) + flex-gutter(9);
-        vertical-align: top;
-
-        ol {
-          list-style: none;
-          margin: 0;
-          padding: 0;
-
-          li {
-            background: $light-blue;
-
-            &:last-child {
-              border-bottom: 0;
-            }
-
-            &.new-module a {
-              background-color: darken($light-blue, 2%);
-              border-bottom: 1px solid darken($light-blue, 8%);
-
-              &:hover {
-                background-color: lighten($yellow, 10%);
-              }
-            }
-
-            a {
-              color: $dark-blue;
-            }
-
-            ul {
-              list-style: none;
-              margin: 0;
-              padding: 0;
-
-              li {
-                padding: 6px;
-                border-collapse: collapse;
-                border-bottom: 1px solid darken($light-blue, 8%);
-                position: relative;
-
-                &:last-child {
-                  border-bottom: 1px solid darken($light-blue, 8%);
-                }
-
-                &:hover {
-                  background-color: lighten($yellow, 10%);
-
-                  a.draggable {
-                    opacity: 1;
-                  }
-                }
-
-
-                &.empty {
-                  padding: 12px;
-
-                  a {
-                    @extend .button;
-                    display: block;
-                    text-align: center;
-                  }
-                }
-
-                a.draggable {
-                  opacity: .3;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/cms/static/sass/_subsection.scss b/cms/static/sass/_subsection.scss
deleted file mode 100644
index a39c0d757a..0000000000
--- a/cms/static/sass/_subsection.scss
+++ /dev/null
@@ -1,295 +0,0 @@
-.subsection .main-wrapper {
-  margin: 40px;
-}
-
-.subsection .inner-wrapper {
-  @include clearfix();
-}
-
-.subsection-body {
-	padding: 32px 40px;
-	@include clearfix;
-
-	> div {
-		margin-bottom: 40px;
-	}
-
-	input {
-		font-size: 14px;
-	}
-
-	.unit-subtitle {
-		display: block;
-		width: 100%;
-	}
-
-	.sortable-unit-list {
-		ol {
-			@include tree-view;
-		}
-	}
-
-	.policy-list {
-		input[disabled] {
-			border: none;
-			@include box-shadow(none);
-		}
-
-		.policy-list-name {
-			margin-right: 5px;
-			margin-bottom: 10px;
-		}
-
-		.policy-list-value {
-			width: 320px;
-			margin-right: 10px;
-		}
-	}
-
-	.policy-list-element {
-		.save-button,
-		.cancel-button {
-			display: none;
-		}
-
-		.edit-icon {
-			margin-right: 8px;
-		}
-
-		&.editing,
-		&.new-policy-list-element {
-			.policy-list-name,
-			.policy-list-value {
-				border: 1px solid #b0b6c2;
-		    @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
-		    background-color: #edf1f5;
-		    @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
-			}
-		}
-	}
-
-	.new-policy-list-element {
-		padding: 10px 10px 0;
-		margin: 0 -10px 10px;
-		border-radius: 3px;
-		background: $mediumGrey;
-
-		.save-button {
-			@include blue-button;
-			margin-bottom: 10px;
-		}
-
-		.cancel-button {
-			@include white-button;
-		}
-
-		.edit-icon {
-			display: none;
-		}
-
-		.delete-icon {
-			display: none;
-		}
-	}
-
-	.new-policy-item {
-		margin: 10px 0;
-
-		.plus-icon-small {
-			position: relative;
-			top: -1px;
-			vertical-align: middle;
-		}
-	}
-}
-
-.subsection-name-input {
-	label {
-		display: block;
-	}
-
-	input {
-		width: 100%;
-		font-size: 20px;
-	}
-}
-
-.scheduled-date-input,
-.due-date-input {
-	@include clearfix;
-
-	.date-input,
-	.time-input {
-		display: inline-block;
-		width: 100px;
-	}
-
-	.inherits-check {
-		label {
-			font-size: 13px;
-		}
-	}
-
-	.notice {
-		margin-top: 6px;
-		font-size: 11px;
-		color: #999;
-	}
-}
-
-.due-date-input {
-	label {
-		display: inline-block !important;
-		margin-right: 10px;
-	}
-
-	a {
-		font-size: 11px;
-		font-weight: bold;
-		text-transform: uppercase;
-	}
-
-	.date-setter {
-		@include clearfix;
-		display: none;
-	}
-
-	.remove-date {
-		display: block;
-	}
-}
-
-.row.visibility {
-	label {
-		display: inline-block !important;
-		margin-right: 10px;
-		line-height: 21px;
-	}
-
-	a {
-		display: inline-block;
-		height: 31px;
-		margin-right: 8px;
-		vertical-align: middle;
-		font-size: 11px;
-		font-weight: 700;
-		line-height: 31px;
-		text-transform: uppercase;
-	}
-
-	.large-toggle {
-		width: 41px;
-		background: url(../img/large-toggles.png) no-repeat;
-		background-position: 0 -50px;
-
-		.hidden {
-			background-position: 0 -5px;			
-		}
-	}
-}
-
-.gradable {
-
-  label {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .gradable-status {
-    position: relative;
-    top: -4px;
-    display: inline-block;
-    margin-left: 10px;
-    width: 65%;
-
-    .status-label {
-      margin: 0;
-      padding: 0;
-      background: transparent;
-      color: $blue;
-      border: none;
-      font-size: 11px;
-      font-weight: bold;
-      text-transform: uppercase;
-    }
-
-    .menu-toggle {
-      z-index: 100;
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 20px;
-      background: transparent;
-
-      &:hover, &.is-active {
-              color: $blue;
-      }
-    }
-
-    .menu {
-      z-index: 1;
-      position: absolute;
-      top: -12px;
-      left: -7px;
-      display: none;
-      width: 100%;
-      margin: 0;
-      padding: 8px 12px;
-      opacity: 0.0;
-      background: $white;
-      border: 1px solid $mediumGrey;
-      font-size: 12px;
-      @include border-radius(4px);
-      @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
-      @include transition(opacity .15s);
-
-
-      li {
-        margin-bottom: 3px;
-        padding-bottom: 3px;
-        border-bottom: 1px solid $lightGrey;
-
-        &:last-child {
-          margin-bottom: 0;
-          padding-bottom: 0;
-          border: none;
-        }
-      }
-
-      a {
-
-        &.is-selected {
-          font-weight: bold;
-        }
-      }
-    }
-
-    // dropdown state
-    &.is-active {
-
-      .menu {
-        z-index: 10000;
-        display: block;
-        opacity: 1.0;
-      }
-
-      .menu-toggle {
-        z-index: 1000;
-      }
-    }
-
-    // set state
-    &.is-set {
-
-      .menu-toggle {
-        color: $blue;
-      }
-
-      .status-label {
-        display: block;
-        color: $blue;
-      }
-    }
-  }
-}
\ No newline at end of file
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
deleted file mode 100644
index b7600e4205..0000000000
--- a/cms/static/sass/_unit.scss
+++ /dev/null
@@ -1,667 +0,0 @@
-.unit .main-wrapper {
-  @include clearfix();
-  margin: 40px;
-}
-
-//Problem Selector tab menu requirements
-.js .tabs .tab {
- display: none;
-}
-//end problem selector reqs
-
-.main-column {
-  clear: both;
-  float: left;
-  width: 70%;
-}
-
-.unit-body.published {
-  .components > li {
-    border: none;
-
-    .rendered-component {
-      padding: 0 20px;
-    }
-  }
-}
-
-.unit-body {
-  .breadcrumbs {
-    border-radius: 3px 3px 0 0;
-    border-bottom: 1px solid #cbd1db;
-    @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
-    background-color: #edf1f5;
-    @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
-    @include clearfix;
-
-    li {
-      float: left;
-    }
-
-    a,
-    .current-page {
-      display: block;
-      padding: 15px 35px 15px 30px;
-      font-size: 14px;
-      background: url(../img/breadcrumb-arrow.png) no-repeat right center;
-    }
-  }
-
-  h2 {
-    margin: 30px 40px 30px 0;
-    color: #646464;
-    font-size: 19px;
-    font-weight: 300;
-    letter-spacing: 1px;
-    text-transform: uppercase;
-  }
-
-  .components {
-
-    > li {
-      position: relative;
-      z-index: 10;
-      margin: 20px 40px;
-
-
-
-      .title {
-        margin: 0 0 15px 0;
-        color: $mediumGrey;
-
-        .value {
-        }
-      }
-
-      &.new-component-item {
-        margin: 20px 0px;
-        border-top: 1px solid $mediumGrey;
-        box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
-        background-color: $lightGrey;
-        margin-bottom: 0px;
-        padding-bottom: 20px;
-
-        .new-component-button {
-          display: block;
-          padding: 20px;
-          text-align: center;
-          color: #edf1f5;
-        }
-
-        h5 {
-          margin: 20px 0px;
-          color: #fff;
-          font-weight: 600;
-          font-size: 18px;
-        }
-
-        .rendered-component {
-          display: none;
-          background: #fff;
-          border-radius: 3px 3px 0 0;
-        }
-
-        .new-component-type {
-
-          a,
-          li {
-            display: inline-block;
-          }
-
-          a {
-            border: 1px solid $mediumGrey;
-            width: 100px;
-            height: 100px;
-            color: #fff;
-            margin-right: 15px;
-            margin-bottom: 20px;
-            border-radius: 8px;
-            font-size: 15px;
-            line-height: 14px;
-            text-align: center;
-            @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
-
-            .name {
-              position: absolute;
-              bottom: 5px;
-              left: 0;
-              width: 100%;
-              padding: 10px;
-              @include box-sizing(border-box);
-              color: #fff;
-            }
-          }
-        }
-
-        .new-component-templates {
-          display: none;
-          margin: 20px 40px 20px 40px;
-          border-radius: 3px;
-          border: 1px solid $mediumGrey;
-          background-color: #fff;
-          @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
-          @include clearfix;
-
-          .cancel-button {
-            margin: 20px 0px 10px 10px;
-            @include white-button;
-          }
-
-          .problem-type-tabs {
-            display: none;
-          }
-
-          // specific menu types
-          &.new-component-problem {
-            padding-bottom:10px;
-
-            .ss-icon, .editor-indicator {
-              display: inline-block;
-            }
-
-            .problem-type-tabs {
-              display: inline-block;
-            }
-          }
-        }
-
-        .new-component-type,
-        .new-component-template {
-          @include clearfix;
-
-          a {
-            position: relative;            
-            border: 1px solid $darkGreen;
-            background: tint($green,20%);
-            color: #fff;            
-
-            &:hover {
-              background: $brightGreen;
-            }
-          }
-        }
-
-        .problem-type-tabs {
-          list-style-type: none;
-          border-radius: 0;
-          width: 100%;
-          @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-          background-color: $lightBluishGrey;
-          @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
-
-          li:first-child {
-            margin-left: 20px;
-          }
-
-          li {
-            float:left;
-            display:inline-block;
-            text-align:center;
-            width: auto;
-            @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
-            background-color: tint($lightBluishGrey, 10%);
-            @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
-            opacity:.8;
-
-            &:hover {
-              opacity:1;
-              background-color: tint($lightBluishGrey, 20%);
-            }
-
-            &.ui-state-active {
-              border: 0px;
-              @include active;
-              opacity:1;
-            }
-          }
-
-          a{
-            display: block;
-            padding: 15px 25px;
-            font-size: 15px;
-            line-height: 16px;
-            text-align: center;
-            color: #3c3c3c;
-            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
-          }
-        }
-
-        .new-component-template {
-
-          a {
-            background: #fff;
-            border: 0px;
-            color: #3c3c3c;
-            @include transition (none);
-
-            &:hover {
-              background: tint($green,30%); 
-              color: #fff;        
-              @include transition(background-color .15s);
-            }
-          }
-
-          li {
-              border:none;
-              border-bottom: 1px dashed $lightGrey;
-              color: #fff;      
-          }
-
-          li:first-child {
-            a {
-              border-top: 0px;
-            }
-          }
-
-          li:nth-child(2) {
-            a {
-              border-radius: 0px;
-            }
-          }
-
-          a {
-            @include clearfix();
-            display: block;
-            padding: 7px 20px;
-            border-bottom: none;
-            font-weight: 500;
-
-            .name {
-              float: left;
-
-              .ss-icon {
-                @include transition(opacity .15s);
-                display: inline-block;
-                top: 1px;
-                margin-right: 5px;
-                opacity: 0.5;
-                width: 17;
-                height: 21px;
-                vertical-align: middle;
-              }
-            }
-
-            .editor-indicator {
-              @include transition(opacity .15s);
-              float: right;
-              position: relative;
-              top: 3px;
-              font-size: 12px;
-              opacity: 0.3;
-            }
-
-            .ss-icon, .editor-indicator {
-              display: none;
-            }
-
-            &:hover {
-              color: #fff;
-
-              .ss-icon {
-                opacity: 1.0;
-              }
-
-              .editor-indicator {
-                opacity: 1.0;
-              }
-            }
-          }
-
-          // specific editor types 
-          .empty {
-
-            a {
-              line-height: 1.4;
-              font-weight: 400;
-              background: #fff;
-              color: #3c3c3c;
-
-
-              &:hover {
-              background: tint($green,30%); 
-              color: #fff;
-            }
-            }
-          }
-        }
-
-        .new-component {          
-          text-align: center;
-
-          h5 {
-            color: $darkGreen;
-          }
-          
-        }
-      }
-    }
-  }
-
-  .component {
-    border: 1px solid $lightBluishGrey2;
-    border-radius: 3px;
-    background: #fff;
-    @include transition(none);
-
-    &:hover {
-      border-color: #6696d7;
-
-      .drag-handle {
-        background-color: $blue;
-        border-color: $blue;
-      }
-    }
-
-    &.editing {
-      border: 1px solid $lightBluishGrey2;
-      z-index: auto;
-      
-      .drag-handle,
-      .component-actions {
-        display: none;
-      }
-    }
-
-    &.component-placeholder {
-      border-color: #6696d7;
-    }
-
-    .component-actions {
-      position: absolute;
-      top: 7px;
-      right: 9px;
-    }
-
-    .drag-handle {
-      position: absolute;
-      display: block;
-      top: -1px;
-      right: -16px;
-      z-index: 10;
-      width: 15px;
-      height: 100%;
-      border-radius: 0 3px 3px 0;
-      border: 1px solid $lightBluishGrey2;
-      background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
-      cursor: move;
-      @include transition(none);
-    }
-  }
-
-  .xmodule_display {
-    padding: 40px 20px 20px;
-    overflow-x: auto;
-
-    h1 {
-      float: none;
-      margin-left: 0;
-    }
-  }
-
-  .wrapper-component-editor {
-    z-index: 9999;
-    position: relative;
-    background: $lightBluishGrey2;
-  }
-
-  .component-editor {
-    @include edit-box;
-    @include box-shadow(none);
-    display: none;
-    padding: 20px;
-    border-radius: 2px 2px 0 0;
-
-    .metadata_edit {
-      margin-bottom: 20px;
-      font-size: 13px;
-
-      li {
-        margin-bottom: 10px;
-      }
-
-      label {
-        display: inline-block;
-        margin-right: 10px;  
-      }
-    }
-
-    h3 {
-      margin-bottom: 10px;
-      font-size: 18px;
-      font-weight: 700;
-    }
-
-    h5 {
-      margin-bottom: 8px;
-      color: #fff;
-      font-weight: 700;
-    }
-
-    .save-button {
-      margin-top: 10px;
-      margin: 15px 8px 0 0;
-    }
-  }
-}
-
-.unit-settings {
-  .window-contents {
-    padding: 10px 20px;
-  }
-
-  .unit-actions {
-    border-bottom: none;
-    padding-bottom: 0;
-  }
-
-  .published-alert {
-    display: none;
-    padding: 10px;
-    border: 1px solid #edbd3c;
-    border-radius: 3px;
-    background: #fbf6e1;
-    font-size: 14px;
-    line-height: 1.4;
-
-    div {
-      margin-top: 15px;
-    }
-  }
-
-  input[type="radio"] {
-      margin-right: 7px;
-  }
-
-  .status {
-    font-size: 12px;
-
-    strong {
-      font-weight: 700;
-    }
-  }
-
-  .preview-button, .view-button {
-    @include white-button;
-    margin-bottom: 10px;
-  }
-
-  .publish-button {
-    @include orange-button;
-  }
-
-  .delete-button {
-    @include blue-button;
-  }
-
-  .delete-draft {
-    display: inline-block;
-  }
-
-  .delete-button,
-  .preview-button,
-  .publish-button,
-  .view-button {
-    font-size: 11px;
-    margin-top: 10px;
-    padding: 6px 15px 8px;
-  }
-}
-
-.unit-history {
-  &.collapsed {
-    h4 {
-      border-bottom: none;
-      border-radius: 3px;
-    }
-
-    .window-contents {
-      display: none;  
-    }
-  }
-
-  ol {
-    border: 1px solid #ced2db;
-
-    li {
-      display: block;
-      padding: 6px 8px 8px 10px;
-      background: #edf1f5;
-      font-size: 12px;
-
-      &:hover {
-        background: #fffcf1;
-
-        .item-actions {
-          display: block;
-        }
-      }
-
-      &.checked {
-        background: #d1dae3;
-      }
-
-      .item-actions {
-        display: none;
-      }
-
-      input[type="radio"] {
-        margin-right: 7px;
-      }
-    }
-  }
-}
-
-.unit-location {
-  .url {
-    width: 100%;
-    margin-bottom: 10px;
-    @include box-shadow(none);
-  }
-
-  .draft-tag,
-  .hidden-tag,
-  .private-tag,
-  .has-new-draft-tag {
-    font-size: 8px;
-  }
-
-  .window-contents > ol {
-    @include tree-view;
-
-    .section-item {
-      display: inline-block;
-      width: 100%;
-      font-size: 11px;
-      padding: 2px 8px 4px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-      @include box-sizing(border-box);
-    }
-
-    ol {
-      .section-item {
-        padding-left: 20px;
-      }
-
-      .new-unit-item {
-        margin-left: 20px;
-      }
-    }
-
-    ol ol {
-      .section-item {
-        padding-left: 34px;
-      }
-
-      .new-unit-item {
-        margin: 0 0 10px 41px;
-      }
-    }
-  }
-}
-
-.edit-state-draft {
-  .visibility,
-
-  .edit-draft-message,
-  .view-button {
-    display: none;
-  }
-
-  .published-alert {
-    display: block;
-  }
-}
-
-.edit-state-public {
-  .delete-draft,
-  .component-actions,
-  .new-component-item,
-  .editing-draft-alert,
-  .publish-draft-message,
-  .preview-button {
-    display: none;
-  }
-
-  .published-alert {
-    display: block;
-  }
-
-  .drag-handle {
-    display: none !important;
-  }
-}
-
-.edit-state-private {
-  .delete-draft,
-  .publish-draft,
-  .editing-draft-alert,
-  .create-draft,
-  .view-button {
-    display: none;
-  }
-}
-
-// editing units from courseware
-body.unit {
-
-  .component {
-    padding-top: 30px;
-
-    .component-actions {
-      @include box-sizing(border-box);
-      position: absolute;
-      width: 100%;
-      padding: 15px;
-      top: 0;
-      left: 0;
-      border-bottom: 1px solid $lightBluishGrey2;
-      background: $lightGrey;
-    }
-
-    &.editing {
-      padding-top: 0;
-    }
-  }
-}
diff --git a/cms/static/sass/_variables.scss b/cms/static/sass/_variables.scss
index 9e383af99d..b9daf6e079 100644
--- a/cms/static/sass/_variables.scss
+++ b/cms/static/sass/_variables.scss
@@ -1,3 +1,6 @@
+// studio - utilities - variables
+// ====================
+
 $baseline: 20px;
 
 // grid
@@ -12,11 +15,18 @@ $fg-min-width: 900px;
 // type
 $sans-serif: 'Open Sans', $verdana;
 $body-line-height: golden-ratio(.875em, 1);
-$error-red: rgb(253, 87, 87);
 
 // colors - new for re-org
 $black: rgb(0,0,0);
+$black-t0: rgba(0,0,0,0.125);
+$black-t1: rgba(0,0,0,0.25);
+$black-t2: rgba(0,0,0,0.50);
+$black-t3: rgba(0,0,0,0.75);
 $white: rgb(255,255,255);
+$white-t0: rgba(255,255,255,0.125);
+$white-t1: rgba(255,255,255,0.25);
+$white-t2: rgba(255,255,255,0.50);
+$white-t3: rgba(255,255,255,0.75);
 
 $gray: rgb(127,127,127);
 $gray-l1: tint($gray,20%);
@@ -40,6 +50,12 @@ $blue-d1: shade($blue,20%);
 $blue-d2: shade($blue,40%);
 $blue-d3: shade($blue,60%);
 $blue-d4: shade($blue,80%);
+$blue-s1: saturate($blue,15%);
+$blue-s2: saturate($blue,30%);
+$blue-s3: saturate($blue,45%);
+$blue-u1: desaturate($blue,15%);
+$blue-u2: desaturate($blue,30%);
+$blue-u3: desaturate($blue,45%);
 
 $pink: rgb(183, 37, 103);
 $pink-l1: tint($pink,20%);
@@ -51,6 +67,29 @@ $pink-d1: shade($pink,20%);
 $pink-d2: shade($pink,40%);
 $pink-d3: shade($pink,60%);
 $pink-d4: shade($pink,80%);
+$pink-s1: saturate($pink,15%);
+$pink-s2: saturate($pink,30%);
+$pink-s3: saturate($pink,45%);
+$pink-u1: desaturate($pink,15%);
+$pink-u2: desaturate($pink,30%);
+$pink-u3: desaturate($pink,45%);
+
+$red: rgb(178, 6, 16);
+$red-l1: tint($red,20%);
+$red-l2: tint($red,40%);
+$red-l3: tint($red,60%);
+$red-l4: tint($red,80%);
+$red-l5: tint($red,90%);
+$red-d1: shade($red,20%);
+$red-d2: shade($red,40%);
+$red-d3: shade($red,60%);
+$red-d4: shade($red,80%);
+$red-s1: saturate($red,15%);
+$red-s2: saturate($red,30%);
+$red-s3: saturate($red,45%);
+$red-u1: desaturate($red,15%);
+$red-u2: desaturate($red,30%);
+$red-u3: desaturate($red,45%);
 
 $green: rgb(37, 184, 90);
 $green-l1: tint($green,20%);
@@ -62,6 +101,12 @@ $green-d1: shade($green,20%);
 $green-d2: shade($green,40%);
 $green-d3: shade($green,60%);
 $green-d4: shade($green,80%);
+$green-s1: saturate($green,15%);
+$green-s2: saturate($green,30%);
+$green-s3: saturate($green,45%);
+$green-u1: desaturate($green,15%);
+$green-u2: desaturate($green,30%);
+$green-u3: desaturate($green,45%);
 
 $yellow: rgb(231, 214, 143);
 $yellow-l1: tint($yellow,20%);
@@ -73,6 +118,29 @@ $yellow-d1: shade($yellow,20%);
 $yellow-d2: shade($yellow,40%);
 $yellow-d3: shade($yellow,60%);
 $yellow-d4: shade($yellow,80%);
+$yellow-s1: saturate($yellow,15%);
+$yellow-s2: saturate($yellow,30%);
+$yellow-s3: saturate($yellow,45%);
+$yellow-u1: desaturate($yellow,15%);
+$yellow-u2: desaturate($yellow,30%);
+$yellow-u3: desaturate($yellow,45%);
+
+$orange: rgb(237, 189, 60);
+$orange-l1: tint($orange,20%);
+$orange-l2: tint($orange,40%);
+$orange-l3: tint($orange,60%);
+$orange-l4: tint($orange,80%);
+$orange-l5: tint($orange,90%);
+$orange-d1: shade($orange,20%);
+$orange-d2: shade($orange,40%);
+$orange-d3: shade($orange,60%);
+$orange-d4: shade($orange,80%);
+$orange-s1: saturate($orange,15%);
+$orange-s2: saturate($orange,30%);
+$orange-s3: saturate($orange,45%);
+$orange-u1: desaturate($orange,15%);
+$orange-u2: desaturate($orange,30%);
+$orange-u3: desaturate($orange,45%);
 
 $shadow: rgba(0,0,0,0.2);
 $shadow-l1: rgba(0,0,0,0.1);
@@ -84,8 +152,6 @@ $elem-height-imaginary: 1000000px;
 // colors - inherited 
 $baseFontColor: #3c3c3c;
 $offBlack: #3c3c3c;
-$orange: #edbd3c;
-$red: #b20610;
 $green: #108614;
 $lightGrey: #edf1f5;
 $mediumGrey: #b0b6c2;
@@ -98,4 +164,5 @@ $brightGreen: rgb(22, 202, 87);
 $disabledGreen: rgb(124, 206, 153);
 $darkGreen: rgb(52, 133, 76);
 $lightBluishGrey: rgb(197, 207, 223);
-$lightBluishGrey2: rgb(213, 220, 228);
\ No newline at end of file
+$lightBluishGrey2: rgb(213, 220, 228);
+$error-red: rgb(253, 87, 87);
diff --git a/cms/static/sass/_video.scss b/cms/static/sass/_video.scss
deleted file mode 100644
index b68176e2db..0000000000
--- a/cms/static/sass/_video.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-section.video-new, section.video-edit {
-  > section {
-
-    section.upload {
-      padding: 6px;
-      margin-bottom: 10px;
-      border: 1px solid #ddd;
-
-      a.upload-button {
-        @extend .button;
-        @include inline-block();
-      }
-    }
-
-    section.in-use {
-      h2 {
-        font-size: 14px;
-      }
-
-      div {
-        background: #eee;
-        text-align: center;
-        padding: 6px;
-      }
-    }
-
-    a.save-update {
-      @extend .button;
-      @include inline-block();
-      margin-top: 20px;
-    }
-  }
-}
diff --git a/cms/static/sass/_week.scss b/cms/static/sass/_week.scss
deleted file mode 100644
index b638a36f5c..0000000000
--- a/cms/static/sass/_week.scss
+++ /dev/null
@@ -1,256 +0,0 @@
-section.week-edit,
-section.week-new,
-section.sequence-edit {
-
-  > header {
-    border-bottom: 2px solid #333;
-    @include clearfix();
-
-    div {
-      @include clearfix();
-      padding: 6px 20px;
-
-      h1 {
-        font-size: 18px;
-        text-transform: uppercase;
-        letter-spacing: 1px;
-        float: left;
-      }
-
-      p {
-        float: right;
-      }
-
-      &.week {
-        background: #eee;
-        font-size: 12px;
-        border-bottom: 1px solid #ccc;
-
-        h2 {
-          font-size: 12px;
-          @include inline-block();
-          margin-right: 20px;
-        }
-
-        ul {
-          list-style: none;
-          @include inline-block();
-
-          li {
-            @include inline-block();
-            margin-right: 10px;
-
-            p {
-              float: none;
-            }
-          }
-        }
-      }
-    }
-
-    section.goals {
-      background: #eee;
-      padding: 6px 20px;
-      border-top: 1px solid #ccc;
-
-      ul {
-        list-style: none;
-        color: #999;
-
-        li {
-          margin-bottom: 6px;
-
-          &:last-child {
-            margin-bottom: 0;
-          }
-        }
-      }
-    }
-  }
-
-  > section.content {
-    @include box-sizing(border-box);
-    padding: 20px;
-
-    section.filters {
-      @include clearfix;
-      margin-bottom: 10px;
-      background: #efefef;
-      border: 1px solid #ddd;
-
-      ul {
-        @include clearfix();
-        list-style: none;
-        padding: 6px;
-
-        li {
-          @include inline-block();
-
-          &.advanced {
-            float: right;
-          }
-        }
-      }
-    }
-
-    > div {
-      display: table;
-      border: 1px solid;
-      width: 100%;
-
-      section {
-        header {
-          background: #eee;
-          padding: 6px;
-          border-bottom: 1px solid #ccc;
-          @include clearfix;
-
-          h2 {
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            font-size: 12px;
-            float: left;
-          }
-        }
-
-        &.modules {
-          @include box-sizing(border-box);
-          display: table-cell;
-          width: flex-grid(6, 9);
-          border-right: 1px solid #333;
-
-          &.empty {
-            text-align: center;
-            vertical-align: middle;
-
-            a {
-              @extend .button;
-              @include inline-block();
-              margin-top: 10px;
-            }
-          }
-
-          ol {
-            list-style: none;
-            border-bottom: 1px solid #333;
-
-            li {
-              border-bottom: 1px solid #333;
-
-              &:last-child{
-                border-bottom: 0;
-              }
-
-              a {
-                color: #000;
-              }
-
-              ol {
-                list-style: none;
-
-                li {
-                  padding: 6px;
-
-                  &:hover {
-                    a.draggable {
-                      opacity: 1;
-                    }
-                  }
-
-                  a.draggable {
-                    float: right;
-                    opacity: .5;
-                  }
-
-                  &.group {
-                    padding: 0;
-
-                    header {
-                      padding: 6px;
-                      background: none;
-
-                      h3 {
-                        font-size: 14px;
-                      }
-                    }
-
-
-                    ol {
-                    border-left: 4px solid #999;
-                    border-bottom: 0;
-
-                      li {
-                        &:last-child {
-                          border-bottom: 0;
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        &.scratch-pad {
-          @include box-sizing(border-box);
-          display: table-cell;
-          width: flex-grid(3, 9) + flex-gutter(9);
-          vertical-align: top;
-
-          ol {
-            list-style: none;
-            border-bottom: 1px solid #999;
-
-            li {
-              border-bottom: 1px solid #999;
-              background: #f9f9f9;
-
-              &:last-child {
-                border-bottom: 0;
-              }
-
-              ul {
-                list-style: none;
-
-                li {
-                  padding: 6px;
-
-                  &:last-child {
-                    border-bottom: 0;
-                  }
-
-                  &:hover {
-                    a.draggable {
-                      opacity: 1;
-                    }
-                  }
-
-                  &.empty {
-                    padding: 12px;
-
-                    a {
-                      @extend .button;
-                      display: block;
-                      text-align: center;
-                    }
-                  }
-
-                  a.draggable {
-                    float: right;
-                    opacity: .3;
-                  }
-
-                  a {
-                    color: #000;
-                  }
-                }
-              }
-
-            }
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/cms/static/sass/_content-types.scss b/cms/static/sass/assets/_content-types.scss
similarity index 100%
rename from cms/static/sass/_content-types.scss
rename to cms/static/sass/assets/_content-types.scss
diff --git a/cms/static/sass/_fonts.scss b/cms/static/sass/assets/_fonts.scss
similarity index 100%
rename from cms/static/sass/_fonts.scss
rename to cms/static/sass/assets/_fonts.scss
diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/assets/_graphics.scss
similarity index 100%
rename from cms/static/sass/_graphics.scss
rename to cms/static/sass/assets/_graphics.scss
diff --git a/cms/static/sass/_keyframes.scss b/cms/static/sass/assets/_keyframes.scss
similarity index 100%
rename from cms/static/sass/_keyframes.scss
rename to cms/static/sass/assets/_keyframes.scss
diff --git a/cms/static/sass/base-style.scss b/cms/static/sass/base-style.scss
index e37ea22aad..6a1f1bb252 100644
--- a/cms/static/sass/base-style.scss
+++ b/cms/static/sass/base-style.scss
@@ -1,40 +1,52 @@
+// studio - css architecture
+// ====================
+
+// bourbon libs and resets
 @import 'bourbon/bourbon';
 @import 'bourbon/addons/button';
 @import 'vendor/normalize';
-@import 'keyframes';
-
 @import 'reset';
+
+// utilities
+@import 'variables';
 @import 'mixins';
+@import 'cms_mixins';
 
-@import "fonts";
-@import "variables";
-@import "cms_mixins";
-@import "extends";
-@import "base";
-@import "header";
-@import "footer";
-@import "dashboard";
-@import "courseware";
-@import "subsection";
-@import "unit";
-@import "assets";
-@import "static-pages";
-@import "users";
-@import "import";
-@import "export";
-@import "settings";
-@import "course-info";
-@import "landing";
-@import "graphics";
-@import "modal";
-@import "alerts";
-@import "login";
-@import "account";
-@import "index";
-@import "checklists";
-@import 'jquery-ui-calendar';
+// assets
+@import 'assets/fonts';
+@import 'assets/graphics';
+@import 'assets/keyframes';
 
-@import 'content-types';
+// base
+@import 'base';
 
+// elements
+@import 'elements/header';
+@import 'elements/footer';
+@import 'elements/navigation';
+@import 'elements/forms';
+@import 'elements/modal';
+@import 'elements/alerts';
+@import 'elements/jquery-ui-calendar';
+
+// specific views
+@import 'views/account';
+@import 'views/assets';
+@import 'views/updates';
+@import 'views/dashboard';
+@import 'views/export';
+@import 'views/index';
+@import 'views/import';
+@import 'views/outline';
+@import 'views/settings';
+@import 'views/static-pages';
+@import 'views/subsection';
+@import 'views/unit';
+@import 'views/users';
+@import 'views/checklists';
+
+@import 'assets/content-types';
+
+// xblock-related
 @import 'module/module-styles.scss';
 @import 'descriptor/module-styles.scss';
diff --git a/cms/static/sass/_alerts.scss b/cms/static/sass/elements/_alerts.scss
similarity index 96%
rename from cms/static/sass/_alerts.scss
rename to cms/static/sass/elements/_alerts.scss
index bd7f687f67..9c15f811e0 100644
--- a/cms/static/sass/_alerts.scss
+++ b/cms/static/sass/elements/_alerts.scss
@@ -1,3 +1,6 @@
+// studio - elements - alerts, notifications, prompts
+// ====================
+
 // notifications
 .wrapper-notification {
 	@include clearfix();
diff --git a/cms/static/sass/_footer.scss b/cms/static/sass/elements/_footer.scss
similarity index 93%
rename from cms/static/sass/_footer.scss
rename to cms/static/sass/elements/_footer.scss
index 66a9ce0e95..b1c0f57bb2 100644
--- a/cms/static/sass/_footer.scss
+++ b/cms/static/sass/elements/_footer.scss
@@ -1,4 +1,6 @@
-//studio global footer
+// studio - elements - global footer
+// ====================
+
 .wrapper-footer {
   margin: ($baseline*1.5) 0 $baseline 0;
   padding: $baseline;
diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss
new file mode 100644
index 0000000000..384ffc0509
--- /dev/null
+++ b/cms/static/sass/elements/_forms.scss
@@ -0,0 +1,76 @@
+// studio - elements - forms
+// ====================
+
+// forms - general
+input[type="text"],
+input[type="email"],
+input[type="password"],
+textarea.text {
+  padding: 6px 8px 8px;
+  @include box-sizing(border-box);
+  border: 1px solid $mediumGrey;
+  border-radius: 2px;
+  @include linear-gradient($lightGrey, tint($lightGrey, 90%));
+  background-color: $lightGrey;
+  @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+  font-family: 'Open Sans', sans-serif;
+  font-size: 11px;
+  color: $baseFontColor;
+  outline: 0;
+
+  &::-webkit-input-placeholder,
+  &:-moz-placeholder,
+  &:-ms-input-placeholder {
+      color: #979faf;
+  }
+
+  &:focus {
+    @include linear-gradient($paleYellow, tint($paleYellow, 90%));
+    outline: 0;
+  }
+}
+
+// forms - specific
+input.search {
+  padding: 6px 15px 8px 30px;
+  @include box-sizing(border-box);
+  border: 1px solid $darkGrey;
+  border-radius: 20px;
+  background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
+  font-family: 'Open Sans', sans-serif;
+  color: $baseFontColor;
+  outline: 0;
+
+  &::-webkit-input-placeholder {
+      color: #979faf;
+  }
+}
+
+label {
+  font-size: 12px;
+}
+
+code {
+  padding: 0 4px;
+  border-radius: 3px;
+  background: #eee;
+  font-family: Monaco, monospace;
+}
+
+.CodeMirror {
+  font-size: 13px;
+  border: 1px solid $darkGrey;
+  background: #fff;
+}
+
+.text-editor {
+  width: 100%;
+  min-height: 80px;
+  padding: 10px;
+  @include box-sizing(border-box);
+  border: 1px solid $mediumGrey;
+  @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
+  background-color:  #edf1f5;
+  @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.1) inset);
+  font-family: Monaco, monospace;
+}
\ No newline at end of file
diff --git a/cms/static/sass/_header.scss b/cms/static/sass/elements/_header.scss
similarity index 99%
rename from cms/static/sass/_header.scss
rename to cms/static/sass/elements/_header.scss
index ca1092f44b..e8df37f57f 100644
--- a/cms/static/sass/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -1,4 +1,4 @@
-// studio global header and navigation
+// studio - elements - global header
 // ====================
 
 .wrapper-header {
diff --git a/cms/static/sass/_jquery-ui-calendar.scss b/cms/static/sass/elements/_jquery-ui-calendar.scss
similarity index 94%
rename from cms/static/sass/_jquery-ui-calendar.scss
rename to cms/static/sass/elements/_jquery-ui-calendar.scss
index 96cffc059f..3d20bde642 100644
--- a/cms/static/sass/_jquery-ui-calendar.scss
+++ b/cms/static/sass/elements/_jquery-ui-calendar.scss
@@ -1,3 +1,6 @@
+// studio - elements - JQUI calendar
+// ====================
+
 .ui-datepicker {
   border-color: $darkGrey;
   border-radius: 2px;
diff --git a/cms/static/sass/_modal.scss b/cms/static/sass/elements/_modal.scss
similarity index 94%
rename from cms/static/sass/_modal.scss
rename to cms/static/sass/elements/_modal.scss
index f9fbf81a8f..b81baf4565 100644
--- a/cms/static/sass/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -1,3 +1,6 @@
+// studio - elements - modal windows
+// ====================
+
 .modal-cover {
 	display: none;
 	position: fixed;
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
new file mode 100644
index 0000000000..066c47298b
--- /dev/null
+++ b/cms/static/sass/elements/_navigation.scss
@@ -0,0 +1,24 @@
+// studio - elements - navigation
+// ====================
+
+// common
+
+// ====================
+
+// primary
+
+// ====================
+
+// right hand side
+
+// ====================
+
+// tabs
+
+// ====================
+
+// dropdown
+
+// ====================
+
+// 
\ No newline at end of file
diff --git a/cms/static/sass/_account.scss b/cms/static/sass/views/_account.scss
similarity index 99%
rename from cms/static/sass/_account.scss
rename to cms/static/sass/views/_account.scss
index 650743979f..1206db5e76 100644
--- a/cms/static/sass/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -1,5 +1,6 @@
-// Studio - Sign In/Up
+// studio - views - sign up/in
 // ====================
+
 body.signup, body.signin {
 
   .wrapper-content {
diff --git a/cms/static/sass/_assets.scss b/cms/static/sass/views/_assets.scss
similarity index 97%
rename from cms/static/sass/_assets.scss
rename to cms/static/sass/views/_assets.scss
index d9b215faec..779dc56684 100644
--- a/cms/static/sass/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -1,4 +1,8 @@
-.uploads {
+// studio - views - assets
+// ====================
+
+body.course.uploads {
+  
   input.asset-search-input {
     float: left;
     width: 260px;
diff --git a/cms/static/sass/_checklists.scss b/cms/static/sass/views/_checklists.scss
similarity index 100%
rename from cms/static/sass/_checklists.scss
rename to cms/static/sass/views/_checklists.scss
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
new file mode 100644
index 0000000000..a02c4e0c29
--- /dev/null
+++ b/cms/static/sass/views/_dashboard.scss
@@ -0,0 +1,124 @@
+// studio - views - user dashboard
+// ====================
+
+body.dashboard {
+
+	.my-classes {
+	  margin-top: $baseline;
+	}
+
+	.class-list {
+		margin-top: 20px;
+		border-radius: 3px;
+		border: 1px solid $darkGrey;	
+		background: #fff;
+		@include box-shadow(0 1px 2px rgba(0, 0, 0, .1));
+
+		li {
+			position: relative;
+			border-bottom: 1px solid $mediumGrey;
+
+			&:last-child {
+				border-bottom: none;
+			}
+
+			.class-link {
+				z-index: 100;
+				display: block;
+				padding: 20px 25px;
+				line-height: 1.3;
+				
+				&:hover {
+					background: $paleYellow;
+
+					+ .view-live-button {
+						opacity: 1.0;
+						pointer-events: auto;
+					}
+				}
+			}
+		}
+
+		.class-name {
+			display: block;
+			font-size: 19px;
+			font-weight: 300;
+		}
+
+		.detail {
+			font-size: 14px;
+			font-weight: 400;
+			margin-right: 20px;
+			color: #3c3c3c;
+		}
+
+		// view live button
+		.view-live-button {
+			z-index: 10000;
+			position: absolute;
+			top: 15px;
+			right: $baseline;		
+			padding: ($baseline/4) ($baseline/2);
+			opacity: 0;
+			pointer-events: none;
+
+			&:hover {
+				opacity: 1.0;
+				pointer-events: auto;
+			}
+		}
+	}
+
+	.new-course {
+		padding: 15px 25px;
+		margin-top: 20px;
+		border-radius: 3px;
+		border: 1px solid $darkGrey;	
+		background: #fff;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+		@include clearfix;
+
+		.row {
+			margin-bottom: 15px;
+			@include clearfix;
+		}
+
+		.column {
+			float: left;
+			width: 48%;
+		}
+
+		.column:first-child {
+			margin-right: 4%;
+		}
+
+		.course-info {
+			width: 600px;
+		}
+
+		label {
+			display: block;
+			font-size: 13px;
+			font-weight: 700;
+		}
+
+		.new-course-org,
+		.new-course-number,
+		.new-course-name {
+			width: 100%;
+		}
+
+		.new-course-name {
+			font-size: 19px;
+			font-weight: 300;
+		}
+
+		.new-course-save {
+			@include blue-button;
+		}
+
+		.new-course-cancel {
+			@include white-button;
+		}
+	}
+}
\ No newline at end of file
diff --git a/cms/static/sass/_export.scss b/cms/static/sass/views/_export.scss
similarity index 96%
rename from cms/static/sass/_export.scss
rename to cms/static/sass/views/_export.scss
index e1ab7eb605..933bb50252 100644
--- a/cms/static/sass/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -1,4 +1,8 @@
-.export {
+// studio - views - course export
+// ====================
+
+body.course.export {
+  
   .export-overview {
     @extend .window;
     @include clearfix;
@@ -118,6 +122,4 @@
       }
     }
   }
-
-
 }
\ No newline at end of file
diff --git a/cms/static/sass/_import.scss b/cms/static/sass/views/_import.scss
similarity index 95%
rename from cms/static/sass/_import.scss
rename to cms/static/sass/views/_import.scss
index a0a1f5e512..e5fb955348 100644
--- a/cms/static/sass/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -1,4 +1,8 @@
-.import {
+// studio - views - course import
+// ====================
+
+body.course.import {
+  
   .import-overview {
     @extend .window;
     @include clearfix;
diff --git a/cms/static/sass/_index.scss b/cms/static/sass/views/_index.scss
similarity index 99%
rename from cms/static/sass/_index.scss
rename to cms/static/sass/views/_index.scss
index e0f6d0f2b7..f4087a8605 100644
--- a/cms/static/sass/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -1,5 +1,7 @@
-// how it works/not signed in index
-.index {
+// studio - views - how it works
+// ====================
+
+body.index {
 
   &.not-signedin {
 
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
new file mode 100644
index 0000000000..0d72e2d2bf
--- /dev/null
+++ b/cms/static/sass/views/_outline.scss
@@ -0,0 +1,680 @@
+// studio - views - course outline
+// ====================
+
+body.course.outline {
+
+  input.courseware-unit-search-input {
+      float: left;
+      width: 260px;
+      background-color: #fff;
+  }
+
+  .branch {
+
+      .section-item {
+        @include clearfix();
+
+        .details {
+          display: block;
+          float: left;
+          margin-bottom: 0;
+          width: 650px;
+        }
+
+        .gradable-status {
+          float: right;
+          position: relative;
+          top: -4px;
+          right: 50px;
+          width: 145px;
+
+          .status-label {
+            position: absolute;
+            top: 2px;
+            right: -5px;
+            display: none;
+            width: 110px;
+            padding: 5px 40px 5px 10px;
+            @include border-radius(3px);
+            color: $lightGrey;
+            text-align: right;
+            font-size: 12px;
+            font-weight: bold;
+            line-height: 16px;
+          }
+
+          .menu-toggle {
+                z-index: 10;
+                position: absolute;
+                top: 0;
+                right: 5px;
+                padding: 5px;
+                color: $mediumGrey;
+
+                &:hover, &.is-active {
+                  color: $blue;
+                }
+              }
+
+              .menu {
+                z-index: 1;
+                display: none;
+                opacity: 0.0;
+                position: absolute;
+                top: -1px;
+                left: 5px;
+                margin: 0;
+                padding: 8px 12px;
+                background: $white;
+                border: 1px solid $mediumGrey;
+                font-size: 12px;
+                @include border-radius(4px);
+                @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+                @include transition(opacity .15s);
+
+
+                li {
+                  width: 115px;
+                  margin-bottom: 3px;
+                  padding-bottom: 3px;
+                  border-bottom: 1px solid $lightGrey;
+
+                  &:last-child {
+                    margin-bottom: 0;
+                    padding-bottom: 0;
+                    border: none;
+
+                    a {
+                      color: $darkGrey;
+                    }
+                  }
+                }
+
+            a {
+              color: $blue;
+
+              &.is-selected {
+                font-weight: bold;
+              }
+            }
+          }
+
+          // dropdown state
+          &.is-active {
+
+            .menu {
+              z-index: 1000;
+              display: block;
+              opacity: 1.0;
+            }
+
+            .menu-toggle {
+              z-index: 10000;
+            }
+          }
+
+          // set state
+          &.is-set {
+
+            .menu-toggle {
+              color: $blue;
+            }
+
+            .status-label {
+              display: block;
+              color: $blue;
+            }
+          }
+        }
+      }
+    }
+
+
+  .courseware-section {
+      position: relative;
+      background: #fff;
+      border-radius: 3px;
+      border: 1px solid $mediumGrey;
+      margin-top: 15px;
+      padding-bottom: 12px;
+      @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+
+      &:first-child {
+          margin-top: 0;
+      }
+
+      &.collapsed {
+          padding-bottom: 0;
+      }
+
+      label {
+          float: left;
+          line-height: 29px;
+      }
+
+      .datepair {
+          float: left;
+          margin-left: 10px;
+      }
+
+      .section-published-date {
+          position: absolute;
+          top: 19px;
+          right: 90px;
+          padding: 4px 10px;
+          border-radius: 3px;
+          background: $lightGrey;
+          text-align: right;
+
+          .published-status {
+              font-size: 12px;
+              margin-right: 15px;
+
+              strong {
+                  font-weight: bold;
+              }
+          }
+
+          .schedule-button {
+              @include blue-button;
+          }
+
+          .edit-button {
+              @include blue-button;
+          }
+
+          .schedule-button,
+          .edit-button {
+              font-size: 11px;
+              padding: 3px 15px 5px;
+          }
+      }
+
+      .datepair .date,
+      .datepair .time {
+          padding-left: 0;
+          padding-right: 0;
+          border: none;
+          background: none;
+          @include box-shadow(none);
+          font-size: 13px;
+          font-weight: bold;
+          color: $blue;
+          cursor: pointer;
+      }
+
+      .datepair .date {
+          width: 80px;
+      }
+
+      .datepair .time {
+          width: 65px;
+      }
+
+      &.collapsed .subsection-list,
+      .collapsed .subsection-list,
+      .collapsed > ol {
+          display: none !important;
+      }
+
+      header {
+          min-height: 75px;
+          @include clearfix();
+
+          .item-details, .section-published-date {
+
+          }
+
+          .item-details {
+              display: inline-block;
+              padding: 20px 0 10px 0;
+              @include clearfix();
+
+              .section-name {
+                float: left;
+                margin-right: 10px;
+                width: 350px;
+                font-size: 19px;
+                font-weight: bold;
+                color: $blue;
+              }
+
+              .section-name-span {
+                cursor: pointer;
+                @include transition(color .15s);
+
+                &:hover {
+                  color: $orange;
+                }
+              }
+
+              .section-name-edit {
+                position: relative;
+                width: 400px;
+                background: $white;
+
+                input {
+              font-size: 16px;        
+            }
+                              
+            .save-button {
+              @include blue-button;
+              padding: 7px 20px 7px;
+              margin-right: 5px;
+            }
+
+            .cancel-button {
+              @include white-button;
+              padding: 7px 20px 7px;
+            }
+          }
+
+          .section-published-date {
+            float: right;
+            width: 265px;
+            margin-right: 220px;                              
+            @include border-radius(3px);
+            background: $lightGrey;
+
+            .published-status {
+              font-size: 12px;
+              margin-right: 15px;
+
+              strong {
+                font-weight: bold;
+              }
+            }
+
+            .schedule-button {
+              @include blue-button;
+            }
+
+            .edit-button {
+              @include blue-button;
+            }
+
+            .schedule-button,
+            .edit-button {
+              font-size: 11px;
+              padding: 3px 15px 5px;
+             
+              }
+            }
+
+            .gradable-status {
+              position: absolute;
+              top: 20px;
+              right: 70px;
+              width: 145px;
+
+              .status-label {
+                position: absolute;
+                top: 0;
+                right: 2px;
+                display: none;
+                width: 100px;
+                padding: 10px 35px 10px 10px;
+                @include border-radius(3px);
+                background: $lightGrey;
+                color: $lightGrey;
+                text-align: right;
+                font-size: 12px;
+                font-weight: bold;
+                line-height: 16px;
+              }
+
+              .menu-toggle {
+                z-index: 10;
+                position: absolute;
+                top: 2px;
+                right: 5px;
+                padding: 5px;
+                color: $lightGrey;
+
+                &:hover, &.is-active {
+                  color: $blue;
+                }
+              }
+
+              .menu {
+                z-index: 1;
+                display: none;
+                opacity: 0.0;
+                position: absolute;
+                top: -1px;
+                left: 2px;
+                margin: 0;
+                padding: 8px 12px;
+                background: $white;
+                border: 1px solid $mediumGrey;
+                font-size: 12px;
+                @include border-radius(4px);
+                @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+                @include transition(opacity .15s);
+                @include transition(display .15s);
+
+
+                li {
+                  width: 115px;
+                  margin-bottom: 3px;
+                  padding-bottom: 3px;
+                  border-bottom: 1px solid $lightGrey;
+
+                  &:last-child {
+                    margin-bottom: 0;
+                    padding-bottom: 0;
+                    border: none;
+
+                    a {
+                      color: $darkGrey;
+                    }
+                  }
+                }
+
+                a {
+
+                  &.is-selected {
+                    font-weight: bold;
+                  }
+                }
+            }
+
+            // dropdown state
+            &.is-active {
+
+              .menu {
+                z-index: 1000;
+                display: block;
+                opacity: 1.0;
+              }
+
+
+            .menu-toggle {
+              z-index: 10000;
+            }
+          }
+
+          // set state
+          &.is-set {
+
+            .menu-toggle {
+              color: $blue;
+            }
+
+            .status-label {
+              display: block;
+              color: $blue;
+            }
+          }
+
+          float: left;
+          padding: 21px 0 0;
+        }
+      }
+
+          .item-actions {         
+              margin-top: 21px;
+              margin-right: 12px;
+
+              .edit-button,
+              .delete-button {
+                  margin-top: -3px;
+              }
+          }
+
+          .expand-collapse-icon {
+              float: left;
+              margin: 29px 6px 16px 16px;
+              @include transition(none);
+
+              &.expand {
+                  background-position: 0 0;
+              }
+
+              &.collapsed {
+                  
+              }
+          }
+
+          .drag-handle {
+              margin-left: 11px;
+          }
+      }
+
+      h3 {
+          font-size: 19px;
+          font-weight: 700;
+          color: $blue;
+      }
+
+      .section-name-span {
+          cursor: pointer;
+          @include transition(color .15s);
+
+          &:hover {
+              color: $orange;
+          }
+      }
+
+      .section-name-form {
+          margin-bottom: 15px;
+      }
+
+      .section-name-edit {
+          input {
+              font-size: 16px;
+          }
+          
+          .save-button {
+              @include blue-button;
+              padding: 7px 20px 7px;
+              margin-right: 5px;
+          }
+
+          .cancel-button {
+              @include white-button;
+              padding: 7px 20px 7px;
+          }
+      }
+
+      h4 {
+          font-size: 12px;
+          color: #878e9d;
+
+          strong {
+              font-weight: bold;
+          }
+      }
+
+      .list-header {
+          @include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
+          background-color: #ced2db;
+          border-radius: 3px 3px 0 0;
+      }
+
+      .subsection-list {
+          margin: 0 12px;
+
+          > ol {
+              @include tree-view;
+              border-top-width: 0;
+          }
+      }
+
+      &.new-section {
+
+          header {
+              height: auto;
+              @include clearfix();
+          }
+
+          .expand-collapse-icon {
+              visibility: hidden;
+          }
+
+          .item-details {
+            padding: 25px 0 0 0;
+
+            .section-name {
+              float: none;
+              width: 100%;
+            }
+          }
+      }
+  }
+
+  .toggle-button-sections {
+      display: none;
+      position: relative;
+      float: right;
+      margin-top: 10px;
+
+      font-size: 13px;
+      color: $darkGrey;
+
+      &.is-shown {
+          display: block;
+      }
+
+      .ss-icon {
+          @include border-radius(20px);
+          position: relative;
+          top: -1px;
+          display: inline-block;
+          margin-right: 2px;
+          line-height: 5px;
+          font-size: 11px;
+      }
+
+      .label {
+          display: inline-block;
+      }
+  }
+
+  .new-section-name,
+  .new-subsection-name-input {
+      width: 515px;
+  }
+
+  .new-section-name-save,
+  .new-subsection-name-save {
+      @include blue-button;
+      padding: 4px 20px 7px;
+      margin: 0 5px;
+      color: #fff !important;
+  }
+
+  .new-section-name-cancel,
+  .new-subsection-name-cancel {
+      @include white-button;
+      padding: 4px 20px 7px;
+      color: #8891a1 !important;
+  }
+
+  .dummy-calendar {
+      display: none;
+      position: absolute;
+      top: 55px;
+      left: 110px;
+      z-index: 9999;
+      border: 1px solid #3C3C3C;
+      @include box-shadow(0 1px 15px rgba(0, 0, 0, .2));
+  }
+
+  .preview {
+      background: url(../img/preview.jpg) center top no-repeat;
+  }
+
+  .edit-subsection-publish-settings {
+      display: none;
+      position: fixed;
+      top: 100px;
+      left: 50%;
+      z-index: 99999;
+      width: 600px;
+      margin-left: -300px;
+      background: #fff;
+      text-align: center;
+
+      .settings {
+          padding: 40px;
+      }
+
+      h3 {
+          font-size: 34px;
+          font-weight: 300;
+      }
+
+      .picker {
+          margin: 30px 0 65px;
+      }
+
+      .description {
+          margin-top: 30px;
+          font-size: 14px;
+          line-height: 20px;
+      }
+
+      strong {
+          font-weight: 700;
+      }
+
+      .start-date,
+      .start-time {
+          font-size: 19px;
+      }
+
+      .save-button {
+          @include blue-button;
+          margin-right: 10px;
+      }
+
+      .cancel-button {
+          @include white-button;
+      }
+
+      .save-button,
+      .cancel-button {
+          font-size: 16px;
+      }
+  }
+
+  .collapse-all-button {
+      float: right;
+      margin-top: 10px;
+      font-size: 13px;
+      color: $darkGrey;
+  }
+
+  // sort/drag and drop
+  .ui-droppable {
+      @include transition (padding 0.5s ease-in-out 0s);
+      min-height: 20px;
+      padding: 0;
+
+      &.dropover {
+          padding: 15px 0;
+      }
+  }
+
+  .ui-draggable-dragging {
+      @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
+      border: 1px solid $darkGrey;
+      opacity : 0.2;
+      &:hover {
+          opacity : 1.0;    
+          .section-item {
+              background: $yellow !important;
+          }
+      }
+
+      // hiding unit button - temporary fix until this semantically corrected
+      .new-unit-item {
+        display: none;
+      }
+  }
+
+  ol.ui-droppable .branch:first-child .section-item {
+      border-top: none;
+  }
+}
\ No newline at end of file
diff --git a/cms/static/sass/_settings.scss b/cms/static/sass/views/_settings.scss
similarity index 99%
rename from cms/static/sass/_settings.scss
rename to cms/static/sass/views/_settings.scss
index a42ff80bc2..307ebad0a8 100644
--- a/cms/static/sass/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -1,5 +1,6 @@
-// Studio - Course Settings
+// studio - views - course settings
 // ====================
+
 body.course.settings {
 
   .content-primary, .content-supplementary {
diff --git a/cms/static/sass/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
similarity index 72%
rename from cms/static/sass/_static-pages.scss
rename to cms/static/sass/views/_static-pages.scss
index 138e817769..759b03cfc7 100644
--- a/cms/static/sass/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -1,4 +1,8 @@
-.static-pages {
+// studio - views - course static pages
+// ====================
+
+body.course.static-pages {
+  
   .new-static-page-button {
     @include grey-button;
     display: block;
@@ -16,6 +20,51 @@
         margin: 0 0 5px 0;
       }
     }
+
+    .wrapper-component-editor {
+      z-index: 9999;
+      position: relative;
+      background: $lightBluishGrey2;
+    }
+
+    .component-editor {
+      @include edit-box;
+      @include box-shadow(none);
+      display: none;
+      padding: 20px;
+      border-radius: 2px 2px 0 0;
+
+      .metadata_edit {
+        margin-bottom: 20px;
+        font-size: 13px;
+
+        li {
+          margin-bottom: 10px;
+        }
+
+        label {
+          display: inline-block;
+          margin-right: 10px;  
+        }
+      }
+
+      h3 {
+        margin-bottom: 10px;
+        font-size: 18px;
+        font-weight: 700;
+      }
+
+      h5 {
+        margin-bottom: 8px;
+        color: #fff;
+        font-weight: 700;
+      }
+
+      .save-button {
+        margin-top: 10px;
+        margin: 15px 8px 0 0;
+      }
+    }
   }
 
   .component-editor {
@@ -35,6 +84,7 @@
   }
 
   .component {
+    position: relative;
     border: 1px solid $mediumGrey;
     border-top: none;
 
@@ -56,10 +106,13 @@
     }
 
     .drag-handle {
+      position: absolute;
+      display: block;
       top: 0;
       right: 0;
       z-index: 11;
       width: 35px;
+      height: 100%;
       border: none;
       background: url(../img/drag-handles.png) center no-repeat #fff;
 
@@ -69,6 +122,7 @@
     }
 
     .component-actions {
+      position: absolute;
       top: 26px;
       right: 44px;
     }
diff --git a/cms/static/sass/views/_subsection.scss b/cms/static/sass/views/_subsection.scss
new file mode 100644
index 0000000000..3c6bfa9f11
--- /dev/null
+++ b/cms/static/sass/views/_subsection.scss
@@ -0,0 +1,450 @@
+// studio - views - course subsection
+// ====================
+
+body.course.subsection {
+
+  .unit-settings {
+    .window-contents {
+      padding: 10px 20px;
+    }
+
+    .unit-actions {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    .published-alert {
+      display: none;
+      padding: 10px;
+      border: 1px solid #edbd3c;
+      border-radius: 3px;
+      background: #fbf6e1;
+      font-size: 14px;
+      line-height: 1.4;
+
+      div {
+        margin-top: 15px;
+      }
+    }
+
+    input[type="radio"] {
+        margin-right: 7px;
+    }
+
+    .status {
+      font-size: 12px;
+
+      strong {
+        font-weight: 700;
+      }
+    }
+
+    .preview-button, .view-button {
+      @include white-button;
+      margin-bottom: 10px;
+    }
+
+    .publish-button {
+      @include orange-button;
+    }
+
+    .delete-button {
+      @include blue-button;
+    }
+
+    .delete-draft {
+      display: inline-block;
+    }
+
+    .delete-button,
+    .preview-button,
+    .publish-button,
+    .view-button {
+      font-size: 11px;
+      margin-top: 10px;
+      padding: 6px 15px 8px;
+    }
+  }
+
+  .unit-history {
+    &.collapsed {
+      h4 {
+        border-bottom: none;
+        border-radius: 3px;
+      }
+
+      .window-contents {
+        display: none;  
+      }
+    }
+
+    ol {
+      border: 1px solid #ced2db;
+
+      li {
+        display: block;
+        padding: 6px 8px 8px 10px;
+        background: #edf1f5;
+        font-size: 12px;
+
+        &:hover {
+          background: #fffcf1;
+
+          .item-actions {
+            display: block;
+          }
+        }
+
+        &.checked {
+          background: #d1dae3;
+        }
+
+        .item-actions {
+          display: none;
+        }
+
+        input[type="radio"] {
+          margin-right: 7px;
+        }
+      }
+    }
+  }
+
+  .unit-location {
+    .url {
+      width: 100%;
+      margin-bottom: 10px;
+      @include box-shadow(none);
+    }
+
+    .draft-tag,
+    .hidden-tag,
+    .private-tag,
+    .has-new-draft-tag {
+      font-size: 8px;
+    }
+
+    .window-contents > ol {
+      @include tree-view;
+
+      .section-item {
+        display: inline-block;
+        width: 100%;
+        font-size: 11px;
+        padding: 2px 8px 4px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        @include box-sizing(border-box);
+      }
+
+      ol {
+        .section-item {
+          padding-left: 20px;
+        }
+
+        .new-unit-item {
+          margin-left: 20px;
+        }
+      }
+
+      ol ol {
+        .section-item {
+          padding-left: 34px;
+        }
+
+        .new-unit-item {
+          margin: 0 0 10px 41px;
+        }
+      }
+    }
+  }
+
+  .subsection-body {
+    padding: 32px 40px;
+    @include clearfix;
+
+    > div {
+      margin-bottom: 40px;
+    }
+
+    input {
+      font-size: 14px;
+    }
+
+    .unit-subtitle {
+      display: block;
+      width: 100%;
+    }
+
+    .sortable-unit-list {
+      ol {
+        @include tree-view;
+      }
+    }
+
+    .policy-list {
+      input[disabled] {
+        border: none;
+        @include box-shadow(none);
+      }
+
+      .policy-list-name {
+        margin-right: 5px;
+        margin-bottom: 10px;
+      }
+
+      .policy-list-value {
+        width: 320px;
+        margin-right: 10px;
+      }
+    }
+
+    .policy-list-element {
+      .save-button,
+      .cancel-button {
+        display: none;
+      }
+
+      .edit-icon {
+        margin-right: 8px;
+      }
+
+      &.editing,
+      &.new-policy-list-element {
+        .policy-list-name,
+        .policy-list-value {
+          border: 1px solid #b0b6c2;
+          @include linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));
+          background-color: #edf1f5;
+          @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset);
+        }
+      }
+    }
+
+    .new-policy-list-element {
+      padding: 10px 10px 0;
+      margin: 0 -10px 10px;
+      border-radius: 3px;
+      background: $mediumGrey;
+
+      .save-button {
+        @include blue-button;
+        margin-bottom: 10px;
+      }
+
+      .cancel-button {
+        @include white-button;
+      }
+
+      .edit-icon {
+        display: none;
+      }
+
+      .delete-icon {
+        display: none;
+      }
+    }
+
+    .new-policy-item {
+      margin: 10px 0;
+
+      .plus-icon-small {
+        position: relative;
+        top: -1px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .subsection-name-input {
+    label {
+      display: block;
+    }
+
+    input {
+      width: 100%;
+      font-size: 20px;
+    }
+  }
+
+  .scheduled-date-input,
+  .due-date-input {
+    @include clearfix;
+
+    .date-input,
+    .time-input {
+      display: inline-block;
+      width: 100px;
+    }
+
+    .inherits-check {
+      label {
+        font-size: 13px;
+      }
+    }
+
+    .notice {
+      margin-top: 6px;
+      font-size: 11px;
+      color: #999;
+    }
+  }
+
+  .due-date-input {
+    label {
+      display: inline-block !important;
+      margin-right: 10px;
+    }
+
+    a {
+      font-size: 11px;
+      font-weight: bold;
+      text-transform: uppercase;
+    }
+
+    .date-setter {
+      @include clearfix;
+      display: none;
+    }
+
+    .remove-date {
+      display: block;
+    }
+  }
+
+  .row.visibility {
+    label {
+      display: inline-block !important;
+      margin-right: 10px;
+      line-height: 21px;
+    }
+
+    a {
+      display: inline-block;
+      height: 31px;
+      margin-right: 8px;
+      vertical-align: middle;
+      font-size: 11px;
+      font-weight: 700;
+      line-height: 31px;
+      text-transform: uppercase;
+    }
+
+    .large-toggle {
+      width: 41px;
+      background: url(../img/large-toggles.png) no-repeat;
+      background-position: 0 -50px;
+
+      .hidden {
+        background-position: 0 -5px;      
+      }
+    }
+  }
+
+  .gradable {
+
+    label {
+      display: inline-block;
+      vertical-align: top;
+    }
+
+    .gradable-status {
+      position: relative;
+      top: -4px;
+      display: inline-block;
+      margin-left: 10px;
+      width: 65%;
+
+      .status-label {
+        margin: 0;
+        padding: 0;
+        background: transparent;
+        color: $blue;
+        border: none;
+        font-size: 11px;
+        font-weight: bold;
+        text-transform: uppercase;
+      }
+
+      .menu-toggle {
+        z-index: 100;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 20px;
+        background: transparent;
+
+        &:hover, &.is-active {
+                color: $blue;
+        }
+      }
+
+      .menu {
+        z-index: 1;
+        position: absolute;
+        top: -12px;
+        left: -7px;
+        display: none;
+        width: 100%;
+        margin: 0;
+        padding: 8px 12px;
+        opacity: 0.0;
+        background: $white;
+        border: 1px solid $mediumGrey;
+        font-size: 12px;
+        @include border-radius(4px);
+        @include box-shadow(0 1px 2px rgba(0, 0, 0, .2));
+        @include transition(opacity .15s);
+
+
+        li {
+          margin-bottom: 3px;
+          padding-bottom: 3px;
+          border-bottom: 1px solid $lightGrey;
+
+          &:last-child {
+            margin-bottom: 0;
+            padding-bottom: 0;
+            border: none;
+          }
+        }
+
+        a {
+
+          &.is-selected {
+            font-weight: bold;
+          }
+        }
+      }
+
+      // dropdown state
+      &.is-active {
+
+        .menu {
+          z-index: 10000;
+          display: block;
+          opacity: 1.0;
+        }
+
+        .menu-toggle {
+          z-index: 1000;
+        }
+      }
+
+      // set state
+      &.is-set {
+
+        .menu-toggle {
+          color: $blue;
+        }
+
+        .status-label {
+          display: block;
+          color: $blue;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
new file mode 100644
index 0000000000..e74690d9ec
--- /dev/null
+++ b/cms/static/sass/views/_unit.scss
@@ -0,0 +1,681 @@
+// studio - views - unit
+// ====================
+
+body.course.unit {
+
+  .unit .main-wrapper {
+    @include clearfix();
+    margin: 40px;
+  }
+
+  //Problem Selector tab menu requirements
+  .js .tabs .tab {
+   display: none;
+  }
+  //end problem selector reqs
+
+  .main-column {
+    clear: both;
+    float: left;
+    width: 70%;
+  }
+
+  .unit-body.published {
+    .components > li {
+      border: none;
+
+      .rendered-component {
+        padding: 0 20px;
+      }
+    }
+  }
+
+  .unit-body {
+    
+    .unit-name-input {
+      padding: 20px 40px;
+
+      label {
+        display: block;
+      }
+
+      input {
+        width: 100%;
+        font-size: 20px;
+      }
+    }
+    
+    .breadcrumbs {
+      border-radius: 3px 3px 0 0;
+      border-bottom: 1px solid #cbd1db;
+      @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%);
+      background-color: #edf1f5;
+      @include box-shadow(0 1px 0 rgba(255, 255, 255, .7) inset);
+      @include clearfix;
+
+      li {
+        float: left;
+      }
+
+      a,
+      .current-page {
+        display: block;
+        padding: 15px 35px 15px 30px;
+        font-size: 14px;
+        background: url(../img/breadcrumb-arrow.png) no-repeat right center;
+      }
+    }
+
+    h2 {
+      margin: 30px 40px 30px 0;
+      color: #646464;
+      font-size: 19px;
+      font-weight: 300;
+      letter-spacing: 1px;
+      text-transform: uppercase;
+    }
+
+    .components {
+
+      > li {
+        position: relative;
+        z-index: 10;
+        margin: 20px 40px;
+
+
+
+        .title {
+          margin: 0 0 15px 0;
+          color: $mediumGrey;
+
+          .value {
+          }
+        }
+
+        &.new-component-item {
+          margin: 20px 0px;
+          border-top: 1px solid $mediumGrey;
+          box-shadow: 0 2px 1px rgba(182, 182, 182, 0.75) inset;
+          background-color: $lightGrey;
+          margin-bottom: 0px;
+          padding-bottom: 20px;
+
+          .new-component-button {
+            display: block;
+            padding: 20px;
+            text-align: center;
+            color: #edf1f5;
+          }
+
+          h5 {
+            margin: 20px 0px;
+            color: #fff;
+            font-weight: 600;
+            font-size: 18px;
+          }
+
+          .rendered-component {
+            display: none;
+            background: #fff;
+            border-radius: 3px 3px 0 0;
+          }
+
+          .new-component-type {
+
+            a,
+            li {
+              display: inline-block;
+            }
+
+            a {
+              border: 1px solid $mediumGrey;
+              width: 100px;
+              height: 100px;
+              color: #fff;
+              margin-right: 15px;
+              margin-bottom: 20px;
+              border-radius: 8px;
+              font-size: 15px;
+              line-height: 14px;
+              text-align: center;
+              @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
+
+              .name {
+                position: absolute;
+                bottom: 5px;
+                left: 0;
+                width: 100%;
+                padding: 10px;
+                @include box-sizing(border-box);
+                color: #fff;
+              }
+            }
+          }
+
+          .new-component-templates {
+            display: none;
+            margin: 20px 40px 20px 40px;
+            border-radius: 3px;
+            border: 1px solid $mediumGrey;
+            background-color: #fff;
+            @include box-shadow(0 1px 1px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .4) inset);
+            @include clearfix;
+
+            .cancel-button {
+              margin: 20px 0px 10px 10px;
+              @include white-button;
+            }
+
+            .problem-type-tabs {
+              display: none;
+            }
+
+            // specific menu types
+            &.new-component-problem {
+              padding-bottom:10px;
+
+              .ss-icon, .editor-indicator {
+                display: inline-block;
+              }
+
+              .problem-type-tabs {
+                display: inline-block;
+              }
+            }
+          }
+
+          .new-component-type,
+          .new-component-template {
+            @include clearfix;
+
+            a {
+              position: relative;            
+              border: 1px solid $darkGreen;
+              background: tint($green,20%);
+              color: #fff;            
+
+              &:hover {
+                background: $brightGreen;
+              }
+            }
+          }
+
+          .problem-type-tabs {
+            list-style-type: none;
+            border-radius: 0;
+            width: 100%;
+            @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+            background-color: $lightBluishGrey;
+            @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+
+            li:first-child {
+              margin-left: 20px;
+            }
+
+            li {
+              float:left;
+              display:inline-block;
+              text-align:center;
+              width: auto;
+              @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0));
+              background-color: tint($lightBluishGrey, 10%);
+              @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset);
+              opacity:.8;
+
+              &:hover {
+                opacity:1;
+                background-color: tint($lightBluishGrey, 20%);
+              }
+
+              &.ui-state-active {
+                border: 0px;
+                @include active;
+                opacity:1;
+              }
+            }
+
+            a{
+              display: block;
+              padding: 15px 25px;
+              font-size: 15px;
+              line-height: 16px;
+              text-align: center;
+              color: #3c3c3c;
+              text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+            }
+          }
+
+          .new-component-template {
+
+            a {
+              background: #fff;
+              border: 0px;
+              color: #3c3c3c;
+              @include transition (none);
+
+              &:hover {
+                background: tint($green,30%); 
+                color: #fff;        
+                @include transition(background-color .15s);
+              }
+            }
+
+            li {
+                border:none;
+                border-bottom: 1px dashed $lightGrey;
+                color: #fff;      
+            }
+
+            li:first-child {
+              a {
+                border-top: 0px;
+              }
+            }
+
+            li:nth-child(2) {
+              a {
+                border-radius: 0px;
+              }
+            }
+
+            a {
+              @include clearfix();
+              display: block;
+              padding: 7px 20px;
+              border-bottom: none;
+              font-weight: 500;
+
+              .name {
+                float: left;
+
+                .ss-icon {
+                  @include transition(opacity .15s);
+                  display: inline-block;
+                  top: 1px;
+                  margin-right: 5px;
+                  opacity: 0.5;
+                  width: 17;
+                  height: 21px;
+                  vertical-align: middle;
+                }
+              }
+
+              .editor-indicator {
+                @include transition(opacity .15s);
+                float: right;
+                position: relative;
+                top: 3px;
+                font-size: 12px;
+                opacity: 0.3;
+              }
+
+              .ss-icon, .editor-indicator {
+                display: none;
+              }
+
+              &:hover {
+                color: #fff;
+
+                .ss-icon {
+                  opacity: 1.0;
+                }
+
+                .editor-indicator {
+                  opacity: 1.0;
+                }
+              }
+            }
+
+            // specific editor types 
+            .empty {
+
+              a {
+                line-height: 1.4;
+                font-weight: 400;
+                background: #fff;
+                color: #3c3c3c;
+
+
+                &:hover {
+                background: tint($green,30%); 
+                color: #fff;
+              }
+              }
+            }
+          }
+
+          .new-component {          
+            text-align: center;
+
+            h5 {
+              color: $darkGreen;
+            }
+            
+          }
+        }
+      }
+    }
+
+    .component {
+      border: 1px solid $lightBluishGrey2;
+      border-radius: 3px;
+      background: #fff;
+      @include transition(none);
+
+      &:hover {
+        border-color: #6696d7;
+
+        .drag-handle {
+          background-color: $blue;
+          border-color: $blue;
+        }
+      }
+
+      &.editing {
+        border: 1px solid $lightBluishGrey2;
+        z-index: auto;
+        
+        .drag-handle,
+        .component-actions {
+          display: none;
+        }
+      }
+
+      &.component-placeholder {
+        border-color: #6696d7;
+      }
+
+      .drag-handle {
+        position: absolute;
+        display: block;
+        top: -1px;
+        right: -16px;
+        z-index: 10;
+        width: 15px;
+        height: 100%;
+        border-radius: 0 3px 3px 0;
+        border: 1px solid $lightBluishGrey2;
+        background: url(../img/white-drag-handles.png) center no-repeat $lightBluishGrey2;
+        cursor: move;
+        @include transition(none);
+      }
+    }
+
+    .xmodule_display {
+      padding: 40px 20px 20px;
+      overflow-x: auto;
+
+      h1 {
+        float: none;
+        margin-left: 0;
+      }
+    }
+
+    .wrapper-component-editor {
+      z-index: 9999;
+      position: relative;
+      background: $lightBluishGrey2;
+    }
+
+    .component-editor {
+      @include edit-box;
+      @include box-shadow(none);
+      display: none;
+      padding: 20px;
+      border-radius: 2px 2px 0 0;
+
+      .metadata_edit {
+        margin-bottom: 20px;
+        font-size: 13px;
+
+        li {
+          margin-bottom: 10px;
+        }
+
+        label {
+          display: inline-block;
+          margin-right: 10px;  
+        }
+      }
+
+      h3 {
+        margin-bottom: 10px;
+        font-size: 18px;
+        font-weight: 700;
+      }
+
+      h5 {
+        margin-bottom: 8px;
+        color: #fff;
+        font-weight: 700;
+      }
+
+      .save-button {
+        margin-top: 10px;
+        margin: 15px 8px 0 0;
+      }
+    }
+  }
+
+  .unit-settings {
+    .window-contents {
+      padding: 10px 20px;
+    }
+
+    .unit-actions {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    .published-alert {
+      display: none;
+      padding: 10px;
+      border: 1px solid #edbd3c;
+      border-radius: 3px;
+      background: #fbf6e1;
+      font-size: 14px;
+      line-height: 1.4;
+
+      div {
+        margin-top: 15px;
+      }
+    }
+
+    input[type="radio"] {
+        margin-right: 7px;
+    }
+
+    .status {
+      font-size: 12px;
+
+      strong {
+        font-weight: 700;
+      }
+    }
+
+    .preview-button, .view-button {
+      @include white-button;
+      margin-bottom: 10px;
+    }
+
+    .publish-button {
+      @include orange-button;
+    }
+
+    .delete-button {
+      @include blue-button;
+    }
+
+    .delete-draft {
+      display: inline-block;
+    }
+
+    .delete-button,
+    .preview-button,
+    .publish-button,
+    .view-button {
+      font-size: 11px;
+      margin-top: 10px;
+      padding: 6px 15px 8px;
+    }
+  }
+
+  .unit-history {
+    &.collapsed {
+      h4 {
+        border-bottom: none;
+        border-radius: 3px;
+      }
+
+      .window-contents {
+        display: none;  
+      }
+    }
+
+    ol {
+      border: 1px solid #ced2db;
+
+      li {
+        display: block;
+        padding: 6px 8px 8px 10px;
+        background: #edf1f5;
+        font-size: 12px;
+
+        &:hover {
+          background: #fffcf1;
+
+          .item-actions {
+            display: block;
+          }
+        }
+
+        &.checked {
+          background: #d1dae3;
+        }
+
+        .item-actions {
+          display: none;
+        }
+
+        input[type="radio"] {
+          margin-right: 7px;
+        }
+      }
+    }
+  }
+
+  .unit-location {
+    .url {
+      width: 100%;
+      margin-bottom: 10px;
+      @include box-shadow(none);
+    }
+
+    .draft-tag,
+    .hidden-tag,
+    .private-tag,
+    .has-new-draft-tag {
+      font-size: 8px;
+    }
+
+    .window-contents > ol {
+      @include tree-view;
+
+      .section-item {
+        display: inline-block;
+        width: 100%;
+        font-size: 11px;
+        padding: 2px 8px 4px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        @include box-sizing(border-box);
+      }
+
+      ol {
+        .section-item {
+          padding-left: 20px;
+        }
+
+        .new-unit-item {
+          margin-left: 20px;
+        }
+      }
+
+      ol ol {
+        .section-item {
+          padding-left: 34px;
+        }
+
+        .new-unit-item {
+          margin: 0 0 10px 41px;
+        }
+      }
+    }
+  }
+
+  .edit-state-draft {
+    .visibility,
+
+    .edit-draft-message,
+    .view-button {
+      display: none;
+    }
+
+    .published-alert {
+      display: block;
+    }
+  }
+
+  .edit-state-public {
+    .delete-draft,
+    .component-actions,
+    .new-component-item,
+    .editing-draft-alert,
+    .publish-draft-message,
+    .preview-button {
+      display: none;
+    }
+
+    .published-alert {
+      display: block;
+    }
+
+    .drag-handle {
+      display: none !important;
+    }
+  }
+
+  .edit-state-private {
+    .delete-draft,
+    .publish-draft,
+    .editing-draft-alert,
+    .create-draft,
+    .view-button {
+      display: none;
+    }
+  }
+}
+
+// editing units from courseware
+body.unit {
+
+  .component {
+    padding-top: 30px;
+
+    .component-actions {
+      @include box-sizing(border-box);
+      position: absolute;
+      width: 100%;
+      padding: 15px;
+      top: 0;
+      left: 0;
+      border-bottom: 1px solid $lightBluishGrey2;
+      background: $lightGrey;
+    }
+
+    &.editing {
+      padding-top: 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/cms/static/sass/_course-info.scss b/cms/static/sass/views/_updates.scss
similarity index 97%
rename from cms/static/sass/_course-info.scss
rename to cms/static/sass/views/_updates.scss
index 5a2a5a9432..8d92c9d860 100644
--- a/cms/static/sass/_course-info.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -1,4 +1,8 @@
-.course-info {
+// studio - views - course updates
+// ====================
+
+body.course.updates {
+	
 	h2 {
 		margin-bottom: 24px;
 		font-size: 22px;
diff --git a/cms/static/sass/_users.scss b/cms/static/sass/views/_users.scss
similarity index 94%
rename from cms/static/sass/_users.scss
rename to cms/static/sass/views/_users.scss
index e107bdbb6d..ecaa319707 100644
--- a/cms/static/sass/_users.scss
+++ b/cms/static/sass/views/_users.scss
@@ -1,4 +1,8 @@
-.users {
+// studio - views - course users
+// ====================
+
+body.course.users {
+
   .new-user-form {
     display: none;
     padding: 15px 20px;
diff --git a/cms/urls.py b/cms/urls.py
index eab66d351b..a9c38765e5 100644
--- a/cms/urls.py
+++ b/cms/urls.py
@@ -1,5 +1,6 @@
 from django.conf import settings
 from django.conf.urls import patterns, include, url
+from . import one_time_startup
 
 # Uncomment the next two lines to enable the admin:
 # from django.contrib import admin
@@ -42,7 +43,7 @@ urlpatterns = ('',
     url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/course/(?P<name>[^/]+)/remove_user$',
         'contentstore.views.remove_user', name='remove_user'),
     url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/info/(?P<name>[^/]+)$', 'contentstore.views.course_info', name='course_info'),
-    url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/course_info/updates/(?P<provided_id>.*)$', 'contentstore.views.course_info_updates', name='course_info'),
+    url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/course_info/updates/(?P<provided_id>.*)$', 'contentstore.views.course_info_updates', name='course_info_json'),
     url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/settings-details/(?P<name>[^/]+)$', 'contentstore.views.get_course_settings', name='settings_details'),
     url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/settings-grading/(?P<name>[^/]+)$', 'contentstore.views.course_config_graders_page', name='settings_grading'),
     url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/settings-details/(?P<name>[^/]+)/section/(?P<section>[^/]+).*$', 'contentstore.views.course_settings_updates', name='course_settings'),
@@ -102,12 +103,12 @@ urlpatterns += (
     )
 
 if settings.ENABLE_JASMINE:
-    ## Jasmine
+    # # Jasmine
     urlpatterns = urlpatterns + (url(r'^_jasmine/', include('django_jasmine.urls')),)
 
 urlpatterns = patterns(*urlpatterns)
 
-#Custom error pages
+# Custom error pages
 handler404 = 'contentstore.views.render_404'
 handler500 = 'contentstore.views.render_500'
 
diff --git a/common/lib/xmodule/xmodule/modulestore/xml_importer.py b/common/lib/xmodule/xmodule/modulestore/xml_importer.py
index 89ec1116ae..6a4ce5131b 100644
--- a/common/lib/xmodule/xmodule/modulestore/xml_importer.py
+++ b/common/lib/xmodule/xmodule/modulestore/xml_importer.py
@@ -4,6 +4,8 @@ import mimetypes
 from lxml.html import rewrite_links as lxml_rewrite_links
 from path import path
 
+from xblock.core import Scope
+
 from .xml import XMLModuleStore
 from .exceptions import DuplicateItemError
 from xmodule.modulestore import Location
@@ -273,8 +275,18 @@ def import_from_xml(store, data_dir, course_dirs=None,
                 if verbose:
                     log.debug('importing module location {0}'.format(module.location))
 
-                if hasattr(module, 'data'):
-                    module_data = module.data
+                content = {}
+                for field in module.fields:
+                    if field.scope != Scope.content:
+                        continue
+                    try:
+                        content[field.name] = module._model_data[field.name]
+                    except KeyError:
+                        # Ignore any missing keys in _model_data
+                        pass
+     
+                if 'data' in content:
+                    module_data = content['data']
 
                     # cdodge: now go through any link references to '/static/' and make sure we've imported
                     # it as a StaticContent asset
@@ -298,7 +310,7 @@ def import_from_xml(store, data_dir, course_dirs=None,
                     except Exception, e:
                         logging.exception("failed to rewrite links on {0}. Continuing...".format(module.location))
 
-                    store.update_item(module.location, module_data)
+                store.update_item(module.location, content)
 
                 if hasattr(module, 'children') and module.children != []:
                     store.update_children(module.location, module.children)
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index 76d52ed930..64eaf20591 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -1,3 +1,6 @@
+// studio - utilities - mixins and extends
+// ====================
+
 // font-sizing
 @function em($pxval, $base: 16) {
   @return #{$pxval / $base}em;
@@ -64,4 +67,106 @@
   :-ms-input-placeholder {  
      color: $color; 
   }
+}
+
+// ====================
+
+// extends - visual
+.faded-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-hr-divider-medium {
+  @include background-image(linear-gradient(180deg, rgba(240,240,240, 0) 0%,
+                                                    rgba(240,240,240, 1) 50%,
+                                                    rgba(240,240,240, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-hr-divider-light {
+  @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.8) 50%,
+                                                    rgba(255,255,255, 0)));
+  height: 1px;
+  width: 100%;
+}
+
+.faded-vertical-divider {
+  @include background-image(linear-gradient(90deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1) 50%,
+                                                    rgba(200,200,200, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+.faded-vertical-divider-light {
+  @include background-image(linear-gradient(90deg, rgba(255,255,255, 0) 0%,
+                                                    rgba(255,255,255, 0.6) 50%,
+                                                    rgba(255,255,255, 0)));
+  height: 100%;
+  width: 1px;
+}
+
+.vertical-divider {
+  @extend .faded-vertical-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-vertical-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    left: 1px;
+  }
+}
+
+.horizontal-divider {
+  border: none;
+  @extend .faded-hr-divider;
+  position: relative;
+
+  &::after {
+    @extend .faded-hr-divider-light;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 1px;
+  }
+}
+
+.fade-right-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+                                                    rgba(200,200,200, 1)));
+  border: none;
+}
+
+.fade-left-hr-divider {
+  @include background-image(linear-gradient(180deg, rgba(200,200,200, 1) 0%,
+                                                    rgba(200,200,200, 0)));
+  border: none;
+}
+
+// extends - ui
+.window {
+  @include clearfix();
+  @include border-radius(3px);
+  @include box-shadow(0 1px 1px $shadow-l1);
+  margin-bottom: $baseline;
+  border: 1px solid $gray-l2;
+  background: $white;
+}
+
+.elem-d1 {
+  @include clearfix();
+  @include box-sizing(border-box);
+}
+
+.elem-d2 {
+  @include clearfix();
+  @include box-sizing(border-box);
 }
\ No newline at end of file
diff --git a/common/test/data/full/vertical/vertical_89.xml b/common/test/data/full/vertical/vertical_89.xml
index c2b68b6bc2..cf2dd23462 100644
--- a/common/test/data/full/vertical/vertical_89.xml
+++ b/common/test/data/full/vertical/vertical_89.xml
@@ -7,4 +7,9 @@
   <customtag tag="S1" slug="discuss_91" impl="discuss"/>
   <customtag page="70" slug="book_92" impl="book"/>
   <customtag lecnum="1" slug="slides_93" impl="slides"/>
+  <poll_question name="T1_changemind_poll_foo" display_name="Change your answer" reset="false">
+        <p>Have you changed your mind?</p>
+        <answer id="yes">Yes</answer>
+        <answer id="no">No</answer>
+  </poll_question>
 </sequential>