diff --git a/js/fea/DMASuperCell.js b/js/fea/DMASuperCell.js
index 5cd6f6fbf52630101b61ac77f58047fceefc5db2..3b248259d66b92fcb1320508899ded0c970be27d 100644
--- a/js/fea/DMASuperCell.js
+++ b/js/fea/DMASuperCell.js
@@ -3,10 +3,12 @@
  */
 
 
-var cellMaterials = [new THREE.MeshNormalMaterial()];
+var cellBrassMaterial = [new THREE.MeshLambertMaterial({color:"#b5a642"})];
+var cellFiberGlassMaterial = [new THREE.MeshLambertMaterial({color:"#fef1b5"})];
 
 DMASuperCell = function(length, range, cells){
     var shouldRotate = range.max.x == range.min.x;
+    this.material = dmaGlobals.lattice.get("materialType");
     this.mesh = this._buildSuperCellMesh(length, shouldRotate);
     this.setVisibility(dmaGlobals.appState.get("cellMode")=="cell");
     this.index = _.clone(range.max);
@@ -20,7 +22,9 @@ DMASuperCell.prototype._buildSuperCellMesh = function(length, shouldRotate){
     superCellGeo.applyMatrix(new THREE.Matrix4().makeScale(length, 1, 1));
     superCellGeo.applyMatrix(new THREE.Matrix4().makeTranslation(-(length/2-1/2), 0, 0));
     if (shouldRotate) superCellGeo.applyMatrix(new THREE.Matrix4().makeRotationZ(Math.PI/2));
-    var mesh = THREE.SceneUtils.createMultiMaterialObject(superCellGeo, cellMaterials);
+    var material = cellBrassMaterial;
+    if (this.material == "fiberGlass") material = cellFiberGlassMaterial;
+    var mesh = THREE.SceneUtils.createMultiMaterialObject(superCellGeo, material);
     var wireframe = new THREE.BoxHelper(mesh.children[0]);
     wireframe.material.color.set(0x000000);
     mesh.children.push(wireframe);
@@ -56,4 +60,5 @@ DMASuperCell.prototype.destroy = function(){
     this.cells = null;
     this.mesh = null;
     this.index = null;
+    this.material = null;
 }
\ No newline at end of file
diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js
index a5f14cff207ea548563d15c5026582179de01d44..bbe0e55d42faff495ad65d3b976d43720d7b4e5b 100644
--- a/js/menus/LatticeMenuView.js
+++ b/js/menus/LatticeMenuView.js
@@ -171,7 +171,18 @@ LatticeMenuView = Backbone.View.extend({
         <% } %>\
         <% if (connectionType == "gik") { %>\
         GIK Length:&nbsp;&nbsp;<input id="gikLength" value="<%= gikLength %>" placeholder="GIK length" class="form-control numberInput" type="text"><br/>\
-        <br/><% } %>\
+        <br/>\
+        <% } %>\
+        <% if (allMaterialTypes[cellType][connectionType]){ %> \
+        Material Type: &nbsp;&nbsp;<div class="btn-group">\
+                <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allMaterialTypes[cellType][connectionType][materialType].name %><span class="caret"></span></button>\
+                <ul role="menu" class="dropdown-menu">\
+                    <% _.each(_.keys(allMaterialTypes[cellType][connectionType]), function(key){ %>\
+                        <li><a class="materialType" data-type="<%= key %>" href="#"><%= allMaterialTypes[cellType][connectionType][key].name %></a></li>\
+                    <% }); %>\
+                </ul>\
+            </div><br/><br/>\
+        <% } %>\
         <br/>\
         Scale:&nbsp;&nbsp;<input id="latticeScale" value="<%= scale %>" placeholder="enter scale" class="form-control numberInput" type="text"><br/>\
         <input id="scaleSlider" data-slider-id="ex1Slider" type="text" data-slider-min="1" data-slider-max="100" data-slider-step="0.1" data-slider-value="<%= scale %>"/>\
diff --git a/js/menus/PartMenuView.js b/js/menus/PartMenuView.js
index 75caf4be2ee673f665aee92f2cd2a686ad4269db..dec91a4e96fd2307c83195fa7998f7c39d33935f 100644
--- a/js/menus/PartMenuView.js
+++ b/js/menus/PartMenuView.js
@@ -76,10 +76,10 @@ PartMenuView = Backbone.View.extend({
         <br/><br/>\
         <% if (allMaterialTypes[cellType][connectionType]){ %> \
         Material Type: &nbsp;&nbsp;<div class="btn-group">\
-                <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allMaterialTypes[cellType][connectionType][materialType] %><span class="caret"></span></button>\
+                <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allMaterialTypes[cellType][connectionType][materialType].name %><span class="caret"></span></button>\
                 <ul role="menu" class="dropdown-menu">\
                     <% _.each(_.keys(allMaterialTypes[cellType][connectionType]), function(key){ %>\
-                        <li><a class="materialType" data-type="<%= key %>" href="#"><%= allMaterialTypes[cellType][connectionType][key] %></a></li>\
+                        <li><a class="materialType" data-type="<%= key %>" href="#"><%= allMaterialTypes[cellType][connectionType][key].name %></a></li>\
                     <% }); %>\
                 </ul>\
             </div><br/><br/>\
diff --git a/js/models/AppState.js b/js/models/AppState.js
index d65a195478a0e930008abe1200e3b13ed1457f35..786b499f7eff7406fffa4c5cbf42cc07bba4f20f 100644
--- a/js/models/AppState.js
+++ b/js/models/AppState.js
@@ -105,8 +105,14 @@ AppState = Backbone.Model.extend({
             tetra: {vertex: null},
             cube: {face: null,
                 gik: {
-                    brass:"Brass",
-                    fiberGlass: "Fiberglass"
+                    brass:{
+                        name: "Brass",
+                        color: "#b5a642"
+                    },
+                    fiberGlass: {
+                        name: "Fiberglass",
+                        color: "#fef1b5"
+                    }
                 }
             },
             truncatedCube: {face: null},