diff --git a/css/main.css b/css/main.css
index 502a81c5f327f0faca678691fdfdd7abcb75be08..e6dea43902ad99fe30fff21b864bd0a245e60a72 100644
--- a/css/main.css
+++ b/css/main.css
@@ -278,6 +278,11 @@ input.intInput, input.floatInput{
     width: 47%;
 }
 
+.halfWidth {
+    width: 47%;
+    display: inline-block;
+}
+
 #navRibbon{
     height: 49px;
     width: 270px;
@@ -392,4 +397,11 @@ label.colorSwatches>span.icons{
 .CodeMirror {
     opacity: 0.6;
     margin: 0 20px 0 -10px;
+}
+
+#compositeDisplayColor {
+    width: 100px;
+  height: 40px;
+  display: inline-block;
+  margin: 5px;
 }
\ No newline at end of file
diff --git a/js/cells/supercells/DMASuperCell.js b/js/cells/supercells/DMASuperCell.js
index a0d89863e5c2c6b00b16da61b6321bb94c9f04d3..6c8b8cb4e546303873b7f5705ff3b5993f6a7804 100644
--- a/js/cells/supercells/DMASuperCell.js
+++ b/js/cells/supercells/DMASuperCell.js
@@ -13,7 +13,8 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'cell'],
 
         DMACell.call(this, index, superCell);
 
-        var range = appState.get("superCellRange");
+        var material = this.getMaterial();
+        var range = material.dimensions || appState.get("superCellRange");
         this.cells = this._makeChildCells(range, this.getMaterial());
     
         if (!superCell || superCell === undefined) this.setMode();//don't pass a call down to children again
diff --git a/js/main.js b/js/main.js
index dd462c28c2734e4299b4d891c9a8364f1b5897d1..bcabeb36bddc92bb457f185967585e4bbcc6632d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -98,6 +98,7 @@ require.config({
         camMenu: 'menus/CamMenuView',
         animateMenu: 'menus/AnimationMenuView',
         sendMenu: 'menus/SendMenuView',
+        compositeMenu: 'menus/CompositeMenu',
 
         //stls
         octaFaceTrianglePartSTL: '../assets/stls/parts/OctaFaceTrianglePart.stl',
diff --git a/js/menus/CompositeMenu.js b/js/menus/CompositeMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..8ab79c59b747c4fa59f34c11224666796369712b
--- /dev/null
+++ b/js/menus/CompositeMenu.js
@@ -0,0 +1,50 @@
+/**
+ * Created by aghassaei on 6/10/15.
+ */
+
+define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _, MenuParentView, plist, lattice){
+
+    return MenuParentView.extend({
+
+        events: {
+            "click #newRandomColor":                                "_changeRandomColor"
+        },
+
+        _initialize: function(){
+            this.material = {
+                color: this._makeRandomColor(),
+                dimensions: {x:0,y:0,z:0}
+            }
+        },
+
+        _updateDimensions: function(cells){
+            this.material.dimensions.x = cells.length;
+            this.material.dimensions.y = cells[0].length;
+            this.material.dimensions.z = cells[0][0].length;
+        },
+
+        _changeRandomColor: function(e){
+            e.preventDefault();
+            this.material.color = this._makeRandomColor();
+            this.render();
+        },
+
+        _makeRandomColor: function(){
+            return '#' + Math.floor(Math.random()*16777215).toString(16);
+        },
+
+        _makeTemplateJSON: function(){
+            return _.extend(this.material);
+        },
+
+        template: _.template('\
+            Name: &nbsp;&nbsp;<input value="" placeholder="Enter Name" class="halfWidth form-control" type="text"><br/><br/>\
+            Bounding Box: ()<br/><br/>\
+            Display Color:<br/>\
+            <div style="background-color: <%= color %> ;" id="compositeDisplayColor"></div>\
+            <input value="<%= color %>" placeholder="Enter HEX" class="halfWidth form-control" type="text"><br/>\
+            <a id="newRandomColor" href="#" class="btn btn-block btn-lg btn-default">New Random Color</a><br/>\
+            ')
+
+    });
+});
\ No newline at end of file
diff --git a/js/menus/MaterialMenuView.js b/js/menus/MaterialMenuView.js
index 432875acea5dda8c2a5822ecf25cebd0501f5196..bc2654d6b3a7f383493f09396dbb0c50a8df5406 100644
--- a/js/menus/MaterialMenuView.js
+++ b/js/menus/MaterialMenuView.js
@@ -53,7 +53,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             <% } %>\
             <br/><br/>\
             Composite Materials:<br/><br/>\
-            <a href="#" class="btn btn-block btn-lg btn-default">+ Create New Composite Material</a><br/>\
+            <a id="navToCompositeMenu" href="#" class="btn btn-block btn-lg btn-default">+ Create New Composite Material</a><br/>\
             ')
 
     });
diff --git a/js/models/AppState.js b/js/models/AppState.js
index 41971c24d02459825094ed8e2343bc200e599205..4154fb40af6095406252e43cf0910f011daca1b8 100644
--- a/js/models/AppState.js
+++ b/js/models/AppState.js
@@ -14,8 +14,7 @@ define(['underscore', 'backbone', 'threeModel', 'three', 'plist'], function(_, B
             currentNav:"navDesign",// design, sim, assemble
             currentTab:"lattice",
 
-            //last tab that one open in each of the main menus
-            lastNavTab: {},
+            lastNavTab: {},//last tab that one open in each of the main menus
 
             menuIsVisible: true,
             scriptIsVisible: false,
@@ -141,6 +140,7 @@ define(['underscore', 'backbone', 'threeModel', 'three', 'plist'], function(_, B
                 case 8://delete key - causes back nav in chrome, super annoying
                     e.preventDefault();
                     e.stopPropagation();
+                    break;
                 case 16://shift
     //                this.set("shift", state);
                     break;