diff --git a/cms/static/js/speed-editor.js b/cms/static/js/speed-editor.js
index f310e86cac..4c3df85f13 100644
--- a/cms/static/js/speed-editor.js
+++ b/cms/static/js/speed-editor.js
@@ -21,7 +21,8 @@ function initProblemEditors($editor, $prev) {
   $currentEditor = $editor;
   simpleEditor = CodeMirror.fromTextArea($editor.find('.edit-box')[0], {
     lineWrapping: true,
-    extraKeys: {
+//    TODO: I left out the extra keys for now.
+      extraKeys: {
       'Ctrl-N': newUnit,
       'Ctrl-H': makeHeader,
       'Ctrl-V': makeVideo,
diff --git a/cms/templates/widgets/problem-edit.html b/cms/templates/widgets/problem-edit.html
index 99442c0179..f6baae4d2d 100644
--- a/cms/templates/widgets/problem-edit.html
+++ b/cms/templates/widgets/problem-edit.html
@@ -21,7 +21,7 @@
                 <li><a href="#" class="cheatsheet-toggle" data-tooltip="Toggle Cheatsheet">?</a></li>
             </ul>
         </div>
-        <textarea class="edit-box">${markdown}</textarea>
+        <textarea class="markdown-box">${markdown}</textarea>
         %endif
         <textarea class="xml-box" rows="8" cols="40">${data | h}</textarea>
     </div>
diff --git a/common/lib/xmodule/xmodule/capa_module.py b/common/lib/xmodule/xmodule/capa_module.py
index f6a6d63d91..3abe385d42 100644
--- a/common/lib/xmodule/xmodule/capa_module.py
+++ b/common/lib/xmodule/xmodule/capa_module.py
@@ -651,8 +651,9 @@ class CapaDescriptor(RawDescriptor):
     has_score = True
     template_dir_name = 'problem'
     mako_template = "widgets/problem-edit.html"
-    js = {'coffee': [resource_string(__name__, 'js/src/problem/markdown.coffee')]}
+    js = {'coffee': [resource_string(__name__, 'js/src/problem/edit.coffee')]}
     js_module_name = "MarkdownEditingDescriptor"
+    css = {'scss': [resource_string(__name__, 'css/problem/edit.scss')]}
 
     # Capa modules have some additional metadata:
     # TODO (vshnayder): do problems have any other metadata?  Do they
diff --git a/common/lib/xmodule/xmodule/css/problem/edit.scss b/common/lib/xmodule/xmodule/css/problem/edit.scss
new file mode 100644
index 0000000000..5042731220
--- /dev/null
+++ b/common/lib/xmodule/xmodule/css/problem/edit.scss
@@ -0,0 +1,64 @@
+.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;
+    }
+
+    .tab {
+      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;
+      }
+    }
+
+    .cheatsheet-toggle {
+      width: 21px;
+      height: 21px;
+      padding: 0;
+      margin: 3px 5px 0 16px;
+      border-radius: 22px;
+      border: 1px solid #a5aaaf;
+      background: #e5ecf3;
+      font-size: 13px;
+      font-weight: 700;
+      color: #565d64;
+      text-align: center;
+    }
+  }
+}
+
+
diff --git a/common/lib/xmodule/xmodule/js/src/problem/edit.coffee b/common/lib/xmodule/xmodule/js/src/problem/edit.coffee
new file mode 100644
index 0000000000..ce2871fae0
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/problem/edit.coffee
@@ -0,0 +1,20 @@
+class @MarkdownEditingDescriptor extends XModule.Descriptor
+  constructor: (@element) ->
+    @xml_editor = CodeMirror.fromTextArea($(".xml-box", @element)[0], {
+    mode: "xml"
+    lineNumbers: true
+    lineWrapping: true
+    })
+
+    if $(".markdown-box", @element).length != 0
+      @markdown_editor = CodeMirror.fromTextArea($(".markdown-box", @element)[0], {
+      lineWrapping: true
+      mode: null
+      onChange: @onMarkdownEditorUpdate
+      })
+
+  onMarkdownEditorUpdate: ->
+    console.log('update')
+
+  save: ->
+    data: @xml_editor.getValue()
diff --git a/common/lib/xmodule/xmodule/js/src/problem/markdown.coffee b/common/lib/xmodule/xmodule/js/src/problem/markdown.coffee
deleted file mode 100644
index 6b87449d83..0000000000
--- a/common/lib/xmodule/xmodule/js/src/problem/markdown.coffee
+++ /dev/null
@@ -1,10 +0,0 @@
-class @MarkdownEditingDescriptor extends XModule.Descriptor
-  constructor: (@element) ->
-    @edit_box = CodeMirror.fromTextArea($(".xml-box", @element)[0], {
-      mode: "xml"
-      lineNumbers: true
-      lineWrapping: true
-    })
-
-  save: ->
-    data: @edit_box.getValue()