diff --git a/css/main.css b/css/main.css
index 2dff4b3522f069007ae830bbc7467406aaeb9794..9d842d90690b367fb64f5a0706ca25e74e0c69c1 100644
--- a/css/main.css
+++ b/css/main.css
@@ -232,7 +232,7 @@ input.intInput, input.floatInput{
 
 .navbar-nav > .open > .dropdown-menu{
     padding: 0!important;
-    min-width: 150px;
+    min-width: 100px;
 }
 
 .divider{
@@ -527,4 +527,40 @@ label {
 .gCodeLineNum {
     margin-right: 20px;
     color: #B7B6B6;
+}
+
+#contextMenuWrapper{
+    background-color: clear;
+    padding: 20px;
+    position: absolute;
+    z-index: 10;
+    display: none;
+}
+
+#contextMenu {
+    background-color: #555;
+    width: 200px;
+    color: white;
+    opacity: 0.95;
+    border-radius: 5px;
+
+    font-weight: 400;
+    font-size: 14px;
+}
+
+#contextMenu li{
+    list-style: none;
+    height: 32px;
+    padding: 2px 20px;
+}
+#contextMenu li:hover{
+    background-color: #aaa;
+}
+
+#contextMenu ul {
+    padding: 2px 0 2px 0;
+}
+
+#contextMenu li>a{
+    text-decoration: none;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 404dc4db8eddbc7cd9ef7f6f62b5376296beeb26..2d464ddb0767227752645d478d0e26ecb73202c3 100644
--- a/index.html
+++ b/index.html
@@ -131,6 +131,7 @@
 <div id="menuWrapper"><div id="menuHeader"></div><div id="menuContent"></div></div>
 <div id="scriptView"></div>
 <div id="navRibbon"></div>
+<div id="contextMenuWrapper"><div id="contextMenu"></div></div>
 
 <div id="threeContainer"></div>
 
diff --git a/js/main.js b/js/main.js
index a4491884a7d7d487b7789860e0081f16f7f1fc79..5fbc1e55a79466250e44765125db21f5ecc05ada 100644
--- a/js/main.js
+++ b/js/main.js
@@ -127,6 +127,7 @@ require.config({
         navViewMenu: 'menus/NavViewMenu',//view dropdown
         ribbon: 'menus/Ribbon',
         modalView: 'menus/ModalView',
+        contextMenu: 'menus/contextMenu/ContextMenu',
         menuWrapper: 'menus/MenuWrapperView',
         menuParent: 'menus/MenuParentView',
         latticeMenu: 'menus/LatticeMenuView',
@@ -281,7 +282,7 @@ require.config({
 //};
 
 //init stuff
-require(['appState', 'lattice', 'navbar', 'threeModel', 'threeView', 'globals', 'flatUI', 'bootstrapSlider', 'ribbon', 'menuWrapper', 'scriptView'],
+require(['appState', 'lattice', 'navbar', 'threeModel', 'threeView', 'globals', 'flatUI', 'bootstrapSlider', 'ribbon', 'menuWrapper', 'scriptView', 'contextMenu'],
     function(appState, lattice, Navbar, three, ThreeView, globals){
 
     new Navbar({model:appState});
diff --git a/js/menus/contextMenu/ContextMenu.js b/js/menus/contextMenu/ContextMenu.js
new file mode 100644
index 0000000000000000000000000000000000000000..e7d3acd743544eac4cb675024f7af605ec648bc8
--- /dev/null
+++ b/js/menus/contextMenu/ContextMenu.js
@@ -0,0 +1,77 @@
+/**
+ * Created by aghassaei on 10/23/15.
+ */
+
+
+define(['jquery', 'underscore', 'backbone', 'text!menus/contextMenu/MaterialsContextMenu.html'],
+    function($, _, Backbone, template){
+
+    if (document.addEventListener) {
+        document.addEventListener('contextmenu', function(e) {
+            var type = getContextMenuType(e);
+            if (type) {
+                e.preventDefault();
+                handleContextMenuEvent(e, type);
+            }
+        }, false);
+    } else {
+        document.attachEvent('oncontextmenu', function() {
+            var type = getContextMenuType(window.event);
+            if (type) {
+                window.event.returnValue = false;
+                handleContextMenuEvent(e, type);
+            }
+        });
+    }
+
+    var $wrapper = $("#contextMenuWrapper");
+
+    var ContextMenu = Backbone.View.extend({
+
+        el: '#contextMenu',
+
+        object: null,
+
+        initialize: function(){
+        },
+
+        renderMaterialsMenu: function(e){
+            this.object = $(e.target).parents("label.colorSwatches").children("input").val();
+            var templateJSON = {};
+            this.$el.html(_.template(template)(templateJSON));
+            this.showMenu(e);
+        },
+
+        showMenu: function(e){
+            var left = e.pageX-20;
+            if ($('body').width()-200 < left) left -= 200;
+            $wrapper.css({left:left, top: e.pageY-20});
+            $wrapper.show();
+        },
+
+        hideMenu: function(){
+            $wrapper.hide();
+        }
+
+    });
+
+    var contextMenu = new ContextMenu();
+
+    $wrapper.mouseleave(function(){
+        contextMenu.hideMenu();
+    });
+
+    function getContextMenuType(e){
+        var $target = $(e.target);
+        var elem = $target.get(0);
+        if ($target.parents("label.colorSwatches").length == 1){
+            return "materials";
+        }
+        return null;
+    }
+
+    function handleContextMenuEvent(e, type){
+        if (type == "materials") contextMenu.renderMaterialsMenu(e);
+    }
+
+});
\ No newline at end of file
diff --git a/js/menus/contextMenu/MaterialsContextMenu.html b/js/menus/contextMenu/MaterialsContextMenu.html
new file mode 100644
index 0000000000000000000000000000000000000000..9a11f1e4a9f1ba3ded5f515ad5ecca0f59a0af97
--- /dev/null
+++ b/js/menus/contextMenu/MaterialsContextMenu.html
@@ -0,0 +1,4 @@
+<ul>
+    <li>Set Transparent</li>
+    <li>Hide</li>
+</ul>