diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js
new file mode 100644
index 0000000000..df3e431620
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmaction.directive.js
@@ -0,0 +1,39 @@
+(function() {
+  'use strict';
+
+  function ConfirmAction() {
+
+    function link(scope, el, attr, ctrl) {
+
+      scope.clickConfirm = function() {
+          if(scope.onConfirm) {
+              scope.onConfirm();
+          }
+      };
+
+      scope.clickCancel = function() {
+          if(scope.onCancel) {
+              scope.onCancel();
+          }
+      };
+
+    }
+
+    var directive = {
+      restrict: 'E',
+      replace: true,
+      templateUrl: 'views/components/umb-confirm-action.html',
+      scope: {
+        direction: "@",
+        onConfirm: "&",
+        onCancel: "&"
+      },
+      link: link
+    };
+
+    return directive;
+  }
+
+  angular.module('umbraco.directives').directive('umbConfirmAction', ConfirmAction);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmdelete.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmdelete.directive.js
deleted file mode 100644
index 5cd244f108..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbconfirmdelete.directive.js
+++ /dev/null
@@ -1,35 +0,0 @@
-(function() {
-  'use strict';
-
-  function ConfirmDelete() {
-
-    function link(scope, el, attr, ctrl) {
-
-      scope.confirmOverlayOpen = false;
-
-      scope.toggleOverlay = function() {
-        scope.confirmOverlayOpen = !scope.confirmOverlayOpen;
-      };
-
-      scope.closeOverlay = function() {
-        scope.confirmOverlayOpen = false;
-      };
-
-    }
-
-    var directive = {
-      restrict: 'E',
-      replace: true,
-      templateUrl: 'views/components/umb-confirm-delete.html',
-      scope: {
-        confirmAction: "&"
-      },
-      link: link
-    };
-
-    return directive;
-  }
-
-  angular.module('umbraco.directives').directive('umbConfirmDelete', ConfirmDelete);
-
-})();
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
index c93df61e13..d18251da0b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
@@ -157,6 +157,16 @@
 
       }
 
+      /* ---------- DELETE PROMT ---------- */
+
+      scope.togglePrompt = function (object) {
+          object.deletePrompt = !object.deletePrompt;
+      };
+
+      scope.hidePrompt = function (object) {
+          object.deletePrompt = false;
+      };
+
       /* ---------- TOOLBAR ---------- */
 
       scope.toggleSortingMode = function(tool) {
@@ -404,13 +414,13 @@
         }
       };
 
-      scope.deleteProperty = function(tab, propertyIndex, group) {
+      scope.deleteProperty = function(tab, propertyIndex) {
 
         // remove property
         tab.properties.splice(propertyIndex, 1);
 
         // if the last property in group is an placeholder - remove add new tab placeholder
-        if(group.properties.length === 1 && group.properties[0].propertyState === "init") {
+        if(tab.properties.length === 1 && tab.properties[0].propertyState === "init") {
 
           angular.forEach(scope.model.groups, function(group, index, groups){
             if(group.tabState === 'init') {
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index b90f7472b1..5b8282efd1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -91,7 +91,7 @@
 @import "components/umb-group-builder.less";
 @import "components/umb-list-view.less";
 @import "components/umb-table.less";
-@import "components/umb-confirm-delete.less";
+@import "components/umb-confirm-action.less";
 @import "components/umb-keyboard-shortcuts-overview.less";
 @import "components/umb-checkbox-list.less";
 @import "components/umb-locked-field.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less
new file mode 100644
index 0000000000..1c31b97baa
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-action.less
@@ -0,0 +1,130 @@
+// OVERLAY
+.umb_confirm-action__overlay {
+    position: absolute;
+    z-index: 999999;
+    display: flex;
+}
+
+// positions
+.umb_confirm-action__overlay.-top {
+    top: -50px;
+    right: auto;
+    bottom: auto;
+    left: 0;
+    animation: fadeInUp 0.2s;
+    flex-direction: column;
+
+    .umb_confirm-action__overlay-action {
+        margin-bottom: 5px;
+    }
+
+    .umb_confirm-action__overlay-action.-confirm {
+        order: 1;
+    }
+
+    .umb_confirm-action__overlay-action.-cancel {
+        order: 2;
+    }
+
+}
+
+.umb_confirm-action__overlay.-right {
+    top: 0;
+    right: -50px;
+    bottom: auto;
+    left: auto;
+    animation: fadeInLeft 0.2s;
+    flex-direction: row;
+
+    .umb_confirm-action__overlay-action {
+        margin-left: 5px;
+    }
+
+    .umb_confirm-action__overlay-action.-confirm {
+        order: 2;
+    }
+
+    .umb_confirm-action__overlay-action.-cancel {
+        order: 1;
+    }
+}
+
+.umb_confirm-action__overlay.-bottom {
+    top: auto;
+    right: auto;
+    bottom: -50px;
+    left: 0;
+    animation: fadeInDown 0.2s;
+    flex-direction: column;
+
+    .umb_confirm-action__overlay-action {
+        margin-top: 5px;
+    }
+
+    .umb_confirm-action__overlay-action.-confirm {
+        order: 2;
+    }
+
+    .umb_confirm-action__overlay-action.-cancel {
+        order: 1;
+    }
+}
+
+.umb_confirm-action__overlay.-left {
+    top: 0;
+    right: auto;
+    bottom: auto;
+    left: -50px;
+    animation: fadeInRight 0.2s;
+    flex-direction: row;
+
+    .umb_confirm-action__overlay-action {
+        margin-right: 5px;
+    }
+
+    .umb_confirm-action__overlay-action.-confirm {
+        order: 1;
+    }
+
+    .umb_confirm-action__overlay-action.-cancel {
+        order: 2;
+    }
+}
+
+// BUTTONS
+.umb_confirm-action__overlay-action {
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  border-radius: 40px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  font-size: 18px;
+}
+
+.umb_confirm-action__overlay-action:hover {
+  text-decoration: none;
+  color: #ffffff;
+}
+
+// confirm button
+.umb_confirm-action__overlay-action.-confirm {
+  background: #ffffff;
+  color: @green !important;
+}
+
+.umb_confirm-action__overlay-action.-confirm:hover {
+    color: @green !important;
+}
+
+// cancel button
+.umb_confirm-action__overlay-action.-cancel {
+  background: #ffffff;
+  color: @red !important;
+}
+
+.umb_confirm-action__overlay-action.-cancel:hover {
+    color: @red !important;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-delete.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-delete.less
deleted file mode 100644
index 8f767c501c..0000000000
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-confirm-delete.less
+++ /dev/null
@@ -1,34 +0,0 @@
-.umb-confirm-delete {
-  position: relative;
-}
-
-.umb_confirm-delete__overlay-action {
-  position: absolute;
-  z-index: 999999;
-  width: 20px;
-  height: 20px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  border-radius: 40px;
-  animation: fadeInRight 0.2s;
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
-}
-
-.umb_confirm-delete__overlay-action:hover {
-  text-decoration: none;
-  color: #ffffff;
-}
-
-.umb_confirm-delete__overlay-action.-confirm {
-  background: @green;
-  top: 0;
-  left: -50px;
-}
-
-.umb_confirm-delete__overlay-action.-cancel {
-  background: @red;
-  top: 0;
-  left: -25px;
-}
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
index 25fb609ce9..0b4475149d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
@@ -252,6 +252,7 @@
 
 .umb-grid .cell-tools-remove {
     display: inline-block;
+    position: relative;
 }
 
 .umb-grid .cell-tools-remove .iconBox:hover,
@@ -597,12 +598,15 @@
 }
 
 .umb-grid .umb-control-tools {
-    margin-left: auto;
+    display: inline-block;
+    margin-left: 10px;
 }
 
 .umb-grid .umb-control-tool {
     font-size: 16px;
     margin-right: 5px;
+    position: relative;
+    cursor: pointer;
 }
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
index b8f0d457dd..2768c370c9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-group-builder.less
@@ -59,10 +59,12 @@
   position: absolute;
   top: -30px;
   right: 20px;
+  font-size: 18px;
 }
 
 .umb-group-builder__group-remove:hover {
   cursor: pointer;
+  color: @blueDark;
 }
 
 .umb-group-builder__group-title-wrapper {
@@ -312,6 +314,12 @@ input.umb-group-builder__group-sort-value {
   margin: 0 0 10px 0;
   display: block;
   font-size: 18px;
+  position: relative;
+  cursor: pointer;
+}
+
+.umb-group-builder__property-action:hover {
+    color: @blueDark;
 }
 
 .umb-group-builder__property-inherited-label {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
new file mode 100644
index 0000000000..c34c3f9283
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-action.html
@@ -0,0 +1,16 @@
+<div class="umb_confirm-action__overlay"
+     ng-class="{
+     '-top': direction === 'top',
+     '-right': direction === 'right',
+     '-bottom': direction === 'bottom',
+     '-left': direction === 'left'}"
+     on-outside-click="clickCancel()">
+
+        <a class="umb_confirm-action__overlay-action -confirm" href="" ng-click="clickConfirm()">
+            <i class="icon-check"></i>
+        </a>
+
+        <a class="umb_confirm-action__overlay-action -cancel" href="" ng-click="clickCancel()">
+            <i class="icon-delete"></i>
+        </a>
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-delete.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-delete.html
deleted file mode 100644
index 11eff8cb4d..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-confirm-delete.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class="umb-confirm-delete">
-
-  <a href="" ng-click="toggleOverlay()">
-    <i class="icon-trash"></i>
-  </a>
-
-  <div ng-if="confirmOverlayOpen" on-outside-click="closeOverlay()">
-
-     <a class="umb_confirm-delete__overlay-action -confirm" href="" ng-click="confirmAction()">
-      <i class="icon-check"></i>
-    </a>
-
-    <a class="umb_confirm-delete__overlay-action -cancel" href="" ng-click="closeOverlay()">
-      <i class="icon-delete"></i>
-    </a>
-
-  </div>
-
-</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
index f8c060b3df..97f024c3b3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-groups-builder.html
@@ -24,7 +24,13 @@
             <div class="umb-group-builder__group" ng-if="tab.tabState !== 'init'" ng-class="{'-active':tab.tabState=='active', '-inherited': tab.inherited, 'umb-group-builder__group-handle -sortable': sortingMode && !tab.inherited}" ng-click="activateGroup(tab)">
 
                 <div class="umb-group-builder__group-remove" ng-if="!sortingMode && tab.properties.length <= 1 && model.groups.length > 1">
-                    <umb-confirm-delete confirm-action="removeGroup($index)"></umbraco-confirm-delete>
+                    <i class="icon-trash" ng-click="togglePrompt(tab)"></i>
+                    <umb-confirm-action
+                        ng-if="tab.deletePrompt"
+                        direction="left"
+                        on-confirm="removeGroup($index)"
+                        on-cancel="hidePrompt(tab)">
+                    </umb-confirm-action>
                 </div>
 
                 <div class="umb-group-builder__group-title-wrapper">
@@ -97,7 +103,7 @@
 
                                 <ng-form name="propertyTypeForm">
                                     <div class="control-group -no-margin" ng-if="!sortingMode">
-                                        
+
                                         <div class="umb-group-builder__property-meta-alias" ng-if="property.inherited">{{ property.alias }}</div>
                                         <umb-locked-field ng-if="!property.inherited"
                                                           locked="locked"
@@ -146,17 +152,23 @@
                             </div>
 
                             <!-- row tools -->
-                            <div tabindex="-1" class="umb-group-builder__property-actions" ng-if="!sortingMode">
+                            <div class="umb-group-builder__property-actions" ng-if="!sortingMode">
 
                                 <div ng-if="!property.inherited">
 
                                     <!-- delete property -->
                                     <div class="umb-group-builder__property-action">
-                                      <umb-confirm-delete confirm-action="deleteProperty(tab, $index, tab)"></umbraco-confirm-delete>
+                                        <i class="icon-trash" ng-click="togglePrompt(property)"></i>
+                                        <umb-confirm-action
+                                            ng-if="property.deletePrompt"
+                                            direction="left"
+                                            on-confirm="deleteProperty(tab, $index)"
+                                            on-cancel="hidePrompt(property)">
+                                        </umb-confirm-action>
                                     </div>
 
                                     <!-- settings for property -->
-                                    <a href="" class="umb-group-builder__property-action" ng-click="editPropertyTypeSettings(property, tab)">
+                                    <div class="umb-group-builder__property-action" ng-click="editPropertyTypeSettings(property, tab)">
                                         <i class="icon icon-settings"></i>
                                     </a>
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
index 5e3230646c..838b57007a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -473,8 +473,12 @@ angular.module("umbraco")
             e.stopPropagation();
         };
 
-        $scope.showPrompt = function (scopedObject) {
-            scopedObject.deletePrompt = true;
+        $scope.togglePrompt = function (scopedObject) {
+            scopedObject.deletePrompt = !scopedObject.deletePrompt;
+        };
+
+        $scope.hidePrompt = function (scopedObject) {
+            scopedObject.deletePrompt = false;
         };
 
         $scope.toggleAddRow = function() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 8d9687aa00..65f32b8499 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -67,30 +67,6 @@
                                <!-- Row tool -->
                                <div class="row-tools" ng-show="currentRow === row">
 
-                                   <!-- delete row -->
-                                   <div class="cell-tools-remove">
-                                       <div ng-click="showPrompt(row)"
-                                            ng-mouseover="setWarnighlightRow(row)"
-                                            ng-mouseleave="disableWarnhighlightRow(row)">
-
-                                           <span class="prompt" ng-if="row.deletePrompt">
-                                               <localize key="general_areyousure" />
-                                               <a href ng-click="removeRow(section, $index)"><localize key="general_yes" /></a>
-                                               <a href ng-click="clearPrompt(row, $event)"><localize key="general_no" /></a>
-                                           </span>
-
-                                           <i ng-if="!row.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
-                                       </div>
-                                   </div>
-
-                                   <!-- <div class="cell-tools-move">
-                                       <div ng-mouseover="setInfohighlightRow(row)"
-                                          ng-mouseleave="disableInfohighlightRow(row)"
-                                          href>
-                                           <i class="icon icon-navigation" title="@general_move" localize="title"></i>
-                                       </div>
-                                   </div> -->
-
                                    <div class="cell-tools-edit" ng-if="hasSettings">
                                        <a ng-mouseover="setInfohighlightRow(row)"
                                           ng-mouseleave="disableInfohighlightRow(row)"
@@ -100,6 +76,16 @@
                                        </a>
                                    </div>
 
+                                    <div class="cell-tools-remove">
+                                        <i class="icon-trash" ng-click="togglePrompt(row)"></i>
+                                        <umb-confirm-action
+                                            ng-if="row.deletePrompt"
+                                            direction="right"
+                                            on-confirm="removeRow(section, $index)"
+                                            on-cancel="hidePrompt(row)">
+                                        </umb-confirm-action>
+                                    </div>
+
                                </div>
 
                             </div>
@@ -167,16 +153,21 @@
                                                                <div class="umb-control-bar">
 
                                                                   <div class="umb-control-title" ng-if="currentControl == control">
-                                                                     <!-- <div class="umb-control-tool">
-                                                                        <i class="umb-control-tool-icon icon-navigation"></i>
-                                                                     </div> -->
                                                                      {{control.editor.name}}
                                                                   </div>
 
                                                                   <div class="umb-control-tools" ng-if="currentControl == control">
-                                                                     <div class="umb-control-tool" ng-click="removeControl(area, $index)">
-                                                                        <i class="umb-control-tool-icon icon-trash"></i>
-                                                                     </div>
+
+                                                                    <div class="umb-control-tool">
+                                                                        <i class="umb-control-tool-icon icon-trash"  ng-click="togglePrompt(control)"></i>
+                                                                        <umb-confirm-action
+                                                                            ng-if="control.deletePrompt"
+                                                                            direction="right"
+                                                                            on-confirm="removeControl(area, $index)"
+                                                                            on-cancel="hidePrompt(control)">
+                                                                        </umb-confirm-action>
+                                                                    </div>
+
                                                                   </div>
 
                                                                </div>