diff --git a/cms/djangoapps/contentstore/views.py b/cms/djangoapps/contentstore/views.py
index 931ead4027..adcffe100e 100644
--- a/cms/djangoapps/contentstore/views.py
+++ b/cms/djangoapps/contentstore/views.py
@@ -131,7 +131,6 @@ def edit_item(request, location):
         raise Http404  # TODO (vshnayder): better error
 
     item = modulestore().get_item(location)
-    item.get_html = wrap_xmodule(item.get_html, item, "xmodule_edit.html")
 
     if settings.LMS_BASE is not None:
         lms_link = "{lms_base}/courses/{course_id}/jump_to/{location}".format(
@@ -322,8 +321,18 @@ def load_preview_module(request, preview_id, descriptor, instance_state, shared_
             error_msg=exc_info_to_str(sys.exc_info())
         ).xmodule_constructor(system)(None, None)
 
-    module.get_html = wrap_xmodule(module.get_html, module, "xmodule_display.html")
-    module.get_html = wrap_xmodule(module.get_html, module, "editable_preview.html")
+
+    module.get_html = wrap_xmodule(
+        module.get_html,
+        module,
+        "xmodule_edit.html",
+        {
+            'editor_content': descriptor.get_html(),
+            # TODO (cpennington): Make descriptors know if they have data that can be editng
+            'editable_data': descriptor.definition.get('data'),
+            'editable_class': 'editable' if descriptor.definition.get('data') else '',
+        }
+    )
     module.get_html = replace_static_urls(
         module.get_html,
         module.metadata.get('data_dir', module.location.course)
diff --git a/cms/static/js/base.js b/cms/static/js/base.js
index 5042830364..a82984c5c1 100644
--- a/cms/static/js/base.js
+++ b/cms/static/js/base.js
@@ -17,7 +17,7 @@ $(document).ready(function() {
   $('.expand-collapse-icon').bind('click', toggleSubmodules);
   $('.visibility-options').bind('change', setVisibility);
 
-  $body.delegate('.components .edit-button', 'click', editComponent);
+  $body.delegate('.xmodule_edit .edit-button', 'click', editComponent);
   $body.delegate('.component-editor .save-button, .component-editor .cancel-button', 'click', closeComponentEditor);
 
   $newComponentButton.bind('click', showNewComponentForm);
@@ -45,12 +45,12 @@ function setVisibility(e) {
 
 function editComponent(e) {
   e.preventDefault();
-  $(this).closest('li').addClass('editing').find('.component-editor').slideDown(150);
+  $(this).closest('.xmodule_edit').addClass('editing').find('.component-editor').slideDown(150);
 }
 
 function closeComponentEditor(e) {
   e.preventDefault();
-  $(this).closest('li').removeClass('editing').find('.component-editor').slideUp(150);
+  $(this).closest('.xmodule_edit').removeClass('editing').find('.component-editor').slideUp(150);
 }
 
 function showNewComponentForm(e) {
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index e2ec0b05f9..dadd427ca7 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -33,132 +33,132 @@ $error-red: rgb(253, 87, 87);
 
 // -------------------------------------
 //
-//	Universal
+//    Universal
 //
 // -------------------------------------
 
 body {
-	min-width: 980px;
-	background: #f3f4f5;
-	font-family: 'Open Sans', sans-serif;
-	font-size: 16px;
-	line-height: 1.6;
-	color: #3c3c3c;
+    min-width: 980px;
+    background: #f3f4f5;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #3c3c3c;
 }
 
 a {
-	text-decoration: none;
-	color: $blue;
-	-webkit-transition: color .15s;
+    text-decoration: none;
+    color: $blue;
+    -webkit-transition: color .15s;
 
-	&:hover {
-		color: #cb9c40;
-	}
+    &:hover {
+        color: #cb9c40;
+    }
 }
 
 h1 {
-	font-size: 28px;
-	margin: 36px 6px;
+    font-size: 28px;
+    margin: 36px 6px;
 }
 
 .main-wrapper {
-	position: relative;
-	margin: 0 40px;
+    position: relative;
+    margin: 0 40px;
 }
 
 .inner-wrapper {
-	position: relative;
-	max-width: 1280px;
-	margin: auto;
+    position: relative;
+    max-width: 1280px;
+    margin: auto;
 }
 
 .window {
-	background: #fff;
-	border: 1px solid #8891a1;
-	border-radius: 3px;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+    background: #fff;
+    border: 1px solid #8891a1;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 }
 
 .sidebar {
-	float: right;
-	width: 28%;
+    float: right;
+    width: 28%;
 }
 
 footer {
-	clear: both;
-	height: 100px;
+    clear: both;
+    height: 100px;
 }
 
 input[type="text"] {
-	padding: 6px 8px 8px;
-	box-sizing: border-box;
-	border: 1px solid #b0b6c2;
-	border-radius: 2px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)) #edf1f5;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
-	font-family: 'Open Sans', sans-serif;
-	font-size: 11px;
-	color: #3c3c3c;
-	outline: 0;
+    padding: 6px 8px 8px;
+    box-sizing: border-box;
+    border: 1px solid #b0b6c2;
+    border-radius: 2px;
+    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3)) #edf1f5;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 11px;
+    color: #3c3c3c;
+    outline: 0;
 
-	&::-webkit-input-placeholder {
-		color: #979faf;
-	}
+    &::-webkit-input-placeholder {
+        color: #979faf;
+    }
 }
 
 input.search {
-	padding: 6px 15px 8px 30px;
-	box-sizing: border-box;
-	border: 1px solid #b0b6c2;
-	border-radius: 20px;
-	background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
-	font-family: 'Open Sans', sans-serif;
-	color: #3c3c3c;
-	outline: 0;
+    padding: 6px 15px 8px 30px;
+    box-sizing: border-box;
+    border: 1px solid #b0b6c2;
+    border-radius: 20px;
+    background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
+    font-family: 'Open Sans', sans-serif;
+    color: #3c3c3c;
+    outline: 0;
 
-	&::-webkit-input-placeholder {
-		color: #979faf;
-	}
+    &::-webkit-input-placeholder {
+        color: #979faf;
+    }
 }
 
 label {
-	font-size: 12px;
+    font-size: 12px;
 }
 
 @mixin blue-button {
-	display: inline-block;
-	padding: 4px 20px 6px;
-	border: 1px solid #437fbf;
-	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) $blue;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
-	font-size: 14px;
-	font-weight: 700;
-	color: #fff;
+    display: inline-block;
+    padding: 4px 20px 6px;
+    border: 1px solid #437fbf;
+    border-radius: 3px;
+    background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) $blue;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+    font-size: 14px;
+    font-weight: 700;
+    color: #fff;
 }
 
 @mixin white-button {
-	display: inline-block;
-	padding: 4px 20px 6px;
-	border: 1px solid #8891a1;
-	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%) #dfe5eb;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
-	font-size: 14px;
-	font-weight: 700;
-	color: #8891a1;
+    display: inline-block;
+    padding: 4px 20px 6px;
+    border: 1px solid #8891a1;
+    border-radius: 3px;
+    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%) #dfe5eb;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+    font-size: 14px;
+    font-weight: 700;
+    color: #8891a1;
 }
 
 @mixin orange-button {
-	display: inline-block;
-	padding: 4px 20px 6px;
-	border: 1px solid #3c3c3c;
-	border-radius: 3px;
-	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%) #edbd3c;
-	box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
-	font-size: 14px;
-	font-weight: 700;
-	color: #3c3c3c;
+    display: inline-block;
+    padding: 4px 20px 6px;
+    border: 1px solid #3c3c3c;
+    border-radius: 3px;
+    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 60%) #edbd3c;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
+    font-size: 14px;
+    font-weight: 700;
+    color: #3c3c3c;
 }
 
 
@@ -167,7 +167,7 @@ label {
 
 // -------------------------------------
 //
-//	Courseware
+//    Courseware
 //
 // -------------------------------------
 
@@ -180,276 +180,276 @@ label {
 }
 
 input.courseware-unit-search-input {
-	position: absolute;
-	right: 0;
-	top: 5px;
-	width: 260px;
-	background-color: #fff;
+    position: absolute;
+    right: 0;
+    top: 5px;
+    width: 260px;
+    background-color: #fff;
 }
 
 .courseware-overview {
-	.new-courseware-section-button {
-		display: block;
-		padding: 12px 0;
-		border-radius: 3px;
-		border: 1px solid #8891a1;
-		background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
-		font-size: 14px;
-		font-weight: 700;
-		text-align: center;
-		color: #6d788b;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
-	}
+    .new-courseware-section-button {
+        display: block;
+        padding: 12px 0;
+        border-radius: 3px;
+        border: 1px solid #8891a1;
+        background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
+        font-size: 14px;
+        font-weight: 700;
+        text-align: center;
+        color: #6d788b;
+        box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+    }
 }
 
 .courseware-section {
-	position: relative;
-	background: #fff;
-	border: 1px solid #8891a1;
-	border-radius: 3px;
-	margin: 10px 0;
-	padding-bottom: 12px;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+    position: relative;
+    background: #fff;
+    border: 1px solid #8891a1;
+    border-radius: 3px;
+    margin: 10px 0;
+    padding-bottom: 12px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 
-	&:first-child {
-		margin-top: 0;
-	}
+    &:first-child {
+        margin-top: 0;
+    }
 
-	&.collapsed {
-		padding-bottom: 0;
+    &.collapsed {
+        padding-bottom: 0;
 
-		header {
-			height: 47px;
-		}
-		
-		h4 {
-			display: none;
-		}
-	}
+        header {
+            height: 47px;
+        }
+        
+        h4 {
+            display: none;
+        }
+    }
 
-	&.collapsed > ol,
-	.collapsed > ol {
-		display: none;
-	}
+    &.collapsed > ol,
+    .collapsed > ol {
+        display: none;
+    }
 
-	.publish-date {
-		position: absolute;
-		left: -60px;
-		top: 0;
-		width: 40px;
-		height: 40px;
-		background: url(../img/date-circle.png) no-repeat;
-		font-size: 12px;
-		text-align: center;
+    .publish-date {
+        position: absolute;
+        left: -60px;
+        top: 0;
+        width: 40px;
+        height: 40px;
+        background: url(../img/date-circle.png) no-repeat;
+        font-size: 12px;
+        text-align: center;
 
-		.month,
-		.day {
-			position: absolute;
-			display: block;
-			width: 40px;
-			line-height: 0;
-		}
+        .month,
+        .day {
+            position: absolute;
+            display: block;
+            width: 40px;
+            line-height: 0;
+        }
 
-		.month {
-			top: 10px;
-			font-size: 9px;
-			font-weight: 700;
-			color: #f3f4f5;
-		}
+        .month {
+            top: 10px;
+            font-size: 9px;
+            font-weight: 700;
+            color: #f3f4f5;
+        }
 
-		.day {
-			top: 25px;
-			font-size: 16px;
-			font-weight: 700;
-			color: #b0b6c2;
-		}
-	}
+        .day {
+            top: 25px;
+            font-size: 16px;
+            font-weight: 700;
+            color: #b0b6c2;
+        }
+    }
 
-	header {
-		height: 67px;
+    header {
+        height: 67px;
 
-		.item-actions {			
-			margin-top: 11px;
-			margin-right: 12px;
+        .item-actions {            
+            margin-top: 11px;
+            margin-right: 12px;
 
-			.edit-button,
-			.delete-button {
-				margin-top: -3px;
-			}
-		}
+            .edit-button,
+            .delete-button {
+                margin-top: -3px;
+            }
+        }
 
-		.expand-collapse-icon {
-			float: left;
-			margin: 16px 6px 16px 16px;
-		}
+        .expand-collapse-icon {
+            float: left;
+            margin: 16px 6px 16px 16px;
+        }
 
-		.drag-handle {
-			margin-left: 19px;
-		}
-	}
+        .drag-handle {
+            margin-left: 19px;
+        }
+    }
 
-	h3 {
-		font-size: 16px;
-		font-weight: 700;
-		color: $blue;
-	}
+    h3 {
+        font-size: 16px;
+        font-weight: 700;
+        color: $blue;
+    }
 
-	h4 {
-		font-size: 12px;
-		color: #878e9d;
+    h4 {
+        font-size: 12px;
+        color: #878e9d;
 
-		strong {
-			font-weight: 700;
-		}
-	}
+        strong {
+            font-weight: 700;
+        }
+    }
 
-	> ol {
-		margin: 0 12px;
-		border: 1px solid #ced2db;
-	}
+    > ol {
+        margin: 0 12px;
+        border: 1px solid #ced2db;
+    }
 
-	ol {
-		.section-item {
-			display: block;
-			padding: 6px 8px 8px 16px;
-			background: #edf1f5;
-			font-size: 13px;
+    ol {
+        .section-item {
+            display: block;
+            padding: 6px 8px 8px 16px;
+            background: #edf1f5;
+            font-size: 13px;
 
-			&:hover {
-				background: #fffcf1;
+            &:hover {
+                background: #fffcf1;
 
-				.item-actions {
-					display: block;
-				}
-			}
+                .item-actions {
+                    display: block;
+                }
+            }
 
-			&.new-unit-item {
-				font-weight: 700;
-				color: #6d788b;
+            &.new-unit-item {
+                font-weight: 700;
+                color: #6d788b;
 
-				&:hover {
-					background: #d1dae3;
-				}
-			}
+                &:hover {
+                    background: #d1dae3;
+                }
+            }
 
-			.draft-item {
-				color: #a4aab7;
-			}
+            .draft-item {
+                color: #a4aab7;
+            }
 
-			.item-actions {
-				display: none;
-			}
-		}
+            .item-actions {
+                display: none;
+            }
+        }
 
-		a {
-			color: #2c2e33;
-		}
-	}
+        a {
+            color: #2c2e33;
+        }
+    }
 
-	ol ol {
-		.section-item {
-			padding-left: 56px;
-		}
-	}
+    ol ol {
+        .section-item {
+            padding-left: 56px;
+        }
+    }
 
-	ol ol ol {
-		.section-item {
-			padding-left: 96px;
-		}
-	}
+    ol ol ol {
+        .section-item {
+            padding-left: 96px;
+        }
+    }
 }
 
 .item-actions {
-	float: right;
+    float: right;
 
-	.edit-button,
-	.delete-button {
-		float: left;
-		margin-right: 6px;
-		color: #a4aab7;
-	}
+    .edit-button,
+    .delete-button {
+        float: left;
+        margin-right: 6px;
+        color: #a4aab7;
+    }
 }
 
 .item-details {
-	float: left;
-	padding: 10px 0;
+    float: left;
+    padding: 10px 0;
 }
 
 
 .unit-library {
-	float: right;
-	width: 28%;
-	padding-bottom: 12px;
-	border: 1px solid #8891a1;
-	border-radius: 3px;
-	background: #fff;	
-	box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
+    float: right;
+    width: 28%;
+    padding-bottom: 12px;
+    border: 1px solid #8891a1;
+    border-radius: 3px;
+    background: #fff;    
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
 
-	h2 {
-		font-weight: 700;
-		margin: 14px;
-	}
+    h2 {
+        font-weight: 700;
+        margin: 14px;
+    }
 
-	.list-search {
-		margin: 0 12px 8px;
-	}
+    .list-search {
+        margin: 0 12px 8px;
+    }
 
-	.list-search-input {
-		width: 100%;
-		padding: 6px 15px 8px 30px;
-		box-sizing: border-box;
-		border: 1px solid #b0b6c2;
-		border-radius: 20px;
-		background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
-		font-family: 'Open Sans', sans-serif;
-		color: #3c3c3c;
-		outline: 0;
+    .list-search-input {
+        width: 100%;
+        padding: 6px 15px 8px 30px;
+        box-sizing: border-box;
+        border: 1px solid #b0b6c2;
+        border-radius: 20px;
+        background: url(../img/search-icon.png) no-repeat 8px 7px #edf1f5;
+        font-family: 'Open Sans', sans-serif;
+        color: #3c3c3c;
+        outline: 0;
 
-		&::-webkit-input-placeholder {
-			color: #979faf;
-		}
-	}
+        &::-webkit-input-placeholder {
+            color: #979faf;
+        }
+    }
 
-	.list-wrapper {
-		height: 500px;
-		margin: 0 12px;
-		border: 1px solid #ced2db;
-		overflow-y: scroll;
-	}
+    .list-wrapper {
+        height: 500px;
+        margin: 0 12px;
+        border: 1px solid #ced2db;
+        overflow-y: scroll;
+    }
 
-	ul {
-		.section-item {
-			display: block;
-			padding: 6px 8px 8px 10px;
-			background: #edf1f5;
-			font-size: 13px;
+    ul {
+        .section-item {
+            display: block;
+            padding: 6px 8px 8px 10px;
+            background: #edf1f5;
+            font-size: 13px;
 
-			&:hover {
-				background: #fffcf1;
+            &:hover {
+                background: #fffcf1;
 
-				.item-actions {
-					display: block;
-				}
-			}
+                .item-actions {
+                    display: block;
+                }
+            }
 
-			&.new-unit-item {
-				font-weight: 700;
-				color: #6d788b;
+            &.new-unit-item {
+                font-weight: 700;
+                color: #6d788b;
 
-				&:hover {
-					background: #d1dae3;
-				}
-			}
+                &:hover {
+                    background: #d1dae3;
+                }
+            }
 
-			.item-actions {
-				display: none;
-			}
-		}
+            .item-actions {
+                display: none;
+            }
+        }
 
-		a {
-			color: #2c2e33;
-		}
-	}
+        a {
+            color: #2c2e33;
+        }
+    }
 }
 
 
@@ -458,341 +458,339 @@ input.courseware-unit-search-input {
 
 // -------------------------------------
 //
-//	Unit Editor
+//    Unit Editor
 //
 // -------------------------------------
 
 .unit .main-wrapper {
-	margin: 40px;
+    margin: 40px;
 }
 
 .unit-body {
-	float: left;
-	width: 70%;
+    float: left;
+    width: 70%;
 
-	.breadcrumbs {
-		border-radius: 3px 3px 0 0;
-		border-bottom: 1px solid #cbd1db;
-		background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
-		box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
-		@include clearfix;
+    .breadcrumbs {
+        border-radius: 3px 3px 0 0;
+        border-bottom: 1px solid #cbd1db;
+        background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
+        box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
+        @include clearfix;
 
-		li {
-			float: left;
-		}
+        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;
-		}
-	}
+        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;
-		color: #646464;
-		font-size: 19px;
-		font-weight: 300;
-		letter-spacing: 1px;
-		text-transform: uppercase;
-	}
+    h2 {
+        margin: 30px 40px;
+        color: #646464;
+        font-size: 19px;
+        font-weight: 300;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+    }
 
-	.components {
-		> li {
-			position: relative;
-			z-index: 10;
-			margin: 20px 40px;
-			border: 1px solid #d1ddec;
-			border-radius: 3px;
-			background: #fff;
-			-webkit-transition: border-color .15s;
+    .edit-pane {
+        .xmodule_edit.editable {
+            position: relative;
+            border: 1px solid transparent;
+            z-index: 10;
 
-			&:hover {
-				border-color: #6696d7;
+            &:hover {
+                border-color: #6696d7;
+                border: 1px solid #d1ddec;
+                border-radius: 3px;
+                -webkit-transition: border-color .15s;
 
-				.drag-handle,
-				.component-actions {
-					opacity: 1;
-				}
-			}
+                > .component-actions {
+                    opacity: 1;
+                }
+            }
 
-			&.editing {
-				border-color: #6696d7;
+            &.editing {
+                border-color: #6696d7;
 
-				&:hover {
-					.drag-handle,
-					.component-actions {
-						opacity: 0;
-					}
-				}
-			}
+                &:hover {
+                    .drag-handle,
+                    .component-actions {
+                        opacity: 0;
+                    }
+                }
+            }
 
-			.rendered-component {
-				padding: 20px;
-			}
+            .rendered-component {
+                padding: 20px;
+            }
 
-			.component-actions {
-				position: absolute;
-				top: 4px;
-				right: 4px;
-				opacity: 0;
-				-webkit-transition: opacity .15s;
-			}
+            .component-actions {
+                position: absolute;
+                top: 4px;
+                right: 4px;
+                opacity: 0;
+                -webkit-transition: opacity .15s;
+            }
 
-			.edit-button,
-			.delete-button {
-				float: left;
-				padding: 3px 10px 4px;
-				margin-left: 3px;
-				border: 1px solid #fff;
-				border-radius: 3px;
-				background: $blue;
-				font-size: 12px;
-				color: #fff;
-				-webkit-transition: all .15s;
+            .edit-button,
+            .delete-button {
+                float: left;
+                padding: 3px 10px 4px;
+                margin-left: 3px;
+                border: 1px solid #fff;
+                border-radius: 3px;
+                background: $blue;
+                font-size: 12px;
+                color: #fff;
+                -webkit-transition: all .15s;
 
-				&:hover {
-					background-color: $blue;
-					color: #fff;
-				}
+                &:hover {
+                    background-color: $blue;
+                    color: #fff;
+                }
 
-				.edit-icon,
-				.delete-icon {
-					margin-right: 4px;
-				}
-			}
+                .edit-icon,
+                .delete-icon {
+                    margin-right: 4px;
+                }
+            }
 
-			.drag-handle {
-				position: absolute;
-				display: block;
-				top: -1px;
-				right: -16px;
-				z-index: -1;
-				width: 15px;
-				height: 100%;
-				border-radius: 0 3px 3px 0;
-				border: 1px solid $blue;
-				background: url(../img/drag-handles.png) center no-repeat $blue;
-				cursor: move;
-				opacity: 0;
-				-webkit-transition: opacity .15s;
-			}
+            .drag-handle {
+                position: absolute;
+                display: block;
+                top: -1px;
+                right: -16px;
+                z-index: -1;
+                width: 15px;
+                height: 100%;
+                border-radius: 0 3px 3px 0;
+                border: 1px solid $blue;
+                background: url(../img/drag-handles.png) center no-repeat $blue;
+                cursor: move;
+                opacity: 0;
+                -webkit-transition: opacity .15s;
+            }
 
-			&.new-component-item {
-				padding: 0;
-				border: 1px solid #8891a1;
-				border-radius: 3px;
-				background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
-				box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
-				-webkit-transition: background-color .15s, border-color .15s;
+            &.new-component-item {
+                padding: 0;
+                border: 1px solid #8891a1;
+                border-radius: 3px;
+                background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0)) #d1dae3;
+                box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
+                -webkit-transition: background-color .15s, border-color .15s;
 
-				&.adding {
-					background-color: $blue;
-					border-color: #437fbf;
-				}
+                &.adding {
+                    background-color: $blue;
+                    border-color: #437fbf;
+                }
 
-				.new-component-button {
-					display: block;
-					padding: 20px;
-					text-align: center;
-					color: #6d788b;
-				}
+                .new-component-button {
+                    display: block;
+                    padding: 20px;
+                    text-align: center;
+                    color: #6d788b;
+                }
 
-				h5 {
-					margin-bottom: 8px;
-					color: #fff;
-					font-weight: 700;
-				}
+                h5 {
+                    margin-bottom: 8px;
+                    color: #fff;
+                    font-weight: 700;
+                }
 
-				.rendered-component {
-					display: none;
-					background: #fff;
-					border-radius: 3px 3px 0 0;
-				}
+                .rendered-component {
+                    display: none;
+                    background: #fff;
+                    border-radius: 3px 3px 0 0;
+                }
 
-				.new-component-type {
-					@include clearfix;
+                .new-component-type {
+                    @include clearfix;
 
-					a {
-						position: relative;
-						float: left;
-						width: 100px;
-						height: 100px;
-						margin-right: 10px;
-						border-radius: 8px;
-						font-size: 13px;
-						line-height: 14px;
-						color: #fff;
-						text-align: center;
-						box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset;
-						-webkit-transition: background-color .15s;
+                    a {
+                        position: relative;
+                        float: left;
+                        width: 100px;
+                        height: 100px;
+                        margin-right: 10px;
+                        border-radius: 8px;
+                        font-size: 13px;
+                        line-height: 14px;
+                        color: #fff;
+                        text-align: center;
+                        box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .4) inset;
+                        -webkit-transition: background-color .15s;
 
-						&:hover {
-							background-color: rgba(255, 255, 255, .2);
-						}
+                        &:hover {
+                            background-color: rgba(255, 255, 255, .2);
+                        }
 
-						.name {
-							position: absolute;
-							bottom: 5px;
-							left: 0;
-							width: 100%;
-							padding: 10px;
-							box-sizing: border-box;
-						}
-					}
-				}
+                        .name {
+                            position: absolute;
+                            bottom: 5px;
+                            left: 0;
+                            width: 100%;
+                            padding: 10px;
+                            box-sizing: border-box;
+                        }
+                    }
+                }
 
-				.new-component-step-1,
-				.new-component-step-2 {
-					display: none;
-					padding: 20px;
-				}
-			}
-		}
+                .new-component-step-1,
+                .new-component-step-2 {
+                    display: none;
+                    padding: 20px;
+                }
+            }
+        }
 
-		.video-unit img,
-		.discussion-unit img {
-			width: 100%;
-		}
-	}
+        .video-unit img,
+        .discussion-unit img {
+            width: 100%;
+        }
+    }
 
-	.component-editor,
-	.new-component-step-2 {
-		display: none;
-		padding: 20px;
-		background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue;
+    .component-editor,
+    .new-component-step-2 {
+        display: none;
+        padding: 20px;
+        background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1)) $blue;
 
-		h5 {
-			margin-bottom: 8px;
-			color: #fff;
-			font-weight: 700;
-		}
+        h5 {
+            margin-bottom: 8px;
+            color: #fff;
+            font-weight: 700;
+        }
 
-		textarea {
-			width: 100%;
-			min-height: 80px;
-			padding: 10px;
-			box-sizing: border-box;
-			border: 1px solid #3c3c3c;
-			font-family: Monaco, monospace;
-		}
+        textarea {
+            width: 100%;
+            min-height: 80px;
+            padding: 10px;
+            box-sizing: border-box;
+            border: 1px solid #3c3c3c;
+            font-family: Monaco, monospace;
+        }
 
-		.save-button {
-			@include orange-button;
-			margin-right: 8px;
-		}
+        .save-button {
+            @include orange-button;
+            margin-right: 8px;
+        }
 
-		.cancel-button {
-			@include blue-button;
-			border-color: #30649c;
-		}
-	}
+        .cancel-button {
+            @include blue-button;
+            border-color: #30649c;
+        }
+    }
 }
 
 .unit-properties,
 .unit-history {
-	margin-bottom: 20px;
+    margin-bottom: 20px;
 
-	.window-contents {
-		padding: 20px;
-	}
+    .window-contents {
+        padding: 20px;
+    }
 
-	h4 {
-		padding: 6px 14px;
-		border-bottom: 1px solid #cbd1db;
-		border-radius: 3px 3px 0 0;
-		background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
-		box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
-		font-size: 14px;
-		font-weight: 600;
-	}
+    h4 {
+        padding: 6px 14px;
+        border-bottom: 1px solid #cbd1db;
+        border-radius: 3px 3px 0 0;
+        background: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 70%) #edf1f5;
+        box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset;
+        font-size: 14px;
+        font-weight: 600;
+    }
 
-	.row {
-		margin-bottom: 15px;
-	}
+    .row {
+        margin-bottom: 15px;
+    }
 
-	input[type="text"] {
-		display: block;
-		width: 100%;
-	}
+    input[type="text"] {
+        display: block;
+        width: 100%;
+    }
 
-	.visibility-options .option {
-		margin-right: 10px;
-		padding: 3px 13px 6px;
-		border-radius: 3px;
-		background: #edf1f5;
+    .visibility-options .option {
+        margin-right: 10px;
+        padding: 3px 13px 6px;
+        border-radius: 3px;
+        background: #edf1f5;
 
-		&.checked {
-			background: #d1dae3;
-		}
+        &.checked {
+            background: #d1dae3;
+        }
 
-		input[type="radio"] {
-			margin-right: 7px;
-		}
-	}
+        input[type="radio"] {
+            margin-right: 7px;
+        }
+    }
 
-	.save-button {
-		@include blue-button;
-		margin-top: 10px;
-	}
+    .save-button {
+        @include blue-button;
+        margin-top: 10px;
+    }
 
-	.publish-button {
-		@include orange-button;
-		margin-top: 10px;
-		border-color: #bda046;
-	}
+    .publish-button {
+        @include orange-button;
+        margin-top: 10px;
+        border-color: #bda046;
+    }
 }
 
 .unit-properties {
-	.window-contents {
-		padding: 10px 20px;
-	}
+    .window-contents {
+        padding: 10px 20px;
+    }
 }
 
 .unit-history {
-	&.collapsed {
-		h4 {
-			border-bottom: none;
-			border-radius: 3px;
-		}
+    &.collapsed {
+        h4 {
+            border-bottom: none;
+            border-radius: 3px;
+        }
 
-		.window-contents {
-			display: none;	
-		}
-	}
+        .window-contents {
+            display: none;    
+        }
+    }
 
-	ol {
-		border: 1px solid #ced2db;
+    ol {
+        border: 1px solid #ced2db;
 
-		li {
-			display: block;
-			padding: 6px 8px 8px 10px;
-			background: #edf1f5;
-			font-size: 12px;
+        li {
+            display: block;
+            padding: 6px 8px 8px 10px;
+            background: #edf1f5;
+            font-size: 12px;
 
-			&:hover {
-				background: #fffcf1;
+            &:hover {
+                background: #fffcf1;
 
-				.item-actions {
-					display: block;
-				}
-			}
+                .item-actions {
+                    display: block;
+                }
+            }
 
-			&.checked {
-				background: #d1dae3;
-			}
+            &.checked {
+                background: #d1dae3;
+            }
 
-			.item-actions {
-				display: none;
-			}
+            .item-actions {
+                display: none;
+            }
 
-			input[type="radio"] {
-				margin-right: 7px;
-			}
-		}
-	}
+            input[type="radio"] {
+                margin-right: 7px;
+            }
+        }
+    }
 }
 
 
@@ -801,144 +799,144 @@ input.courseware-unit-search-input {
 
 // -------------------------------------
 //
-//	Icons / Tags
+//    Icons / Tags
 //
 // -------------------------------------
 
 .expand-collapse-icon {
-	position: relative;
-	display: inline-block;
-	width: 9px;
-	height: 11px;
-	margin-right: 10px;
-	background: url(../img/expand-collapse-icons.png) no-repeat;
+    position: relative;
+    display: inline-block;
+    width: 9px;
+    height: 11px;
+    margin-right: 10px;
+    background: url(../img/expand-collapse-icons.png) no-repeat;
 
-	&.expand {
-		top: 1px;
-		background-position: 0 0;
-	}
+    &.expand {
+        top: 1px;
+        background-position: 0 0;
+    }
 
-	&.collapse {
-		top: -1px;
-		background-position: 0 -11px;
-	}
+    &.collapse {
+        top: -1px;
+        background-position: 0 -11px;
+    }
 }
 
 .edit-icon {
-	display: inline-block;
-	width: 12px;
-	height: 12px;
-	margin-right: 2px;
-	background: url(../img/edit-icon.png) no-repeat;
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 2px;
+    background: url(../img/edit-icon.png) no-repeat;
 
-	&.white {
-		background: url(../img/edit-icon-white.png) no-repeat;		
-	}
+    &.white {
+        background: url(../img/edit-icon-white.png) no-repeat;        
+    }
 }
 
 .delete-icon {
-	display: inline-block;
-	width: 10px;
-	height: 11px;
-	margin-right: 2px;
-	background: url(../img/delete-icon.png) no-repeat;
+    display: inline-block;
+    width: 10px;
+    height: 11px;
+    margin-right: 2px;
+    background: url(../img/delete-icon.png) no-repeat;
 
-	&.white {
-		background: url(../img/delete-icon-white.png) no-repeat;		
-	}
+    &.white {
+        background: url(../img/delete-icon-white.png) no-repeat;        
+    }
 }
 
 .drag-handle {
-	display: inline-block;
-	float: right;
-	width: 7px;
-	height: 22px;
-	margin-left: 10px;
-	background: url(../img/drag-handles.png) no-repeat;
-	cursor: move;
+    display: inline-block;
+    float: right;
+    width: 7px;
+    height: 22px;
+    margin-left: 10px;
+    background: url(../img/drag-handles.png) no-repeat;
+    cursor: move;
 }
 
 .draft-tag,
 .publish-flag {
-	margin-left: 3px;
-	font-size: 9px;
-	font-weight: 600;
-	text-transform: uppercase;
-	color: #a4aab7;	
+    margin-left: 3px;
+    font-size: 9px;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: #a4aab7;    
 }
 
 .plus-icon {
-	display: inline-block;
-	width: 11px;
-	height: 11px;
-	margin-right: 8px;
-	background: url(../img/plus-icon.png) no-repeat;
+    display: inline-block;
+    width: 11px;
+    height: 11px;
+    margin-right: 8px;
+    background: url(../img/plus-icon.png) no-repeat;
 }
 
 .textbook-icon {
-	display: inline-block;
-	width: 32px;
-	height: 32px;
-	margin-right: 8px;
-	vertical-align: middle;
-	background: url(../img/textbook-icon.png) no-repeat;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    vertical-align: middle;
+    background: url(../img/textbook-icon.png) no-repeat;
 }
 
 .slides-icon {
-	display: inline-block;
-	width: 32px;
-	height: 32px;
-	margin-right: 8px;
-	vertical-align: middle;
-	background: url(../img/slides-icon.png) no-repeat;
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    vertical-align: middle;
+    background: url(../img/slides-icon.png) no-repeat;
 }
 
 .large-slide-icon {
-	display: inline-block;
-	width: 100px;
-	height: 60px;
-	margin-right: 5px;
-	background: url(../img/large-slide-icon.png) center no-repeat;
+    display: inline-block;
+    width: 100px;
+    height: 60px;
+    margin-right: 5px;
+    background: url(../img/large-slide-icon.png) center no-repeat;
 }
 
 .large-textbook-icon {
-	display: inline-block;
-	width: 100px;
-	height: 60px;
-	margin-right: 5px;
-	background: url(../img/large-textbook-icon.png) center no-repeat;
+    display: inline-block;
+    width: 100px;
+    height: 60px;
+    margin-right: 5px;
+    background: url(../img/large-textbook-icon.png) center no-repeat;
 }
 
 .large-discussion-icon {
-	display: inline-block;
-	width: 100px;
-	height: 60px;
-	margin-right: 5px;
-	background: url(../img/large-discussion-icon.png) center no-repeat;
+    display: inline-block;
+    width: 100px;
+    height: 60px;
+    margin-right: 5px;
+    background: url(../img/large-discussion-icon.png) center no-repeat;
 }
 
 .large-freeform-icon {
-	display: inline-block;
-	width: 100px;
-	height: 60px;
-	margin-right: 5px;
-	background: url(../img/large-freeform-icon.png) center no-repeat;
+    display: inline-block;
+    width: 100px;
+    height: 60px;
+    margin-right: 5px;
+    background: url(../img/large-freeform-icon.png) center no-repeat;
 }
 
 .large-problem-icon {
-	display: inline-block;
-	width: 100px;
-	height: 60px;
-	margin-right: 5px;
-	background: url(../img/large-problem-icon.png) center no-repeat;
+    display: inline-block;
+    width: 100px;
+    height: 60px;
+    margin-right: 5px;
+    background: url(../img/large-problem-icon.png) center no-repeat;
 }
 
 .large-video-icon {
-	display: inline-block;
-	width: 100px;
-	height: 60px;
-	margin-right: 5px;
-	background: url(../img/large-video-icon.png) center no-repeat;
+    display: inline-block;
+    width: 100px;
+    height: 60px;
+    margin-right: 5px;
+    background: url(../img/large-video-icon.png) center no-repeat;
 }
 
 
@@ -946,65 +944,65 @@ input.courseware-unit-search-input {
 
 // -------------------------------------
 //
-//	Modal
+//    Modal
 //
 // -------------------------------------
 
 .modal-cover {
-	display: none;
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 1000;
-	width: 100%;
-	height: 100%;
-	background: rgba(0, 0, 0, .8);
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .8);
 }
 
 .history-modal {
-	display: none;
-	position: fixed;
-	top: 60px;
-	left: 50%;
-	z-index: 1001;
-	width: 930px;
-	height: 540px;
-	margin-left: -465px;
-	background: #fff;
+    display: none;
+    position: fixed;
+    top: 60px;
+    left: 50%;
+    z-index: 1001;
+    width: 930px;
+    height: 540px;
+    margin-left: -465px;
+    background: #fff;
 
-	.modal-body {
-		height: 400px;
-		padding: 40px;
-		overflow-y: scroll;
-	}
+    .modal-body {
+        height: 400px;
+        padding: 40px;
+        overflow-y: scroll;
+    }
 
-	.modal-actions {
-		height: 60px;
-		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #d1dae3;
-	}
+    .modal-actions {
+        height: 60px;
+        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) #d1dae3;
+    }
 
-	h2 {
-		margin: 0 10px 30px;
-		color: #646464;
-		font-size: 19px;
-		font-weight: 300;
-		letter-spacing: 1px;
-		text-transform: uppercase;
-	}
+    h2 {
+        margin: 0 10px 30px;
+        color: #646464;
+        font-size: 19px;
+        font-weight: 300;
+        letter-spacing: 1px;
+        text-transform: uppercase;
+    }
 
-	p {
-		margin: 20px;
-	}
+    p {
+        margin: 20px;
+    }
 
-	.revert-button {
-		@include blue-button;
-		margin: 13px 6px 0 13px;
-	}
+    .revert-button {
+        @include blue-button;
+        margin: 13px 6px 0 13px;
+    }
 
-	.close-button {
-		@include white-button;
-		margin-top: 13px;
-	}
+    .close-button {
+        @include white-button;
+        margin-top: 13px;
+    }
 }
 
 
diff --git a/common/djangoapps/xmodule_modifiers.py b/common/djangoapps/xmodule_modifiers.py
index 7ea6778af6..9473dfe26b 100644
--- a/common/djangoapps/xmodule_modifiers.py
+++ b/common/djangoapps/xmodule_modifiers.py
@@ -12,7 +12,7 @@ from xmodule.vertical_module import VerticalModule
 
 log = logging.getLogger("mitx.xmodule_modifiers")
 
-def wrap_xmodule(get_html, module, template):
+def wrap_xmodule(get_html, module, template, context=None):
     """
     Wraps the results of get_html in a standard <section> with identifying
     data so that the appropriate javascript module can be loaded onto it.
@@ -24,14 +24,18 @@ def wrap_xmodule(get_html, module, template):
         class_: the module class name
         module_name: the js_module_name of the module
     """
+    if context is None:
+        context = {}
 
     @wraps(get_html)
     def _get_html():
-        return render_to_string(template, {
+        context.update({
             'content': get_html(),
             'class_': module.__class__.__name__,
             'module_name': module.js_module_name
         })
+
+        return render_to_string(template, context)
     return _get_html
 
 
diff --git a/common/lib/xmodule/xmodule/static_content.py b/common/lib/xmodule/xmodule/static_content.py
index 8d1d9cac52..ae9b55f313 100644
--- a/common/lib/xmodule/xmodule/static_content.py
+++ b/common/lib/xmodule/xmodule/static_content.py
@@ -12,7 +12,7 @@ from .x_module import XModuleDescriptor
 
 
 def write_module_styles(output_root, extra_descriptors):
-    return _write_styles(output_root, _list_modules(extra_descriptors))
+    return _write_styles('.xmodule_display', output_root, _list_modules(extra_descriptors))
 
 
 def write_module_js(output_root, extra_descriptors):
@@ -20,7 +20,7 @@ def write_module_js(output_root, extra_descriptors):
 
 
 def write_descriptor_styles(output_root, extra_descriptors):
-    return _write_styles(output_root, _list_descriptors(extra_descriptors))
+    return _write_styles('.xmodule_edit', output_root, _list_descriptors(extra_descriptors))
 
 
 def write_descriptor_js(output_root, extra_descriptors):
@@ -53,7 +53,7 @@ def _ensure_dir(dir_):
             raise
 
 
-def _write_styles(output_root, classes):
+def _write_styles(selector, output_root, classes):
     _ensure_dir(output_root)
 
     css_fragments = defaultdict(set)
@@ -78,8 +78,8 @@ def _write_styles(output_root, classes):
     with open(output_root / '_module-styles.scss', 'w') as module_styles:
         for class_, fragment_names in css_imports.items():
             imports = "\n".join('@import "{0}";'.format(name) for name in fragment_names)
-            module_styles.write(""".xmodule_{class_} {{ {imports} }}""".format(
-                class_=class_, imports=imports
+            module_styles.write("""{selector}.xmodule_{class_} {{ {imports} }}""".format(
+                class_=class_, imports=imports, selector=selector
             ))
 
 
diff --git a/common/templates/xmodule_edit.html b/common/templates/xmodule_edit.html
index 25341b8902..f0ae134da7 100644
--- a/common/templates/xmodule_edit.html
+++ b/common/templates/xmodule_edit.html
@@ -1,3 +1,14 @@
-<section class="xmodule_edit xmodule_${class_}" data-type="${module_name}">
-    ${content}
-</section>
+<div class="xmodule_edit xmodule_${class_} ${editable_class}" data-type="${module_name}">
+  <%include file="xmodule_display.html"/>
+  % if editable_data:
+  <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>
+  <div class="component-editor">
+    ${editor_content}
+    <a href="#" class="save-button">Save</a>
+    <a href="#" class="cancel-button">Cancel</a>
+  </div>
+  % endif
+</div>