diff --git a/js/lattice/CompositeEditorLattice.js b/js/lattice/CompositeEditorLattice.js
index fa56e321ec8f8e9a6adc05c6e0a3512afd20b7e5..de70a7aba06d6641f5c8a981444db63808889cf1 100644
--- a/js/lattice/CompositeEditorLattice.js
+++ b/js/lattice/CompositeEditorLattice.js
@@ -18,11 +18,11 @@ define(['underscore', 'backbone', 'appState', 'lattice', 'globals', 'plist', 'th
         _initCompositeEditor: function(id, data){
 
             _.extend(defaults, {
-                compositeId: "composite" + compositeId++,//todo real unique id
+                compositeId: "composite"+compositeId++,//todo real unique id
                 compositeColor: makeRandomColor(),
-                numCompositeCells:0,
-                compositeCellsMin: null,
-                compositeCellsMax: null
+                numCompositeCells:2,
+                compositeCellsMin: new THREE.Vector3(0,0,0),//null,
+                compositeCellsMax: new THREE.Vector3(2,4,5)//null
             });
 
             var self = this;
@@ -55,16 +55,16 @@ define(['underscore', 'backbone', 'appState', 'lattice', 'globals', 'plist', 'th
                 color: this.get("compositeColor"),
                 altColor: this.get("compositeColor"),
                 numCells: this.get("numCompositeCells"),
-                cells: JSON.stringify(this.get("compositeCells")),
+                cells: JSON.parse(JSON.stringify(this.compositeCells)),
                 cellsMin: this.get("compositeCellsMin").clone(),
                 cellsMax: this.get("compositeCellsMax").clone(),
-                dimensions: new THREE.Vector3.subVectors(this.get("compositeCellsMax"), this.get("compositeCellsMin"))
+                dimensions: new THREE.Vector3().subVectors(this.get("compositeCellsMax"), this.get("compositeCellsMin"))
             };
-            globals.materials.id = data;//todo trigger change on all instances
+            globals.materials.compositeMaterials[id] = data;//todo trigger change on all instances
+            console.log(data);
         },
 
         _undoCompositeEditor: function(){
-            console.log("undo");
             var self = this;
             _.each(_.keys(CompositeEditorLattice), function(key){
                 self[key] = null;
@@ -73,7 +73,6 @@ define(['underscore', 'backbone', 'appState', 'lattice', 'globals', 'plist', 'th
                 self.unset(key, {silent:true});
             });
             this.compositeCells = null;
-            console.log("done undo");
         }
     };
 
diff --git a/js/menus/CompositeMenu.js b/js/menus/CompositeMenu.js
index 00854a7731ace59bade96a358a8d26217299472c..1ca1b9aae58ecc2540eefb4e0b79230610af07e2 100644
--- a/js/menus/CompositeMenu.js
+++ b/js/menus/CompositeMenu.js
@@ -31,8 +31,8 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
 
         _finishComposite: function(e){
             e.preventDefault();
-            console.log("here");
-            lattice.makeNewCompositeMaterial();
+            this.stopListening();
+            lattice.makeNewCompositeMaterial($("#compositeName").val());
             this.model.set("currentNav", "navDesign");
         },
 
@@ -53,7 +53,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
         template: _.template('\
             <a href="#" class="btn btn-halfWidth btn-lg btn-default importJSON">Load Composite</a>\
             <a id="saveComposite" href="#" class="btn btn-halfWidth btn-lg pull-right btn-default">Save Composite</a><br/><br/>\
-            Name: &nbsp;&nbsp;<input value="" placeholder="Enter Name" class="halfWidth form-control" type="text"><br/><br/>\
+            Name: &nbsp;&nbsp;<input id="compositeName" value="" placeholder="Enter Name" class="halfWidth form-control" type="text"><br/><br/>\
             Bounding Box: ()<br/><br/>\
             Display Color: &nbsp;&nbsp;\
             <input style="border-color: <%= compositeColor %> ;" value="<%= compositeColor %>" placeholder="Enter HEX" class="halfWidth form-control" type="text"><br/><br/>\
diff --git a/js/menus/MaterialMenuView.js b/js/menus/MaterialMenuView.js
index 16f389c0815ef8c85d897cfe6c7a19de0d7596aa..f70c47ed5d7d6c140dc7f8120575c47d83a9c846 100644
--- a/js/menus/MaterialMenuView.js
+++ b/js/menus/MaterialMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 2/25/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _, MenuParentView, plist, lattice){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'globals'], function($, _, MenuParentView, plist, lattice, globals){
 
     return MenuParentView.extend({
 
@@ -26,7 +26,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
         },
 
         _makeTemplateJSON: function(){
-            return _.extend(lattice.toJSON(), this.model.toJSON(), plist);
+            return _.extend(lattice.toJSON(), this.model.toJSON(), plist, globals);
         },
 
         template: _.template('\
@@ -56,7 +56,15 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             Use realistic color scheme</label>\
             <% } %>\
             <br/><br/>\
-            Composite Materials:<br/><br/>\
+            Composite Materials:<br/>\
+            <% _.each(_.keys(materials.compositeMaterials), function(key){ %>\
+            <label class="radio colorSwatches">\
+                <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio lattice"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
+                <div class="materialColorSwatch">\
+                <div style="background-color:<% if(realisticColorScheme){ %><%= materials.compositeMaterials[key].color %><% }else{ %><%= materials.compositeMaterials[key].altColor %><% } %>"></div>\
+                <span><%= materials.compositeMaterials[key].name %></span></div>\
+            </label>\
+            <% }); %><br/>\
             <a id="navToCompositeMenu" href="#" class="btn btn-block btn-lg btn-default">+ Create New Composite Material</a><br/>\
             ')
 
diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js
index cbb18fa57d6e659cb9ec84bf179284b4d00594da..76ff4bbe744594996b322c85b068729bca7c3013 100644
--- a/js/menus/MenuWrapperView.js
+++ b/js/menus/MenuWrapperView.js
@@ -27,7 +27,10 @@ define(['jquery', 'underscore', 'plist', 'backbone', 'lattice'], function($, _,
             //bind events
             this.listenTo(this.model, "change:currentNav", this.render);
             this.listenTo(lattice, "change:cellType change:connectionType", this._populateAndShow);
-            this.listenTo(this.model, "change:currentTab", this._updateCurrentTab);
+            this.listenTo(this.model, "change:currentTab", function(){
+                if (!this.model.changedAttributes() || this.model.changedAttributes()["currentNav"]) return;
+                this._updateCurrentTab();
+            });
             this.listenTo(this.model, "change:menuIsVisible", this._setVisibility);
 
             if (this.model.get("menuIsVisible")) this._populateAndShow();
diff --git a/js/models/Globals.js b/js/models/Globals.js
index bb1c06b586e0a4a857872601988ce98357e04654..a60ec65aa6fcc901ddd4ace8e5bdbd4a873c702f 100644
--- a/js/models/Globals.js
+++ b/js/models/Globals.js
@@ -7,7 +7,8 @@
 define(['underscore', 'three'], function(_, THREE){
 
     var materials = {
-        deleteMaterial: new THREE.MeshLambertMaterial({color:"#ff0000", shading:THREE.FlatShading})
+        deleteMaterial: new THREE.MeshLambertMaterial({color:"#ff0000", shading:THREE.FlatShading}),
+        compositeMaterials: {}
     };
 
     return {