diff --git a/css/main.css b/css/main.css
index b17b50993e6693484c3914678cab016e0eeae436..ac320f39c573be3be9945f3b7fbf42a21afe3b19 100644
--- a/css/main.css
+++ b/css/main.css
@@ -274,9 +274,14 @@ span.modal-close{
 }
 
 #svgViewer{
-    max-width: 100%;
-    max-height: 300px;
-    float: right;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 3;
+    top:0px;
+    right:0;
+    background: white;
+    display: none;
 }
 svg{
     width: 100%;
diff --git a/index.html b/index.html
index 4385a093ce0c27536630dc65aeadaba0e8a36086..5282c37ec122dc9a8911261ef4234853677649f9 100644
--- a/index.html
+++ b/index.html
@@ -370,8 +370,8 @@
                     <li><a id="exportSTL" href="#">Save Simulation as STL...</a></li>
                 </ul>
             </li>
-            <li><a data-menu-id="navDesign" class="menuHoverControls" href="#">Pattern</a></li>
-            <li><a data-menu-id="navSim" class="menuHoverControls" href="#">Simulation</a></li>
+            <li><a id="navPattern" href="#">Pattern</a></li>
+            <li><a id="navSimulation" href="#">Simulation</a></li>
             <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
         </ul>
 
@@ -383,11 +383,13 @@
 <div  id="threeContainer"></div>
 <canvas id="gpuMathCanvas"></canvas>
 <div id="controls">
+    <b>Fold Settings:</b><br/><br/>
     <div class="sliderInput" id="creasePercent">
         <span class="label-slider">Crease Percent : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
         <input value="" placeholder="" class="form-control" type="text">
     </div>
     <br/><br/><br/>
+    <b>Stiffness Settings:</b><br/><br/>
     <div class="sliderInput" id="axialStiffness">
         <span class="label-slider">Axial Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
         <input value="" placeholder="" class="form-control" type="text">
@@ -400,9 +402,9 @@
         <span class="label-slider">Panel Stiffness : </span><div class="flat-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"></div>
         <input value="" placeholder="" class="form-control" type="text">
     </div>
-    <div id="svgViewer"></div>
     <div class="extraSpace"></div>
 </div>
+<div id="svgViewer"></div>
 
 <div id="controlsLeft" class="flipped">
     <div>
diff --git a/js/controls.js b/js/controls.js
index 9ebb522fb111d78df8a6f52db6ab401620bcecf7..54d775a39d9d47730bf428770fd88dedd791d932 100644
--- a/js/controls.js
+++ b/js/controls.js
@@ -26,6 +26,22 @@ function initControls(globals){
         saveSTL();
     });
 
+
+    setLink("#navPattern", function(){
+        globals.navMode = "pattern";
+        $("#navPattern").parent().addClass("open");
+        $("#navSimulation").parent().removeClass("open");
+        $("#svgViewer").show();
+    });
+    $("#navSimulation").parent().addClass("open");
+    $("#navPattern").parent().removeClass("open");
+    setLink("#navSimulation", function(){
+        globals.navMode = "simulation";
+        $("#navSimulation").parent().addClass("open");
+        $("#navPattern").parent().removeClass("open");
+        $("#svgViewer").hide();
+    });
+
     setCheckbox("#dynamic", globals.simType == "dynamic", function(val){
         globals.simType = val;
     });
diff --git a/js/globals.js b/js/globals.js
index a1c667f708efa4fe312892bce68f1ebdd889de1d..46c37ad3f7f9ce6edff81b20315eee10f31c649b 100644
--- a/js/globals.js
+++ b/js/globals.js
@@ -7,6 +7,8 @@ function initGlobals(){
 
     var _globals = {
 
+        navMode: "simulation",
+
         //view
         colorMode: "color",
         color1: "ec008b",