diff --git a/main.css b/css/main.css
similarity index 91%
rename from main.css
rename to css/main.css
index bd1546c991d8574e3bc3cea7218e4724feeea993..406ccb4ae752cbf7dbc84d8968343e21ce11762a 100644
--- a/main.css
+++ b/css/main.css
@@ -20,12 +20,13 @@ body{
                                   not supported by any browser */
 }
 
+
 #controls{
     position: absolute;
     top:0;
     right:0;
     width:420px;
-    padding:20px 20px;
+    padding:70px 20px 20px 20px;
     overflow: auto;
     height: 100%;
     /*background: rgba(255,255,255,0.5);*/
@@ -38,7 +39,7 @@ body{
     top:0;
     left:0;
     /*width: 420px;*/
-    padding: 20px 20px 20px 20px;
+    padding:70px 20px 20px 20px;
     max-height: 100%;
     overflow: auto;
 }
@@ -61,11 +62,12 @@ body{
     display: none;
 }
 
-a{
+a, a:hover, a:visited, a:focus{
     color:#8cbaed;
 }
-a:hover{
-    color:#8cbaed;
+
+a.btn:visited, a.btn:focus{
+    color: white;
 }
 
 .editable{
@@ -117,25 +119,13 @@ input.form-control {
     margin-bottom:10px;
 }
 
-img{
-    width:60px;
-    /*position: absolute;*/
-    top:0;
-    left:0;
-    z-index: 5;
-    /*margin:20px;*/
-    margin-bottom:20px;
-}
-
-#activeLogo{
-    display: none;
-}
-
 #threeContainer {
     width:100%;
     height:100%;
     padding:0;
     position: absolute;
+    top: 0px;
+    left: 0px;
 }
 
 
@@ -271,16 +261,6 @@ span.modal-close{
     direction: ltr;
 }
 
-.dropdown-toggle{
-    width: 220px;
-    text-align: right;
-}
-.dropdown-toggle>span.dropdownLabel{
-    width: 165px;
-    display: inline-block;
-    text-align: left;
-}
-
 .paddingBottom{
     margin-bottom: 20px;
 }
diff --git a/css/nav.css b/css/nav.css
new file mode 100644
index 0000000000000000000000000000000000000000..f6d477ad491d1c46231cb10e8e16340325006f86
--- /dev/null
+++ b/css/nav.css
@@ -0,0 +1,75 @@
+.navbar{
+    margin-bottom:0;
+    z-index: 5;
+    border-radius: 0;
+    background: rgba(68,68,68,0.8);
+}
+
+.navbar-inverse .navbar-nav>li>a{
+    -webkit-border-radius: 0!important;
+    -moz-border-radius: 0!important;
+    border-radius: 0!important;
+}
+.navbar-inverse .navbar-nav>li>a,
+.navbar-inverse .navbar-nav>li>a:visited, .navbar-inverse .navbar-nav>li>a:focus{
+    color:white;
+}
+.navbar-inverse .navbar-nav>li>a:hover{
+    color:#ddd;
+}
+.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus {
+    background-color: #bbb;
+}
+.navbar-inverse .navbar-nav>.open>.dropdown-menu{
+    background-color: #646464;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    padding:0;
+    margin:0;
+}
+.navbar-inverse .navbar-nav>.open>.dropdown-menu>li>a{
+    -webkit-border-radius: 0!important;
+    -moz-border-radius: 0!important;
+    border-radius: 0!important;
+    padding: 7px 20px;
+}
+.navbar-inverse .navbar-nav>.open>.dropdown-menu>li>a:hover, .navbar-inverse .navbar-nav>.open>.dropdown-menu>li>a:focus{
+    background-color: #bbb;
+}
+
+.navbar-inverse .navbar-nav>.dropdown>a .caret,
+.navbar-inverse .navbar-nav>.dropdown>a:focus .caret, .navbar-inverse .navbar-nav>.dropdown>a:visited .caret{
+    border-top-color:white;
+    border-bottom-color: white;
+}
+
+.navbar-inverse .navbar-nav>.dropdown>a:hover .caret{
+    border-top-color:#ddd;
+    border-bottom-color: #ddd;
+}
+
+.divider{
+    margin-right: 0!important;
+    margin-left: 0!important;
+    background-color: #555!important;
+}
+
+#fileSelector{
+    display: none;
+}
+
+img{
+    width:45px;
+    top:0;
+    left:0;
+    z-index: 5;
+}
+
+#activeLogo{
+    display: none;
+}
+
+#logo{
+    padding: 5px 50px 5px 30px;
+}
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..dd830e9bf905a0e2932cde542fd18e4a3782cc69
Binary files /dev/null and b/favicon.ico differ
diff --git a/index.html b/index.html
index 047dc842d2486e429005a2f4823d9ded25364474..979b45eb220d0f95d2e07b64cc196f382c79e05f 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,9 @@
     <link href="dependencies/bootstrap.min.css" rel="stylesheet" type="text/css"/>
     <link rel="stylesheet" type="text/css" href="dependencies/flat-ui.min.css"/>
     <link rel="stylesheet" type="text/css" href="dependencies/jquery-ui.min.css"/>
-    <link rel="stylesheet" type="text/css" href="main.css"/>
+    <link rel="stylesheet" type="text/css" href="css/nav.css"/>
+    <link rel="stylesheet" type="text/css" href="css/main.css"/>
+
 
     <script id="vertexShader" type="x-shader/x-vertex">
         attribute vec2 a_position;
@@ -254,14 +256,47 @@
     <script type="text/javascript" src="js/main.js"></script>
 </head>
 <body>
+<nav id="globalNav" class="navbar navbar-inverse navbar-embossed" role="navigation">
+    <div class="navbar-header">
+        <a id="logo" class="navbar-brand" target="_blank" href="http://cba.mit.edu/">
+            <img id="inactiveLogo" src="logo.png"/>
+            <img id="activeLogo" src="logo-active.png"/>
+        </a>
+    </div>
+    <div class="collapse navbar-collapse" id="navbar-collapse-01">
+        <ul class="nav navbar-nav navbar-left">
+            <li class="dropdown navDropdown">
+                <a href="#" class="dropdown-toggle" data-toggle="dropdown">File <b class="caret"></b></a>
+                <span class="dropdown-arrow"></span>
+                <ul class="dropdown-menu">
+                    <li><a class="loadFile" href="#">Import SVG...</a></li>
+                    <li class="divider"></li>
+                    <li><a id="saveSVG" href="#">Save Pattern as SVG</a></li>
+                    <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 class="dropdown navDropdown">-->
+                <!--<a href="#" class="dropdown-toggle" id="viewMenuDropdown" data-toggle="dropdown">View <b class="caret"></b></a>-->
+                <!--<span class="dropdown-arrow"></span>-->
+                <!--<ul id="navViewMenu" class="dropdown-menu">-->
+                    <!--<li><a href="#">thing1</a></li>-->
+                    <!--<li><a href="#">things2</a></li>-->
+                <!--</ul>-->
+            <!--</li>-->
+            <li><a id="about" class="menuHoverControls" target="_blank" href="#">About</a></li>
+        </ul>
+
+    </div><!-- /.navbar-collapse -->
+    <input id="fileSelector" type="file">
+
+</nav>
+
 <div  id="threeContainer"></div>
 <canvas id="gpuMathCanvas"></canvas>
 <div id="controlsLeft" class="flipped">
     <div>
-        <a id="logo" target="_blank" href="http://cba.mit.edu/">
-            <img id="inactiveLogo" src="logo.png"/>
-            <img id="activeLogo" src="logo-active.png"/>
-        </a><br/>
         3D View:
         <div class="indent">
             <label class="checkbox" for="dynamic">
@@ -292,8 +327,6 @@
     <div class="extraSpace"></div>
 </div>
 <div id="controls">
-    <a href="#" id="about" class="btn btn-lg btn-default">About</a><br/><br/>
-
     <div class="sliderInput" id="creasePercent">
         <span class="label-slider">Crease Angle : </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 int" type="text">
diff --git a/js/controls.js b/js/controls.js
index 1a115ef1a1cfbd1212e506965107e277741fd01a..4ec6b3b521d89b7983b5d57645c862c0fd013538 100644
--- a/js/controls.js
+++ b/js/controls.js
@@ -78,7 +78,11 @@ function initControls(globals){
     }
 
     setLink("#resetDynamicSim", function(){
-        globals.dynamicModel.reset();
+        globals.shouldResetDynamicSim = true;
+    });
+
+    setLink(".loadFile", function(){
+        $("#fileSelector").click();
     });
 
     function setButtonGroup(id, callback){
diff --git a/logo.png b/logo.png
index 3bcb4ccfb0c3233cf304227d92a8ea6ff8b73039..5ec75ad68bf4c0007630f2737da4d3b762e81296 100644
Binary files a/logo.png and b/logo.png differ