diff --git a/warp/static/css/app.css b/warp/static/css/app.css
index f9eca6b..38062d2 100644
--- a/warp/static/css/app.css
+++ b/warp/static/css/app.css
@@ -14,6 +14,10 @@ ul {
     margin: 0px;
 }
 
+li.action{
+    position: relative;
+}
+
 #arguments {
     padding: 0px;
 }
@@ -42,6 +46,28 @@ ul {
     z-index: 2;
 }
 
+html, body {
+    background: #FAFAFA; }
+
+.action label {
+    margin-bottom:0px;
+}
+
+li.action {
+    padding: 1rem 1rem 1rem 1rem;
+}
+
+.unlock-button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #000000;
+    opacity: 0.5;
+    transition: width 0.5s;
+}
+
 html, body {
 background: #FAFAFA; }
 
diff --git a/warp/static/js/app.js b/warp/static/js/app.js
index fe402cc..a542082 100644
--- a/warp/static/js/app.js
+++ b/warp/static/js/app.js
@@ -117,19 +117,47 @@ function createInputAction(action) {
     }
 }
 
+function disableAction(action) {
+    return function () {
+        console.log("disable");
+        thisli = $('#action-' + action['uuid']);
+        thisli.prop('disabled', true).addClass('disabled');
+        delbutton = $('#action-' + action['uuid' + "button"]);
+        delbutton.prop('disabled', true).addClass('disabled');
+        $("#action-" + action['uuid'] + " .unlock-button").css('width', "100%");
+        $("#action-" + action['uuid'] + " input").prop('disabled', true).addClass('disabled');
+        $("#action-" + action['uuid'] + " .addbutton").addClass('disabled').prop('disabled', true);
+        $("#action-" + action['uuid'] + " .rembutton").addClass('disabled').prop('disabled', true);
+    };
+}
+
+function enableAction(action) {
+    return function() {
+        console.log("enable");
+        thisli = $('#action-' + action['uuid']);
+        thisli.prop('disabled', false).removeClass('disabled');
+        delbutton = $('#action-' + action['uuid' + "button"]);
+        delbutton.prop('disabled', false).removeClass('disabled');
+        $("#action-" + action['uuid'] + " .unlock-button").css('width', 0);
+        $("#action-" + action['uuid'] + " input").prop('disabled', false).removeClass("disabled");
+        $("#action-" + action['uuid'] + " .addbutton").removeClass('disabled').prop('disabled', false);
+        $("#action-" + action['uuid'] + " .rembutton").removeClass('disabled').prop('disabled', false);
+    };
+}
+
 function createAction(action) {
     if('choices' in action) {
         return createSubparserAction(action)
     } else {
         var li = $("<li/>",{'id': 'action-' + action['uuid']}).addClass("action");
         var row = $("<div/>").addClass("row").appendTo(li);
-        var helpdiv = $("<div/>").addClass("columns small-2").appendTo(row);
         var labeldiv = $("<div/>").addClass("columns small-3").appendTo(row);
         var label = $("<label/>", {for: action['uuid']}).addClass("middle").appendTo(labeldiv);
         var header = $("<b/>").text(action["dest"].toUpperCase()).appendTo(label);
 
         var inputdiv = $("<div/>").addClass("columns small-5").appendTo(row)
         var deldiv = $("<div/>").addClass("columns small-2").appendTo(row);
+        var helpdiv = $("<div/>").addClass("columns small-2").appendTo(row);
         if(action['is_const']) {
             var input = createCheckboxAction(action).addClass("float-right").appendTo(inputdiv);
         } else {
@@ -152,21 +180,9 @@ function createAction(action) {
             input.find('.addbutton').prop('disabled', true).addClass('disabled');
             input.find('.rembutton').prop('disabled', true).addClass('disabled');
             var del = $("<button/>").attr("type", "button").addClass("button delbutton alert").html("&times;").appendTo(deldiv);
-            del.click(function() {
-                thisli = $('#action-' + action['uuid']);
-                if(thisli.prop('disabled')) {
-                    console.log('tock');
-                    thisli.prop('disabled', false).removeClass('disabled');
-                    $("#action-" + action['uuid'] + " input").prop('disabled', false).removeClass("disabled");
-                    $("#action-" + action['uuid'] + " .addbutton").removeClass('disabled').prop('disabled', false);
-                    $("#action-" + action['uuid'] + " .rembutton").removeClass('disabled').prop('disabled', false);
-                } else {
-                    thisli.prop('disabled', true).addClass('disabled');
-                    $("#action-" + action['uuid'] + " input").prop('disabled', true).addClass('disabled');
-                    $("#action-" + action['uuid'] + " .addbutton").addClass('disabled').prop('disabled', true);
-                    $("#action-" + action['uuid'] + " .rembutton").addClass('disabled').prop('disabled', true);
-                }
-            })
+            var unlock_button = $("<div/>").addClass('unlock-button').appendTo(li);
+            unlock_button.click(enableAction(action));
+            del.click(disableAction(action));
         } else {
             var del = $("<button/>").attr("type", "button").addClass("button disabled alert").html("&times;").appendTo(deldiv);
         }