diff --git a/css/main.css b/css/main.css
index 4aa6ef33891624346eb950d35285a1e2ad0f2332..e01894d4a0831844f02aa81715c1719b058b6d86 100644
--- a/css/main.css
+++ b/css/main.css
@@ -199,7 +199,8 @@ input.intInput, input.floatInput{
 
 
 .navbar-nav > .open > .dropdown-menu{
-    padding: 3px 0!important;
+    padding: 0!important;
+    min-width: 150px;
 }
 
 .divider{
@@ -359,6 +360,6 @@ label.colorSwatches>span.icons{
     margin: 5px 0;
 }
 
-#navViewMenu span{
+#navViewMenu .dropdown-menu span{
     margin-right:10px;
 }
\ No newline at end of file
diff --git a/js/menus/NavViewMenu.js b/js/menus/NavViewMenu.js
index 9ed889fd729cdf1069a3059ac986dde53fb376d8..17ad9b7a7f97a9f0d39cae64df2bc17089d6ada3 100644
--- a/js/menus/NavViewMenu.js
+++ b/js/menus/NavViewMenu.js
@@ -49,17 +49,32 @@ NavViewMenu = Backbone.View.extend({
     },
 
     template: _.template('\
-        <li><a class="appState boolProperty" data-property="menuIsVisible" href="#">Menu</a></li>\
-        <li><a class="appState boolProperty" data-property="scriptIsVisible" href="#">Script</a></li>\
-        <li><a class="appState boolProperty" data-property="consoleIsVisible" href="#">Console</a></li>\
-        <li class="divider"></li>\
-        <li><a class="appState boolProperty" data-property="renderAmbientOcclusion" href="#">Ambient Occlusion</a></li>\
-        <li><a class="appState boolProperty" data-property="realisticColorScheme" href="#">Realistic Color Scheme</a></li>\
-        <li><a class="appState boolProperty" data-property="basePlaneIsVisible" href="#">BasePlane</a></li>\
-        <li><a class="appState boolProperty" data-property="highlighterIsVisible" href="#">Hover Tool</a></li>\
-        <li class="divider"></li>\
-        <li><a class="appState boolProperty" data-property="axesAreVisible" href="#">Axes</a></li>\
-        <li><a id="reset3DView" href="#">Reset 3D Navigation</a></li>\
+        <li class="dropdown-submenu">\
+        <a tabindex="-1">UI<span class="pull-right fui-arrow-right"></span></a>\
+        <ul class="dropdown-menu">\
+            <li><a class="appState boolProperty" data-property="menuIsVisible" href="#">Menu</a></li>\
+            <li><a class="appState boolProperty" data-property="scriptIsVisible" href="#">Script</a></li>\
+            <li><a class="appState boolProperty" data-property="consoleIsVisible" href="#">Console</a></li>\
+            <li><a class="appState boolProperty" data-property="ribbonIsVisible" href="#">Ribbon</a></li>\
+        </ul></li>\
+        <li class="dropdown-submenu">\
+        <a tabindex="-1">3D UI<span class="pull-right fui-arrow-right"></span></a>\
+        <ul class="dropdown-menu">\
+            <li><a class="appState boolProperty" data-property="basePlaneIsVisible" href="#">Sketch Plane</a></li>\
+            <li><a class="appState boolProperty" data-property="highlighterIsVisible" href="#">Hover Tool</a></li>\
+        </ul></li>\
+        <li class="dropdown-submenu">\
+        <a tabindex="-1">Rendering<span class="pull-right fui-arrow-right"></span></a>\
+        <ul class="dropdown-menu">\
+            <li><a class="appState boolProperty" data-property="renderAmbientOcclusion" href="#">Ambient Occlusion</a></li>\
+            <li><a class="appState boolProperty" data-property="realisticColorScheme" href="#">Realistic Color Scheme</a></li>\
+        </ul></li>\
+        <li class="dropdown-submenu">\
+        <a tabindex="-1">3D<span class="pull-right fui-arrow-right"></span></a>\
+        <ul class="dropdown-menu">\
+            <li><a class="appState boolProperty" data-property="axesAreVisible" href="#">Axes</a></li>\
+            <li><a id="reset3DView" href="#">Reset 3D Navigation</a></li>\
+        </ul></li>\
         ')
 
 });
\ No newline at end of file
diff --git a/js/menus/Ribbon.js b/js/menus/Ribbon.js
index 0fe3524212a3e4074e379d27034d42b8a2402aee..e1d224a35f563ad4ec2a938215b2f400a66850d4 100644
--- a/js/menus/Ribbon.js
+++ b/js/menus/Ribbon.js
@@ -11,13 +11,14 @@ Ribbon = Backbone.View.extend({
         "click .ribbonCellMode":                                 "_updateCellMode",
         "click .ribbonDeleteMode":                               "_updateDeleteMode",
         "click .highlightMode":                                  "_updateHighlightMode",
-        "click .cellsVisible":                                   "_updateVisibility"
+        "click .cellsVisible":                                   "_updateCellVisibility"
     },
 
     initialize: function(){
 
         _.bindAll(this, "render");
 
+        this.listenTo(this.model, "change:ribbonIsVisible", this._changeVisibility);
         this.listenTo(this.model, "change:cellMode", this.render);
         this.listenTo(this.model, "change:deleteMode", this.render);
         this.listenTo(this.model, "change:highlightMode", this.render);
@@ -41,11 +42,17 @@ Ribbon = Backbone.View.extend({
         globals.appState.set("highlightMode", !globals.appState.get("highlightMode"));
     },
 
-    _updateVisibility: function(e){
+    _updateCellVisibility: function(e){
         e.preventDefault();
         globals.appState.set("cellsVisible", !globals.appState.get("cellsVisible"));
     },
 
+    _changeVisibility: function(){
+        var state = this.model.get("ribbonIsVisible");
+        if (state) this.$el.show();
+        else this.$el.hide();
+    },
+
     render: function(){
         this.$el.html(this.template(_.extend(globals.lattice.toJSON(), this.model.toJSON(), globals.plist)));
     },
diff --git a/js/models/AppState.js b/js/models/AppState.js
index f30381348316ca97d5d8ce9e33f4edd4d186a9f5..cfa6390b3aa83684b3f927fc7ff7b970e8ed2140 100644
--- a/js/models/AppState.js
+++ b/js/models/AppState.js
@@ -20,6 +20,7 @@ AppState = Backbone.Model.extend({
         menuIsVisible: true,
         scriptIsVisible: false,
         consoleIsVisible: false,
+        ribbonIsVisible: true,
 
         basePlaneIsVisible:true,
         highlighterIsVisible:true,