diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index ae45c29fb5..b4352f413d 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -502,15 +502,28 @@ body.course.unit {
           //SettingsLabel
           li > label {
             //Text all aligned left
+            display: inline-block;
             //this sets height of .settings-row to allow for long help strings. 
           }
 
           //SettingsInput
-          li > input {
+          li > input, li > select {
+            @include placeholder($gray-l4);
+            @include font-size(16);
+            @include size(100%,100%);
             width: 100px;
+            height: auto;
             //TO-DO
 
-            
+            &:focus {
+              //TO-DO
+            }
+          }
+
+          //SettingsClear
+          li > button {
+            border-radius: 20px; //maybe a % calc from input box height
+            margin-left: 15px;
           }
 
           //SettingsHelp
diff --git a/cms/templates/component.html b/cms/templates/component.html
index 95e5d6915b..b6c537e036 100644
--- a/cms/templates/component.html
+++ b/cms/templates/component.html
@@ -20,17 +20,36 @@
 			</div> <!-- Editor Wrapper-->
 			<ul class="settings-wrapper" id="settings-tab">
 		  		<!--% for type in sorted(something.keys()):-->
-		  		<li class="settings-row">
+		  		<!--is-set class applied when user sets value-->
+		  		<li class="settings-row is-set">
 		  			<label for="<%= ...settingLabel... %>">Setting Display Name Goes Here</label>
 		  			<input type="${type}" id="firstname"/> 
+		  			<!--button clickable if is-set -->
+		  			<button type="button" name="setting-clear" value="Clear" class="setting-clear " data-tooltip="Clear">
+		  				<i class="ss-icon ss-symbolicons-block undo">&#x21A9;</i>
+		  			</button>
 		  			<span class="settings-help">${helpstring}</span>
 		  		</li>
 		  		<!--% showing second example mostly to see is-set style difference -->
-		  		<li class="settings-row is-set">
+		  		<li class="settings-row">
 		  			<label for="setting-name-as-id">Setting Display Name Goes Here</label>
 		  			<input type="${type}" id="firstname"/> 
 		  			<span class="settings-help">${helpstring}</span>
-		  		</li>≈
+		  		
+		  		<!--% showing dropdown example -->
+		  		<li class="settings-row">
+		  			<label for="setting-name-as-id">Setting Display Name Goes Here</label>
+		  			<select name="${type}">
+		  				<!--% for all in available options -->
+						<option value="displayName1" selected>Closed</option>
+						<!--in case value already defaulted --> 
+						<option value="displayName2">NotClosed</option>
+						<option value="displayName3">Open</option>
+						<option value="displayName4">Available</option>
+					</select> 
+		  			<span class="settings-help">${helpstring}</span>
+		  		</li>
+		  		
 		  	</ul> <!-- Settings Wrapper-->
 		</div>
 		<div class="row module-actions">