diff --git a/js/main.js b/js/main.js
index 96ea032bee3627e6e6f691e7b8efb94bec0e0ef2..1b058a93d4664a89e5a10acc41db95c1fae39804 100644
--- a/js/main.js
+++ b/js/main.js
@@ -108,6 +108,26 @@ require.config({
         setupCommMenu: 'menus/SetupCommMenuView',
         discoveryMenu: 'menus/DiscoveryMenuView',
 
+        //templates
+        navViewMenuTemplate: 'menus/templates/NavViewMenu.html',
+        ribbonTemplate: 'menus/templates/Ribbon.html',
+        modalViewTemplate: 'menus/templates/ModalView.html',
+        menuWrapperTemplate: 'menus/templates/MenuWrapperView.html',
+        latticeMenuTemplate: 'menus/templates/LatticeMenuView.html',
+        importMenuTemplate: 'menus/templates/LatticeMenuView.html',
+        partMenuTemplate: 'menus/templates/PartMenuView.html',
+        scriptMenuTemplate: 'menus/templates/ScriptMenuView.html',
+        physicsMenuTemplate: 'menus/templates/PhysicsMenuView.html',
+        materialMenuTemplate: 'menus/templates/MaterialMenuView.html',
+        optimizeMenuTemplate: 'menus/templates/OptimizationMenuView.html',
+        assemblerMenuTemplate: 'menus/templates/AssemblerMenuView.html',
+        camMenuTemplate: 'menus/templates/CamMenuView.html',
+        animateMenuTemplate: 'menus/templates/AnimationMenuView.html',
+        sendMenuTemplate: 'menus/templates/SendMenuView.html',
+        compositeMenuTemplate: 'menus/templates/CompositeMenuView.html',
+        setupCommMenuTemplate: 'menus/templates/SetupCommMenuView.html',
+        discoveryMenuTemplate: 'menus/templates/DiscoveryMenuView.html',
+
         //stls
         octaFaceTrianglePartSTL: '../assets/stls/parts/OctaFaceTrianglePart.stl',
         octaEdgeVoxPartSTL: '../assets/stls/parts/OctaEdgeVoxPart.stl',
diff --git a/js/menus/AnimationMenuView.js b/js/menus/AnimationMenuView.js
index ad37a9cf6f2598185532735ccf87e7145f7f94ce..35ced6921c339cae3585ed6ac36440f491783864 100644
--- a/js/menus/AnimationMenuView.js
+++ b/js/menus/AnimationMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 2/1/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'cam'], function($, _, MenuParentView, plist, cam){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'text!animationMenuTemplate'], function($, _, MenuParentView, plist, cam, template){
 
     return MenuParentView.extend({
 
@@ -108,27 +108,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'cam'], function($, _, Me
             });
         },
 
-        template: _.template('\
-            <% if (stockSimulationPlaying){ %>\
-            <a href="#" id="pauseStockSim" class=" btn btn-block btn-lg btn-warning">Pause</a>\
-            <% } else { %>\
-                <% if (simLineNumber != 0){ %>\
-                    <a href="#" id="playStockSim" class=" btn btn-lg btn-halfWidth btn-success">Play</a>\
-                    <a href="#" id="resetStockSim" class=" btn btn-lg btn-halfWidth pull-right btn-default">Reset</a><br/>\
-                <% } else { %>\
-                    <a href="#" id="playStockSim" class=" btn btn-block btn-lg btn-success">Play</a>\
-                <% } %>\
-            <% } %>\
-            <input id="speedSlider" data-slider-id="speedSlider" type="text" data-slider-min="0" data-slider-max="6" data-slider-step="1" data-slider-value="<%= Math.log2(simSpeed) %>"/>\
-            <br/><a href="#" id="animationMenuSave" class=" btn btn-block btn-lg btn-default">Save</a><br/>\
-            <!--Assembly Time:&nbsp;&nbsp;<br/><br/>-->\
-            <% if (editsMadeToProgram && needsPostProcessing){ %>\
-            <div class="postWarning">You have made the following changes that require post processing:<br/>\
-            This will override edits you have made to the G-code.  OK to override? <a href="#" class="overrideEdits btn btn-block btn-lg btn-danger">OK</a></div>\
-            <% } %>\
-            <div id="gcodeEditor"><%= dataOut %></div><br/>\
-            <a href="#" class="overrideEdits btn btn-block btn-lg btn-default">Undo Changes</a><br/>\
-            ')
-
+        template: _.template(template)
     });
 });
diff --git a/js/menus/AssemblerMenuView.js b/js/menus/AssemblerMenuView.js
index 12a305bf92ae71dce6fb5c368e973fdc9ed7b159..4de97b64d5d6223680ab1a8810585443a110c7aa 100644
--- a/js/menus/AssemblerMenuView.js
+++ b/js/menus/AssemblerMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 2/25/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'lattice'], function($, _, MenuParentView, plist, cam, lattice){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'lattice', 'text!assemblerMenuTemplate'], function($, _, MenuParentView, plist, cam, lattice, template){
 
     return MenuParentView.extend({
     
@@ -33,28 +33,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'lattice'], functi
             return _.extend(this.model.toJSON(), cam.toJSON(), lattice.toJSON(), plist);
         },
     
-        template: _.template('\
-            Machine: &nbsp;&nbsp;\
-                <div class="btn-group">\
-                    <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allMachineTypes[cellType][connectionType][machineName] %><span class="caret"></span></button>\
-                    <ul role="menu" class="dropdown-menu">\
-                        <% _.each(_.keys(allMachineTypes[cellType][connectionType]), function(key){ %>\
-                            <li><a class="assembler dropdownSelector" data-property="machineName" data-value="<%= key %>" href="#"><%= allMachineTypes[cellType][connectionType][key] %></a></li>\
-                        <% }); %>\
-                    </ul>\
-                </div><br/><br/>\
-            Strategy: &nbsp;&nbsp;\
-                <div class="btn-group">\
-                    <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allAssemblyStrategies[camStrategy] %><span class="caret"></span></button>\
-                    <ul role="menu" class="dropdown-menu">\
-                        <% _.each(_.keys(allAssemblyStrategies), function(key){ %>\
-                            <li><a class="assembler dropdownSelector" data-property="camStrategy" data-value="<%= key %>" href="#"><%= allAssemblyStrategies[key] %></a></li>\
-                        <% }); %>\
-                    </ul>\
-                </div><br/><br/>\
-                <% if (camStrategy == "raster"){ %>\
-            Raster Order: &nbsp;&nbsp;<input value="<%= placementOrder %>" placeholder="Placement Order" class="form-control placementOrder" type="text"><br/><br/>\
-            <% } %>\
-            ')
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/CamMenuView.js b/js/menus/CamMenuView.js
index 826611d6450d16f67d52be1b54b6aab4345e2ba6..851ea2ec7917f8b2842824329b9775c7a839bec6 100644
--- a/js/menus/CamMenuView.js
+++ b/js/menus/CamMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 1/26/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'lattice'], function($, _, MenuParentView, plist, cam, lattice){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'lattice', 'text!camMenuTemplate'], function($, _, MenuParentView, plist, cam, lattice, template){
 
     return MenuParentView.extend({
 
@@ -44,69 +44,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'lattice'], functi
             return data;
         },
 
-        template: _.template('\
-            CAM output: &nbsp;&nbsp;\
-                <div class="btn-group">\
-                    <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allCamProcesses[machineName][camProcess] %><span class="caret"></span></button>\
-                    <ul role="menu" class="dropdown-menu">\
-                        <% _.each(_.keys(allCamProcesses[machineName]), function(key){ %>\
-                            <li><a class="assembler dropdownSelector" data-property="camProcess" data-value="<%= key %>" href="#"><%= allCamProcesses[machineName][key] %></a></li>\
-                        <% }); %>\
-                    </ul>\
-                </div><br/><br/>\
-             <a href="#" id="saveCam" class=" btn btn-block btn-lg btn-default">Process and Save</a><br/>\
-             Units: &nbsp;&nbsp;\
-                <div class="btn-group">\
-                    <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allUnitTypes[units] %><span class="caret"></span></button>\
-                    <ul role="menu" class="dropdown-menu">\
-                        <% _.each(_.keys(allUnitTypes), function(key){ %>\
-                            <li><a class="lattice dropdownSelector" data-property="units" data-value="<%= key %>" href="#"><%= allUnitTypes[key] %></a></li>\
-                        <% }); %>\
-                    </ul>\
-                </div><br/><br/>\
-                Origin (xyz): &nbsp;&nbsp;<input data-property="originPosition" data-key="x" value="<%= originPosition.x %>" placeholder="X" class="form-control floatInput assembler" type="text">\
-                &nbsp;<input data-property="originPosition" data-key="y" value="<%= originPosition.y %>" placeholder="Y" class="form-control floatInput assembler" type="text">\
-                &nbsp;<input data-property="originPosition" data-key="z" value="<%= originPosition.z %>" placeholder="Z" class="form-control floatInput assembler" type="text">\
-                <% if (!(machineName == "handOfGod")){ %>\
-                <br/><a id="manualSelectOrigin" class=" btn btn-lg btn-default btn-imageCustom<% if (manualSelectOrigin){ %> btn-selected<% } %>"><img src="assets/imgs/cursor.png"></a>\
-                <label>&nbsp;&nbsp;&nbsp;Manually select origin from existing cell</label><br/><br/>\
-                <% if (!assembler.stockAttachedToEndEffector){ %>\
-                Stock (xyz): &nbsp;&nbsp;<input data-property="stockPosition" data-key="x" value="<%= stockPosition.x %>" placeholder="X" class="form-control floatInput assembler" type="text">\
-                &nbsp;<input data-property="stockPosition" data-key="y" value="<%= stockPosition.y %>" placeholder="Y" class="form-control floatInput assembler" type="text">\
-                &nbsp;<input data-property="stockPosition" data-key="z" value="<%= stockPosition.z %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/>\
-                <label class="checkbox" for="stockPosRel">\
-                <input id="stockPosRel" data-property="stockPositionRelative" type="checkbox" <% if (stockPositionRelative){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="assembler custom-checkbox">\
-                <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-                Stock position relative to Origin</label>\
-                <label class="checkbox" for="stockFixed">\
-                <input id="stockFixed" data-property="stockFixed" type="checkbox" <% if (stockFixed){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="assembler custom-checkbox">\
-                <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-                Fix stock relative to to Origin</label>\
-                <label class="checkbox" for="multipleStockPositions">\
-                <input id="multipleStockPositions" data-property="multipleStockPositions" type="checkbox" <% if (multipleStockPositions){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="assembler custom-checkbox">\
-                <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-                Multiple stock positions</label>\
-                <% if (multipleStockPositions){ %>\
-                    Stock dimensions (xy): &nbsp;&nbsp;<input data-property="stockArraySize" data-key="x" value="<%= stockArraySize.x %>" placeholder="X" class="form-control intInput assembler" type="text">\
-                    &nbsp;<input data-property="stockArraySize" data-key="y" value="<%= stockArraySize.y %>" placeholder="Y" class="form-control intInput assembler" type="text"><br/><br/>\
-                    Stock separation: &nbsp;&nbsp;<input data-property="stockSeparation" value="<%= stockSeparation %>" placeholder="X" class="form-control floatInput assembler" type="text"><br/><br/>\
-                <% } %>\
-                <% } %>\
-                Clearance Height: &nbsp;&nbsp;<input data-property="rapidHeight" value="<%= rapidHeight %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/>\
-                <label class="checkbox" for="rapidPosRel">\
-                <input id="rapidPosRel" data-property="rapidHeightRelative" type="checkbox" <% if (rapidHeightRelative){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="assembler custom-checkbox">\
-                <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-                Clearance height relative to Origin</label>\
-                <% } else { %>\
-                <br/><br/>Stock Height: &nbsp;&nbsp;<input data-property="stockPosition" data-key="z" value="<%= stockPosition.z %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/><br/>\
-                <% } %>\
-                Approach Height: &nbsp;&nbsp;<input data-property="safeHeight" value="<%= safeHeight %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/><br/>\
-                Speeds (measured in <%= units %> per second):<br/><br/>\
-                Rapids (xy, z): &nbsp;&nbsp;<input data-property="rapidSpeeds" data-key="xy" value="<%= rapidSpeeds.xy %>" placeholder="XY" class="form-control floatInput assembler" type="text">\
-                &nbsp;<input data-property="rapidSpeeds" data-key="z" value="<%= rapidSpeeds.z %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/><br/>\
-                Feed Rate (xy, z): &nbsp;&nbsp;<input data-property="feedRate" data-key="xy" value="<%= feedRate.xy %>" placeholder="XY" class="form-control floatInput assembler" type="text">\
-                &nbsp;<input data-property="feedRate" data-key="z" value="<%= feedRate.z %>" placeholder="Z" class="form-control floatInput assembler" type="text">\
-            ')
+        template: _.template(template)
     });
 });
 
diff --git a/js/menus/CompositeMenuView.js b/js/menus/CompositeMenuView.js
index edfe9c5752c99a94dbd71b3eda8bb2d6f4bcda8a..71c28390294ae44a8e52cd4727f5412106edabe0 100644
--- a/js/menus/CompositeMenuView.js
+++ b/js/menus/CompositeMenuView.js
@@ -2,7 +2,8 @@
  * Created by aghassaei on 6/10/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'globals', 'materials'], function($, _, MenuParentView, plist, lattice, globals, materials){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'globals', 'materials', 'text!compositeMenuTemplate'],
+    function($, _, MenuParentView, plist, lattice, globals, materials, template){
 
     var dimensions;
 
@@ -85,37 +86,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'globals', 'ma
                 });
         },
 
-        template: _.template('\
-            <a href="#" class="btn btn-halfWidth btn-lg btn-default importJSON">Load Composite</a>\
-            <a id="saveComposite" href="#" class="btn btn-halfWidth btn-lg pull-right btn-default">Save Composite</a><br/><br/>\
-            Name: &nbsp;&nbsp;<input id="compositeName" data-property="name" value="<%= name %>" placeholder="Enter Name" class="seventyFiveWidth form-control textInput compositeEditor" type="text"><br/><br/>\
-            Num Cells: &nbsp;&nbsp;<%= numCells %><br/><br/>\
-            Bounding Box: &nbsp;&nbsp;<%= dimensions.x %> x <%= dimensions.y %> x <%= dimensions.z %><br/><br/>\
-            Display Color: &nbsp;&nbsp;\
-            <input id="compositeColor" style="border-color: <%= color %> ;" data-property="color" value="<%= color %>" placeholder="Enter HEX" class="halfWidth compositeEditor form-control hexInput" type="text"><br/><br/>\
-            <a id="newRandomColor" href="#" class="btn btn-block btn-lg btn-default">New Random Color</a><br/>\
-            Available Materials:<br/>\
-            <% _.each(_.keys(allMaterials[materialClass]), function(key){ %>\
-            <label class="radio colorSwatches">\
-                <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio appState"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-                <div class="materialColorSwatch">\
-                <div style="background-color:<% if(realisticColorScheme){ %><%= allMaterials[materialClass][key].color %><% }else{ %><%= allMaterials[materialClass][key].altColor %><% } %>"></div>\
-                <span><%= allMaterials[materialClass][key].name %></span></div>\
-            </label>\
-            <% }); %>\
-            <% _.each(_.keys(materials), function(key){ \
-                if (key == id || key.substr(0,5) != "super") return; %>\
-            <label class="radio colorSwatches">\
-                <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio appState"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-                <div class="materialColorSwatch">\
-                <div style="background-color:<% if(realisticColorScheme){ %><%= materials[key].color %><% }else{ %><%= materials[key].altColor %><% } %>"></div>\
-                <span><%= materials[key].name %></span></div>\
-            </label>\
-            <% }); %><br/>\
-            <a id="finishComposite" href="#" class="btn btn-block btn-lg btn-success">Save Composite</a><br/>\
-            <a id="cancelComposite" href="#" class="btn btn-halfWidth btn-lg btn-default">Cancel / Exit</a>\
-            <a id="deleteComposite" href="#" class="btn btn-halfWidth pull-right btn-lg btn-default"><span class="fui-trash"></span> Delete</a><br/>\
-            ')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/DiscoveryMenuView.js b/js/menus/DiscoveryMenuView.js
index d132627a1cae182080c0c5d59576a8ad7019b2ba..befc83a6beded664b03bde661241c0585ff8ae56 100644
--- a/js/menus/DiscoveryMenuView.js
+++ b/js/menus/DiscoveryMenuView.js
@@ -3,7 +3,8 @@
  */
 
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _, MenuParentView, plist, lattice){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'text!discoveryMenuTemplate'],
+    function($, _, MenuParentView, plist, lattice, template){
 
     var log = "testing<br/>hello";
 
@@ -27,11 +28,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             return _.extend({log: log}, this.model.toJSON(), plist);
         },
 
-        template: _.template('\
-        Log:\
-        <div id="gcodeEditor"><%= log %></div><br/>\
-        <a id="discoveryLogClear" href="#" class="btn btn-block btn-lg btn-danger">Clear Log</a><br/>\
-            ')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/ImportMenuView.js b/js/menus/ImportMenuView.js
index 221f2361818fdb31c0111b7a20e69bca488aac55..19fa26fbcac7c97b5c702cabb0283be865208cab 100644
--- a/js/menus/ImportMenuView.js
+++ b/js/menus/ImportMenuView.js
@@ -2,7 +2,8 @@
  * Created by aghassaei on 1/26/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _, MenuParentView, plist, lattice){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'importMenuTemplate'],
+    function($, _, MenuParentView, plist, lattice, template){
 
     return MenuParentView.extend({
 
@@ -83,28 +84,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             return _.extend(this.model.toJSON(), this.fillGeometry.toJSON());
         },
 
-        template: _.template('\
-            Filename: &nbsp;&nbsp;<%= filename %><br/><br/>\
-            <% if (mesh){ %>\
-            Scale:<br/><br/>\
-            <a href="#" id="doFillGeo" class=" btn btn-block btn-lg btn-default">Fill Mesh</a><br/>\
-            <a href="#" id="removeFillGeo" class=" btn btn-block btn-lg btn-default">Remove Mesh</a><br/>\
-            <hr>\
-            <% } %>\
-            <a href="#" class=" btn btn-block btn-lg btn-danger clearCells">Clear All Cells</a><br/><br/>\
-            <br/><span class="btn btn-default btn-lg btn-file fullWidth">\
-                Upload STL<input id="importMenuUploadSTL" type="file">\
-           </span><br/>\
-           <div class="text-center">OR</div>\
-            <div class="btn-group fullWidth">\
-                <button data-toggle="dropdown" class="btn btn-lg btn-default dropdown-toggle fullWidth" type="button">Select Model <span class="caret"></span></button>\
-                <ul role="menu" class="dropdown-menu">\
-                  <li><a class="importMenuSelectMesh" data-file="meshes-airbus/wingCrossSection.stl" href="#">Wing</a></li>\
-                  <li><a id="importMenuSelectWall" href="#">Block</a></li>\
-                </ul>\
-            </div><!-- /btn-group -->\
-            ')
-
+        template: _.template(template)
     });
 });
 
diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js
index 8d92a818992806dd909826b4729aeb93f426efdc..4f98be5f487df3e9d715460fd7001e4bee7560b5 100644
--- a/js/menus/LatticeMenuView.js
+++ b/js/menus/LatticeMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 1/26/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _, MenuParentView, plist, lattice){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'text!latticeMenuTemplate'], function($, _, MenuParentView, plist, lattice, template){
 
     return MenuParentView.extend({
 
@@ -18,33 +18,7 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             return _.extend(_.extend(lattice.toJSON(), this.model.toJSON()), plist);
         },
 
-        template: _.template('\
-            Cell Type: &nbsp;&nbsp;\
-                <div class="btn-group">\
-                    <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allCellTypes[cellType] %><span class="caret"></span></button>\
-                    <ul role="menu" class="dropdown-menu">\
-                        <% _.each(_.keys(allCellTypes), function(key){ %>\
-                            <li><a class="lattice dropdownSelector" data-property="cellType" data-value="<%= key %>" href="#"><%= allCellTypes[key] %></a></li>\
-                        <% }); %>\
-                    </ul>\
-                </div><br/><br/>\
-            Cell Connection:&nbsp;&nbsp;\
-                <div class="btn-group">\
-                    <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allConnectionTypes[cellType][connectionType] %>-Connected<span class="caret"></span></button>\
-                    <ul role="menu" class="dropdown-menu">\
-                        <% _.each(_.keys(allConnectionTypes[cellType]), function(key){ %>\
-                            <li><a class="lattice dropdownSelector" data-property="connectionType" data-value="<%= key %>" href="#"><%= allConnectionTypes[cellType][key] %></a></li>\
-                        <% }); %>\
-                    </ul>\
-                </div><br/><br/>\
-            <% if (connectionType == "gik") { %>\
-            GIK Length:&nbsp;&nbsp;<input data-property="superCellRange" data-key="x" value="<%= superCellRange.x %>" placeholder="GIK length" class="form-control intInput appState" type="text"><br/>\
-            <br/>\
-            <% } %>\
-            <a href="#" class="clearCells btn btn-block btn-lg btn-danger">Clear All Cells</a><br/>\
-            Num Cells:&nbsp;&nbsp;<%= numCells %><br/>\
-            ')
-
+        template: _.template(template)
     });
 });
 
diff --git a/js/menus/MaterialMenuView.js b/js/menus/MaterialMenuView.js
index 0f4bbbbe258a3cac58bef760db7eb055081bc81a..99a90d744b3f86089b081a5a550655e8b3ead4dd 100644
--- a/js/menus/MaterialMenuView.js
+++ b/js/menus/MaterialMenuView.js
@@ -2,7 +2,8 @@
  * Created by aghassaei on 2/25/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'globals', 'materials'], function($, _, MenuParentView, plist, lattice, globals, materials){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'globals', 'materials', 'text!materialMenuTemplate'],
+    function($, _, MenuParentView, plist, lattice, globals, materials, template){
 
     return MenuParentView.extend({
 
@@ -40,55 +41,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'globals', 'ma
             return _.extend(lattice.toJSON(), this.model.toJSON(), plist, globals, {materials:materials});
         },
 
-        template: _.template('\
-            Material Class: &nbsp;&nbsp;\
-                <div class="btn-group">\
-                    <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allMaterialClasses[materialClass] %><span class="caret"></span></button>\
-                    <ul role="menu" class="dropdown-menu">\
-                        <% _.each(_.keys(allMaterialClasses), function(key){ %>\
-                            <li><a class="appState dropdownSelector" data-property="materialClass" data-value="<%= key %>" href="#"><%= allMaterialClasses[key] %></a></li>\
-                        <% }); %>\
-                    </ul>\
-                </div><br/><br/>\
-            <% if (allMaterialTypes[cellType][connectionType]){ %> \
-            Materials:<br/>\
-            <% _.each(_.keys(allMaterials[materialClass]), function(key){ %>\
-            <label class="radio colorSwatches">\
-                <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio appState"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-                <div class="materialColorSwatch">\
-                <div style="background-color:<% if(realisticColorScheme){ %><%= allMaterials[materialClass][key].color %><% }else{ %><%= allMaterials[materialClass][key].altColor %><% } %>"></div>\
-                <span><%= allMaterials[materialClass][key].name %></span></div>\
-            </label>\
-            <% }); %>\
-            <br/>\
-            <label class="checkbox" for="realisticColorScheme">\
-            <input id="realisticColorScheme" data-property="realisticColorScheme" type="checkbox" <% if (realisticColorScheme){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="appState custom-checkbox">\
-            <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-            Use realistic color scheme</label>\
-            <% } %>\
-            <br/>\
-            Composite Materials:<br/>\
-            <% if ((cellType == "octa" && connectionType != "vertex") || cellType == "tetra"){ %>\
-            not available for this lattice type\
-            <%  } else { %> \
-            <% _.each(_.keys(materials), function(key){ \
-            if (key.substr(0,5) != "super") return; %>\
-            <label class="radio colorSwatches">\
-                <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio appState"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>\
-                <div class="materialColorSwatch">\
-                <div style="background-color:<% if(realisticColorScheme){ %><%= materials[key].color %><% }else{ %><%= materials[key].altColor %><% } %>"></div>\
-                <span><%= materials[key].name %><a data-id="<%= key %>" class="editComposite">Settings...<a/></span></div>\
-            </label>\
-            <% }); %><br/>\
-            <% if (_.filter(_.keys(materials), function(name){return name.substr(0,5) == "super"; }).length > 0) { %>\
-            Offset (xyz): &nbsp;&nbsp;<input data-property="superCellIndex" data-key="x" value="<%= superCellIndex.x %>" placeholder="X" class="form-control intInput appState" type="text">\
-                &nbsp;<input data-property="superCellIndex" data-key="y" value="<%= superCellIndex.y %>" placeholder="Y" class="form-control intInput appState" type="text">\
-                &nbsp;<input data-property="superCellIndex" data-key="z" value="<%= superCellIndex.z %>" placeholder="Z" class="form-control intInput appState" type="text"><br/><br/>\
-            <% } %>\
-            <a id="navToCompositeMenu" href="#" class="btn btn-block btn-lg btn-default">+ Create New Composite Material</a><br/>\
-            <a id="compositeFromLattice" href="#" class="btn btn-block btn-lg btn-default">New Composite From Current Assembly</a><br/>\
-            <% } %>\
-            ')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js
index 78cf9dae4a8e541124030c57a2900bf7b8e7d30a..d67bf628e91d1f27bb65a3be4c6a15c89b80fa94 100644
--- a/js/menus/MenuWrapperView.js
+++ b/js/menus/MenuWrapperView.js
@@ -3,7 +3,7 @@
  */
 
 
-define(['jquery', 'underscore', 'plist', 'backbone', 'lattice'], function($, _, plist, Backbone, lattice){
+define(['jquery', 'underscore', 'plist', 'backbone', 'lattice', 'text!menuWrapperTemplate'], function($, _, plist, Backbone, lattice, template){
 
     return Backbone.View.extend({
 
@@ -244,13 +244,6 @@ define(['jquery', 'underscore', 'plist', 'backbone', 'lattice'], function($, _,
             this.model.set("menuIsVisible", true);
         },
 
-        template: _.template('\
-            <ul class="nav nav-tabs nav-justified">\
-            <% _.each(_.keys(allMenuTabs[currentNav]), function(key){\
-                if (key == "part" && !(allPartTypes[cellType][connectionType])) return;  %>\
-              <li role="presentation" class="menuWrapperTab" data-name="<%= key %>"><a href="#"><%= allMenuTabs[currentNav][key] %></a></li>\
-            <% }); %>\
-            </ul>\
-            ')
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/ModalView.js b/js/menus/ModalView.js
index d05593029ed64e19a302ccc0531a282b37098d59..01ec6ffc4aeb6d88d469cf9f918035d951e0a1a6 100644
--- a/js/menus/ModalView.js
+++ b/js/menus/ModalView.js
@@ -3,7 +3,7 @@
  */
 
 
-define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
+define(['jquery', 'underscore', 'backbone', 'text!modalViewTemplate'], function($, _, Backbone, template){
 
     return Backbone.View.extend({
 
@@ -30,26 +30,6 @@ define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
 //            Backbone.View.prototype.remove.call(this);
         },
 
-        template: _.template('\
-            <div class="modal-dialog modal-med">\
-                <div class="modal-content">\
-                    <div class="modal-header">\
-                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
-                    <p class="modal-title" ><%= title %></p>\
-                    </div>\
-                    <div class="modal-body">\
-                    <% if (typeof img !== "undefined") {%>\
-                    <img class="fullWidth" src="<%= img %>"><br/><br/>\
-                    <% } %>\
-                    <% if (text == ""){ %>\
-                    Need something here.\
-                    <% } else { %>\
-                        <%= text %>\
-                    <% } %>\
-                    </div>\
-                </div>\
-            </div>\
-        ')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/NavViewMenu.js b/js/menus/NavViewMenu.js
index 6130fc16f59117faea4a769840bb621ac1fd2e1a..8960b09e5d31cd2e02eee5576c19e079ae3e1444 100644
--- a/js/menus/NavViewMenu.js
+++ b/js/menus/NavViewMenu.js
@@ -3,7 +3,7 @@
  */
 
 
-define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
+define(['jquery', 'underscore', 'backbone', 'text!navViewMenuTemplate'], function($, _, Backbone, template){
 
     return Backbone.View.extend({
 
@@ -48,34 +48,6 @@ define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
             })
         },
 
-        template: _.template('\
-            <li class="dropdown-submenu">\
-            <a tabindex="-1">UI<span class="pull-right fui-arrow-right"></span></a>\
-            <ul class="dropdown-menu">\
-                <li><a class="appState boolProperty" data-property="menuIsVisible" href="#">Menu</a></li>\
-                <li><a class="appState boolProperty" data-property="scriptIsVisible" href="#">Script</a></li>\
-                <li><a class="appState boolProperty" data-property="consoleIsVisible" href="#">Console</a></li>\
-                <li><a class="appState boolProperty" data-property="ribbonIsVisible" href="#">Ribbon</a></li>\
-            </ul></li>\
-            <li class="dropdown-submenu">\
-            <a tabindex="-1">3D UI<span class="pull-right fui-arrow-right"></span></a>\
-            <ul class="dropdown-menu">\
-                <li><a class="appState boolProperty" data-property="basePlaneIsVisible" href="#">Sketch Plane</a></li>\
-                <li><a class="appState boolProperty" data-property="highlighterIsVisible" href="#">Hover Tool</a></li>\
-            </ul></li>\
-            <li class="dropdown-submenu">\
-            <a tabindex="-1">Rendering<span class="pull-right fui-arrow-right"></span></a>\
-            <ul class="dropdown-menu">\
-                <li><a class="appState boolProperty" data-property="renderAmbientOcclusion" href="#">Ambient Occlusion</a></li>\
-                <li><a class="appState boolProperty" data-property="realisticColorScheme" href="#">Realistic Color Scheme</a></li>\
-            </ul></li>\
-            <li class="dropdown-submenu">\
-            <a tabindex="-1">3D<span class="pull-right fui-arrow-right"></span></a>\
-            <ul class="dropdown-menu">\
-                <li><a class="appState boolProperty" data-property="axesAreVisible" href="#">Axes</a></li>\
-                <li><a id="reset3DView" href="#">Reset 3D Navigation</a></li>\
-            </ul></li>\
-            ')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/OptimizationMenuView.js b/js/menus/OptimizationMenuView.js
index 3fc6d13b193d489f5ceec7f9a8955c01474c15d5..c1e1d114b285213ed5027eddc37fc47c84b2c201 100644
--- a/js/menus/OptimizationMenuView.js
+++ b/js/menus/OptimizationMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 2/25/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist'], function($, _, MenuParentView, plist){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'text!optimizeMenuTemplate'], function($, _, MenuParentView, plist, template){
 
     return MenuParentView.extend({
 
@@ -16,8 +16,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist'], function($, _, MenuParen
             return null;
         },
 
-        template: _.template('\
-            input stiffness requirements of structure\
-            ')
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/PartMenuView.js b/js/menus/PartMenuView.js
index 7aeb4fca1bdcaf1892a1dad48e8f7ea0c4aeadd1..9e577112e35f1a045227ba767fc109a940c41f06 100644
--- a/js/menus/PartMenuView.js
+++ b/js/menus/PartMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 1/26/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _, MenuParentView, plist, lattice){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'text!partMenuTemplate'], function($, _, MenuParentView, plist, lattice, template){
 
     return MenuParentView.extend({
 
@@ -19,20 +19,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             return _.extend(lattice.toJSON(), this.model.toJSON(), plist);
         },
 
-        template: _.template('\
-            Part Type: &nbsp;&nbsp;\
-            <div class="btn-group">\
-                    <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allPartTypes[cellType][connectionType][partType] %><span class="caret"></span></button>\
-                    <ul role="menu" class="dropdown-menu">\
-                        <% _.each(_.keys(allPartTypes[cellType][connectionType]), function(key){ %>\
-                            <li><a class="lattice dropdownSelector" data-property="partType" data-value="<%= key %>" href="#"><%= allPartTypes[cellType][connectionType][key] %></a></li>\
-                        <% }); %>\
-                    </ul>\
-                </div><br/><br/>\
-            <!--Cell Separation (xy, z): &nbsp;&nbsp;<input data-property="cellSeparation" data-key="xy" value="<%= cellSeparation.xy %>" placeholder="XY" class="form-control floatInput lattice" type="text">\
-            &nbsp;<input data-property="cellSeparation" data-key="z" value="<%= cellSeparation.z %>" placeholder="Z" class="form-control floatInput lattice" type="text">\
-            <br/><br/>--><br/>\
-            ')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/PhysicsMenuView.js b/js/menus/PhysicsMenuView.js
index 2a90443cc60735222de602da0847d82fb7c71043..13bb5ac6337509acf78071d921422d0e2b4d2f12 100644
--- a/js/menus/PhysicsMenuView.js
+++ b/js/menus/PhysicsMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 2/25/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist'], function($, _, MenuParentView, plist){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'text!physicsMenuTemplate'], function($, _, MenuParentView, plist, template){
 
     return MenuParentView.extend({
 
@@ -16,13 +16,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist'], function($, _, MenuParen
             return null;
         },
 
-        template: _.template('\
-            world physics: gravity, global forces\
-            <br/><br/>\
-            part connection stiffness\
-            <br/><br/>\
-            ground/fixed/boundary conditions definition\
-            ')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/Ribbon.js b/js/menus/Ribbon.js
index 49cc68527fe77d916491b82c1c93c4eaaf916b0c..4426baccdb898fecc10d1aa979a6873710649788 100644
--- a/js/menus/Ribbon.js
+++ b/js/menus/Ribbon.js
@@ -2,7 +2,7 @@
  * Created by fab on 3/18/15.
  */
 
-define(['jquery', 'underscore', 'backbone', 'plist', 'lattice'], function($, _, Backbone, plist, lattice){
+define(['jquery', 'underscore', 'backbone', 'plist', 'lattice', 'text!ribbonTemplate'], function($, _, Backbone, plist, lattice, template){
 
     return Backbone.View.extend({
 
@@ -58,20 +58,7 @@ define(['jquery', 'underscore', 'backbone', 'plist', 'lattice'], function($, _,
             this.$el.html(this.template(_.extend(lattice.toJSON(), this.model.toJSON(), plist)));
         },
 
-        template: _.template('\
-            <div class="btn-toolbar">\
-                <div class="btn-group">\
-                  <a data-type="supercell" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "supercell"){ %> ribbon-selected<% } %>" href="#"><img data-type="supercell" src="assets/imgs/super-sm.png"></a>\
-                  <a data-type="cell" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "cell"){ %> ribbon-selected<% } %>" href="#"><img data-type="cell" src="assets/imgs/cell-sm.png"></a>\
-                  <% if (allPartTypes[cellType][connectionType]){ %>\
-                  <a data-type="part" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "part"){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/part-sm.png"></a>\
-                  <% } %>\
-                  <!--<a data-type="beam" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "beam"){ %> ribbon-selected<% } %>" href="#">Beam</a>-->\
-                  <a class="btn btn-primary btn-ribbon ribbonDeleteMode<% if (deleteMode){ %> ribbon-selected"<% } %>"><span class="fui-cross"></span></a>\
-                </div>\
-            </div>\
-            ')
-
+        template: _.template(template)
     });
 });
 
diff --git a/js/menus/ScriptMenuView.js b/js/menus/ScriptMenuView.js
index bc2e872debff6398860a3a079490f1d932e6091d..311e65fc6afb0e625264d5d82eb8e0aae78195e8 100644
--- a/js/menus/ScriptMenuView.js
+++ b/js/menus/ScriptMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 1/26/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist'], function($, _, MenuParentView, plist){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'text!scriptMenuTemplate'], function($, _, MenuParentView, plist, template){
 
     return MenuParentView.extend({
 
@@ -16,17 +16,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist'], function($, _, MenuParen
             return plist;
         },
 
-        template: _.template('\
-            <div class="btn-group fullWidth">\
-                <button data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle fullWidth" type="button">Load Script<span class="caret"></span></button>\
-                <ul role="menu" class="dropdown-menu">\
-                    <% _.each(_.keys(allScripts), function(key){ %>\
-                        <li><a data-type="<%= key %>" href="#"><%= allScripts[key] %></a></li>\
-                    <% }); %>\
-                </ul>\
-            </div><br/><br/><!-- /btn-group -->\
-            <a href="#" class="clearCells btn btn-block btn-lg btn-danger">Clear All Cells</a><br/>\
-            ')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/SendMenuView.js b/js/menus/SendMenuView.js
index fa906faa8a9c2ac138697c01ec9031721832ee96..624af6e1b6fc7d30abfe2fcaf8261d04dcc90448 100644
--- a/js/menus/SendMenuView.js
+++ b/js/menus/SendMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 3/11/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _, MenuParentView, plist, lattice){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice', 'text!sendMenuTemplate'], function($, _, MenuParentView, plist, lattice, template){
 
     return MenuParentView.extend({
 
@@ -17,8 +17,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'lattice'], function($, _
             return null;
         },
 
-
-        template: _.template('realtime communication with machine')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/SetupCommMenuView.js b/js/menus/SetupCommMenuView.js
index 57e2e3a73d600a24adb95fc55b9eea9e8ee88853..f03f52cadde30fdc057daf8dfc7db12d9e456d1c 100644
--- a/js/menus/SetupCommMenuView.js
+++ b/js/menus/SetupCommMenuView.js
@@ -105,8 +105,8 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'serialComm'], function($
                     </ul>\
                 </div>\
             &nbsp;&nbsp;<a href="#" id="refreshPorts" class="btn btn-lg btn-default btn-icon"><img src="assets/imgs/refreshIcon.png"></a><br/><br/>\
-        Incoming: &nbsp;&nbsp;<pre id="incomingSerialMessage"></pre><br/>\
-        <input id="seriallTestMessage" value="<%= testMessage %>" placeholder="Send Message" class="form-control fullWidth unresponsiveInput" type="text"><br/><br/>\
+        Incoming: &nbsp;&nbsp;<pre id="incomingSerialMessage"></pre><br/><br/>\
+        Out: &nbsp;&nbsp;<input id="seriallTestMessage" value="<%= testMessage %>" placeholder="Send Message" class="seventyFiveWidth form-control unresponsiveInput" type="text"><br/><br/>\
         <a href="#" id="serialFlushBuffer" class="btn btn-block btn-lg btn-danger">Flush Buffer</a><br/>\
         <% }else{ %>\
         No node server found.<br/><br/>\
diff --git a/js/menus/SketchMenuView.js b/js/menus/SketchMenuView.js
index a36cf0adaef96a6ce90bd8f6f94f39e13b2a5730..f7e47f28146821e8778f5dcde050a0da56cf8f2d 100644
--- a/js/menus/SketchMenuView.js
+++ b/js/menus/SketchMenuView.js
@@ -2,7 +2,7 @@
  * Created by aghassaei on 1/26/15.
  */
 
-define(['jquery', 'underscore', 'menuParent', 'plist'], function($, _, MenuParentView, plist){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'text!sketchMenuTemplate'], function($, _, MenuParentView, plist, template){
 
     return MenuParentView.extend({
 
@@ -30,11 +30,6 @@ define(['jquery', 'underscore', 'menuParent', 'plist'], function($, _, MenuParen
             });
         },
 
-        template: _.template('\
-            Sketch Plane Height:&nbsp;&nbsp;<input id="zHeightSlider" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="<%= zIndex %>"/>\
-            <br/><br/>\
-            todo: Sketch and extrude/cut commands\
-            ')
-
+        template: _.template(template)
     });
 });
\ No newline at end of file
diff --git a/js/menus/templates/AnimationMenuView.html b/js/menus/templates/AnimationMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..e98c5321307694d23be582f81dcde19aec375f31
--- /dev/null
+++ b/js/menus/templates/AnimationMenuView.html
@@ -0,0 +1,19 @@
+<% if (stockSimulationPlaying){ %>
+    <a href="#" id="pauseStockSim" class=" btn btn-block btn-lg btn-warning">Pause</a>
+<% } else { %>
+    <% if (simLineNumber != 0){ %>
+        <a href="#" id="playStockSim" class=" btn btn-lg btn-halfWidth btn-success">Play</a>
+        <a href="#" id="resetStockSim" class=" btn btn-lg btn-halfWidth pull-right btn-default">Reset</a><br/>
+    <% } else { %>
+        <a href="#" id="playStockSim" class=" btn btn-block btn-lg btn-success">Play</a>
+    <% } %>
+<% } %>
+<input id="speedSlider" data-slider-id="speedSlider" type="text" data-slider-min="0" data-slider-max="6" data-slider-step="1" data-slider-value="<%= Math.log2(simSpeed) %>"/><br/>
+<a href="#" id="animationMenuSave" class=" btn btn-block btn-lg btn-default">Save</a><br/>
+<!--Assembly Time:&nbsp;&nbsp;<br/><br/>-->
+<% if (editsMadeToProgram && needsPostProcessing){ %>
+    <div class="postWarning">You have made the following changes that require post processing:<br/>
+    This will override edits you have made to the G-code.  OK to override? <a href="#" class="overrideEdits btn btn-block btn-lg btn-danger">OK</a></div>
+<% } %>
+<div id="gcodeEditor"><%= dataOut %></div><br/>
+<a href="#" class="overrideEdits btn btn-block btn-lg btn-default">Undo Changes</a><br/>
\ No newline at end of file
diff --git a/js/menus/templates/AssemblerMenuView.html b/js/menus/templates/AssemblerMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..cd04559f8ac4f25bdb7e74532ca133e2eed80eef
--- /dev/null
+++ b/js/menus/templates/AssemblerMenuView.html
@@ -0,0 +1,21 @@
+Machine: &nbsp;&nbsp;
+    <div class="btn-group">
+        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allMachineTypes[cellType][connectionType][machineName] %><span class="caret"></span></button>
+        <ul role="menu" class="dropdown-menu">
+            <% _.each(_.keys(allMachineTypes[cellType][connectionType]), function(key){ %>
+                <li><a class="assembler dropdownSelector" data-property="machineName" data-value="<%= key %>" href="#"><%= allMachineTypes[cellType][connectionType][key] %></a></li>
+            <% }); %>
+        </ul>
+    </div><br/><br/>
+Strategy: &nbsp;&nbsp;
+    <div class="btn-group">
+        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allAssemblyStrategies[camStrategy] %><span class="caret"></span></button>
+        <ul role="menu" class="dropdown-menu">
+            <% _.each(_.keys(allAssemblyStrategies), function(key){ %>
+                <li><a class="assembler dropdownSelector" data-property="camStrategy" data-value="<%= key %>" href="#"><%= allAssemblyStrategies[key] %></a></li>
+            <% }); %>
+        </ul>
+    </div><br/><br/>
+<% if (camStrategy == "raster"){ %>
+    Raster Order: &nbsp;&nbsp;<input value="<%= placementOrder %>" placeholder="Placement Order" class="form-control placementOrder" type="text"><br/><br/>
+<% } %>
\ No newline at end of file
diff --git a/js/menus/templates/CamMenuView.html b/js/menus/templates/CamMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..074f235ac1f3d4f8a15da19acaa20b8e3d731f31
--- /dev/null
+++ b/js/menus/templates/CamMenuView.html
@@ -0,0 +1,64 @@
+CAM output: &nbsp;&nbsp;<div class="btn-group">
+        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allCamProcesses[machineName][camProcess] %><span class="caret"></span></button>
+        <ul role="menu" class="dropdown-menu">
+            <% _.each(_.keys(allCamProcesses[machineName]), function(key){ %>
+                <li><a class="assembler dropdownSelector" data-property="camProcess" data-value="<%= key %>" href="#"><%= allCamProcesses[machineName][key] %></a></li>
+            <% }); %>
+        </ul>
+    </div><br/><br/>
+<a href="#" id="saveCam" class=" btn btn-block btn-lg btn-default">Process and Save</a><br/>
+Units: &nbsp;&nbsp;<div class="btn-group">
+        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allUnitTypes[units] %><span class="caret"></span></button>
+        <ul role="menu" class="dropdown-menu">
+            <% _.each(_.keys(allUnitTypes), function(key){ %>
+                <li><a class="lattice dropdownSelector" data-property="units" data-value="<%= key %>" href="#"><%= allUnitTypes[key] %></a></li>
+            <% }); %>
+        </ul>
+    </div><br/><br/>
+Origin (xyz): &nbsp;&nbsp;
+    <input data-property="originPosition" data-key="x" value="<%= originPosition.x %>" placeholder="X" class="form-control floatInput assembler" type="text">&nbsp;
+    <input data-property="originPosition" data-key="y" value="<%= originPosition.y %>" placeholder="Y" class="form-control floatInput assembler" type="text">&nbsp;
+    <input data-property="originPosition" data-key="z" value="<%= originPosition.z %>" placeholder="Z" class="form-control floatInput assembler" type="text">
+<% if (!(machineName == "handOfGod")){ %><br/>
+    <a id="manualSelectOrigin" class=" btn btn-lg btn-default btn-imageCustom<% if (manualSelectOrigin){ %> btn-selected<% } %>"><img src="assets/imgs/cursor.png"></a>
+    <label>&nbsp;&nbsp;&nbsp;Manually select origin from existing cell</label><br/><br/>
+    <% if (!assembler.stockAttachedToEndEffector){ %>
+        Stock (xyz): &nbsp;&nbsp;
+            <input data-property="stockPosition" data-key="x" value="<%= stockPosition.x %>" placeholder="X" class="form-control floatInput assembler" type="text">&nbsp;
+            <input data-property="stockPosition" data-key="y" value="<%= stockPosition.y %>" placeholder="Y" class="form-control floatInput assembler" type="text">&nbsp;
+            <input data-property="stockPosition" data-key="z" value="<%= stockPosition.z %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/>
+                <label class="checkbox" for="stockPosRel">
+                <input id="stockPosRel" data-property="stockPositionRelative" type="checkbox" <% if (stockPositionRelative){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="assembler custom-checkbox">
+                <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+            Stock position relative to Origin</label>
+                <label class="checkbox" for="stockFixed">
+                <input id="stockFixed" data-property="stockFixed" type="checkbox" <% if (stockFixed){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="assembler custom-checkbox">
+                <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+            Fix stock relative to to Origin</label>
+                <label class="checkbox" for="multipleStockPositions">
+                <input id="multipleStockPositions" data-property="multipleStockPositions" type="checkbox" <% if (multipleStockPositions){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="assembler custom-checkbox">
+                <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+            Multiple stock positions</label>
+                <% if (multipleStockPositions){ %>
+                    Stock dimensions (xy): &nbsp;&nbsp;<input data-property="stockArraySize" data-key="x" value="<%= stockArraySize.x %>" placeholder="X" class="form-control intInput assembler" type="text">&nbsp;
+                        <input data-property="stockArraySize" data-key="y" value="<%= stockArraySize.y %>" placeholder="Y" class="form-control intInput assembler" type="text"><br/><br/>
+                    Stock separation: &nbsp;&nbsp;<input data-property="stockSeparation" value="<%= stockSeparation %>" placeholder="X" class="form-control floatInput assembler" type="text"><br/><br/>
+                <% } %>
+    <% } %>
+    Clearance Height: &nbsp;&nbsp;
+        <input data-property="rapidHeight" value="<%= rapidHeight %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/>
+            <label class="checkbox" for="rapidPosRel">
+            <input id="rapidPosRel" data-property="rapidHeightRelative" type="checkbox" <% if (rapidHeightRelative){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="assembler custom-checkbox">
+            <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+        Clearance height relative to Origin</label>
+<% } else { %><br/><br/>
+    Stock Height: &nbsp;&nbsp;<input data-property="stockPosition" data-key="z" value="<%= stockPosition.z %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/><br/>
+<% } %>
+Approach Height: &nbsp;&nbsp;<input data-property="safeHeight" value="<%= safeHeight %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/><br/>
+Speeds (measured in <%= units %> per second):<br/><br/>
+    Rapids (xy, z): &nbsp;&nbsp;<input data-property="rapidSpeeds" data-key="xy" value="<%= rapidSpeeds.xy %>" placeholder="XY" class="form-control floatInput assembler" type="text">&nbsp;
+        <input data-property="rapidSpeeds" data-key="z" value="<%= rapidSpeeds.z %>" placeholder="Z" class="form-control floatInput assembler" type="text"><br/><br/>
+    Feed Rate (xy, z): &nbsp;&nbsp;<input data-property="feedRate" data-key="xy" value="<%= feedRate.xy %>" placeholder="XY" class="form-control floatInput assembler" type="text">&nbsp;
+        <input data-property="feedRate" data-key="z" value="<%= feedRate.z %>" placeholder="Z" class="form-control floatInput assembler" type="text">
+<!--<% if (machineName == "oneBitBot") {%>Rotate Machine: &nbsp;&nbsp;<a class=" btn btn-lg btn-default btn-machineRotation btn-imageCustom"><img src="assets/imgs/clockwise.png"></a>-->
+         <!--&nbsp;&nbsp&nbsp;<a class=" btn btn-lg btn-default btn-machineRotation btn-imageCustom"><img src="assets/imgs/counterClockwise.png"></a><br/><br/><% } %>-->
\ No newline at end of file
diff --git a/js/menus/templates/CompositeMenuView.html b/js/menus/templates/CompositeMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..65e8888bb35148872f41d6b48c8f17ecb8a49bcc
--- /dev/null
+++ b/js/menus/templates/CompositeMenuView.html
@@ -0,0 +1,29 @@
+<a href="#" class="btn btn-halfWidth btn-lg btn-default importJSON">Load Composite</a>
+<a id="saveComposite" href="#" class="btn btn-halfWidth btn-lg pull-right btn-default">Save Composite</a><br/><br/>
+Name: &nbsp;&nbsp;<input id="compositeName" data-property="name" value="<%= name %>" placeholder="Enter Name" class="seventyFiveWidth form-control textInput compositeEditor" type="text"><br/><br/>
+Num Cells: &nbsp;&nbsp;<%= numCells %><br/><br/>
+Bounding Box: &nbsp;&nbsp;<%= dimensions.x %> x <%= dimensions.y %> x <%= dimensions.z %><br/><br/>
+Display Color: &nbsp;&nbsp;
+    <input id="compositeColor" style="border-color: <%= color %> ;" data-property="color" value="<%= color %>" placeholder="Enter HEX" class="halfWidth compositeEditor form-control hexInput" type="text"><br/><br/>
+<a id="newRandomColor" href="#" class="btn btn-block btn-lg btn-default">New Random Color</a><br/>
+Available Materials:<br/>
+    <% _.each(_.keys(allMaterials[materialClass]), function(key){ %>
+        <label class="radio colorSwatches">
+            <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio appState"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+            <div class="materialColorSwatch">
+            <div style="background-color:<% if(realisticColorScheme){ %><%= allMaterials[materialClass][key].color %><% }else{ %><%= allMaterials[materialClass][key].altColor %><% } %>"></div>
+            <span><%= allMaterials[materialClass][key].name %></span></div>
+        </label>
+    <% }); %>
+<% _.each(_.keys(materials), function(key){
+    if (key == id || key.substr(0,5) != "super") return; %>
+    <label class="radio colorSwatches">
+        <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio appState"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+        <div class="materialColorSwatch">
+        <div style="background-color:<% if(realisticColorScheme){ %><%= materials[key].color %><% }else{ %><%= materials[key].altColor %><% } %>"></div>
+        <span><%= materials[key].name %></span></div>
+    </label>
+<% }); %><br/>
+<a id="finishComposite" href="#" class="btn btn-block btn-lg btn-success">Save Composite</a><br/>
+<a id="cancelComposite" href="#" class="btn btn-halfWidth btn-lg btn-default">Cancel / Exit</a>
+<a id="deleteComposite" href="#" class="btn btn-halfWidth pull-right btn-lg btn-default"><span class="fui-trash"></span> Delete</a><br/>
\ No newline at end of file
diff --git a/js/menus/templates/DiscoveryMenuView.html b/js/menus/templates/DiscoveryMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..88611c341d46281179f63a4f0bfc9f212fe635da
--- /dev/null
+++ b/js/menus/templates/DiscoveryMenuView.html
@@ -0,0 +1,3 @@
+Log:
+<div id="gcodeEditor"><%= log %></div><br/>
+<a id="discoveryLogClear" href="#" class="btn btn-block btn-lg btn-danger">Clear Log</a><br/>
\ No newline at end of file
diff --git a/js/menus/templates/ImportMenuView.html b/js/menus/templates/ImportMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..282d29cd6b2fb7fa1dbc12cb543b0f894ea16808
--- /dev/null
+++ b/js/menus/templates/ImportMenuView.html
@@ -0,0 +1,24 @@
+Filename: &nbsp;&nbsp;<%= filename %><br/><br/>
+<% if (mesh){ %>
+    Scale:<br/><br/>
+        <a href="#" id="doFillGeo" class=" btn btn-block btn-lg btn-default">Fill Mesh</a><br/>
+        <a href="#" id="removeFillGeo" class=" btn btn-block btn-lg btn-default">Remove Mesh</a><br/>
+        <hr>
+<% } %>
+<a href="#" class=" btn btn-block btn-lg btn-danger clearCells">Clear All Cells</a><br/><br/>
+<br/><span class="btn btn-default btn-lg btn-file fullWidth">
+    Upload STL<input id="importMenuUploadSTL" type="file">
+</span><br/>
+<div class="text-center">OR</div>
+<div class="btn-group fullWidth">
+    <button data-toggle="dropdown" class="btn btn-lg btn-default dropdown-toggle fullWidth" type="button">Select Model <span class="caret"></span></button>
+    <ul role="menu" class="dropdown-menu">
+        <li><a class="importMenuSelectMesh" data-file="meshes-airbus/wingCrossSection.stl" href="#">Wing</a></li>
+        <li><a id="importMenuSelectWall" href="#">Block</a></li>
+    </ul>
+</div><!-- /btn-group -->
+<!--//<a href="#" id="doSubtractGeo" class=" btn btn-block btn-lg btn-default">Subtract Mesh</a><br/>-->
+<!--//<li><a id="selectWall" href="#">Wall</a></li>-->
+<!--//<li><a class="selectMesh cutTerrain" data-file="river.stl" href="#">Landscape 1</a></li>-->
+<!--//<li><a class="selectMesh cutTerrain" data-file="terrain.stl" href="#">Landscape 2</a></li>-->
+<!--//<li><a class="selectMesh" data-file="meshes-airbus/Airbus_A300-600.stl" href="#">Plane</a></li>-->
\ No newline at end of file
diff --git a/js/menus/templates/LatticeMenuView.html b/js/menus/templates/LatticeMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..d7cfcd1c5f950877ce4aa759ec0f4d203039b23d
--- /dev/null
+++ b/js/menus/templates/LatticeMenuView.html
@@ -0,0 +1,27 @@
+Cell Type: &nbsp;&nbsp;
+    <div class="btn-group">
+        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allCellTypes[cellType] %><span class="caret"></span></button>
+        <ul role="menu" class="dropdown-menu">
+            <% _.each(_.keys(allCellTypes), function(key){ %>
+                <li><a class="lattice dropdownSelector" data-property="cellType" data-value="<%= key %>" href="#"><%= allCellTypes[key] %></a></li>
+            <% }); %>
+        </ul>
+    </div><br/><br/>
+Cell Connection:&nbsp;&nbsp;
+    <div class="btn-group">
+        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allConnectionTypes[cellType][connectionType] %>-Connected<span class="caret"></span></button>
+        <ul role="menu" class="dropdown-menu">
+            <% _.each(_.keys(allConnectionTypes[cellType]), function(key){ %>
+                <li><a class="lattice dropdownSelector" data-property="connectionType" data-value="<%= key %>" href="#"><%= allConnectionTypes[cellType][key] %></a></li>
+            <% }); %>
+        </ul>
+    </div><br/><br/>
+<% if (connectionType == "gik") { %>
+    GIK Length:&nbsp;&nbsp;<input data-property="superCellRange" data-key="x" value="<%= superCellRange.x %>" placeholder="GIK length" class="form-control intInput appState" type="text"><br/><br/>
+<% } %>
+<a href="#" class="clearCells btn btn-block btn-lg btn-danger">Clear All Cells</a><br/>
+Num Cells:&nbsp;&nbsp;<%= numCells %><br/>
+<!--//Cell Separation <% if (connectionType != "freeformFace"){ %>(xy, z): &nbsp;&nbsp;<input data-type="xy" value="<%= cellSeparation.xy %>" placeholder="XY" class="form-control numberInput cellSeparation" type="text">-->
+<!--//&nbsp;<input data-type="z" value="<%= cellSeparation.z %>" placeholder="Z" class="form-control numberInput cellSeparation" type="text">-->
+<!--//<% } else { %>( radial ): &nbsp;&nbsp;<input data-type="xy" value="<%= cellSeparation.xy %>" placeholder="XY" class="form-control numberInput cellSeparation" type="text"><% } %>-->
+<!--//<br/><br/>-->
\ No newline at end of file
diff --git a/js/menus/templates/MaterialMenuView.html b/js/menus/templates/MaterialMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..7041cbcf7039b2a9240b72ac43e400a6a5defb17
--- /dev/null
+++ b/js/menus/templates/MaterialMenuView.html
@@ -0,0 +1,45 @@
+Material Class: &nbsp;&nbsp;
+    <div class="btn-group">
+        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allMaterialClasses[materialClass] %><span class="caret"></span></button>
+        <ul role="menu" class="dropdown-menu">
+            <% _.each(_.keys(allMaterialClasses), function(key){ %>
+                <li><a class="appState dropdownSelector" data-property="materialClass" data-value="<%= key %>" href="#"><%= allMaterialClasses[key] %></a></li>
+            <% }); %>
+        </ul>
+    </div><br/><br/>
+<% if (allMaterialTypes[cellType][connectionType]){ %>
+    Materials:<br/>
+    <% _.each(_.keys(allMaterials[materialClass]), function(key){ %>
+        <label class="radio colorSwatches">
+            <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio appState"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+            <div class="materialColorSwatch">
+            <div style="background-color:<% if(realisticColorScheme){ %><%= allMaterials[materialClass][key].color %><% }else{ %><%= allMaterials[materialClass][key].altColor %><% } %>"></div>
+            <span><%= allMaterials[materialClass][key].name %></span></div>
+        </label>
+    <% }); %><br/>
+    <label class="checkbox" for="realisticColorScheme">
+    <input id="realisticColorScheme" data-property="realisticColorScheme" type="checkbox" <% if (realisticColorScheme){ %> checked="checked"<% } %> value="" data-toggle="checkbox" class="appState custom-checkbox">
+    <span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+    Use realistic color scheme</label>
+<% } %><br/>
+Composite Materials:<br/>
+<% if ((cellType == "octa" && connectionType != "vertex") || cellType == "tetra"){ %>
+    not available for this lattice type
+<%  } else { %>
+    <% _.each(_.keys(materials), function(key){
+        if (key.substr(0,5) != "super") return; %>
+        <label class="radio colorSwatches">
+            <input type="radio" <%if (key == materialType){ %>checked<%}%> name="materialType" value="<%= key %>" data-toggle="radio" class="custom-radio appState"><span class="icons"><span class="icon-unchecked"></span><span class="icon-checked"></span></span>
+            <div class="materialColorSwatch">
+            <div style="background-color:<% if(realisticColorScheme){ %><%= materials[key].color %><% }else{ %><%= materials[key].altColor %><% } %>"></div>
+            <span><%= materials[key].name %><a data-id="<%= key %>" class="editComposite">Settings...<a/></span></div>
+        </label>
+    <% }); %><br/>
+    <% if (_.filter(_.keys(materials), function(name){return name.substr(0,5) == "super"; }).length > 0) { %>
+        Offset (xyz): &nbsp;&nbsp;<input data-property="superCellIndex" data-key="x" value="<%= superCellIndex.x %>" placeholder="X" class="form-control intInput appState" type="text">&nbsp;
+            <input data-property="superCellIndex" data-key="y" value="<%= superCellIndex.y %>" placeholder="Y" class="form-control intInput appState" type="text">&nbsp;
+            <input data-property="superCellIndex" data-key="z" value="<%= superCellIndex.z %>" placeholder="Z" class="form-control intInput appState" type="text"><br/><br/>
+    <% } %>
+    <a id="navToCompositeMenu" href="#" class="btn btn-block btn-lg btn-default">+ Create New Composite Material</a><br/>
+    <a id="compositeFromLattice" href="#" class="btn btn-block btn-lg btn-default">New Composite From Current Assembly</a><br/>
+<% } %>
\ No newline at end of file
diff --git a/js/menus/templates/MenuWrapperView.html b/js/menus/templates/MenuWrapperView.html
new file mode 100644
index 0000000000000000000000000000000000000000..4fba9c91ee6622f40e4929876bcc827f90ae7686
--- /dev/null
+++ b/js/menus/templates/MenuWrapperView.html
@@ -0,0 +1,6 @@
+<ul class="nav nav-tabs nav-justified">
+<% _.each(_.keys(allMenuTabs[currentNav]), function(key){
+    if (key == "part" && !(allPartTypes[cellType][connectionType])) return;  %>
+    <li role="presentation" class="menuWrapperTab" data-name="<%= key %>"><a href="#"><%= allMenuTabs[currentNav][key] %></a></li>
+<% }); %>
+</ul>
\ No newline at end of file
diff --git a/js/menus/templates/ModalView.html b/js/menus/templates/ModalView.html
new file mode 100644
index 0000000000000000000000000000000000000000..e4328d6b45fe0cdd5e2046d08e2e17f5b7a8e8ed
--- /dev/null
+++ b/js/menus/templates/ModalView.html
@@ -0,0 +1,18 @@
+<div class="modal-dialog modal-med">
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+            <p class="modal-title" ><%= title %></p>
+        </div>
+        <div class="modal-body">
+            <% if (typeof img !== "undefined") {%>
+                <img class="fullWidth" src="<%= img %>"><br/><br/>
+            <% } %>
+            <% if (text == ""){ %>
+                Need something here.
+            <% } else { %>
+                <%= text %>
+            <% } %>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/js/menus/templates/NavViewMenu.html b/js/menus/templates/NavViewMenu.html
new file mode 100644
index 0000000000000000000000000000000000000000..a6890291b38d01402f6f5cedec1de1508433145a
--- /dev/null
+++ b/js/menus/templates/NavViewMenu.html
@@ -0,0 +1,30 @@
+<li class="dropdown-submenu">
+    <a tabindex="-1">UI<span class="pull-right fui-arrow-right"></span></a>
+    <ul class="dropdown-menu">
+        <li><a class="appState boolProperty" data-property="menuIsVisible" href="#">Menu</a></li>
+        <li><a class="appState boolProperty" data-property="scriptIsVisible" href="#">Script</a></li>
+        <li><a class="appState boolProperty" data-property="consoleIsVisible" href="#">Console</a></li>
+        <li><a class="appState boolProperty" data-property="ribbonIsVisible" href="#">Ribbon</a></li>
+    </ul>
+</li>
+<li class="dropdown-submenu">
+    <a tabindex="-1">3D UI<span class="pull-right fui-arrow-right"></span></a>
+    <ul class="dropdown-menu">
+        <li><a class="appState boolProperty" data-property="basePlaneIsVisible" href="#">Sketch Plane</a></li>
+        <li><a class="appState boolProperty" data-property="highlighterIsVisible" href="#">Hover Tool</a></li>
+    </ul>
+</li>
+<li class="dropdown-submenu">
+    <a tabindex="-1">Rendering<span class="pull-right fui-arrow-right"></span></a>
+    <ul class="dropdown-menu">
+        <li><a class="appState boolProperty" data-property="renderAmbientOcclusion" href="#">Ambient Occlusion</a></li>
+        <li><a class="appState boolProperty" data-property="realisticColorScheme" href="#">Realistic Color Scheme</a></li>
+    </ul>
+</li>
+<li class="dropdown-submenu">
+    <a tabindex="-1">3D<span class="pull-right fui-arrow-right"></span></a>
+    <ul class="dropdown-menu">
+        <li><a class="appState boolProperty" data-property="axesAreVisible" href="#">Axes</a></li>
+        <li><a id="reset3DView" href="#">Reset 3D Navigation</a></li>
+    </ul>
+</li>
\ No newline at end of file
diff --git a/js/menus/templates/OptimizationMenuView.html b/js/menus/templates/OptimizationMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..5c68467dcbfe025d81bde9ab1b8b15ff1b3104a1
--- /dev/null
+++ b/js/menus/templates/OptimizationMenuView.html
@@ -0,0 +1 @@
+input stiffness requirements of structure
\ No newline at end of file
diff --git a/js/menus/templates/PartMenuView.html b/js/menus/templates/PartMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..7c90d8202922cb07793db49deaf2b1aaaf71167b
--- /dev/null
+++ b/js/menus/templates/PartMenuView.html
@@ -0,0 +1,12 @@
+Part Type: &nbsp;&nbsp;
+    <div class="btn-group">
+        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= allPartTypes[cellType][connectionType][partType] %><span class="caret"></span></button>
+        <ul role="menu" class="dropdown-menu">
+            <% _.each(_.keys(allPartTypes[cellType][connectionType]), function(key){ %>
+                <li><a class="lattice dropdownSelector" data-property="partType" data-value="<%= key %>" href="#"><%= allPartTypes[cellType][connectionType][key] %></a></li>
+            <% }); %>
+        </ul>
+    </div><br/><br/>
+<!--Cell Separation (xy, z): &nbsp;&nbsp;<input data-property="cellSeparation" data-key="xy" value="<%= cellSeparation.xy %>" placeholder="XY" class="form-control floatInput lattice" type="text">
+&nbsp;<input data-property="cellSeparation" data-key="z" value="<%= cellSeparation.z %>" placeholder="Z" class="form-control floatInput lattice" type="text">
+<br/><br/>--><br/>
\ No newline at end of file
diff --git a/js/menus/templates/PhysicsMenuView.html b/js/menus/templates/PhysicsMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..ab8e35ef5c36569b19c145f98d0035daad3bec43
--- /dev/null
+++ b/js/menus/templates/PhysicsMenuView.html
@@ -0,0 +1,5 @@
+world physics: gravity, global forces
+<br/><br/>
+part connection stiffness
+<br/><br/>
+ground/fixed/boundary conditions definition
\ No newline at end of file
diff --git a/js/menus/templates/Ribbon.html b/js/menus/templates/Ribbon.html
new file mode 100644
index 0000000000000000000000000000000000000000..179021b33a7af38d87f0edc518550f424fde42d6
--- /dev/null
+++ b/js/menus/templates/Ribbon.html
@@ -0,0 +1,13 @@
+<div class="btn-toolbar">
+    <div class="btn-group">
+        <a data-type="supercell" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "supercell"){ %> ribbon-selected<% } %>" href="#"><img data-type="supercell" src="assets/imgs/super-sm.png"></a>
+        <a data-type="cell" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "cell"){ %> ribbon-selected<% } %>" href="#"><img data-type="cell" src="assets/imgs/cell-sm.png"></a>
+        <% if (allPartTypes[cellType][connectionType]){ %>
+            <a data-type="part" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "part"){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/part-sm.png"></a>
+        <% } %>
+        <!--<a data-type="beam" class="btn btn-primary btn-ribbon ribbonCellMode<% if (cellMode == "beam"){ %> ribbon-selected<% } %>" href="#">Beam</a>-->
+        <a class="btn btn-primary btn-ribbon ribbonDeleteMode<% if (deleteMode){ %> ribbon-selected"<% } %>"><span class="fui-cross"></span></a>
+    </div>
+</div>
+<!--//<a class="btn btn-primary btn-ribbon highlightMode<% if (highlightMode){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/cursor-light.png"></a>-->
+<!--//<a class="btn btn-primary btn-ribbon cellsVisible<% if (!cellsVisible){ %> ribbon-selected<% } %>" href="#"><img data-type="part" src="assets/imgs/hide.png"></a>-->
diff --git a/js/menus/templates/ScriptMenuView.html b/js/menus/templates/ScriptMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..7a366f087ba9b0363b7f0bf1850e1f5095be503c
--- /dev/null
+++ b/js/menus/templates/ScriptMenuView.html
@@ -0,0 +1,9 @@
+<div class="btn-group fullWidth">
+    <button data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle fullWidth" type="button">Load Script<span class="caret"></span></button>
+    <ul role="menu" class="dropdown-menu">
+        <% _.each(_.keys(allScripts), function(key){ %>
+            <li><a data-type="<%= key %>" href="#"><%= allScripts[key] %></a></li>
+        <% }); %>
+    </ul>
+</div><br/><br/>
+<a href="#" class="clearCells btn btn-block btn-lg btn-danger">Clear All Cells</a><br/>
\ No newline at end of file
diff --git a/js/menus/templates/SendMenuView.html b/js/menus/templates/SendMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..7e8df48b3c4734e9ddf14bb2914991ee4015ff7f
--- /dev/null
+++ b/js/menus/templates/SendMenuView.html
@@ -0,0 +1 @@
+realtime communication with machine
\ No newline at end of file
diff --git a/js/menus/templates/SetupCommMenuView.html b/js/menus/templates/SetupCommMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..ee5e37c1120656745021c08afbcb204e94b7d370
--- /dev/null
+++ b/js/menus/templates/SetupCommMenuView.html
@@ -0,0 +1,32 @@
+<% if(error){ %>
+    <div class="postWarning"><%= error %></div>
+<% } %>
+<% if(connected){ %>
+    Status: &nbsp;&nbsp;<% if (portConnected){ %> Connected <% } else { %> <span class="red">Disconnected</span> <% } %><br/><br/>
+    Baud Rate: &nbsp;&nbsp;
+        <div class="btn-group">
+            <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= baudRate %><span class="caret"></span></button>
+            <ul role="menu" class="dropdown-menu">
+                <% _.each(allBaudRates, function(rate){ %>
+                    <li><a class="serialComm dropdownSelector" data-property="baudRate" data-value="<%= rate %>" href="#"><%= rate %></a></li>
+                <% }); %>
+            </ul>
+        </div><br/><br/>
+    Port: &nbsp;&nbsp;
+        <div class="btn-group">
+            <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= portName %><span class="caret"></span></button>
+            <ul role="menu" class="dropdown-menu">
+                <% _.each(availablePorts, function(port){ %>
+                    <li><a class="serialComm dropdownSelector" data-property="portName" data-value="<%= port %>" href="#"><%= port %></a></li>
+                <% }); %>
+            </ul>
+        </div>
+        &nbsp;&nbsp;<a href="#" id="refreshPorts" class="btn btn-lg btn-default btn-icon"><img src="assets/imgs/refreshIcon.png"></a><br/><br/>
+    Incoming: &nbsp;&nbsp;<pre id="incomingSerialMessage"></pre><br/><br/>
+    Out: &nbsp;&nbsp;<input id="seriallTestMessage" value="<%= testMessage %>" placeholder="Send Message" class="seventyFiveWidth form-control unresponsiveInput" type="text"><br/><br/>
+    <a href="#" id="serialFlushBuffer" class="btn btn-block btn-lg btn-danger">Flush Buffer</a><br/>
+<% }else{ %>
+    No node server found.<br/><br/>
+    <a href="#" id="nodeSetupInstructions" class="btn btn-block btn-lg btn-default">Setup Instructions</a><br/>
+    <a href="#" id="reconnectToNode" class="btn btn-block btn-lg btn-success">Reconnect</a><br/>
+<% } %>
\ No newline at end of file
diff --git a/js/menus/templates/SketchMenuView.html b/js/menus/templates/SketchMenuView.html
new file mode 100644
index 0000000000000000000000000000000000000000..8153f109f7f76a86b3ccb206fe243de594c87a48
--- /dev/null
+++ b/js/menus/templates/SketchMenuView.html
@@ -0,0 +1,3 @@
+Sketch Plane Height:&nbsp;&nbsp;<input id="zHeightSlider" data-slider-id="ex1Slider" type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="<%= zIndex %>"/>
+<br/><br/>
+todo: Sketch and extrude/cut commands
\ No newline at end of file