diff --git a/css/main.css b/css/main.css
index e6dea43902ad99fe30fff21b864bd0a245e60a72..7be3ac5fb19d665bf2488a1f7f0fe99d8500019a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -378,6 +378,7 @@ label {
     height: 30px;
     display: inline-block;
     margin-right: 10px;
+    border-radius: 3px;
 }
 
 .materialColorSwatch>span{
@@ -398,10 +399,3 @@ label.colorSwatches>span.icons{
     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/lattice/CompositeEditorLattice.js b/js/lattice/CompositeEditorLattice.js
index 4cfc745e4f0f8e234bbe54d434abb9f0696d8f60..71262137ca25e1ce7aa814b2beb32f0580e9b7be 100644
--- a/js/lattice/CompositeEditorLattice.js
+++ b/js/lattice/CompositeEditorLattice.js
@@ -7,30 +7,45 @@ define(['underscore', 'backbone', 'appState', 'lattice', 'globals', 'plist', 'th
     function(_, Backbone, appState, lattice, globals, plist, THREE, three){
 
     var defaults = {
-        compositeCells:[[[null]]],
-        compositeColor: null
+        compositeColor: makeRandomColor(),
+        numCompositeCells:0,
+        compositeCellsMin: null,
+        compositeCellsMax: null
     };
 
+    function makeRandomColor(){
+        return '#' + Math.floor(Math.random()*16777215).toString(16);
+    }
+
     var CompositeEditorLattice = {
 
 
 
         _initCompositeEditor: function(){
 
+            var self = this;
             _.each(_.keys(defaults), function(key){
-                this.set(key, defaults[key], {silent:true});
+                self.set(key, defaults[key], {silent:true});
             });
 
+            this.compositeCells = [[[null]]];
+
+        },
+
+        _changeRandomColor: function(){
+            this.set("compositeColor", makeRandomColor());
         },
 
         _undoCompositeEditor: function(){
+            console.log("undo");
             var self = this;
             _.each(_.keys(CompositeEditorLattice), function(key){
                 self[key] = null;
             });
             _.each(_.keys(defaults), function(key){
-                this.unset(key, defaults[key], {silent:true});
+                self.unset(key, {silent:true});
             });
+            this.compositeCells = null;
         }
     };
 
diff --git a/js/lattice/Lattice.js b/js/lattice/Lattice.js
index f3a25d9dbf9f066125cbcc343325cdc8ce90b345..2f35c19c8cdd55f3d63e1c009a2e7f2a39317e88 100644
--- a/js/lattice/Lattice.js
+++ b/js/lattice/Lattice.js
@@ -44,6 +44,8 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
 
             this.listenTo(this, "change:materialClass", this._loadMaterialClass);
 
+            this.listenTo(appState, "change:currentNav", this._navChanged);
+
             this._updateLatticeType(false);
 
             appState.setLattice(this);
@@ -325,6 +327,21 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
 
 
 
+        //composite Cells
+
+        setToCompositeMode: function(callback){
+            var self = this;
+            require(['compositeEditorLattice'], function(CompositeEditorLattice){
+                _.extend(self, CompositeEditorLattice);
+                self._initCompositeEditor();
+                if (callback) callback();
+            });
+        },
+
+
+
+
+
         //events
 
         _updatePartType: function(){
@@ -393,6 +410,11 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             });
         },
 
+        _navChanged: function(){
+            var currentNav = appState.get("currentNav");
+            if (currentNav != "navComposite" && this._undoCompositeEditor) this._undoCompositeEditor();
+        },
+
 
 
 
diff --git a/js/main.js b/js/main.js
index bcabeb36bddc92bb457f185967585e4bbcc6632d..d930f73df6405fd0d92be6df438a90e51164592c 100644
--- a/js/main.js
+++ b/js/main.js
@@ -38,6 +38,7 @@ require.config({
         truncatedCubeLattice: 'lattice/TruncatedCubeLattice',
         tetraStackedLattice: 'lattice/TetraStackedLattice',
         tetraVertexLattice: 'lattice/TetraVertexLattice',
+        compositeEditorLattice: 'lattice/CompositeEditorLattice',
 
         //baseplane
         baseplane: 'baseplane/BasePlane',
diff --git a/js/menus/CompositeMenu.js b/js/menus/CompositeMenu.js
index 716fb25b15ae9de0c2615821f13f98ec4269ddf3..0557449adc1606015dbb9e16975e8f68e855c0a1 100644
--- a/js/menus/CompositeMenu.js
+++ b/js/menus/CompositeMenu.js
@@ -14,10 +14,8 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
         },
 
         _initialize: function(){
-            this.material = {
-                color: this._makeRandomColor(),
-                dimensions: {x:0,y:0,z:0}
-            }
+
+            this.listenTo(lattice, "change", this.render);
         },
 
         _updateDimensions: function(cells){
@@ -28,12 +26,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
 
         _changeRandomColor: function(e){
             e.preventDefault();
-            this.material.color = this._makeRandomColor();
-            this.render();
-        },
-
-        _makeRandomColor: function(){
-            return '#' + Math.floor(Math.random()*16777215).toString(16);
+            lattice._changeRandomColor();
         },
 
         _finishComposite: function(e){
@@ -52,7 +45,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
         },
 
         _makeTemplateJSON: function(){
-            return _.extend(this.material);
+            return _.extend(lattice.toJSON());
         },
 
         template: _.template('\
@@ -61,8 +54,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             Name: &nbsp;&nbsp;<input value="" placeholder="Enter Name" class="halfWidth form-control" type="text"><br/><br/>\
             Bounding Box: ()<br/><br/>\
             Display Color: &nbsp;&nbsp;\
-            <!--<div style="background-color: <%= color %> ;" id="compositeDisplayColor"></div>-->\
-            <input style="border-color: <%= color %> ;" value="<%= color %>" placeholder="Enter HEX" class="halfWidth form-control" type="text"><br/><br/>\
+            <input style="border-color: <%= compositeColor %> ;" value="<%= compositeColor %>" placeholder="Enter HEX" class="halfWidth form-control" type="text"><br/><br/>\
             <a id="newRandomColor" href="#" class="btn btn-block btn-lg btn-default">New Random Color</a><br/><br/>\
             <a id="finishComposite" href="#" class="btn btn-halfWidth btn-lg btn-success">Finish Composite</a>\
             <a id="cancelComposite" href="#" class="btn btn-halfWidth pull-right btn-lg btn-default">Cancel / Exit</a><br/>\
diff --git a/js/menus/MaterialMenuView.js b/js/menus/MaterialMenuView.js
index bc2654d6b3a7f383493f09396dbb0c50a8df5406..16f389c0815ef8c85d897cfe6c7a19de0d7596aa 100644
--- a/js/menus/MaterialMenuView.js
+++ b/js/menus/MaterialMenuView.js
@@ -18,7 +18,11 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
 
         _navToCompositeMenu: function(e){
             e.preventDefault();
-            this.model.set("currentNav", "navComposite");
+            var self = this;
+            lattice.setToCompositeMode(function(){
+                self.model.set("currentNav", "navComposite");
+            });
+
         },
 
         _makeTemplateJSON: function(){