diff --git a/js/cam/assemblers/StockComponent.js b/js/cam/assemblers/StockComponent.js
index ea506462033e52193ad028a0eb6300493a42e3fa..3af063233213ec9e4138ddcac7608797a30c14f4 100644
--- a/js/cam/assemblers/StockComponent.js
+++ b/js/cam/assemblers/StockComponent.js
@@ -3,7 +3,8 @@
  */
 
 
-define(['underscore', 'cam', 'three', 'component', 'lattice'], function(_, cam, THREE, Component, lattice){
+define(['underscore', 'cam', 'three', 'component', 'lattice', 'threeModel'],
+    function(_, cam, THREE, Component, lattice, three){
 
     function StockComponent(id, json){
 
@@ -33,6 +34,11 @@ define(['underscore', 'cam', 'three', 'component', 'lattice'], function(_, cam,
         //todo rotation
     };
 
+    StockComponent.prototype.setMaterial = function(materialName){
+        this.cell.changeMaterial(materialName);
+        three.render();
+    };
+
 
 
 
@@ -67,6 +73,7 @@ define(['underscore', 'cam', 'three', 'component', 'lattice'], function(_, cam,
 
     StockComponent.prototype.toJSON = function(){
         var json  = Component.prototype.toJSON.call(this);
+        json.material = this.cell.materialName
         return json;
     };
 
diff --git a/js/cells/DMACell.js b/js/cells/DMACell.js
index c3f584433b17f6c4755dc309cbbcfab471ce8aa9..0046dab88e7609bde2dbd59375d72bbf6ed94b73 100644
--- a/js/cells/DMACell.js
+++ b/js/cells/DMACell.js
@@ -243,9 +243,16 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'globals', '
     };
 
     DMACell.prototype.setMaterial = function(material){
+        this.materialName = material;
         this.object3D.children[0].material = material;
     };
 
+    DMACell.prototype.changeMaterial = function(materialName, materialObject){
+        this.materialName = materialName;
+        if (materialObject === undefined) materialObject = materials.getMaterialForId(materialName).threeMaterial;
+        this.object3D.children[0].material = materialObject;
+    };
+
     DMACell.prototype.setWireframeVisibility = function(visible, mode){
         if (visible && mode === undefined) mode = this.getConditionalMode(appState.get("cellMode"));
         this.object3D.children[1].visible = visible && this.object3D.children[1].name == mode;
diff --git a/js/materials/DMAMaterials.js b/js/materials/DMAMaterials.js
index b654aed7893908631eaac9d4895c195691fc8b9c..131a6cdd1abaa55dc61aa2f7d6a2f008cb0a0078 100644
--- a/js/materials/DMAMaterials.js
+++ b/js/materials/DMAMaterials.js
@@ -72,6 +72,9 @@ define(['underscore', 'three', 'appState', 'lattice', 'plist', 'threeModel'], fu
         return deleted;
     }
 
+    function getMaterialForId(id){
+        return materialsList[id];
+    }
 
 
 
@@ -251,6 +254,7 @@ define(['underscore', 'three', 'appState', 'lattice', 'plist', 'threeModel'], fu
     return {
         list: materialsList,
         setMaterial: setMaterial,
+        getMaterialForId: getMaterialForId,
         getCompositeKeys: getCompositeKeys,
         getVaildAvailableCompositeKeys: getVaildAvailableCompositeKeys,
         getChildCellTypes:getChildCellTypes,
diff --git a/js/menus/EditComponentMenuView.js b/js/menus/EditComponentMenuView.js
index 92f473c5d8587bee0afccc7656d2df82977cbcd1..b4b8231ec778c951c44bb6a05928a0ae1274f9e3 100644
--- a/js/menus/EditComponentMenuView.js
+++ b/js/menus/EditComponentMenuView.js
@@ -3,8 +3,8 @@
  */
 
 
-define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'text!editComponentMenuTemplate'],
-    function($, _, MenuParentView, plist, cam, template){
+define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'materials', 'text!editComponentMenuTemplate'],
+    function($, _, MenuParentView, plist, cam, materials, template){
 
     return MenuParentView.extend({
 
@@ -13,7 +13,8 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'text!editComponen
             "click #deleteComponent":                                 "_delete",
             "click .removeChild":                                     "_removeChild",
             "click .addChild":                                        "_addChild",
-            "click .changeParent":                                    "_changeParent"
+            "click .changeParent":                                    "_changeParent",
+            "click .stockMaterial":                                   "_changeStockMaterial"
         },
 
         _initialize: function(){
@@ -69,6 +70,15 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'text!editComponen
             this.render();
         },
 
+        _changeStockMaterial: function(e){
+            e.preventDefault();
+            var $target = $(e.target);
+            var id = $target.data("id");
+            if (id === undefined) id = $target.closest("a").data("id");
+            cam.get("assembler").getComponent(cam.get("editingComponent")).setMaterial(id);
+            this.render();
+        },
+
         _makeTemplateJSON: function(){
             var assembler = cam.get("assembler");
             var editingComponent = cam.get("editingComponent");
@@ -82,8 +92,8 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'cam', 'text!editComponen
                 if (!correctBranch || assembler.tree[editingComponent] >= level) return;
                 allDescendants.push(id);
             });
-            return _.extend(this.model.toJSON(), cam.toJSON(), assembler.toJSON(),
-                {thisComponent: component.toJSON(), ancestors:allAncestors, descendants:allDescendants});
+            return _.extend(this.model.toJSON(), cam.toJSON(), assembler.toJSON(), plist,
+                {thisComponent: component.toJSON(), ancestors:allAncestors, descendants:allDescendants, materials:materials.list});
         },
 
         template: _.template(template)
diff --git a/js/menus/templates/EditComponentMenuView.html b/js/menus/templates/EditComponentMenuView.html
index 4cdc5c3c2bd3ff9174eb10c7b751aacaafe817a0..6bcdff9bf31beb56a4dda57dbcef1b584203d024 100644
--- a/js/menus/templates/EditComponentMenuView.html
+++ b/js/menus/templates/EditComponentMenuView.html
@@ -53,6 +53,29 @@ Parent:   
         <br/>
     <a id="uploadStl" href="#" class="btn btn-block btn-lg btn-default">Upload STL</a><br/>
     STL: &nbsp;&nbsp;STL Name<br/><br/>
+<% } else { %>
+    Material: &nbsp;&nbsp;
+        <div class="btn-group">
+            <button data-toggle="dropdown" class="btn dropdown-toggle" type="button"><%= materials[thisComponent.material].name %><span class="caret"></span></button>
+            <ul role="menu" class="dropdown-menu">
+                <% _.each(allMaterials[materialClass], function(material, key){ %>
+                    <li><a class="stockMaterial dropdownSelector" data-id="<%= key %>" href="#">
+                        <div class="materialColorSwatch">
+                        <div style="background-color:<% if(realisticColorScheme){ %><%= material.color %><% }else{ %><%= material.altColor %><% } %>"></div>
+                        <span><span class="materialListTitle"><%= material.name %></span></span></div>
+                    </a></li>
+                <% }); %>
+                <% _.each(materials, function(material, key){
+                    if (key.substr(0,5) == "super") return;
+                    if (material.noDelete) return; %>
+                    <li><a class="stockMaterial dropdownSelector" data-id="<%= key %>" href="#">
+                        <div class="materialColorSwatch">
+                        <div style="background-color:<% if(realisticColorScheme){ %><%= material.color %><% }else{ %><%= material.altColor %><% } %>"></div>
+                        <span class="materialListTitle"><%= material.name %></span></div>
+                    </a></li>
+                <% }); %>
+            </ul>
+        </div><br/><br/>
 <% } %>
 Offset (xyz):&nbsp;&nbsp;
     <input data-property="translation" data-key="x" value="<%= translation.x %>" placeholder="X" class="form-control floatInput stl" type="text">&nbsp;