diff --git a/js/baseplane/HexagonalRotBasePlane.js b/js/baseplane/HexagonalRotBasePlane.js
new file mode 100644
index 0000000000000000000000000000000000000000..0812c0347372e35f868178be53c84dffb9235ccb
--- /dev/null
+++ b/js/baseplane/HexagonalRotBasePlane.js
@@ -0,0 +1,18 @@
+/**
+ * Created by aghassaei on 8/17/15.
+ */
+
+
+define(['underscore', 'backbone', 'appState', 'lattice', 'threeModel', 'three', 'squareBaseplane'],
+    function(_, Backbone, appState, lattice, three, THREE, SquareBasePlane){
+
+    return SquareBasePlane.extend({
+
+        calcHighlighterParams: function(face, point){
+            var params = SquareBasePlane.prototype.calcHighlighterParams.call(this, face, point);
+            params.position.x += lattice.xScale()/2;
+            return params;
+        }
+
+    });
+});
\ No newline at end of file
diff --git a/js/baseplane/SquareBasePlane.js b/js/baseplane/SquareBasePlane.js
index f10b5fb8f0b6154fd4a4fb6fa1309738ced8ed13..388d626749c1372b66dc2944a553b0c688eb5a8c 100644
--- a/js/baseplane/SquareBasePlane.js
+++ b/js/baseplane/SquareBasePlane.js
@@ -10,25 +10,25 @@ define(['underscore', 'backbone', 'appState', 'lattice', 'threeModel', 'three',
 
         _makeBasePlaneMesh: function(){
 
-            var scale = lattice.xScale();
-            var dimX = this.get("dimX")*scale;
-            var dimY = this.get("dimY")*scale;
+            var xScale = lattice.xScale();
+            var yScale = lattice.yScale();
+            var dimX = this.get("dimX");
+            var dimY = this.get("dimY");
 
             var geometry = new THREE.Geometry();
 
-            for ( var i = - dimX; i <= dimX+1; i += scale ) {
-                geometry.vertices.push( new THREE.Vector3(-dimX-scale/2, i-scale/2, 0.01));
-                geometry.vertices.push( new THREE.Vector3(dimX-scale/2, i-scale/2, 0.01));
-                geometry.vertices.push( new THREE.Vector3(i-scale/2, -dimX-scale/2, 0.01));
-                geometry.vertices.push( new THREE.Vector3(i-scale/2, dimX-scale/2, 0.01));
-
+            for ( var i = - dimX; i <= dimX+1; i ++) {
+                geometry.vertices.push( new THREE.Vector3(-dimX*xScale-xScale/2, i*yScale-yScale/2, 0.01));
+                geometry.vertices.push( new THREE.Vector3(dimX*xScale-xScale/2, i*yScale-yScale/2, 0.01));
+                geometry.vertices.push( new THREE.Vector3(i*xScale-xScale/2, -dimX*yScale-yScale/2, 0.01));
+                geometry.vertices.push( new THREE.Vector3(i*xScale-xScale/2, dimX*yScale-yScale/2, 0.01));
             }
 
             var planeGeometry = new THREE.Geometry();
-            planeGeometry.vertices.push( new THREE.Vector3(-dimX-scale/2, -dimX-scale/2, 0));
-            planeGeometry.vertices.push( new THREE.Vector3(dimX+scale/2, -dimX-scale/2, 0));
-            planeGeometry.vertices.push( new THREE.Vector3(-dimX-scale/2, dimX+scale/2, 0));
-            planeGeometry.vertices.push( new THREE.Vector3(dimX+scale/2, dimX+scale/2, 0));
+            planeGeometry.vertices.push( new THREE.Vector3(-dimX*xScale-xScale/2, -dimX*yScale-yScale/2, 0));
+            planeGeometry.vertices.push( new THREE.Vector3(dimX*xScale+xScale/2, -dimX*yScale-yScale/2, 0));
+            planeGeometry.vertices.push( new THREE.Vector3(-dimX*xScale-xScale/2, dimX*yScale+yScale/2, 0));
+            planeGeometry.vertices.push( new THREE.Vector3(dimX*xScale+xScale/2, dimX*yScale+yScale/2, 0));
             planeGeometry.faces.push(new THREE.Face3(0, 1, 3));
             planeGeometry.faces.push(new THREE.Face3(0, 3, 2));
             planeGeometry.computeFaceNormals();
diff --git a/js/lattice/latticeSubclasses/HexagonalRotLattice.js b/js/lattice/latticeSubclasses/HexagonalRotLattice.js
index 550f553d8ec1aa4e2a6244446fb05494c623d6fc..67aed09be89b892527939f4f53fb2c8b5701080d 100644
--- a/js/lattice/latticeSubclasses/HexagonalRotLattice.js
+++ b/js/lattice/latticeSubclasses/HexagonalRotLattice.js
@@ -13,7 +13,7 @@ define(['underscore', 'backbone', 'appState', 'globals', 'plist', 'three', 'thre
     var HexRotLattice =  {
 
         _initLatticeType: function(){
-            require(['squareBaseplane'], function(BasePlaneClass){
+            require(['hexRotBasePlane'], function(BasePlaneClass){
                 globals.basePlane = new BasePlaneClass();
             });
             require([this.getHighlighterFile()], function(HighlighterClass){
diff --git a/js/main.js b/js/main.js
index f129385a69de2b26b57edeb70a614f34acfdf7ec..71bbe4faa6e8ddfa83166d0a15584ed6cf992dd3 100644
--- a/js/main.js
+++ b/js/main.js
@@ -62,6 +62,7 @@ require.config({
         octaBaseplane: 'baseplane/OctaBasePlane',
         rotEdgeOctaBaseplane: 'baseplane/RotEdgeOctaBasePlane',
         hexBaseplane: 'baseplane/HexagonalBasePlane',
+        hexRotBasePlane: 'baseplane/HexagonalRotBasePlane',
 
         //highlighter
         highlighter: 'highlighter/Highlighter',