diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index 06849f851c..317247e886 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -423,6 +423,19 @@ body.course.unit {
       padding: 20px;
       border-radius: 2px 2px 0 0;
 
+      .component-edit-modes {
+        @include box-sizing(border-box);
+        list-style: none;
+        position: absolute;
+        width: 100%;
+        padding: 15px;
+        top: 0;
+        right: 0;
+        border-bottom: 1px solid $lightBluishGrey2;
+        background: $lightGrey;
+
+      }
+
       .metadata_edit {
         margin-bottom: 20px;
         font-size: 13px;
diff --git a/cms/templates/component.html b/cms/templates/component.html
index dad407ff7b..46a0880f35 100644
--- a/cms/templates/component.html
+++ b/cms/templates/component.html
@@ -1,11 +1,15 @@
 <div class="wrapper wrapper-component-editor">
 	<div class="component-editor">
+	  <menu class="component-edit-modes">
+	  	  <a href="#" class="button cancel-button">Editor</a>
+	  	  <a href="#" class="button cancel-button">Settings</a>
+	  </menu>
 	  <div class="module-editor">
 	    ${editor}
 	  </div>
 	  <div class="row module-actions">
-			<a href="#" class="save-button">Save</a>
-			<a href="#" class="cancel-button">Cancel</a>	  	
+	  	<a href="#" class="save-button">Save</a>
+		<a href="#" class="cancel-button">Cancel</a>	  	
 	  </div>
 	</div>
 </div>