diff --git a/js/models/AppState.js b/js/models/AppState.js
index 0563a71d431c425cd55e1fab008e80070e2d0a4b..ae3513fa5ca2af5eb2aefb1e19c027d01ffb6d18 100644
--- a/js/models/AppState.js
+++ b/js/models/AppState.js
@@ -22,7 +22,7 @@ AppState = Backbone.Model.extend({
         cellMode: "cell",//show cells vs parts
         inverseMode: false,//show negative space
         cellType: "octa",
-        connectionType: "face",
+        connectionType: "vertex",
         partType: "triangle",
 
         allCellTypes: {octa:"Octahedron", cube:"Cube"},
diff --git a/js/models/BasePlane.js b/js/models/BasePlane.js
index 6c585365cf085f62b5d7405aaf8304a6c07bfab5..4a40bd9d75fea04b85b0813f831d0e0e9ffa329b 100644
--- a/js/models/BasePlane.js
+++ b/js/models/BasePlane.js
@@ -7,7 +7,7 @@ BasePlane = Backbone.Model.extend({
 
     defaults: {
         zIndex: 0,
-        mesh: null,
+        mesh: [],
         dimX: 100,
         dimY: 100,
         material: new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.2, wireframe:true, side:THREE.DoubleSide}),
@@ -31,7 +31,9 @@ BasePlane = Backbone.Model.extend({
     _renderZIndexChange: function(){
         var zIndex = this.get("zIndex");
         var scale = this.get("mesh").scale.z;
-        this.get("mesh").position.set(0, 0, zIndex*scale*2/Math.sqrt(6));
+        _.each(this.get("mesh"), function(mesh){
+            mesh.position.set(0, 0, zIndex*scale*2/Math.sqrt(6));
+        });
         window.three.render();
     },
 
@@ -39,16 +41,22 @@ BasePlane = Backbone.Model.extend({
     },
 
     updateScale: function(scale){
-        this.get("mesh").scale.set(scale, scale, scale);
+        _.each(this.get("mesh"), function(mesh){
+            mesh.scale.set(scale, scale, scale);
+        });
     },
 
     _showMesh: function(){
-        window.three.sceneAdd(this.get("mesh"), "basePlane");
+        _.each(this.get("mesh"), function(mesh){
+            window.three.sceneAdd(mesh, "basePlane");
+        });
         window.three.render();
     },
 
     _removeMesh: function(){
-        window.three.sceneRemove(this.get("mesh"), "basePlane");
+        _.each(this.get("mesh"), function(mesh){
+            window.three.sceneRemove(mesh, "basePlane");
+        });
         window.three.render();
     },
 
@@ -103,7 +111,7 @@ OctaBasePlane = BasePlane.extend({
         }
 
         geometry.computeFaceNormals();
-        return new THREE.Mesh(geometry, this.get("material"));
+        return [new THREE.Mesh(geometry, this.get("material"))];
     },
 
     _calcOctaFaceVertices: function(colSep){
@@ -138,7 +146,7 @@ OctaBasePlane = BasePlane.extend({
     },
 
     updateColSeparation: function(colSep){
-        var geometry = this.get("mesh").geometry;
+        var geometry = this.get("mesh")[0].geometry;
         geometry.vertices = this._calcOctaFaceVertices(colSep);
         geometry.verticesNeedUpdate = true;
     }
@@ -153,28 +161,29 @@ SquareBasePlane = BasePlane.extend({
 
     _makeBasePlaneMesh: function(){
 
-        var geometry = new THREE.Geometry();
-        geometry.vertices = this._calcVertices();
-        var faces = geometry.faces;
-
         var dimX = this.get("dimX");
         var dimY = this.get("dimY");
 
-        var currentOffset = 0;
-        for (var j=-dimX;j<=dimX;j++){
-            for (var i=-dimY;i<=dimY;i++){
-
-                currentOffset++;
-                if (j == -dimX || i == -dimY) continue;
+        var geometry = new THREE.Geometry();
 
-//                faces.push(new THREE.Face3(currentOffset, currentOffset-1, currentOffset-dimY));
-
-            }
+        for ( var i = - dimX; i <= dimX; i += 1 ) {
+            geometry.vertices.push( new THREE.Vector3(-dimX, i, 0));
+            geometry.vertices.push( new THREE.Vector3(dimX, i, 0));
+            geometry.vertices.push( new THREE.Vector3(i, -dimX, 0));
+            geometry.vertices.push( new THREE.Vector3(i, dimX, 0));
 
         }
 
-        geometry.computeFaceNormals();
-        return new THREE.Mesh(geometry, this.get("material"));
+        var planeGeometry = new THREE.Geometry();
+        planeGeometry.vertices.push( new THREE.Vector3(-dimX, -dimX, 0));
+        planeGeometry.vertices.push( new THREE.Vector3(dimX, -dimX, 0));
+        planeGeometry.vertices.push( new THREE.Vector3(-dimX, dimX, 0));
+        planeGeometry.vertices.push( new THREE.Vector3(dimX, dimX, 0));
+        planeGeometry.faces.push(new THREE.Face3(0, 1, 3));
+        planeGeometry.faces.push(new THREE.Face3(0, 3, 2));
+
+        return [new THREE.Line(planeGeometry, new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.0, side:THREE.DoubleSide})),
+            new THREE.Line(geometry, this.get("material"), THREE.LinePieces)];
     },
 
     _calcVertices: function(){
diff --git a/js/models/Lattice.js b/js/models/Lattice.js
index 03e5cd549e65c87d66b7e0b6a98f5ee9d532ca0e..527e6cdf09e44e2bc202a746414bbfc2bca9867c 100644
--- a/js/models/Lattice.js
+++ b/js/models/Lattice.js
@@ -287,7 +287,7 @@ Lattice = Backbone.Model.extend({
             } else if (connectionType == "edgeRot"){
 
             } else if (connectionType == "vertex"){
-
+                _.extend(this, this.OctaVertexLattice);
             }
         } else if (cellType == "cube"){
 
@@ -326,6 +326,7 @@ Lattice = Backbone.Model.extend({
             //bind events
             this.listenTo(this, "change:columnSeparation", this._changeColSeparation);
 
+            if (this.get("basePlane")) this.get("basePlane").destroy();
             this.set("basePlane", new OctaBasePlane({scale:this.get("scale")}));
             this.set("columnSeparation", 0.0);
         },
@@ -389,6 +390,7 @@ Lattice = Backbone.Model.extend({
             //bind events
             this.listenTo(this, "change:columnSeparation", this._changeColSeparation);
 
+            if (this.get("basePlane")) this.get("basePlane").destroy();
             this.set("basePlane", new OctaBasePlane({scale:this.get("scale")}));
             this.set("columnSeparation", 0.0);
         },
@@ -439,13 +441,59 @@ Lattice = Backbone.Model.extend({
             this._undo = null;
         }
 
-    }
+    },
 
 
 ////////////////////////////////////////////////////////////////////////////////////////
 //////////////////////////////VERTEX CONN OCTA LATTICE//////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////////
 
+    OctaVertexLattice: {
+
+        _initLatticeType: function(){
+
+            //bind events
+
+            if (this.get("basePlane")) this.get("basePlane").destroy();
+            this.set("basePlane", new SquareBasePlane({scale:this.get("scale")}));
+        },
+
+        addCellAtPosition: function(absPosition){
+
+            //calc indices in cell matrix
+            var scale = this.get("scale");
+            var colSep = this.get("columnSeparation");
+            var latticeScale = scale*(1+2*colSep);
+            var octHeight = 2*scale/Math.sqrt(6);
+            var triHeight = latticeScale/2*Math.sqrt(3);
+            var position = {};
+            position.x = Math.round(absPosition.x/latticeScale);
+            position.y = Math.round(absPosition.y/triHeight);
+            position.z = Math.round(absPosition.z/octHeight);
+            if (position.z%2 == 1) position.y += 1;
+
+            this.addCellAtIndex(position);
+        },
+
+        getScale: function(){
+            return this.get("scale");
+        },
+
+        _makeCellForLatticeType: function(indices, scale){
+            return new DMASideOctaCell(this.appState.get("cellMode"), indices, scale, this);
+        },
+
+        _undo: function(){//remove all the mixins, this will help with debugging later
+            this._initLatticeType = null;
+            this.addCellAtPosition = null;
+            this.getScale = null;
+            this._makeCellForLatticeType = null;
+            this.stopListening(this, "columnSeparation");
+            this.set("columnSeparation", null);
+            this._undo = null;
+        }
+
+    }
 
 
 
diff --git a/js/models/ThreeModel.js b/js/models/ThreeModel.js
index 0663eeb14ed24d959fa076828a9cf1c1a3fbe81f..4d9966d5fd303b95ca19446a204a224f2618cb7a 100644
--- a/js/models/ThreeModel.js
+++ b/js/models/ThreeModel.js
@@ -5,7 +5,7 @@
 
 function ThreeModel(){
 
-    var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 4000);
+    var camera = new THREE.PerspectiveCamera(60, window.innerWidth/window.innerHeight, 1, 10000);
     var scene = new THREE.Scene();
     var renderer = new THREE.WebGLRenderer({antialias:false});