diff --git a/css/main.css b/css/main.css
index f84278efa8d161106b0618e24aa209c7ccd6e128..13487c6bbaa0ef7ee00fe2f05b3ece4d17fd3215 100644
--- a/css/main.css
+++ b/css/main.css
@@ -250,7 +250,7 @@ input.numberInput{
 
 #navRibbon{
     height: 49px;
-    width: 320px;
+    width: 370px;
     z-index: 1;
     display: block;
     position: absolute;
@@ -272,11 +272,15 @@ input.numberInput{
     height: 49px;
 }
 
+.btn-ribbon span{
+    font-size: 28px!important;
+    display: block;
+    margin-top: 4px!important;
+    color: #7C7B7B;
+}
+
 .fui-cross{
-  font-size: 28px!important;
-  display: block;
-  margin-top: 4px!important;
-  color: #B50303;
+  color: #B50303!important;
 }
 
 .ribbon-selected {
diff --git a/js/menus/Ribbon.js b/js/menus/Ribbon.js
index 4c269fa9420baaff192434b3b53d7280e727b8c3..e811836d587cf7f6e123afa33e0d2ef01d12c044 100644
--- a/js/menus/Ribbon.js
+++ b/js/menus/Ribbon.js
@@ -10,7 +10,8 @@ Ribbon = Backbone.View.extend({
     events: {
         "click .cellModeBtn":                                    "_updateCellMode",
         "click .deleteMode":                                     "_updateDeleteMode",
-        "click .highlightMode":                                  "_updateHighlightMode"
+        "click .highlightMode":                                  "_updateHighlightMode",
+        "click .cellsVisible":                                   "_updateVisibility"
     },
 
     initialize: function(){
@@ -20,6 +21,7 @@ Ribbon = Backbone.View.extend({
         this.listenTo(this.model, "change:cellMode", this.render);
         this.listenTo(this.model, "change:deleteMode", this.render);
         this.listenTo(this.model, "change:highlightMode", this.render);
+        this.listenTo(this.model, "change:cellsVisible", this.render);
         this.listenTo(dmaGlobals.lattice, "change:cellType change:connectionType", this.render);
         this.render();
     },
@@ -39,6 +41,11 @@ Ribbon = Backbone.View.extend({
         dmaGlobals.appState.set("highlightMode", !dmaGlobals.appState.get("highlightMode"));
     },
 
+    _updateVisibility: function(e){
+        e.preventDefault();
+        dmaGlobals.appState.set("cellsVisible", !dmaGlobals.appState.get("cellsVisible"));
+    },
+
     render: function(){
         this.$el.html(this.template(_.extend(dmaGlobals.lattice.toJSON(), this.model.toJSON())));
     },
@@ -50,6 +57,7 @@ Ribbon = Backbone.View.extend({
               <% if (allPartTypes[cellType][connectionType]){ %>\
               <a data-type="part" class="btn btn-primary btn-ribbon cellModeBtn<% if (cellMode == "part"){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/part-sm.png"></a>\
               <% } %>\
+              <a class="btn btn-primary btn-ribbon cellsVisible<% if (cellsVisible){ %> ribbon-selected<% } %>" href="#"><span class="fui-eye"></span></a>\
               <a class="btn btn-primary btn-ribbon highlightMode<% if (highlightMode){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/cursor-light.png"></a>\
               <a class="btn btn-primary btn-ribbon deleteMode<% if (deleteMode){ %> ribbon-selected"<% } %>"><span class="fui-cross"></span></a>\
             </div>\
diff --git a/js/models/AppState.js b/js/models/AppState.js
index e1b81f50b3ac9d5ba6b7f4575cd08302dd217282..595c0743052c0eb9fe0a2d23542f637d6882f997 100644
--- a/js/models/AppState.js
+++ b/js/models/AppState.js
@@ -138,6 +138,7 @@ AppState = Backbone.Model.extend({
         highlightMode: true,
         extrudeMode: false,
         cellMode: "cell",//show cells vs part
+        cellsVisible: true,
 
         stockSimulationPlaying: false,
         manualSelectOrigin: false//mode that allows user ot select origin from existing cell
diff --git a/js/models/Lattice.js b/js/models/Lattice.js
index a1eb829e03e2d56c5f84ee096212209cf61d1729..a05b3f3a81a5e687a079b9ad28cf35b0bd837d6f 100644
--- a/js/models/Lattice.js
+++ b/js/models/Lattice.js
@@ -39,6 +39,7 @@ Lattice = Backbone.Model.extend({
         this.listenTo(this, "change:partType", this._updatePartType);
         this.listenTo(this, "change:cellType change:connectionType", this._updateLatticeType);
         this.listenTo(this, "change:cellSeparation", this._updateCellSeparation);
+        this.listenTo(options.appState, "change:cellsVisible", this._setCellVisibility);
     },
 
     delayedInit: function(){
@@ -352,6 +353,11 @@ Lattice = Backbone.Model.extend({
         this.get("basePlane").updateScale(scale);
     },
 
+    _setCellVisibility: function(){//todo maybe leave wireframes?
+        if (dmaGlobals.appState.get("cellsVisible")) this.showCells();
+        else this.hideCells();
+    },
+
     //hide show cells during stock simulation
     hideCells: function(){
         this._iterCells(this.get("cells"), function(cell){