diff --git a/webapp/web/css/menupage/testmenupage.css b/webapp/web/css/menupage/testmenupage.css
index 0864a791e..fefdeaa52 100644
--- a/webapp/web/css/menupage/testmenupage.css
+++ b/webapp/web/css/menupage/testmenupage.css
@@ -1,6 +1,44 @@
 /* $This file is distributed under the terms of the license in /doc/license.txt$ */
 
 /**Added by Huda for demonstration so feel free to edit/remove**/
+
+/*note for mb: hide should be changed to hidden. We have a hidden class at the vitro layer vitro.css*/
 .hide {
-	display:none;
+    display:none;
+}
+#add-menu-item p,
+#edit-menu-item p {
+    margin-top: 15px;
+}
+#add-menu-item input[type="text"],
+#edit-menu-item input[type="text"],
+#add-menu-item select,
+#edit-menu-item select {
+    width: 20em;
+}
+#add-menu-item input[name="prettyUrl"],
+#edit-menu-item input[name="prettyUrl"] {
+    margin-bottom: 0;
+}
+#add-menu-item p.note,
+#edit-menu-item p.note {
+    margin-top: 5px;
+}
+#existingContentType {
+    margin-top: 15px;
+}
+#selectContentType label {
+    margin-top: 15px;
+}
+#selectedContentTypeValue {
+    padding: 0.2em 0.4em;
+    background: #f4f4f4;
+    margin-right: .4em;
+}
+ul#selectedClasses {
+    list-style-type: none;
+}
+#add-menu-item input.submit,
+#edit-menu-item input.submit {
+    margin-top: 20px;
 }
\ No newline at end of file
diff --git a/webapp/web/templates/freemarker/edit/forms/testMenuManagement.ftl b/webapp/web/templates/freemarker/edit/forms/testMenuManagement.ftl
index 934936ce6..8c83fdef0 100644
--- a/webapp/web/templates/freemarker/edit/forms/testMenuManagement.ftl
+++ b/webapp/web/templates/freemarker/edit/forms/testMenuManagement.ftl
@@ -1,7 +1,7 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
 <#--Since we are going to use one template for adding and editing a menu item,
-    it will be necessary to provide a freemarker variable that lets us know if you are in edit or add mode. bThis is up 
+    it will be necessary to provide a freemarker variable that lets us know if you are in edit or add mode. This is up 
     to you Huda the way you implement it. -->
 
 <#-- some additional processing here which shows or hides the class group selection and classes based on initial action-->
@@ -14,25 +14,22 @@
 
 <h3>${menuAction} menu item</h3>
 
-<section>
-    <form method="POST" action="${formUrls}">
-    	<input type="hidden" name="cmd" id="cmd" value="${menuAction}"/>
-    	<input type="hidden" name="menuItem" id="menuItem" value="${menuItem}"/>
-    	<input type="hidden" name="switchToDisplayModel" id="switchToDisplayModel" value="true"/>
-    	
-        <legend>${menuAction} menu item</legend>
+<section id="${menuAction?lower_case}-menu-item" role="region">
+    <form method="POST" action="${formUrls}" class="customForm" role="${menuAction} menu item">
+        <input type="hidden" name="cmd" id="cmd" value="${menuAction}" />
+        <input type="hidden" name="menuItem" id="menuItem" value="${menuItem}" />
+        <input type="hidden" name="switchToDisplayModel" id="switchToDisplayModel" value="true" />
          
-        <label for="menu-name">Name *</label>
+        <label for="menu-name">Name<span class="requiredHint"> *</span></label>
         <input type="text" name="menuName" value="${menuName}" />
 
-        <label for="pretty-url">Pretty URL *</label> 
+        <label for="pretty-url">Pretty URL<span class="requiredHint"> *</span></label> 
         <input type="text" name="prettyUrl" value="${prettyUrl}" />
-        <p>(Format: /<prettyURL> - ie. /people)</p>
+        <p class="note">(Format: /<prettyURL> - ie. /people)</p>
 
-		<#--Commented out for now -->
-		
-        
-        <p>Template *</p>
+        <#--Commented out for now -->
+    
+        <p>Template<span class="requiredHint"> *</span></p>
         
         <input type="radio" name="selectedTemplate" value="default" <#if selectedTemplateType = "default">checked</#if> />
         <label class="inline" for="default"> Default</label>
@@ -43,58 +40,56 @@
         <label class="inline" for="custom"> Custom template</label>
         
         <#if selectedTemplateType = "custom">
-            <input type="text" name="customTemplate" value="${customTemplate}"/>*
+            <br />
+            <input class="custom-template" type="text" name="customTemplate" value="${customTemplate}" /><span class="requiredHint"> *</span>
         </#if>
         
-       <div id="existingContentType" name="existingContentType" ${existingClassGroupStyle}>
-        <p>Selected content type for the associated page</p>
-    	<p ><span id="selectedContentTypeValue" name="selectedContentTypeValue">${associatedPage}</span> <a id="changeContentType" name="changeContentType" href="#">Change content type</a></p>
-       </div>
-        
-          
-          <div id="selectContentType" name="selectContentType" ${selectClassGroupStyle}>     
-			<label for="selectClassGroup">Select content type for the associated page *</label>
-    			<select name="selectClassGroup" id="selectClassGroup">
-    			<option value="-1"> </option>
-    			
-    			<#list classGroups as aClassGroup>
-    				<option value="${aClassGroup.URI}" 
-    				<#if aClassGroup.URI = associatedPageURI>
-    					selected
-    				</#if>
-    				>${aClassGroup.publicName}</option>
-        		</#list>
-        		
-   			 	</select>
-   			</div> 
-   					
+       <section id="existingContentType" name="existingContentType" ${existingClassGroupStyle}>
+           <p>Selected content type for the associated page</p>
+           <p>
+               <span id="selectedContentTypeValue" name="selectedContentTypeValue">${associatedPage}</span>
+               <a id="changeContentType" name="changeContentType" href="#">Change content type</a>
+           </p>
+       </section>
+    
+        <#-- Select class group -->
+        <section id="selectContentType" name="selectContentType" ${selectClassGroupStyle}>     
+           <label for="selectClassGroup">Select content type for the associated page<span class="requiredHint"> *</span></label>
+           
+           <select name="selectClassGroup" id="selectClassGroup">
+               <option value="-1"> </option>
+               <#list classGroups as aClassGroup>
+                    <option value="${aClassGroup.URI}" <#if aClassGroup.URI = associatedPageURI>selected</#if> >${aClassGroup.publicName}</option>
+               </#list>
+           </select>
+       </section> 
+       
+        <#-- Select classes in a class group -->    
         <p id="selectClassesMessage" name="selectClassesMessage">Select content to display</p>
         <section id="classesInSelectedGroup" name="classesInSelectedGroup">
-        	
+            
             <ul id="selectedClasses" name="selectedClasses">
-            <#--Adding a default class for "ALL" in case all classes selected-->
-            <li class="ui-state-default">
+                <#--Adding a default class for "ALL" in case all classes selected-->
+                <li class="ui-state-default">
                     <input type="checkbox" name="allSelected" id="allSelected" value="all" <#if isClassGroupPage = true || includeAllClasses = true>checked</#if> 
                     <label class="inline" for="All"> All</label>
-             </li>
-             <#list classGroup as classInClassGroup>
+                </li>
+                <#list classGroup as classInClassGroup>
                 <li class="ui-state-default">
-                    <input type="checkbox" id="classInClassGroup" name="classInClassGroup" value="${classInClassGroup.URI}" 
-                    	<#if includeAllClasses = true>checked</#if> />
+                    <input type="checkbox" id="classInClassGroup" name="classInClassGroup" value="${classInClassGroup.URI}" <#if includeAllClasses = true>checked</#if> />
                     <label class="inline" for="${classInClassGroup.name}"> ${classInClassGroup.name}</label>
                     <span class="ui-icon-sortable"></span> <#--sortable icon for dragging and dropping menu items-->
                 </li>
-            </#list>
+                </#list>
             </ul>
         </section>
-    	
+        
         <input type="submit" name="submit-${menuAction}" value="Save changes" class="submit" /> or <a class="cancel" href="${formUrls}">Cancel</a>
 
-        <p>* required fields</p>
+        <p class="requiredHint">* required fields</p>
     </form>
 </section>
 
-
 <#-- Add necessary css files associated with this page
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/menupage/menupage.css" />')}-->
 ${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/menupage/testmenupage.css" />')}