--- a/mouchak/static/css/editor.css
+++ b/mouchak/static/css/editor.css
@@ -33,6 +33,8 @@
 }
 #pagelist {
   padding: 10px;
+  height: 300px;
+  overflow-y: auto;
 }
 #content {
   padding: 10px;
@@ -79,7 +81,10 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 500px;
+  height: 300px;
+}
+#updateMenu {
+  margin-top: 10px;
 }
 #editor-overlay {
   position: absolute;
--- a/mouchak/static/js/editor.js
+++ b/mouchak/static/js/editor.js
@@ -10,6 +10,7 @@
       'click #addPage': 'addPage',
       'click .pagename .remove': 'removePage',
       'click #menu-config': 'showMenu',
+      'click #footer-config': 'showFooterConfig'
     },
     initialize: function() {
       _.bindAll.apply(_, [this].concat(_.functions(this)));


@@ -82,8 +83,15 @@
       M.editor.showOverlay();
     },
     showMenu: function(event) {
+      event.preventDefault();
       this.menuconfigview.render();
+      return false;
     },
+    showFooterConfig: function(event) {
+      event.preventDefault();
+      //this.footerconfigview.render();
+      return false;
+    },
     // validate the page list with menu order list
     validate: function()  {
       //TODO: validate if the menu order list matches with the list of pages
@@ -485,7 +493,7 @@
         this.$menuOrder.hide();
         $('#custom-menu').attr('checked', true);
         this.$menuOptions.show({complete: function() {
-          //M.editor.wysiwig('#menu');
+          M.editor.code.init('menu', 'html');
         }});
       }
     },
@@ -493,7 +501,7 @@
     if(bool === true) {
       this.$menuOrder.hide();
       this.$menuOptions.show({complete: function() {
-          //M.editor.wysiwig('#menu');
+          M.editor.code.init('menu', 'html');
         }});
       }
       else {
@@ -514,7 +522,8 @@
     saveMenu: function() {
       //console.log('saving menu..');
       if($('#custom-menu').is(':checked')) {
-        var html = $('#menu').val().trim() || '';
+        //var html = $('#menu').val().trim() || '';
+        var html = M.editor.code.save('menu');
         this.model.set({'customMenu': true, 'html': html});
       }
       else {
@@ -538,6 +547,10 @@
       //alert('end of save menu');
       M.editor.showOverlay();
     }
+  });
+
+  /* Footer Config View */
+  var FooterConfigView = Backbone.View.extend({
   });
 
   /* Notification view */
--- a/mouchak/templates/editor.html
+++ b/mouchak/templates/editor.html
@@ -93,7 +93,7 @@
           </div>
           <div class="row">
             <label><strong> HTML for menu: </strong></label>
-            <textarea class="form-control" cols="25" rows="8" id="menu"><%= menu %></textarea>
+            <div class="ace-mouchak" id="menu"><%= M.escapeHtml(menu) %></div>
           </div>
         </div>
 
@@ -112,7 +112,8 @@
       <div id="pagelist"></div>
       <button class="btn btn-primary" id="addPage">Add Page</button>
       <hr>
-      <p> <a href="javascript:void(0);" id="menu-config"> Site Menu </a> </p>
+      <p> <a href="#" id="menu-config"> Site Menu </a> </p>
+      <p> <a href="#" id="footer-config"> Footer Config </a> </p>
       <p><a href="{{ url_for('index') }}"> Go to site </a></p>
     </div>
   </script>