diff --git a/js/cells/CubeCell.js b/js/cells/CubeCell.js
index ff808f388f58590c312b7cc98f56d23908f035c7..5dee4090af8cffbb870ef5633068d3b93c5e3a3e 100644
--- a/js/cells/CubeCell.js
+++ b/js/cells/CubeCell.js
@@ -6,7 +6,7 @@
 define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'cell'],
     function(_, THREE, three, lattice, appState, DMACell){
 
-    var unitCellGeo = new THREE.BoxGeometry(1,1,1);
+    var unitCellGeo = new THREE.BoxGeometry(lattice.xScale(0),lattice.yScale(0),lattice.zScale(0));
 
     function CubeCell(index, superCell){
         DMACell.call(this, index, superCell);
diff --git a/js/cells/DMACell.js b/js/cells/DMACell.js
index cdad1a395f9aa10ad888baa1615914dc88373505..5f53be34550ed71f073ec59bbdcff41846f0275d 100644
--- a/js/cells/DMACell.js
+++ b/js/cells/DMACell.js
@@ -8,11 +8,12 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'globals'],
 
     var wireframeMaterial = new THREE.MeshBasicMaterial({color:0x000000, wireframe:true});
 
-    function DMACell(index, superCell){
+    function DMACell(index, superCell, material){
 
         if (index) this.index = new THREE.Vector3(index.x, index.y, index.z);
         if (superCell) this.superCell = superCell;
-        if (!this.cells) this.material = lattice.get("materialType");
+
+        this.material = material || lattice.get("materialType");
 
         //object 3d is parent to all 3d elements owned by cell: cell mesh and wireframe, parts, beams, nodes, etc
         this.object3D = this._buildObject3D();
diff --git a/js/cells/supercells/DMASuperCell.js b/js/cells/supercells/DMASuperCell.js
index c1ff7b5a4aacda019794b0e7ec70ee19bc5481ee..42fdec52c4a52d3ede0289e4f6da6b28ffda6bd7 100644
--- a/js/cells/supercells/DMASuperCell.js
+++ b/js/cells/supercells/DMASuperCell.js
@@ -7,36 +7,35 @@
 define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'cell'],
     function(_, THREE, three, lattice, appState, DMACell){
 
-    function DMASuperCell(index, material, superCell){//supercells might have supercells
+    function DMASuperCell(index, superCell){//supercells might have supercells
 
-        var range = lattice.get("superCellRange");
-        this.cells = this._makeChildCells(index, range);//todo three dimensional array?
         DMACell.call(this, index, superCell);
+
+        var range = appState.get("superCellRange");
+        this.cells = this._makeChildCells(range, this.getMaterial());
     
         this.setMode();
     }
     DMASuperCell.prototype = Object.create(DMACell.prototype);
 
-    DMASuperCell.prototype._makeChildCells = function(index, range){
+    DMASuperCell.prototype._makeChildCells = function(range, material){
         var cells = [];
         for (var x=0;x<range.x;x++){
             for (var y=0;y<range.y;y++){
                 for (var z=0;z<range.z;z++){
-                    cells.push(this._makeSubCellForIndex({x:x, y:y, z:z}));//child cells add themselves to object3D
+                    //child cells add themselves to object3D
+                    if (material.cells) var cellMaterial = material.cells[x][y][z].material;
+                    if (cells[x][y][z]) cells.push(this._makeSubCellForIndex(new THREE.Vector3(x, y, z), cellMaterial || material));
                 }
             }
         }
         return cells;
     };
 
-    DMASuperCell.prototype._makeSubCellForIndex = function(index){
+    DMASuperCell.prototype._makeSubCellForIndex = function(index, material){
         return null;//override in subclasses
     };
 
-    DMASuperCell.prototype._getModeName = function(){
-        return "";
-    };
-
     DMASuperCell.prototype.setMode = function(mode){
         DMACell.prototype.setMode.call(mode);
         _.each(this.cells, function(cell){
@@ -50,7 +49,7 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'cell'],
 
     DMASuperCell.prototype.getLength = function(){
         if (this.cells) return this.cells.length-1;
-        return lattice.get("superCellRange").x-1;
+        return appState.get("superCellRange").x-1;//zero indexed
     };
 
     DMASuperCell.prototype._loopCells = function(callback){
diff --git a/js/cells/supercells/GIKSuperCell.js b/js/cells/supercells/GIKSuperCell.js
index e5d07eca1abfd85ea90e9f3e4eaa9da98d6fe858..4a25a5a57e9d722b57a47b7465bd1831b4a7e84d 100644
--- a/js/cells/supercells/GIKSuperCell.js
+++ b/js/cells/supercells/GIKSuperCell.js
@@ -4,16 +4,18 @@
 
 
 
-define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'superCell', 'gikCell', 'electronicMaterials'],
-    function(_, THREE, three, lattice, appState, DMASuperCell, GIKCell, electronicMaterials){
+define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'superCell', 'gikCell'],
+    function(_, THREE, three, lattice, appState, DMASuperCell, GIKCell){
+
+    var unitGeo = new THREE.BoxGeometry(lattice.xScale(0),lattice.yScale(0),lattice.zScale(0));
 
     GIKSuperCell = function(index, superCell){
         DMASuperCell.call(this, index, superCell);
     };
     GIKSuperCell.prototype = Object.create(DMASuperCell.prototype);
 
-    GIKSuperCell.prototype._makeSubCellForIndex = function(index){
-        return new GIKCell(index, this);
+    GIKSuperCell.prototype._makeSubCellForIndex = function(index, material){
+        return new GIKCell(index, material, this);
     };
 
     GIKSuperCell.prototype._rotateCell = function(object3D){
@@ -21,24 +23,11 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'superCell',
         return object3D;
     };
 
-    GIKSuperCell.prototype.getMaterial = function(){
-        return electronicMaterials.materials[this.material];
-    };
-
-    GIKSuperCell.prototype._buildMesh = function(){
-        var length = lattice.get("superCellRange").x;
-        var meshes = [];
-        var superCellGeo = new THREE.BoxGeometry(1,1,1.28);
-        superCellGeo.applyMatrix(new THREE.Matrix4().makeScale(length, 1, 1));
-        superCellGeo.applyMatrix(new THREE.Matrix4().makeTranslation(-length/2+0.5, 0, 0));
-        var mesh = new THREE.Mesh(superCellGeo, this.getMaterial());
-        mesh.name = "supercell";
-        meshes.push(mesh);
-        var wireframe = this._buildWireframe(mesh);
-        if (!wireframe) return meshes;
-        wireframe.name = "supercell";
-        meshes.push(wireframe);
-        return meshes;
+    GIKSuperCell.prototype._getGeometry = function(){
+        var geo = unitGeo.clone();
+        var length = this.getLength() + 1;
+        geo.applyMatrix(new THREE.Matrix4().makeScale(length, 1, 1));
+        geo.applyMatrix(new THREE.Matrix4().makeTranslation(-length/2+0.5, 0, 0));
     };
 
     GIKSuperCell.prototype._buildWireframe = function(mesh){
diff --git a/js/highlighter/Highlighter.js b/js/highlighter/Highlighter.js
index b1b937b1339c4cf4d5b3a8a56de1467e03d9696b..2788d308c46f0f7b8e286a150c68e92d8e1831e9 100644
--- a/js/highlighter/Highlighter.js
+++ b/js/highlighter/Highlighter.js
@@ -26,7 +26,7 @@ define(['underscore', 'backbone', 'threeModel', 'appState', 'lattice', 'cell', '
             this.hide();
 
             //bind events
-            this.listenTo(lattice, "change:superCellRange", this._superCellParamDidChange);
+            this.listenTo(appState, "change:superCellRange", this._superCellParamDidChange);
             this.listenTo(appState, "change:superCellIndex", this._superCellParamDidChange);
 
             this.listenTo(appState, "change:deleteMode", this._updateDeleteMode);
diff --git a/js/highlighter/SuperCellHighlighter.js b/js/highlighter/SuperCellHighlighter.js
index 0281843030e37a489776bccf8cb80651d9ee3521..10326a54824d041d33dce24c3174df689c7c4e3c 100644
--- a/js/highlighter/SuperCellHighlighter.js
+++ b/js/highlighter/SuperCellHighlighter.js
@@ -17,7 +17,7 @@ define(['underscore', 'backbone', 'threeModel', 'appState', 'lattice', 'cell', '
 
         _setRotation: function(direction){
             if (!this.highlightedObject) return;
-            var index = this.highlightedObject.getIndex();
+            var index = this.highlightedObject.getAbsoluteIndex();
             var superCellIndex = appState.get("superCellIndex");
             if ((index.z%2 == 0 && Math.abs(direction.z) > 0.9) || (index.z%2 != 0 && Math.abs(direction.z) < 0.1))
                 this.mesh.rotation.set(0, 0, Math.PI/2);
@@ -27,7 +27,7 @@ define(['underscore', 'backbone', 'threeModel', 'appState', 'lattice', 'cell', '
 
         updateGikLength: function(){
             if (!this.mesh) return;
-            this.mesh.scale.set(lattice.get("superCellRange").x, lattice.get("superCellRange").y, lattice.get("superCellRange").z);
+            this.mesh.scale.set(appState.get("superCellRange").x, appState.get("superCellRange").y, appState.get("superCellRange").z);
             three.render();
             if (!this.direction) return;
             this._setPosition(this.position, this.direction);//position of center point
@@ -36,7 +36,7 @@ define(['underscore', 'backbone', 'threeModel', 'appState', 'lattice', 'cell', '
         },
 
         _getNextCellPosition: function(){//add direction vector to current index
-            var newIndex = this.highlightedObject.getIndex();
+            var newIndex = this.highlightedObject.getAbsoluteIndex();
             var direction = this.direction;
             _.each(_.keys(newIndex), function(key){
                 newIndex[key] = Math.round(newIndex[key] + direction[key]);
diff --git a/js/lattice/GIKLattice.js b/js/lattice/GIKLattice.js
index 066c037574222148633fd6af41061448c48c7a39..79f9c5926743776967b1dd9315ade0e966d471d7 100644
--- a/js/lattice/GIKLattice.js
+++ b/js/lattice/GIKLattice.js
@@ -11,8 +11,8 @@ define(['underscore', 'backbone', 'appState', 'lattice', 'globals', 'plist', 'th
             require(['squareBaseplane'], function(SquareBasePlane){
                 globals.basePlane = new SquareBasePlane();
             });
-            require(['gikHighlighter'], function(GIKHighlighter){
-                globals.highlighter = new GIKHighlighter();
+            require(['superCellHighlighter'], function(superCellHighlighter){
+                globals.highlighter = new superCellHighlighter();
                 globals.highlighter.updateGikLength();
             });
         },
diff --git a/js/lattice/Lattice.js b/js/lattice/Lattice.js
index a5cdd3bc31674a72c3199c5af2cd49291e1041c2..06ba9eed7fcdc3cc64fcdcf11a2510f1e99aa191 100644
--- a/js/lattice/Lattice.js
+++ b/js/lattice/Lattice.js
@@ -26,8 +26,7 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
             connectionType: "face",
             partType: null,
             materialType: null,
-            materialClass: "mechanical",
-            superCellRange: new THREE.Vector3(4,1,1)
+            materialClass: "mechanical"
         },
 
         initialize: function(){
diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js
index 1d75d2afb731cb91589fddb208e9b32bc51e0fb6..8d92a818992806dd909826b4729aeb93f426efdc 100644
--- a/js/menus/LatticeMenuView.js
+++ b/js/menus/LatticeMenuView.js
@@ -15,7 +15,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
         },
 
         _makeTemplateJSON: function(){
-            return _.extend(lattice.toJSON(), plist);
+            return _.extend(_.extend(lattice.toJSON(), this.model.toJSON()), plist);
         },
 
         template: _.template('\
@@ -38,7 +38,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
                     </ul>\
                 </div><br/><br/>\
             <% if (connectionType == "gik") { %>\
-            GIK Length:&nbsp;&nbsp;<input data-property="superCellRange" data-key="x" value="<%= superCellRange.x %>" placeholder="GIK length" class="form-control intInput lattice" type="text"><br/>\
+            GIK Length:&nbsp;&nbsp;<input data-property="superCellRange" data-key="x" value="<%= superCellRange.x %>" placeholder="GIK length" class="form-control intInput appState" type="text"><br/>\
             <br/>\
             <% } %>\
             <a href="#" class="clearCells btn btn-block btn-lg btn-danger">Clear All Cells</a><br/>\
diff --git a/js/models/AppState.js b/js/models/AppState.js
index 5684a6efb9108986cb1ac9aa67b1c3894721061d..a02882b0ae753284e3e7c4a9723273a5f49aef71 100644
--- a/js/models/AppState.js
+++ b/js/models/AppState.js
@@ -5,7 +5,7 @@
 //a class to store global app state, model for navbar and menu wrapper
 //never deallocated
 
-define(['underscore', 'backbone', 'threeModel'], function(_, Backbone, three){
+define(['underscore', 'backbone', 'threeModel', 'three'], function(_, Backbone, three, THREE){
 
     var AppState = Backbone.Model.extend({
 
@@ -36,7 +36,8 @@ define(['underscore', 'backbone', 'threeModel'], function(_, Backbone, three){
             cellMode: "cell",//supercell, cell, part, node, beam
             cellsVisible: true,
 
-            superCellIndex: 0,//offset of superCell adds todo lattice?
+            superCellIndex: 0,//offset of superCell adds
+            superCellRange: new THREE.Vector3(4,1,1),
 
             realisticColorScheme: false,
 
@@ -191,22 +192,22 @@ define(['underscore', 'backbone', 'threeModel'], function(_, Backbone, three){
                 case 57:
                     if (globals.lattice.get("connectionType") != "gik") break;
                     if (state) {
-                        var range = globals.lattice.get("superCellRange").clone();
+                        var range = this.get("superCellRange").clone();
                         range.x = e.keyCode-48;
-                        globals.lattice.set("superCellRange", range);
+                        this.set("superCellRange", range);
                     }
                     break;
                 case 81://q - increase supercell index
                     if (state) {
                         var index = this.get("superCellIndex")+1;
-                        if (index > globals.lattice.get("superCellRange").x-1) index = 0;
+                        if (index > this.get("superCellRange").x-1) index = 0;
                         this.set("superCellIndex", index);
                     }
                     break;
                 case 65://a - decrease supercell index
                     if (state) {
                         var index = this.get("superCellIndex")-1;
-                        if (index < 0) index = globals.lattice.get("superCellRange").x-1;
+                        if (index < 0) index = this.get("superCellRange").x-1;
                         this.set("superCellIndex", index);
                     }
                     break;