diff --git a/js/models/BasePlane.js b/js/models/BasePlane.js
index 2bec59ad117aec32d667b0f857f10f63eff302ed..d561e29e061961a08d5e4ad9f5e8aaa1f61416d9 100644
--- a/js/models/BasePlane.js
+++ b/js/models/BasePlane.js
@@ -17,6 +17,7 @@ BasePlane = Backbone.Model.extend({
 
         //bind events
         this.listenTo(this, "change:zIndex", this._renderZIndexChange);
+        this.listenTo(globals.appState, "change:basePlaneIsVisible", this._setVisibility);
 
         //draw mesh
         this.set("mesh", this._makeBasePlaneMesh());
@@ -26,6 +27,7 @@ BasePlane = Backbone.Model.extend({
             globals.three.sceneAdd(mesh, self._checkIsHighlightable(mesh));
         });
         globals.three.render();
+        this._setVisibility();
     },
 
     updateXYSeparation: function(xySep) {},
@@ -34,6 +36,13 @@ BasePlane = Backbone.Model.extend({
         return new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,0,1), Math.PI);
     },
 
+    _setVisibility: function(){
+        _.each(this.get("mesh"), function(mesh){
+            mesh.visible = globals.appState.get("basePlaneIsVisible");
+        });
+        globals.three.render();
+    },
+
     ///////////////////////////////////////////////////////////////////////////////////
     //////////////////////HIGHLIGHTER FUNCTIONALITY////////////////////////////////////
     ///////////////////////////////////////////////////////////////////////////////////
diff --git a/js/threeViews/Highlighter.js b/js/threeViews/Highlighter.js
index efe367256eb5a475d682f22f25da5d8600e5edcd..19c7ec33d243fffecf27a8aa6fc464bfce8b07ae 100644
--- a/js/threeViews/Highlighter.js
+++ b/js/threeViews/Highlighter.js
@@ -40,6 +40,7 @@ Highlighter = Backbone.View.extend({
     },
 
     _setVisibility: function(visible, forceRender){
+        visible = globals.appState.get("highlighterIsVisible") && visible;
         if (forceRender || this.isVisible() != visible){
             this.mesh.visible = visible;
             globals.three.render();