diff --git a/assets/cell-lg.png b/assets/cell-lg.png
new file mode 100644
index 0000000000000000000000000000000000000000..6b426fba801e916a97741772ac9e962fa2001701
Binary files /dev/null and b/assets/cell-lg.png differ
diff --git a/assets/cell-sm.png b/assets/cell-sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..2eec91c2f9c50fbc102fdefd511e93e8f78a1799
Binary files /dev/null and b/assets/cell-sm.png differ
diff --git a/assets/part-lg.png b/assets/part-lg.png
new file mode 100644
index 0000000000000000000000000000000000000000..230fff675af813321f2d0b00108be77992c9c32e
Binary files /dev/null and b/assets/part-lg.png differ
diff --git a/assets/part-sm.png b/assets/part-sm.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a30551d50b5a22138c66aeff569128037383cab
Binary files /dev/null and b/assets/part-sm.png differ
diff --git a/css/main.css b/css/main.css
index 31db838ebc065303ed860a1d3782c0f23d5dd4dd..62873606d8b7d967a4616fb53fcb8b8db28c867d 100644
--- a/css/main.css
+++ b/css/main.css
@@ -265,7 +265,7 @@ input.numberInput{
 }
 
 #navRibbon{
-    height: 30px;
+    height: 49px;
     width: 300px;
     z-index: 1;
     display: block;
@@ -284,6 +284,11 @@ input.numberInput{
 
 #navRibbon .btn-ribbon{
     background-color: #444;
+    padding: 5px 10px;
+}
+
+.ribbon-selected {
+    background-color: #000!important;
 }
 
 #navRibbon .btn-ribbon:hover{
diff --git a/js/menus/Ribbon.js b/js/menus/Ribbon.js
index 775938a651a1abc385bffc9bd7abdcec95e6552c..7a3453628870e8cae3c97a5baaebe827211b609b 100644
--- a/js/menus/Ribbon.js
+++ b/js/menus/Ribbon.js
@@ -8,7 +8,7 @@ Ribbon = Backbone.View.extend({
     el: "#navRibbon",
 
     events: {
-        "click #cellModeToggle":                                    "_toggleCellMode"
+        "click .cellModeBtn":                                    "_updateCellMode"
     },
 
     initialize: function(){
@@ -19,14 +19,9 @@ Ribbon = Backbone.View.extend({
         this.render();
     },
 
-    _toggleCellMode: function(e){
+    _updateCellMode: function(e){
         e.preventDefault();
-        var currentState = dmaGlobals.appState.get("cellMode");
-        var nextState = "cell";
-        if (currentState == "cell"){
-            nextState = "part";
-        }
-        dmaGlobals.appState.set("cellMode", nextState);
+        dmaGlobals.appState.set("cellMode", $(e.target).data("type"));
     },
 
     render: function(){
@@ -36,7 +31,8 @@ Ribbon = Backbone.View.extend({
     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>\
+              <a class="btn btn-primary btn-ribbon cellModeBtn<% if (cellMode == "cell"){ %> ribbon-selected"<% } %> href="#"><img data-type="cell" src="assets/cell-sm.png"></a>\
+              <a class="btn btn-primary btn-ribbon cellModeBtn<% if (cellMode == "part"){ %> ribbon-selected"<% } %> href="#"><img data-type="part" src="assets/part-sm.png"></a>\
             </div>\
         </div>\
         ')