diff --git a/css/main.css b/css/main.css
index a50982c9d7e3cf262f895c931f404675fcea6d57..55dc09fa498dab77d3e3c61543feb8de7bc138ab 100644
--- a/css/main.css
+++ b/css/main.css
@@ -262,4 +262,30 @@ input.numberInput{
 
 .btn-halfWidth {
     width: 47%;
+}
+
+#navRibbon{
+    height: 30px;
+    width: 300px;
+    z-index: 1;
+    display: block;
+    position: absolute;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    bottom: 35px;
+    opacity: 0.75;
+}
+#navRibbon .btn-toolbar{
+    margin: 0 50px;
+    left: 0;
+    right: 0;
+}
+
+#navRibbon .btn-ribbon{
+    background-color: #444;
+}
+
+#navRibbon .btn-ribbon:hover{
+    background-color: #000;
 }
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 09de1c03ab10271391f5aa3411bb2e1acafb729b..bade9628c1c9aea127305b7491c1be32908cf1d1 100644
--- a/js/main.js
+++ b/js/main.js
@@ -23,6 +23,7 @@ $(function(){
 
     //ui
     new NavBar({model:dmaGlobals.appState});
+    new Ribbon({model:dmaGlobals.appState});
 
     //threeJS View
     new ThreeView({model:dmaGlobals.three, appState:dmaGlobals.appState});
diff --git a/js/menus/Ribbon.js b/js/menus/Ribbon.js
new file mode 100644
index 0000000000000000000000000000000000000000..775938a651a1abc385bffc9bd7abdcec95e6552c
--- /dev/null
+++ b/js/menus/Ribbon.js
@@ -0,0 +1,44 @@
+/**
+ * Created by fab on 3/18/15.
+ */
+
+
+Ribbon = Backbone.View.extend({
+
+    el: "#navRibbon",
+
+    events: {
+        "click #cellModeToggle":                                    "_toggleCellMode"
+    },
+
+    initialize: function(){
+
+        _.bindAll(this, "render");
+
+        this.listenTo(this.model, "change:cellMode", this.render);
+        this.render();
+    },
+
+    _toggleCellMode: function(e){
+        e.preventDefault();
+        var currentState = dmaGlobals.appState.get("cellMode");
+        var nextState = "cell";
+        if (currentState == "cell"){
+            nextState = "part";
+        }
+        dmaGlobals.appState.set("cellMode", nextState);
+    },
+
+    render: function(){
+        this.$el.html(this.template(this.model.toJSON()));
+    },
+
+    template: _.template('\
+        <div class="btn-toolbar">\
+            <div class="btn-group">\
+              <a id="cellModeToggle" class="btn btn-primary btn-ribbon" href="#fakelink">toggle cell/part view</a>\
+            </div>\
+        </div>\
+        ')
+
+});
\ No newline at end of file
diff --git a/main.html b/main.html
index afb20398ecbfb358e7407af2e1904477a3f0b64d..e35761c11f870fd29de8ab4c92553c930e9ca537 100644
--- a/main.html
+++ b/main.html
@@ -71,6 +71,7 @@
     <!--views-->
     <script src="js/menus/MenuWrapperView.js"></script>
     <script src="js/menus/Navbar.js"></script>
+    <script src="js/menus/Ribbon.js"></script>
     <script src="js/menus/LatticeMenuView.js"></script>
     <script src="js/menus/ImportMenuView.js"></script>
     <script src="js/menus/PartMenuView.js"></script>
@@ -171,14 +172,7 @@
 </div>
 
 <div id="menuWrapper"><div id="menuHeader"></div><div id="menuContent"></div></div>
-
-<div id="about" class="row navMenu">
-    <div class="row demo-row">
-        <div class="col-xs-3">
-           Latest code available on github
-        </div>
-    </div>
-</div>
+<div id="navRibbon"></div>
 
 <div id="threeContainer"></div>