diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontainer.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontainer.directive.js
index f2903820ee..33f7473680 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontainer.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontainer.directive.js
@@ -1,13 +1,26 @@
 (function() {
    'use strict';
 
-   function EditorContainerDirective() {
+   function EditorContainerDirective(overlayHelper) {
+
+      function link(scope, el, attr, ctrl) {
+
+         scope.numberOfOverlays = 0;
+
+         scope.$watch(function(){
+            return overlayHelper.getNumberOfOverlays();
+         }, function (newValue) {
+            scope.numberOfOverlays = newValue;
+         });
+
+      }
 
       var directive = {
          transclude: true,
          restrict: 'E',
          replace: true,
-         templateUrl: 'views/components/editor/umb-editor-container.html'
+         templateUrl: 'views/components/editor/umb-editor-container.html',
+         link: link
       };
 
       return directive;
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
index 808544f1f7..2bcdfdd800 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlay.directive.js
@@ -7,37 +7,66 @@
 (function() {
    'use strict';
 
-   function OverlayDirective($timeout, formHelper) {
+   function OverlayDirective($timeout, formHelper, overlayHelper) {
 
       function link(scope, el, attr, ctrl) {
 
+         var overlayNumber = 0;
+         var numberOfOverlays = 0;
+         var isRegistered = false;
+
          var modelCopy = {};
 
          function activate() {
 
-            var cssClass = "umb-overlay-center";
-
-            if (scope.position) {
-               cssClass = "umb-overlay-" + scope.position;
-            }
-
-            if (scope.animation) {
-               cssClass += " " + scope.animation;
-            }
-
-            var shadow = "shadow-depth-3";
-
-            if (scope.shadow) {
-               shadow = "shadow-depth-" + scope.shadow;
-            }
-
-            cssClass += " " + shadow;
-
-            scope.overlayCssClass = cssClass;
+            registerOverlay();
 
             modelCopy = makeModelCopy(scope.model);
 
-            setOverlayIndent();
+            $timeout(function() {
+
+               if (scope.position === "target") {
+                  setTargetPosition();
+               }
+
+               setOverlayIndent();
+
+            });
+
+         }
+
+         function registerOverlay() {
+
+            overlayNumber = overlayHelper.registerOverlay();
+
+            $(document).bind("keydown.overlay-" + overlayNumber, function(event) {
+
+               if (event.which === 27) {
+
+                  numberOfOverlays = overlayHelper.getNumberOfOverlays();
+
+                  if(numberOfOverlays === overlayNumber) {
+                     scope.closeOverLay();
+                  }
+
+                  event.preventDefault();
+               }
+            });
+
+            isRegistered = true;
+
+         }
+
+         function unregisterOverlay() {
+
+            if(isRegistered) {
+
+               overlayHelper.unregisterOverlay();
+
+               $(document).unbind("keydown.overlay-" + overlayNumber);
+
+               isRegistered = false;
+            }
 
          }
 
@@ -57,24 +86,16 @@
 
          function setOverlayIndent() {
 
-            var firstOverlayWidth = null;
+            var overlayIndex = overlayNumber - 1;
+            var indentSize = overlayIndex * 20;
+            var overlayWidth = el.context.clientWidth;
 
-            $timeout(function() {
-               $(".umb-overlay").each(function(index) {
+            el.css('width', overlayWidth - indentSize);
 
-                  var overlay = $(this);
-                  var subtract = index * 20;
-
-                  if (index === 0) {
-                     firstOverlayWidth = overlay.context.clientWidth;
-                  }
-
-                  var overlayNewWidth = Math.floor(firstOverlayWidth - (index * 20));
-
-                  overlay.css('width', overlayNewWidth);
-
-               });
-            });
+            if(scope.position === "center" || scope.position === "target") {
+               var overlayTopPosition = el.context.offsetTop;
+               el.css('top', overlayTopPosition + indentSize);
+            }
 
          }
 
@@ -95,7 +116,7 @@
             };
 
             // if mouse click position is know place element with mouse in center
-            if (scope.model.event.pageX && scope.model.event.pageY) {
+            if (scope.model.event && scope.model.event) {
 
                // viewport size
                viewportWidth = $(window).innerWidth();
@@ -128,49 +149,47 @@
 
                el.css(position);
 
-               // else change overlay to center position
-            } else {
-
-               scope.position = "center";
-               activate();
-
             }
 
          }
 
          activate();
 
-         $timeout(function() {
-            if (scope.position === "target") {
-               setTargetPosition();
-            }
-         });
-
          scope.submitForm = function(model) {
 
-            if (formHelper.submitForm({
-                  scope: scope
-               })) {
+            if(scope.model.submit) {
 
-               formHelper.resetForm({
-                  scope: scope
-               });
+               if (formHelper.submitForm({scope: scope})) {
 
-               scope.model.submit(model);
+                  formHelper.resetForm({ scope: scope });
+
+                  unregisterOverlay();
+
+                  scope.model.submit(model);
+
+               }
 
             }
 
          };
 
          scope.closeOverLay = function() {
+
+            unregisterOverlay();
+
             if (scope.model.close) {
                scope.model = modelCopy;
                scope.model.close(scope.model);
             } else {
                scope.model = null;
             }
+
          };
 
+         scope.$on('$destroy', function(){
+            unregisterOverlay();
+         });
+
       }
 
       var directive = {
@@ -181,9 +200,7 @@
          scope: {
             model: "=",
             view: "=",
-            position: "@",
-            animation: "@",
-            shadow: "@"
+            position: "@"
          },
          link: link
       };
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlaybackdrop.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlaybackdrop.directive.js
new file mode 100644
index 0000000000..cfcd7e064b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/overlays/umboverlaybackdrop.directive.js
@@ -0,0 +1,31 @@
+(function() {
+   'use strict';
+
+   function OverlayBackdropDirective(overlayHelper) {
+
+      function link(scope, el, attr, ctrl) {
+
+         scope.numberOfOverlays = 0;
+
+         scope.$watch(function(){
+            return overlayHelper.getNumberOfOverlays();
+         }, function (newValue) {
+            scope.numberOfOverlays = newValue;
+         });
+
+      }
+
+      var directive = {
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/overlays/umb-overlay-backdrop.html',
+         link: link
+      };
+
+      return directive;
+
+   }
+
+   angular.module('umbraco.directives').directive('umbOverlayBackdrop', OverlayBackdropDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/overlayhelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/overlayhelper.service.js
new file mode 100644
index 0000000000..6dd3de6cb8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/services/overlayhelper.service.js
@@ -0,0 +1,37 @@
+(function() {
+   'use strict';
+
+   function overlayHelper() {
+
+      var numberOfOverlays = 0;
+
+      function registerOverlay() {
+         numberOfOverlays++;
+         return numberOfOverlays;
+      }
+
+      function unregisterOverlay() {
+         numberOfOverlays--;
+         return numberOfOverlays;
+      }
+
+      function getNumberOfOverlays() {
+         return numberOfOverlays;
+      }
+
+      var service = {
+         numberOfOverlays: numberOfOverlays,
+         registerOverlay: registerOverlay,
+         unregisterOverlay: unregisterOverlay,
+         getNumberOfOverlays: getNumberOfOverlays
+      };
+
+      return service;
+
+   }
+
+
+   angular.module('umbraco.services').factory('overlayHelper', overlayHelper);
+
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index cf7fd72577..22e8fac980 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -95,6 +95,7 @@
 @import "components/umb-tabs.less";
 @import "components/umb-load-indicator.less";
 @import "components/umb-breadcrumbs.less";
+@import "components/overlays/umb-overlay-backdrop.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
index 82b1000466..b90271b5e5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -4,7 +4,7 @@
 
 .umb-editor-wrapper{
 	background: white;
-	position: absolute; 
+	position: absolute;
 	top: 0px; bottom: 0px; left: 0px; right: 0px;
 }
 
@@ -19,7 +19,7 @@
 	left: 0px;
 }
 
-	
+
 .umb-editor-container{
 	top: 101px;
 	left: 0px;
@@ -30,6 +30,9 @@
 	overflow: auto;
 }
 
+.umb-editor-container.-stop-scrolling {
+	overflow: hidden;
+}
 
 .umb-editor-drawer{
 	margin: 0;
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
index 2f51d7fc61..6e4df120d1 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays.less
@@ -3,8 +3,8 @@
      overflow: hidden;
      background: white;
      z-index: 996660;
-     border: 1px solid #ccc;
      animation: fadeIn 0.2s;
+     box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 }
 
 .umb-overlay .umb-overlay-header {
@@ -32,6 +32,7 @@
      height: 31px;
      padding: 10px;
      margin: 0;
+     background: #ffffff;
 }
 
 .umb-overlay .umb-overlay-drawer .umb-overlay-drawer-content {
@@ -47,11 +48,12 @@
 /* ---------- OVERLAY CENTER ---------- */
 
 .umb-overlay.umb-overlay-center {
-     width: 460px;
-     height: 400px;
-     top: 50%;
+     position: absolute;
+     width: 600px;
+     height: 500px;
+     top: 10px;
      left: 50%;
-     transform: translate(-50%, -50%);
+     transform: translate(-50%, 0);
  }
 
 .umb-overlay.umb-overlay-center .umb-overlay-header {
@@ -60,6 +62,7 @@
 
 .umb-overlay.umb-overlay-center .umb-overlay-container {
      top: 68px;
+     padding: 20px;
 }
 
 /* ---------- OVERLAY TARGET ---------- */
@@ -81,11 +84,12 @@
 /* ---------- OVERLAY RIGHT ---------- */
 
 .umb-overlay.umb-overlay-right {
-     width: 460px;
+     width: 500px;
      top: 0;
      right: 0;
      bottom: 0;
      border: none;
+     box-shadow: 0 0 20px rgba(0,0,0,0.19), 0 0 6px rgba(0,0,0,0.23);
 }
 
 .umb-overlay.umb-overlay-right .umb-overlay-header {
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-overlay-backdrop.less b/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-overlay-backdrop.less
new file mode 100644
index 0000000000..a05e9c8f95
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/overlays/umb-overlay-backdrop.less
@@ -0,0 +1,10 @@
+.umb-overlay-backdrop {
+   position: fixed;
+   width: 100%;
+   height: 100%;
+   background-color: rgba(255, 255, 255, 0.50);
+   z-index: 2000;
+   top: 0;
+   left: 0;
+   animation: fadeIn 0.2s;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html
index 5dd97b28a5..44ced2e100 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-container.html
@@ -1,5 +1,6 @@
- <div class="umb-editor-container umb-panel-body umb-scrollable row-fluid">
+ <div class="umb-editor-container umb-panel-body umb-scrollable row-fluid" ng-class="{'-stop-scrolling': numberOfOverlays > 0}">
+     <umb-overlay-backdrop></umb-overlay-backdrop>
      <div class="umb-pane">
         <div ng-transclude></div>
      </div>
- </div>
\ No newline at end of file
+ </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay-backdrop.html b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay-backdrop.html
new file mode 100644
index 0000000000..23ffbf643f
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay-backdrop.html
@@ -0,0 +1 @@
+<div class="umb-overlay-backdrop" ng-show="numberOfOverlays > 0">{{ numberOfOverlays }}</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
index 908a2ba7f9..fba9243c78 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay.html
@@ -1,9 +1,9 @@
-<div class="umb-overlay {{overlayCssClass}}" on-outside-click="closeOverLay()">
+<div class="umb-overlay umb-overlay-{{position}}" on-outside-click="closeOverLay()">
   <form name="overlayForm" ng-submit="submitForm(model)" novalidate val-form-manager>
 
     <div class="umb-overlay-header" ng-if="model.title">
       <h4>{{model.title}}
-        <a class="pull-right" hotkey="esc" href ng-click="closeOverLay()">
+        <a class="pull-right" href ng-click="closeOverLay()">
           <i class="icon-delete"></i>
         </a>
       </h4>
@@ -27,9 +27,8 @@
 
     <div class="umb-overlay-drawer" ng-if="model.close || model.submit">
       <div class="umb-overlay-drawer-content">
-        <button class="btn btn-link" hotkey="esc" ng-click="closeOverLay()" ng-if="model.close">Cancel</button>
-        <button class="btn btn-success" hotkey="enter" ng-if="model.submit && !model.multiActions" type="submit">Submit</button>
-        <umb-button-group actions="model.multiActions" model="model" ng-if="model.multiActions"></umb-button-group>
+        <umb-button ng-if="model.close" type="button" label="Cancel" action="closeOverLay()" button-style="link"></umb-button>
+        <umb-button ng-if="model.submit" type="submit" label="Submit" button-style="success"></umb-button>
       </div>
     </div>
   </form>
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 e060278acf..1858e30d1e 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
@@ -150,37 +150,29 @@
     </ul>
 
     <umb-overlay
-            ng-style="{'width': '500px'}"
             ng-if="compositionsDialogModel.show"
             model="compositionsDialogModel"
-            animation="slide-in-right"
             position="right"
             view="compositionsDialogModel.view">
     </umb-overlay>
 
     <umb-overlay
-            ng-style="{'width': '500px'}"
             ng-if="propertySettingsDialogModel.show"
             model="propertySettingsDialogModel"
-            animation="slide-in-right"
             position="right"
             view="propertySettingsDialogModel.view">
     </umb-overlay>
 
     <umb-overlay
-            ng-style="{'width': '500px'}"
             ng-if="propertyEditorDialogModel.show"
             model="propertyEditorDialogModel"
-            animation="slide-in-right"
             position="right"
             view="propertyEditorDialogModel.view">
     </umb-overlay>
 
     <umb-overlay
-            ng-style="{'width': '500px'}"
             ng-if="dataTypeSettingsDialogModel.show"
             model="dataTypeSettingsDialogModel"
-            animation="slide-in-right"
             position="right"
             view="dataTypeSettingsDialogModel.view">
     </umb-overlay>