diff --git a/cms/static/client_templates/generic_metadata_entry.html b/cms/static/client_templates/generic_metadata_entry.html
index ef65c1bf3f..42069def5e 100644
--- a/cms/static/client_templates/generic_metadata_entry.html
+++ b/cms/static/client_templates/generic_metadata_entry.html
@@ -1,2 +1,9 @@
-<label><%= model.get('display_name') %>:</label>
-<input type='text' class='editor' value='<%= model.get("value") %>' size='60'/>
+<div class="wrapper-comp-setting">
+	<label class="label setting-label" for="setting-discussion_category"><%= model.get('display_name') %></label>
+	<input class="input setting-input" type="text" id="setting-discussion_category" value='<%= model.get("value") %>'/> 
+	<!--button clickable if is-set -->
+	<button class="action setting-clear inactive" type="button" name="setting-clear" value="Clear" data-tooltip="Clear">
+		<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
+	</button>
+</div>
+<span class="tip setting-help">'<%= model.get("help") %>'</span>
\ No newline at end of file
diff --git a/cms/static/client_templates/metadata_editor.html b/cms/static/client_templates/metadata_editor.html
index 9fb8cee67b..92f053ca9f 100644
--- a/cms/static/client_templates/metadata_editor.html
+++ b/cms/static/client_templates/metadata_editor.html
@@ -1,7 +1,9 @@
-<ul>
-    <% _.each(metadata_entries, function(entry) { %>
-    <li>
-        <div class='metadata_entry' />
-    </li>
-    <% }) %>
-</ul>
\ No newline at end of file
+<div class="wrapper-comp-settings" id="settings-tab">
+	<ul class="list-input settings-list">
+	    <% _.each(metadata_entries, function(entry) { %>
+	    <li class="field comp-setting-entry">
+	        <div class='metadata_entry' />
+	    </li>
+	    <% }) %>
+	</ul>
+</div>
\ No newline at end of file
diff --git a/cms/templates/component.html b/cms/templates/component.html
index 47b4c3b384..a461f4ce06 100644
--- a/cms/templates/component.html
+++ b/cms/templates/component.html
@@ -1,9 +1,26 @@
 <div class="wrapper wrapper-component-editor">
 	<div class="component-editor">
-        <div class="module-editor">
-            ${editor}
-        </div>
+		<div class="component-edit-header">
+  			<span class="component-name"><em>Editing:</em> Name of Component</span>
+  			<!--should this be a menubar/menu/tabbar instead of list? -->
+  	  		<ul class="nav-edit-modes">
+  	  			<li id="editor-mode" class="mode" aria-controls="editor-tab" aria-selected="true" role="tab" tabindex="0">
+  	  				<a href="#" class="active-mode is-set">Editor</a>
+	  			</li>
+	  			<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
+	  				<a href="#" class="inactive-mode">Compiler </a>
+	  			</li>
+	  			<li id="settings-mode" class="mode" aria-controls="settings-tab" aria-selected="false" role="tab" tabindex="-1">
+	  				<a href="#" class="active-mode">Settings </a>
+	  			</li>
+	  		</ul>
+		</div> <!-- Editor Header -->
 
+		<div class="component-edit-modes">
+	        <div class="module-editor">
+	            ${editor}
+	        </div>
+		</div>
 		<div class="row module-actions">
 	  		<a href="#" class="save-button">Save</a>
 	  		<a href="#" class="cancel-button">Cancel</a>	  	
diff --git a/cms/templates/widgets/html-edit.html b/cms/templates/widgets/html-edit.html
index 7a9d563a57..a6df48b1c5 100644
--- a/cms/templates/widgets/html-edit.html
+++ b/cms/templates/widgets/html-edit.html
@@ -1,4 +1,5 @@
 <%include file="metadata-edit.html" />
+<div class="wrapper-comp-editor" id="editor-tab">
 <section class="html-editor editor">
   <ul class="editor-tabs">
     <li><a href="#" class="visual-tab tab current" data-tab="visual">Visual</a></li>
@@ -10,3 +11,4 @@
     <textarea name="" class="edit-box">${data | h}</textarea>
   </div>
 </section>
+</div>
diff --git a/common/lib/xmodule/xmodule/x_module.py b/common/lib/xmodule/xmodule/x_module.py
index 64a9eae1dd..8b5ae3e63f 100644
--- a/common/lib/xmodule/xmodule/x_module.py
+++ b/common/lib/xmodule/xmodule/x_module.py
@@ -652,7 +652,8 @@ class XModuleDescriptor(XModuleFields, HTMLSnippet, ResourceTemplates, XBlock):
                                            'display_name' : field.display_name,
                                            'default_value': field.to_json(default_value),
                                            'inheritable': inheritable,
-                                           'explicitly_set': explicitly_set}
+                                           'explicitly_set': explicitly_set,
+                                           'help': field.help}
 
         return metadata, simple_metadata