diff --git a/cms/static/coffee/src/views/unit.coffee b/cms/static/coffee/src/views/unit.coffee
index a250925bf9..6c06c85400 100644
--- a/cms/static/coffee/src/views/unit.coffee
+++ b/cms/static/coffee/src/views/unit.coffee
@@ -1,6 +1,7 @@
 class CMS.Views.UnitEdit extends Backbone.View
   events:
-    'click .new-component .new-component-type a': 'showComponentTemplates'
+    # 'click .new-component .new-component-type a': 'showComponentTemplates'
+    'click .new-component .new-component-type a': 'addNewComponent'
     'click .new-component .cancel-button': 'closeNewComponent'
     'click .new-component-templates .new-component-template a': 'saveNewComponent'
     'click .new-component-templates .cancel-button': 'closeNewComponent'
@@ -79,6 +80,42 @@ class CMS.Views.UnitEdit extends Backbone.View
     @$newComponentItem.find('.rendered-component').remove()
     @$newComponentItem.css('height', @$newComponentButton.outerHeight())
 
+  addNewComponent: (event) =>
+    event.preventDefault()
+
+    @$componentItem = $('<li>').addClass('editing')
+    $modalCover.show()
+    $modalCover.bind('click', @closeEditor)
+    type = $(event.currentTarget).data('type')
+
+    switch type
+      when 'video'
+        @$editor = $($('#video-editor').html())
+        $preview = $($('#video-preview').html())
+      when 'problem'
+        @$editor = $($('#problem-editor').html())
+        $preview = $($('#problem-preview').html())
+        initProblemEditors(@$editor, $preview)
+
+    @$editor.find('.save-button').bind('click', =>
+      @$componentItem.removeClass('editing')
+      @closeEditor()
+    )
+
+    $componentActions = $($('#component-actions').html());
+
+    @$componentItem.append(@$editor)
+    @$componentItem.append($preview)
+    @$componentItem.append($componentActions);
+    @$newComponentItem.before(@$componentItem)
+
+  closeEditor: (event) =>
+    console.log('close')
+    $modalCover.hide()
+    $modalCover.unbind('click', @closeEditor)
+    @$editor.remove()
+    @$componentItem.removeClass('editing')
+
   saveNewComponent: (event) =>
     event.preventDefault()
 
diff --git a/cms/static/img/problem-editor-icons.png b/cms/static/img/problem-editor-icons.png
new file mode 100644
index 0000000000..62f078560f
Binary files /dev/null and b/cms/static/img/problem-editor-icons.png differ
diff --git a/cms/static/js/speed-editor.js b/cms/static/js/speed-editor.js
new file mode 100644
index 0000000000..7d6a37a6b2
--- /dev/null
+++ b/cms/static/js/speed-editor.js
@@ -0,0 +1,421 @@
+var $body;
+var $preview;
+var $tooltip;
+var simpleEditor;
+var xmlEditor;
+var currentEditor;
+var controlDown;
+var commandDown;
+
+
+function initProblemEditors($editor, $prev) {
+  simpleEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
+    lineWrapping: true,
+    extraKeys: {
+      'Ctrl-N': newUnit,
+      'Ctrl-H': makeHeader,          
+      'Ctrl-V': makeVideo,
+      'Ctrl-M': makeMultipleChoice,
+      'Ctrl-C': makeCheckboxes,
+      'Ctrl-S': makeStringInput,
+      'Shift-Ctrl-3': makeNumberInput,
+      'Shift-Ctrl-S': makeSelect
+    },
+    mode: null,
+    onChange: onSimpleEditorUpdate
+  });
+
+  xmlEditor = CodeMirror.fromTextArea($editor.find('.xml-box')[0], {
+    lineWrapping: true,
+    mode: 'xml',
+    lineNumbers: true
+  });
+
+  currentEditor = simpleEditor;
+
+  $(simpleEditor.getWrapperElement()).css('background', '#fff');
+  $(xmlEditor.getWrapperElement()).css({
+    'background': '#fff'
+  }).hide();
+
+  $(simpleEditor.getWrapperElement()).bind('click', setFocus);
+  $preview = $prev.find('.problem');
+
+  $body.on('click', '.editor-bar a', onEditorButton);
+  $body.on('click', '.editor-tabs a', setEditorTab);
+  $(document).bind('keyup', onKeyboard);
+}
+
+function setEditorTab(e) {
+  e.preventDefault();
+  $('.editor-tabs .current').removeClass('current');
+  $(this).addClass('current');
+  if($(this).hasClass('simple-tab')) {
+    currentEditor = simpleEditor;
+    $(simpleEditor.getWrapperElement()).show();          
+    $(xmlEditor.getWrapperElement()).hide();
+    $(simpleEditor).focus();
+  } else {
+    currentEditor = xmlEditor;
+    $(simpleEditor.getWrapperElement()).hide();
+    $(xmlEditor.getWrapperElement()).show();
+    $(xmlEditor).focus();
+  }
+  onSimpleEditorUpdate();
+}
+
+function setFocus(e) {
+  $(simpleEditor).focus();
+}
+
+function onSimpleEditorUpdate() {
+  updatePreview();
+  updateXML();
+}
+
+function updateXML() {
+  var val = simpleEditor.getValue();
+  var xml = val;
+
+  // replace headers
+  xml = xml.replace(/(^.*)\n(?=\=\=+)/g, '<h1>$1</h1>');
+  xml = xml.replace(/\=\=+/g, '');
+
+  // group multiple choice answers
+  xml = xml.replace(/(\(.?\).*\n*)+/g, function(match, p) {
+    var groupString = '<multiplechoiceresponse>\n';
+    groupString += '  <choicegroup type="MultipleChoice">\n';
+    var options = match.split('\n');
+    for(var i = 0; i < options.length; i++) {
+      if(options[i].length > 0) {
+        var value = options[i].split(/\)\s*/)[1];
+        var correct = /\(x\)/i.test(options[i]);
+        groupString += '    <choice correct="' + correct + '">' + value + '</choice>\n';
+      }
+    }          
+    groupString += '  </choicegroup>\n';
+    groupString += '</multiplechoiceresponse>\n\n';
+    return groupString;
+  });
+
+  // group check answers
+  xml = xml.replace(/(\[.?\].*\n*)+/g, function(match, p) {
+    var groupString = '<multiplechoiceresponse>\n';
+    groupString += '  <choicegroup type="MultipleChoiceChecks">\n';
+    var options = match.split('\n');
+    for(var i = 0; i < options.length; i++) {
+      if(options[i].length > 0) {
+        var value = options[i].split(/\]\s*/)[1];
+        var correct = /\[x\]/i.test(options[i]);
+        groupString += '    <choice correct="' + correct + '">' + value + '</choice>\n';
+      }
+    }          
+    groupString += '  </choicegroup>\n';
+    groupString += '</multiplechoiceresponse>\n\n';
+    return groupString;
+  });
+
+  // replace videos
+  xml = xml.replace(/\{\{video\s(.*)\}\}/g, '<video youtube="1.0:$1" />\n\n');
+
+  // replace string input
+  xml = xml.replace(/\_\_\_\[(.+)\]/g, '<stringresponse answer="$1" type="ci">\n  <textline size="20"/>\n</stringresponse>\n\n');
+
+  // replace numerical input
+  xml = xml.replace(/\#\#\#\[(.+)\]/g, function(match, p) {
+    var solution = extractNumericalSolution(p);
+    var string = '<numericalresponse answer="' + solution + '">\n';
+
+    var params = extractNumericalSettings(p);
+
+    if(params) {
+      for(var i = 0; i < params.length; i++) {
+        var splitProp = params[i].split(/:\s*/);
+        string += '  <responseparam type="' + splitProp[0] + '" default="' + splitProp[1] + '" />\n';
+      }
+    }
+                        
+    string += '  <textline />\n';
+    string += '</numericalresponse>\n\n';
+    return string;
+  });
+
+  // replace selects
+  xml = xml.replace(/\[\[(.+)\]\]/g, function(match, p) {
+    var selectString = '\n<optionresponse>\n';
+    selectString += '  <optioninput options="(';
+    var options = p.split(/\,\s*/g);
+    for(var i = 0; i < options.length; i++) {            
+      selectString += "'" + options[i].replace(/\((.*)\)/g, '$1') + "'" + (i < options.length -1 ? ',' : '');
+    }
+    selectString += ')" correct="';
+    selectString += p.split(/\(/)[1].split(/\)/)[0];
+    selectString += '"></optioninput>\n';
+    selectString += '</optionresponse>\n\n';
+    return selectString;
+  });
+
+  // split scripts and wrap paragraphs
+  var splits = xml.split(/(\<\/?script.*\>)/g);
+  var scriptFlag = false;
+  for(var i = 0; i < splits.length; i++) {
+    if(/\<script/.test(splits[i])) {
+      scriptFlag = true; 
+    }
+    if(!scriptFlag) {
+      splits[i] = splits[i].replace(/(^(?!\s*\<|$).*$)/gm, '<p>$1</p>');
+    }          
+    if(/\<\/script/.test(splits[i])) {
+      scriptFlag = false;
+    }
+  }
+  xml = splits.join('');
+
+  // rid white space
+  xml = xml.replace(/\n\n\n/g, '\n');
+
+  // console.log(xml);
+
+  xmlEditor.setValue(xml);
+}
+
+function updatePreview() {
+  var val = simpleEditor.getValue();
+  var html = val;
+
+  // replace headers
+  html = html.replace(/(^.*)\n(?=\=\=+)/g, '<h1>$1</h1>');
+  html = html.replace(/\=\=+/g, '');
+
+  // group multiple choice answers
+  html = html.replace(/(\(.?\).*\n*)+/g, function(match, p) {
+    var groupString = '<form class="choicegroup">\n';
+    groupString += '  <div class="indicator_container"><span class="unanswered" id=""></span></div>';
+    groupString += '  <fieldset>\n';
+    
+    var options = match.split('\n');
+    for(var i = 0; i < options.length; i++) {
+      if(options[i].length > 0) {
+        // groupString += '  <li>' + options[i] + '</li>\n';
+        groupString += '    <label>' + options[i] + '</label>\n';
+      }
+    }
+    groupString += '  </fieldset>\n';
+    groupString += '</form>\n';
+    return groupString;
+  });
+
+  // group check answers
+  html = html.replace(/(\[.?\].*\n*)+/g, function(match, p) {
+    var groupString = '<ul class="check-choice-group">\n';
+    var options = match.split('\n');
+    for(var i = 0; i < options.length; i++) {
+      if(options[i].length > 0) {
+        groupString += '  <li>' + options[i] + '</li>\n';  
+      }
+    }          
+    groupString += '</ul>\n';
+    return groupString;
+  });
+
+  // wrap the paragraphs
+  html = html.replace(/(^(?!\<\/*ul|\s*\<li|\<h1|\s*\<label|\s*$).*$)/gm, '<p>$1</p>\n');
+
+  // replace videos
+  html = html.replace(/\{\{video\s(.*)\}\}/g, function(match, p) {
+    var id = p.replace(/.*1\.0\:/g, '').replace(/\,.*/g, '');
+    var string = '<iframe width="420" height="315" src="http://www.youtube.com/embed/' + id + '" frameborder="0" allowfullscreen></iframe>';
+    return string;
+  });
+
+  // replace checkboxes
+  html = html.replace(/\[\s*\]/g, '<input type="checkbox">');
+  html = html.replace(/\[x\]/gi, '<input type="checkbox" checked>');
+
+  // replace radios
+  html = html.replace(/\(\s*\)/g, '<input type="radio" name="multiple-choice-id">');
+  html = html.replace(/\(x\)/gi, '<input type="radio" checked name="multiple-choice-id">');
+
+  // replace string input
+  html = html.replace(/\_\_\_\[(.+)\]/g, function(match, p) {
+    var string = '<input type="text" name="" id="" value="' + p + '" size="20">\n';
+    return string;
+  });
+
+  // replace numerical input
+  html = html.replace(/\#\#\#\[(.+)\]/g, '<input type="text"><small>$1</small>');
+
+  // replace selects
+  html = html.replace(/\[\[(.+)\]\]/g, function(match, p) {
+    var selectString = '<select>\n';
+    selectString += '  <option disabled selected></option>\n';
+    var options = p.split(/\,\s*/g);
+    for(var i = 0; i < options.length; i++) {
+      var isAnswer = /\(.*\)/.test(options[i]);
+      selectString += '  <option data-answer="' + (isAnswer ? 'true' : 'false') + '"">' + options[i].replace(/\((.*)\)/g, '$1') + '</option>\n'; 
+    }
+    selectString += '</select>\n';
+    return selectString;
+  });
+
+  html = html.replace(/\n\n/g, '');
+
+  // console.log(html);
+
+  $preview.html(html);
+}
+
+function extractNumericalSolution(string) {
+  var solution = string.replace(/\s*\{.*/g, '');
+  return solution;
+}
+
+function extractNumericalSettings(string) {
+  var settings = string.match(/\{.*\}/g);
+  if(settings) {
+    settings = settings[0].replace(/\{|\}/g, '');
+    settings = settings.split(/\,\s*/g);
+  }
+  return settings;
+}
+
+function onEditorButton(e) {
+  e.preventDefault();
+
+  switch($(this).attr('class')) {
+    case 'multiple-choice-button':
+      makeMultipleChoice();
+      break;
+    case 'string-button':
+      makeStringInput();
+      break;
+    case 'number-button':
+      makeNumberInput();
+      break;
+    case 'checks-button':
+      makeCheckboxes();
+      break;
+    case 'dropdown-button':
+      makeSelect();
+      break;
+  }
+}
+
+function newUnit() {
+  window.location = 'index.html';
+}
+
+function makeHeader() {
+  var selection = simpleEditor.getSelection();
+  var revisedSelection = selection + '\n';
+  for(var i = 0; i < selection.length; i++) {
+    revisedSelection += '=';
+  }
+  simpleEditor.replaceSelection(revisedSelection);
+}
+
+function makeVideo() {
+  var selection = simpleEditor.getSelection();
+  simpleEditor.replaceSelection('{{video ' + selection + '}}');
+}
+
+function makeMultipleChoice() {
+  console.log(currentEditor);
+  var selection = simpleEditor.getSelection();
+  if(selection.length > 0) {
+    var cleanSelection = selection.replace(/\n\n/g, '\n');
+    var lines = cleanSelection.split('\n');
+    var revisedLines = '';
+    for(var i = 0; i < lines.length; i++) {
+      revisedLines += '(';
+      if(/x\s/i.test(lines[i])) {
+        revisedLines += 'x';
+        lines[i] = lines[i].replace(/x\s/i, '');
+      } else {
+        revisedLines += ' ';
+      }
+      revisedLines += ') ' + lines[i] + '\n';
+    }
+    simpleEditor.replaceSelection(revisedLines);
+  } else {
+    var template = '( ) incorrect\n';
+    template += '( ) incorrect\n';
+    template += '(x) correct\n';
+    simpleEditor.replaceSelection(template);
+    setFocus();
+  }
+}
+
+function makeStringInput() {
+  var selection = simpleEditor.getSelection();
+  if(selection.length > 0) {
+    var revisedSelection = '___[' + selection + ']';
+  simpleEditor.replaceSelection(revisedSelection);
+  } else {
+    var template = '___[answer]\n';
+    simpleEditor.replaceSelection(template);
+    setFocus();
+  }
+}
+
+function makeNumberInput() {
+  var selection = simpleEditor.getSelection();
+  if(selection.length > 0) {
+    var revisedSelection = '###[' + selection + ']';
+    simpleEditor.replaceSelection(revisedSelection);
+  } else {
+    var template = '###[answer +-tolerance]\n';
+    simpleEditor.replaceSelection(template);
+    setFocus();
+  }
+}
+
+function makeCheckboxes() {
+  var selection = simpleEditor.getSelection();
+  if(selection.length > 0) {
+    var cleanSelection = selection.replace(/\n\n/g, '\n');
+    var lines = cleanSelection.split('\n');
+    var revisedLines = '';
+    for(var i = 0; i < lines.length; i++) {
+      revisedLines += '[';
+      if(/x\s/i.test(lines[i])) {
+        revisedLines += 'x';
+        lines[i] = lines[i].replace(/x\s/i, '');
+      } else {
+        revisedLines += ' ';
+      }
+      revisedLines += '] ' + lines[i] + '\n';
+    }
+    simpleEditor.replaceSelection(revisedLines);
+  } else {
+    var template = '[x] correct\n';
+    template += '[ ] incorrect\n';
+    template += '[x] correct\n';
+    simpleEditor.replaceSelection(template);
+    setFocus();
+  }
+}
+
+function makeSelect() {
+  var selection = simpleEditor.getSelection();
+  if(selection.length > 0) {
+    var revisedSelection = '[[' + selection + ']]';
+    simpleEditor.replaceSelection(revisedSelection);
+  } else {
+    var template = '[[incorrect, (correct), incorrect]]\n';
+    simpleEditor.replaceSelection(template);
+    setFocus();
+  }
+}
+
+function onKeyboard(e) {
+  switch(e.keyCode) {
+    // n
+    case 78:
+      if(e.ctrlKey) {
+        e.preventDefault();
+        newUnit();
+      }
+      break;
+  }     
+}
\ No newline at end of file
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index c1875edb06..7a62a3c2bd 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -337,4 +337,30 @@ body.show-wip {
         content: '';
         @extend .spinner-icon;
     }
+}
+
+.tooltip {
+    display: block;
+    position: absolute;
+    z-index: 9999999;
+    padding: 4px 8px;
+    background: rgba(0, 0, 0, .9);
+    border-radius: 3px;
+    pointer-events: none;
+    font-size: 11px;
+    color: #fff;
+    text-align: center;
+
+    &:before {
+        content: '▾';
+        position: absolute;
+        bottom: -10px;
+        left: 50%;
+        width: 20px;
+        height: 10px;
+        margin-left: -10px;        
+        font-size: 16px;
+        line-height: 0;
+        color: rgba(0, 0, 0, .9);
+    }
 }
\ No newline at end of file
diff --git a/cms/static/sass/_graphics.scss b/cms/static/sass/_graphics.scss
index c6d775ed12..22f0870d6a 100644
--- a/cms/static/sass/_graphics.scss
+++ b/cms/static/sass/_graphics.scss
@@ -277,3 +277,41 @@
   vertical-align: middle;
   background: url(../img/spinner-in-field.gif) no-repeat;
 }
+
+.problem-editor-icon {
+	display: inline-block;
+  width: 26px;
+  height: 21px;
+  vertical-align: middle;
+  background: url(../img/problem-editor-icons.png) no-repeat;
+}
+
+.problem-editor-icon.multiple-choice {
+	background-position: 0 0;
+}
+
+.problem-editor-icon.checks {
+	background-position: -56px 0;
+}
+
+.problem-editor-icon.string {
+	width: 28px;
+	background-position: -111px 0;
+}
+
+.problem-editor-icon.number {
+	width: 24px;
+	background-position: -168px 0;
+}
+
+.problem-editor-icon.dropdown {
+	width: 17px;
+	background-position: -220px 0;
+}
+
+
+
+
+
+
+
diff --git a/cms/static/sass/_unit.scss b/cms/static/sass/_unit.scss
index 220bec507d..c95b3548e2 100644
--- a/cms/static/sass/_unit.scss
+++ b/cms/static/sass/_unit.scss
@@ -73,7 +73,11 @@
       }
 
       &.editing {
-        border-color: #6696d7;
+        border-color: #3c3c3c;
+        box-shadow: 0 0 30px rgba(0, 0, 0, .5);
+        position: relative;
+        z-index: 99999;
+        @include transition(all);
 
         .drag-handle,
         .component-actions {
@@ -135,30 +139,16 @@
       }
 
       &.new-component-item {
-        padding: 0;
-        border: 1px solid #8891a1;
+        border: none;
         border-radius: 3px;
-        @include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
-        background-color: #d1dae3;
-        @include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
-        @include transition(background-color .15s, border-color .15s);
-
-        &.adding {
-          background-color: $blue;
-          border-color: #437fbf;
-        }
-
-        .new-component-button {
-          display: block;
-          padding: 20px;
-          text-align: center;
-          color: #6d788b;
-        }
+        background: $lightGrey;
+        @include clearfix;
 
         h5 {
-          margin-bottom: 8px;
-          color: #fff;
+          margin-bottom: 22px;
+          color: $blue;
           font-weight: 700;
+          text-align: center;
         }
 
         .rendered-component {
@@ -168,25 +158,32 @@
         }
 
         .new-component-type, .new-component-template {
+          text-align: center;
           @include clearfix;
 
+          li {
+            display: inline;
+          }
+
           a {
             position: relative;
-            float: left;
+            display: inline-block;
             width: 100px;
             height: 100px;
             margin-right: 10px;
             margin-bottom: 10px;
             border-radius: 8px;
+            border: 1px solid #437fbf;
+            background-color: $blue;
             font-size: 13px;
             line-height: 14px;
             color: #fff;
             text-align: center;
-            @include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset);
+            @include box-shadow(0 1px 1px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .4) inset);
             @include transition(background-color .15s);
 
             &:hover {
-              background-color: rgba(255, 255, 255, .2);
+              @include box-shadow(0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset, 0 0 20px rgba(255, 255, 255, .3) inset);
             }
 
             .name {
@@ -208,9 +205,6 @@
 
         .new-component,
         .new-component-templates {
-          display: none;
-          position: absolute;
-          width: 100%;
           padding: 20px;
           @include clearfix;
 
@@ -219,6 +213,10 @@
             border-color: #30649c;
           }
         }
+
+        .new-component-templates {
+          display: none;
+        }
       }
     }
   }
@@ -227,6 +225,111 @@
     padding: 10px 20px;
   }
 
+  .editor {
+    background: $blue;
+    padding: 20px;
+    border-radius: 3px 3px 0 0;
+
+    label {
+      display: inline-block;
+      width: 130px;
+      color: #fff;
+    }
+
+    input {
+      border-color: #3c3c3c;
+    }
+
+    .row {
+      border-bottom: none;
+      padding-bottom: 0;
+      margin-bottom: 15px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .video-id-field,
+    .transcript-field {
+      width: 300px;
+    }
+
+    .browse-button {
+      @include blue-button;
+      border-color: #3c3c3c;
+      font-size: 12px;
+    }
+
+    .save-button {
+      @include orange-button;
+      margin: 10px 8px 0 0;
+      border-color: #3c3c3c;
+    }
+
+    .cancel-button {
+      @include white-button;
+      border-color: #3c3c3c;
+    }
+
+    .editor-bar {
+      position: relative;
+      @include linear-gradient(top, #d4dee8, #c9d5e2);
+      padding: 5px;
+      border: 1px solid #3c3c3c;
+      border-radius: 3px 3px 0 0;
+      border-bottom-color: #a5aaaf;
+      @include clearfix;
+
+      a {
+        display: block;
+        float: left;
+        padding: 3px 10px 7px;
+        margin-left: 7px;
+        border-radius: 2px;
+
+        &:hover {
+          background: rgba(255, 255, 255, .5);
+        }
+      }
+
+      .editor-tabs {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+
+        li {
+          float: left;
+        }
+
+        a {
+          height: 24px;
+          padding: 7px 20px 3px;
+          border: 1px solid #a5aaaf;          
+          border-radius: 3px 3px 0 0;
+          @include linear-gradient(top, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, .06));
+          background-color: #e5ecf3;
+          font-size: 13px;
+          color: #3c3c3c;
+          box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
+
+          &.current {
+            background: #fff;
+            border-bottom-color: #fff;
+          }
+        }
+      }
+    }
+
+    .CodeMirror {
+      font-size: 13px;
+      border: 1px solid #3c3c3c;
+      border-top: none;
+      background: #fff;
+      color: #3c3c3c;
+    }
+  }
+
   .component-editor {
     @include edit-box;
     display: none;
diff --git a/cms/templates/unit.html b/cms/templates/unit.html
index a94557b760..b126a3e1f4 100644
--- a/cms/templates/unit.html
+++ b/cms/templates/unit.html
@@ -13,6 +13,115 @@
       })
     });
   </script>
+
+  <script src="/static/js/speed-editor.js"></script>
+
+  <script type="text/template" id="component-actions">
+    <div class="component-actions">
+      <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
+      <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>  
+    </div>
+    <a href="#" class="drag-handle"></a>
+  </script>
+
+  <script type="text/template" id="problem-editor">
+    <div class="problem-editor editor">
+      <div class="row">
+        <div class="editor-bar">
+          <ul class="format-buttons">
+            <li><a href="#" class="multiple-choice-button" data-tooltip="Multiple Choice"><span class="problem-editor-icon multiple-choice"></span></a></li>
+            <li><a href="#" class="checks-button" data-tooltip="Check Multiple"><span class="problem-editor-icon checks"></span></a></li>
+            <li><a href="#" class="string-button" data-tooltip="String Response"><span class="problem-editor-icon string"></span></a></li>
+            <li><a href="#" class="number-button" data-tooltip="Numerical Response"><span class="problem-editor-icon number"></span></a></li>
+            <li><a href="#" class="dropdown-button" data-tooltip="Dropdown"><span class="problem-editor-icon dropdown"></span></a></li>
+          </ul>
+          <ul class="editor-tabs">
+            <li><a href="#" class="simple-tab current">Simple</a></li>
+            <li><a href="#" class="xml-tab">XML</a></li>
+          </ul>
+        </div>
+        <textarea class="edit-box"></textarea>
+        <textarea class="xml-box"></textarea>
+      </div>
+      <div class="row">
+        <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
+      </div>
+    </div>    
+  </script>
+
+  <script type="text/template" id="problem-preview">
+    <section class="xmodule_display xmodule_CapaModule" data-type="Problem">
+      <section id="problem_i4x-Giannattasio-313-problem-9e62f3fb1fa14ba6a671b3de73c02eab" class="problems-wrapper" data-problem-id="i4x://Giannattasio/313/problem/9e62f3fb1fa14ba6a671b3de73c02eab" data-url="/preview/modx/0/i4x://Giannattasio/313/problem/9e62f3fb1fa14ba6a671b3de73c02eab">
+
+        <section class="problem"></section>
+
+        <section class="action">
+          <input type="hidden" name="problem_id" value="Option Response">
+          <input class="check Check" type="button" value="Check">
+          <input class="show" type="button" value="Show Answer">
+        </section>
+      </section>
+    </section>
+  </script>
+
+  <script type="text/template" id="video-editor">
+    <div class="video-editor editor">
+      <div class="row">
+        <label>YouTube ID(s):</label>
+        <input type="text" value="0.75:JMD_ifUUfsU,1.0:OEoXaMPEzfM,1.25:AKqURZnYqpk,1.50:DYpADpL7jAY" class="video-id-field">
+        <a href="#" class="browse-button">Browse…</a>
+      </div>
+      <div class="row">
+        <label>Transcript:</label>
+        <input type="text" class="transcript-field">
+        <a href="#" class="browse-button">Browse…</a>
+      </div>
+      <div class="row">
+        <a href="#" class="save-button">Save</a><a href="#" class="cancel-button">Cancel</a>
+      </div>
+    </div>    
+  </script>
+
+  <script type="text/template" id="video-preview">
+    <div class="video-preview">
+      <section class="xmodule_display xmodule_VideoModule" data-type="Video">
+        <div id="video_i4x-Giannattasio-313-video-39532ac1a90742bbbd70148122a8fcfa" class="video video-load-complete" data-streams="0.75:JMD_ifUUfsU,1.0:OEoXaMPEzfM,1.25:AKqURZnYqpk,1.50:DYpADpL7jAY" data-caption-data-dir="0458bf5495cf4072adde09918f6a9941" data-show-captions="true">
+          <div class="tc-wrapper">
+            <article class="video-wrapper">
+              <section class="video-player">
+                <iframe frameborder="0" allowfullscreen="" id="i4x-Giannattasio-313-video-39532ac1a90742bbbd70148122a8fcfa" title="YouTube video player" height="390" width="640" src="http://www.youtube.com/embed/OEoXaMPEzfM?controls=0&amp;wmode=transparent&amp;rel=0&amp;showinfo=0&amp;enablejsapi=1&amp;modestbranding=1&amp;origin=http%3A%2F%2Flocalhost%3A8001"></iframe>
+              </section>
+
+              <section class="video-controls"><div class="slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="width: 2.586206896551724%; "></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 2.586206896551724%; "></a></div>
+        <div>
+          <ul class="vcr">
+            <li><a class="video_control play" href="#">Play</a></li>
+            <li>
+              <div class="vidtime">0:02 / 1:56</div>
+            </li>
+          </ul>
+          <div class="secondary-controls"><div class="speeds">
+          <a href="#">
+            <h3>Speed</h3>
+            <p class="active">1.0x</p>
+          </a>
+          <ol class="video_speeds"><li data-speed="1.50"><a href="#">1.50x</a></li><li data-speed="1.25"><a href="#">1.25x</a></li><li data-speed="1.0" class="active"><a href="#">1.0x</a></li><li data-speed="0.75"><a href="#">0.75x</a></li></ol>
+        </div><div class="volume">
+          <a href="#"></a>
+          <div class="volume-slider-container">
+            <div class="volume-slider ui-slider ui-slider-vertical ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-slider-range-min" style="height: 100%; "></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="bottom: 100%; "></a></div>
+          </div>
+        </div>
+            <a href="#" class="add-fullscreen" oldtitle="Fill browser">Fill Browser</a>
+          <a href="#" class="quality_control" title="HD">HD</a><a href="#" class="hide-subtitles" oldtitle="Turn off captions">Captions</a></div>
+        </div></section>
+            </article><ol class="subtitles" style="max-height: 342px; "></ol>
+          </div>
+        </div>
+
+        </section>
+      </div>
+  </script>
 </%block>
 <%block name="content">
   <div class="main-wrapper edit-state-${unit_state}" data-id="${unit_location}">
@@ -32,12 +141,9 @@
             % for id in components:
             <li class="component" data-id="${id}"/>
             % endfor
-            <li class="new-component-item">
-              <a href="#" class="new-component-button">
-                <span class="plus-icon"></span>New Component
-              </a>
+            <li class="new-component-item adding">              
               <div class="new-component">
-                <h5>Select Component Type</h5>
+                <h5>Add New Component</h5>
                 <ul class="new-component-type">
                   % for type in sorted(component_templates.keys()):
                   <li>
@@ -48,22 +154,7 @@
                   </li>
                   % endfor
                 </ul>
-                <a href="#" class="cancel-button">Cancel</a>
-              </div>
-              % for type, templates in sorted(component_templates.items()):
-              <div class="new-component-templates new-component-${type}">
-                <ul class="new-component-template">
-                  % for name, location in templates:
-                  <li>
-                    <a href="#" data-location="${location}">
-                      <span class="name">${name}</span>
-                    </a>
-                  </li>
-                  % endfor
-                </ul>
-                <a href="#" class="cancel-button">Cancel</a>
-              </div>
-              % endfor
+              </div>              
             </li>
           </ol>
         </article>