diff --git a/css/main.css b/css/main.css
index d8f6dc1ce1d1d077f2a3697278516d98578d7dbb..cee86c43650468a7660dac75c9bcbd8b48044f49 100644
--- a/css/main.css
+++ b/css/main.css
@@ -467,6 +467,15 @@ label {
     left: 245px;
 }
 
+.assemblerTree>label{
+    padding-right: 10px;
+    width: 100%;
+}
+
 .assemblerTree{
-    margin-left: 30px;
-}
\ No newline at end of file
+    display: inline-block;
+    width: 100%;
+    height: 35px;
+    background-color: #eee;
+    border: 1px solid #ddd;
+}
diff --git a/js/cam/Cam.js b/js/cam/Cam.js
index 329816e89b4ed97a15e48f19d2a6c5386a3eaec0..ceccf6e61d54a9b92628f1c1264f61faed904c1f 100644
--- a/js/cam/Cam.js
+++ b/js/cam/Cam.js
@@ -157,7 +157,9 @@ define(['underscore', 'three', 'backbone', 'appState', 'latticeCAM', 'threeModel
 
         _tabChanged: function(){
             this._setCAMVisibility();
-            if (appState.get("currentTab") != "animate") this.resetSimulation();
+            var currentTab = appState.get("currentTab");
+            if (currentTab == "assemblerSetup") this.get("assembler").buildComponentTree();
+            if (currentTab != "animate") this.resetSimulation();
             else if (this.get("needsPostProcessing")) this.postProcess();
         },
 
diff --git a/js/cam/assemblers/Assembler.js b/js/cam/assemblers/Assembler.js
index cd1915b5d7a08adda280be7551e078ac84111548..c650b6db1394810830bf6403bcaedf6f831e2450 100644
--- a/js/cam/assemblers/Assembler.js
+++ b/js/cam/assemblers/Assembler.js
@@ -105,7 +105,8 @@ define(['underscore', 'appState', 'lattice', 'stlLoader', 'threeModel', 'cam', '
     };
 
     Assembler.prototype.highlight = function(componentId){
-        this.components[componentId].setTranslucent(false);
+        if (this.components[componentId]) this.components[componentId].setTranslucent(false);
+        else if (this.stock[componentId]) this.stock[componentId].show();
     };
     
     Assembler.prototype._setTranslucent = function(){
@@ -115,10 +116,27 @@ define(['underscore', 'appState', 'lattice', 'stlLoader', 'threeModel', 'cam', '
         _.each(this.components, function(component){
             component.setTranslucent(translucent);
         });
+        this.hideStock();
     };
 
-    Assembler.prototype.buildComponentTree = function(){
-
+    Assembler.prototype.buildComponentTree = function(index, parent, tree){
+        var self = this;
+        if (parent === undefined){
+            index = 0;
+            tree = {};
+        }
+        _.each(this.stock, function(thisStock, key){
+            if (thisStock.parent == parent) {
+                tree[key] = index;
+            }
+        });
+        _.each(this.components, function(component, key){
+            if (component.parent == parent) {
+                tree[key] = index;
+                self.buildComponentTree(index+1, key, tree);
+            }
+        });
+        this.tree = tree;
     };
     
     
@@ -230,6 +248,12 @@ define(['underscore', 'appState', 'lattice', 'stlLoader', 'threeModel', 'cam', '
             stock.updatePartType();
         });
     };
+
+    Assembler.prototype.hideStock = function(){
+        _.each(this.stock, function(stock){
+            stock.hide();
+        });
+    };
     
     Assembler.prototype.pickUpStock = function(index, speed, settings, callback){
         _.each(this.stock, function(stock){
@@ -244,9 +268,7 @@ define(['underscore', 'appState', 'lattice', 'stlLoader', 'threeModel', 'cam', '
     
     Assembler.prototype.releaseStock = function(index, settings){
         lattice.showCellAtIndex(index);
-        _.each(this.stock, function(stock){
-            stock.hide();
-        });
+        this.hideStock();
     };
     
     Assembler.prototype.pause = function(){
@@ -328,7 +350,8 @@ define(['underscore', 'appState', 'lattice', 'stlLoader', 'threeModel', 'cam', '
             shouldPickUpStock: this.shouldPickUpStock,
             relative: this.relative,
             camProcesses: this.camProcesses,
-            numMaterials: this.numMaterials
+            numMaterials: this.numMaterials,
+            tree: this.tree || this.buildComponentTree()
         }
     };
 
diff --git a/js/cam/assemblers/Component.js b/js/cam/assemblers/Component.js
index 2495e3acf97858fa3d8e5757bdb28a2e4f0c5776..d7a73f5599f8b2164cec9fe9875990d6c43f9bbb 100644
--- a/js/cam/assemblers/Component.js
+++ b/js/cam/assemblers/Component.js
@@ -11,7 +11,8 @@ define(['underscore', 'cam', 'three'], function(_, cam, THREE){
         this.object3D = new THREE.Object3D();
         this.id = id || "id" + id++;
         this.name = json.name || "";
-        this.parent = null;
+        this.parent = json.parent;
+        this.parentObject = null;
         this.children = [];
     }
 
@@ -38,9 +39,9 @@ define(['underscore', 'cam', 'three'], function(_, cam, THREE){
     };
 
     Component.prototype.checkAncestry = function(component){//return true if this is a parent/grandparent/great-grandparent...
-        if (this.parent){
-            if (this.parent === component) return true;
-            else return this.parent.checkAncestry(component);
+        if (this.parentObject){
+            if (this.parentObject === component) return true;
+            else return this.parentObject.checkAncestry(component);
         }
         return false;
     };
@@ -55,11 +56,12 @@ define(['underscore', 'cam', 'three'], function(_, cam, THREE){
     };
 
     Component.prototype.addParent = function(parent){
-        if (this.parent) {
-            this.parent.removeChild(this);
-            this.parent = null;
+        if (this.parentObject) {
+            this.parentObject.removeChild(this);
+            this.parentObject = null;
         }
-        this.parent = parent;
+        this.parentObject = parent;
+        this.parent = parent.id;
     };
 
     Component.prototype.getID = function(){
@@ -174,7 +176,8 @@ define(['underscore', 'cam', 'three'], function(_, cam, THREE){
     //helper
 
     Component.prototype.destroy = function(){
-        if (this.parent) this.parent.removeChild(this);
+        if (this.parentObject) this.parentObject.removeChild(this);
+        this.parentObject = null;
         this.parent = null;
         var self = this;
         _.each(this.children, function(child){
@@ -191,13 +194,11 @@ define(['underscore', 'cam', 'three'], function(_, cam, THREE){
         _.each(this.children, function(child){
             childIDs.push(child.id);
         });
-        var parentID = "";
-        if (this.parent) parentID = this.parent.id;
         return {
             id: this.id,
             name: this.name,
             children: childIDs,
-            parent: parentID,
+            parent: this.parent || "",
             translation: this.object3D.position,
             scale: this.object3D.scale.x,
             rotation: this.object3D.rotation
diff --git a/js/cam/assemblers/StockComponent.js b/js/cam/assemblers/StockComponent.js
index 3819a7309e4e4829b50cf7a0ad9d13da30ae5550..ea506462033e52193ad028a0eb6300493a42e3fa 100644
--- a/js/cam/assemblers/StockComponent.js
+++ b/js/cam/assemblers/StockComponent.js
@@ -44,7 +44,7 @@ define(['underscore', 'cam', 'three', 'component', 'lattice'], function(_, cam,
     };
 
     StockComponent.prototype.hide = function(){
-        this.cell.hide();
+        if (this.cell) this.cell.hide();
     };
 
     StockComponent.prototype.setMode = function(){
diff --git a/js/menus/templates/AssemblerSetupMenuView.html b/js/menus/templates/AssemblerSetupMenuView.html
index be82d513df022de6c6526891616fee4818293f40..5602287771ae83f3c37fb4b176b7eb5e413d8a97 100644
--- a/js/menus/templates/AssemblerSetupMenuView.html
+++ b/js/menus/templates/AssemblerSetupMenuView.html
@@ -1,13 +1,13 @@
-Parent/Child Tree:<br/>
-<% _.each(components, function(component){ %>
-    <label class="assemblerTree"><%= component.name %> <a data-id="<%= component.id %>" class="editMachineComponent" href="#">Edit</a></label><br/>
+Parent/Child Tree:<br/><br/>
+<% var treeLevel = 0; %>
+<% _.each(tree, function(level, id){ %>
+    <% var component = components[id] || stock[id]; %>
+    <% treeLevel++; %>
+    <div class="assemblerTree" <% if (treeLevel%2 == 0){ %> style="background-color:#ddd"<% } %> ><label style="padding-left:<%= level*10 + 20 %>px"><%= component.name %>
+        <a data-id="<%= id %>" class="editMachineComponent pull-right" href="#">Edit</a></label></div><br/>
 <% }); %><br/>
-<a href="#" id="newMachineComponent" class=" btn btn-block btn-lg btn-default">+ New Machine Component</a><br/>
-Stock:<br/>
-<% _.each(stock, function(stockEl, id){ %>
-    <label class="assemblerTree"><%= stockEl.name %> <a data-id="<%= id %>" class="edit Stock" href="#">Edit</a></label><br/>
-<% }); %><br/>
-<a href="#" id="addStock" class=" btn btn-block btn-lg btn-default">+ New Stock</a><br/>
+<a href="#" id="newMachineComponent" class=" btn halfWidth btn-lg btn-default">+ Component</a>
+<a href="#" id="addStock" class=" btn halfWidth btn-lg btn-default pull-right">+ Stock</a><br/><br/>
 Offset (xyz):&nbsp;&nbsp;
     <input data-property="translation" data-key="x" value="<%= translation.x %>" placeholder="X" class="form-control floatInput assembler" type="text">&nbsp;
     <input data-property="translation" data-key="y" value="<%= translation.y %>" placeholder="Y" class="form-control floatInput assembler" type="text">&nbsp;
diff --git a/js/menus/templates/EditComponentMenuView.html b/js/menus/templates/EditComponentMenuView.html
index d9c1bbdc896473e0ebd2c925924ca18d547cdd7b..b886a7c77b93dd945c265069638932ac1cbb6993 100644
--- a/js/menus/templates/EditComponentMenuView.html
+++ b/js/menus/templates/EditComponentMenuView.html
@@ -1,7 +1,7 @@
 Name: &nbsp;&nbsp;<input data-property="name" value="<%= components[editingComponent].name %>" placeholder="Enter Name" class="seventyFiveWidth form-control textInput component" type="text"><br/><br/>
 Parent: &nbsp;&nbsp;
     <div class="btn-group">
-        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= components[components[editingComponent].parent].name || "No Parent Selected" %><span class="caret"></span></button>
+        <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><% if (components[editingComponent].parent){ %><%= components[components[editingComponent].parent].name %><% }else{ %>No Parent Selected<% } %><span class="caret"></span></button>
         <ul role="menu" class="dropdown-menu">
             <% _.each(components, function(component){ %>
                 <% if (component.id == editingComponent) return; %>
@@ -19,9 +19,13 @@ Children: &nbsp;&nbsp;
         <% }); %>
     </ul>
 </div><br/>
+
     <% _.each(components[editingComponent].children, function(childID){ %>
-        <%= components[childID].name %> <a class="removeChild" data-id="<%= childID %>" href="#">Remove</a><br/>
+        <% if (components[childID]){ %>
+            <%= components[childID].name %> <a class="removeChild" data-id="<%= childID %>" href="#">Remove</a><br/>
+        <% } %>
     <% }); %><br/>
+
 STL: &nbsp;&nbsp;STL Name<br/><br/>
 <a id="uploadStl" href="#" class="btn btn-block btn-lg btn-default">Upload STL</a><br/>
 Offset (xyz):&nbsp;&nbsp;