diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.controller.js
new file mode 100644
index 0000000000..3441b6a060
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.controller.js
@@ -0,0 +1,16 @@
+function EditConfigController($scope) {
+
+    $scope.close = function() {
+        if($scope.model.close) {
+            $scope.model.close();
+        }
+    }
+    
+    $scope.submit = function() {
+        if($scope.model && $scope.model.submit) {
+            $scope.model.submit($scope.model);
+        }
+    }
+}
+
+angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.EditConfigController", EditConfigController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.html
index fb541ecf84..9c42e04f75 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/editconfig.html
@@ -1,3 +1,25 @@
+<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.EditConfigController">
+
+
+
+        <umb-editor-view>
+
+            <form novalidate name="EditConfigForm" val-form-manager>
+
+            <umb-editor-header
+                name="model.title"
+                name-locked="true"
+                hide-alias="true"
+                hide-icon="true"
+                hide-description="true">
+            </umb-editor-header>
+
+            <umb-editor-container>
+                <umb-box>
+                    <umb-box-content>
+
+
+
 <form name="gridConfigEditor">
 
    <h4>{{model.name}}</h4>
@@ -12,3 +34,34 @@
    </div>
 
 </form>
+
+
+
+
+                            </umb-box-content>
+                        </umb-box>
+                    </umb-editor-container>
+
+                    <umb-editor-footer>
+                    <umb-editor-footer-content-right>
+                    <umb-button
+                        type="button"
+                        button-style="link"
+                        label-key="general_close"
+                        shortcut="esc"
+                        action="close()">
+                    </umb-button>
+                    <umb-button
+                        type="button"
+                        button-style="success"
+                        label-key="general_submit"
+                        action="submit()">
+                    </umb-button>
+                </umb-editor-footer-content-right>
+            </umb-editor-footer>
+
+        </form>
+
+    </umb-editor-view>
+
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js
index 566535fc98..4ad857b1e7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.controller.js
@@ -1,10 +1,25 @@
 angular.module("umbraco")
     .controller("Umbraco.PropertyEditors.GridPrevalueEditor.LayoutConfigController",
-    function ($scope) {
+    function ($scope, localizationService) {
+
+        
+            function init() {
+                setTitle();
+            }
+
+            function setTitle() {
+                if (!$scope.model.title) {
+                    localizationService.localize("grid_addGridLayout")
+                        .then(function(data){
+                            $scope.model.title = data;
+                        });
+                }
+            }
 
     		$scope.currentLayout = $scope.model.currentLayout;
     		$scope.columns = $scope.model.columns;
     		$scope.rows = $scope.model.rows;
+            $scope.currentSection = undefined;
 
     		$scope.scaleUp = function(section, max, overflow){
     		   var add = 1;
@@ -57,9 +72,12 @@ angular.module("umbraco")
     			template.sections.splice(index, 1);
     		};
     		
-    		$scope.closeSection = function(){
-    		    $scope.currentSection = undefined;
-    		};
+    		
+            $scope.close = function() {
+                if($scope.model.close) {
+                    $scope.model.close();
+                }
+            }
 
     		$scope.$watch("currentLayout", function(layout){
     		    if(layout){
@@ -71,4 +89,6 @@ angular.module("umbraco")
     		        $scope.availableLayoutSpace = $scope.columns - total;
     		    }
     		}, true);
+            
+            init();
     });
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
index 0e1a92a62c..4f0b665e24 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/layoutconfig.html
@@ -1,8 +1,31 @@
 <div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.LayoutConfigController">
 
-   <div class="umb-forms-settings">
 
-      <h5><localize key="grid_addGridLayout" /></h5>
+
+
+    <umb-editor-view>
+
+        <form novalidate name="LayoutConfigForm" val-form-manager>
+
+        <umb-editor-header
+            name="model.title"
+            name-locked="true"
+            hide-alias="true"
+            hide-icon="true"
+            hide-description="true">
+        </umb-editor-header>
+
+        <umb-editor-container>
+            <umb-box>
+                <umb-box-content>
+
+
+
+
+
+
+   <div class="umb-forms-settings form-horizontal">
+
       <p><localize key="grid_addGridLayoutDetail" /></p>
 
       <umb-control-group label="@general_name">
@@ -32,7 +55,7 @@
           </div>
       </div>
 
-      <div ng-if="currentSection" style="padding-bottom: 50px;">
+      <div ng-if="currentSection != null" style="padding-bottom: 50px;">
 
           <umb-control-group label="@general_width">
              <div class="grid-size-scaler">
@@ -111,4 +134,27 @@
 
    </div>
 
-</div>
+
+
+
+                   </umb-box-content>
+               </umb-box>
+           </umb-editor-container>
+
+           <umb-editor-footer>
+               <umb-editor-footer-content-right>
+                   <umb-button
+                       type="button"
+                       button-style="link"
+                       label-key="general_close"
+                       shortcut="esc"
+                       action="close()">
+                   </umb-button>
+               </umb-editor-footer-content-right>
+           </umb-editor-footer>
+
+           </form>
+
+       </umb-editor-view>
+
+   </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js
index 4e3dde50e4..1bb7516f30 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.controller.js
@@ -1,5 +1,19 @@
-function RowConfigController($scope) {
+function RowConfigController($scope, localizationService) {
 
+    function init() {
+        setTitle();
+    }
+
+    function setTitle() {
+        if (!$scope.model.title) {
+            localizationService.localize("grid_addRowConfiguration")
+                .then(function(data){
+                    $scope.model.title = data;
+                });
+        }
+    }
+    
+    
     $scope.currentRow = $scope.model.currentRow;
     $scope.editors = $scope.model.editors;
     $scope.columns = $scope.model.columns;
@@ -69,6 +83,12 @@ function RowConfigController($scope) {
     $scope.closeArea = function() {
         $scope.currentCell = undefined;
     };
+    
+    $scope.close = function() {
+        if($scope.model.close) {
+            $scope.model.close();
+        }
+    }
 
     $scope.nameChanged = false;
     var originalName = $scope.currentRow.name;
@@ -93,6 +113,10 @@ function RowConfigController($scope) {
         }
     }, true);
 
+    
+    init();
+    
+
 }
 
 angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController", RowConfigController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
index c9a0d807ea..10af5ade3c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowconfig.html
@@ -1,8 +1,30 @@
 <div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.RowConfigController">
 
-   <div class="umb-form-settings">
 
-      <h5><localize key="grid_addRowConfiguration" /></h5>
+
+        <umb-editor-view>
+
+            <form novalidate name="RowConfigurationForm" val-form-manager>
+
+            <umb-editor-header
+                name="model.title"
+                name-locked="true"
+                hide-alias="true"
+                hide-icon="true"
+                hide-description="true">
+            </umb-editor-header>
+
+            <umb-editor-container>
+                <umb-box>
+                    <umb-box-content>
+
+
+
+
+
+
+   <div class="umb-form-settings form-horizontal">
+
       <p><localize key="grid_addRowConfigurationDetail" /></p>
 
       <div class="alert alert-warn ng-scope" ng-show="nameChanged">
@@ -14,7 +36,7 @@
        <umb-control-group label="@general_name">
            <input type="text" ng-model="currentRow.name" />
        </umb-control-group>
-       
+
        <umb-control-group label="@general_label">
            <input type="text" ng-model="currentRow.label" placeholder="Overrides name" />
        </umb-control-group>
@@ -54,7 +76,7 @@
                   </a>
               </div>
           </umb-control-group>
-          
+
           <umb-control-group label="@grid_maxItems" description="@grid_maxItemsDescription">
               <input type="number" ng-model="currentCell.maxItems" class="umb-property-editor-tiny" placeholder="Max" min="0" />
           </umb-control-group>
@@ -97,4 +119,27 @@
 
    </div>
 
+
+
+
+                            </umb-box-content>
+                        </umb-box>
+                    </umb-editor-container>
+
+                    <umb-editor-footer>
+                    <umb-editor-footer-content-right>
+                    <umb-button
+                        type="button"
+                        button-style="link"
+                        label-key="general_close"
+                        shortcut="esc"
+                        action="close()">
+                    </umb-button>
+                </umb-editor-footer-content-right>
+            </umb-editor-footer>
+
+        </form>
+
+    </umb-editor-view>
+
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.controller.js
new file mode 100644
index 0000000000..10b5601304
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.controller.js
@@ -0,0 +1,16 @@
+function DeleteRowConfirmController($scope) {
+
+    $scope.close = function() {
+        if($scope.model.close) {
+            $scope.model.close();
+        }
+    }
+    
+    $scope.submit = function() {
+        if($scope.model && $scope.model.submit) {
+            $scope.model.submit($scope.model);
+        }
+    }
+}
+
+angular.module("umbraco").controller("Umbraco.PropertyEditors.GridPrevalueEditor.DeleteRowConfirmController", DeleteRowConfirmController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.html
index c69ae2cb8f..2bf1f00b0e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.html
@@ -1,4 +1,13 @@
-<div>
+<div class="usky-grid usky-grid-configuration" ng-controller="Umbraco.PropertyEditors.GridPrevalueEditor.DeleteRowConfirmController">
+
+
+        <umb-editor-view>
+
+            <umb-editor-container>
+                <umb-box>
+                    <umb-box-content>
+
+
 
    <h3 class="alert alert-warn ng-scope">Warning!</h3>
 
@@ -15,4 +24,31 @@
       <localize key="general_areyousure">Are you sure?</localize>
    </p>
 
+
+
+
+                            </umb-box-content>
+                        </umb-box>
+                    </umb-editor-container>
+
+                    <umb-editor-footer>
+                    <umb-editor-footer-content-right>
+                        <umb-button
+                            type="button"
+                            button-style="link"
+                            label-key="general_close"
+                            shortcut="esc"
+                            action="close()">
+                        </umb-button>
+                        <umb-button
+                            type="button"
+                            button-style="warning"
+                            label-key="general_delete"
+                            action="submit(model)">
+                        </umb-button>
+                </umb-editor-footer-content-right>
+            </umb-editor-footer>
+
+    </umb-editor-view>
+
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js
index 19057fa842..d38697d351 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js
@@ -1,6 +1,6 @@
 angular.module("umbraco")
     .controller("Umbraco.PropertyEditors.GridPrevalueEditorController",
-    function ($scope, gridService) {
+    function ($scope, gridService, editorService) {
 
         var emptyModel = {
             styles:[
@@ -89,28 +89,23 @@ angular.module("umbraco")
               };
               $scope.model.value.templates.push(template);
            }
+            
+            var layoutConfigOverlay = {
+                currentLayout: template,
+                rows: $scope.model.value.layouts,
+                columns: $scope.model.value.columns,
+                view: "views/propertyEditors/grid/dialogs/layoutconfig.html",
+                size: "small",
+                submit: function(model) {
+                    editorService.close();
+                },
+                close: function(model) {
+                    editorService.close();
+                }
+            };
 
-           $scope.layoutConfigOverlay = {};
-           $scope.layoutConfigOverlay.view = "views/propertyEditors/grid/dialogs/layoutconfig.html";
-           $scope.layoutConfigOverlay.currentLayout = template;
-           $scope.layoutConfigOverlay.rows = $scope.model.value.layouts;
-           $scope.layoutConfigOverlay.columns = $scope.model.value.columns;
-           $scope.layoutConfigOverlay.show = true;
+            editorService.open(layoutConfigOverlay);
            
-           $scope.layoutConfigOverlay.submit = function(model) {
-              $scope.layoutConfigOverlay.show = false;
-              $scope.layoutConfigOverlay = null;
-           };
-
-           $scope.layoutConfigOverlay.close = function(oldModel) {
-
-              //reset templates
-              $scope.model.value.templates = templatesCopy;
-
-              $scope.layoutConfigOverlay.show = false;
-              $scope.layoutConfigOverlay = null;
-           }
-
         };
 
         $scope.deleteTemplate = function(index){
@@ -135,50 +130,44 @@ angular.module("umbraco")
                 };
                 $scope.model.value.layouts.push(layout);
            }
-
-           $scope.rowConfigOverlay = {};
-           $scope.rowConfigOverlay.view = "views/propertyEditors/grid/dialogs/rowconfig.html";
-           $scope.rowConfigOverlay.currentRow = layout;
-           $scope.rowConfigOverlay.editors = $scope.editors;
-           $scope.rowConfigOverlay.columns = $scope.model.value.columns;
-           $scope.rowConfigOverlay.show = true;
-
-           $scope.rowConfigOverlay.submit = function(model) {
-             $scope.rowConfigOverlay.show = false;
-             $scope.rowConfigOverlay = null;
-           };
-
-           $scope.rowConfigOverlay.close = function(oldModel) {
-             $scope.model.value.layouts = layoutsCopy;
-             $scope.rowConfigOverlay.show = false;
-             $scope.rowConfigOverlay = null;
+           
+           var rowConfigOverlay = {
+               currentRow: layout,
+               editors: $scope.editors,
+               columns: $scope.model.value.columns,
+               view: "views/propertyEditors/grid/dialogs/rowconfig.html",
+               size: "small",
+               submit: function(model) {
+                   editorService.close();
+               },
+               close: function(model) {
+                   editorService.close();
+               }
            };
 
+           editorService.open(rowConfigOverlay);
+           
         };
 
         //var rowDeletesPending = false;
         $scope.deleteLayout = function(index) {
+            
+            var rowDeleteOverlay = {
+                dialogData: {
+                  rowName: $scope.model.value.layouts[index].name
+                },
+                view: "views/propertyEditors/grid/dialogs/rowdeleteconfirm.html",
+                size: "small",
+                submit: function(model) {
+                    $scope.model.value.layouts.splice(index, 1);
+                    editorService.close();
+                },
+                close: function(model) {
+                    editorService.close();
+                }
+            };
 
-           $scope.rowDeleteOverlay = {};
-           $scope.rowDeleteOverlay.view = "views/propertyEditors/grid/dialogs/rowdeleteconfirm.html";
-           $scope.rowDeleteOverlay.dialogData = {
-             rowName: $scope.model.value.layouts[index].name
-           };
-           $scope.rowDeleteOverlay.show = true;
-
-           $scope.rowDeleteOverlay.submit = function(model) {
-
-             $scope.model.value.layouts.splice(index, 1);
-
-             $scope.rowDeleteOverlay.show = false;
-             $scope.rowDeleteOverlay = null;
-           };
-
-           $scope.rowDeleteOverlay.close = function(oldModel) {
-             $scope.rowDeleteOverlay.show = false;
-             $scope.rowDeleteOverlay = null;
-           };
-
+            editorService.open(rowDeleteOverlay);
         };
 
 
@@ -210,26 +199,22 @@ angular.module("umbraco")
         };
 
         var editConfigCollection = function(configValues, title, callback) {
+            
+            var editConfigCollectionOverlay = {
+                config: configValues,
+                title: title,
+                view: "views/propertyeditors/grid/dialogs/editconfig.html",
+                size: "small",
+                submit: function(model) {
+                    callback(model.config);
+                    editorService.close();
+                },
+                close: function(model) {
+                    editorService.close();
+                }
+            };
 
-           $scope.editConfigCollectionOverlay = {};
-           $scope.editConfigCollectionOverlay.view = "views/propertyeditors/grid/dialogs/editconfig.html";
-           $scope.editConfigCollectionOverlay.config = configValues;
-           $scope.editConfigCollectionOverlay.title = title;
-           $scope.editConfigCollectionOverlay.show = true;
-
-           $scope.editConfigCollectionOverlay.submit = function(model) {
-               
-              callback(model.config);
-
-              $scope.editConfigCollectionOverlay.show = false;
-              $scope.editConfigCollectionOverlay = null;
-           };
-
-           $scope.editConfigCollectionOverlay.close = function(oldModel) {
-              $scope.editConfigCollectionOverlay.show = false;
-              $scope.editConfigCollectionOverlay = null;
-           };
-
+            editorService.open(editConfigCollectionOverlay);
         };
 
         $scope.editConfig = function() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
index 539433821b..92d1a9ef26 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
@@ -158,28 +158,4 @@
         </umb-control-group>
     </div>
 
-    <umb-overlay ng-if="layoutConfigOverlay.show"
-                 model="layoutConfigOverlay"
-                 view="layoutConfigOverlay.view"
-                 position="right">
-    </umb-overlay>
-
-    <umb-overlay ng-if="rowConfigOverlay.show"
-                 model="rowConfigOverlay"
-                 view="rowConfigOverlay.view"
-                 position="right">
-    </umb-overlay>
-
-    <umb-overlay ng-if="editConfigCollectionOverlay.show"
-                 model="editConfigCollectionOverlay"
-                 view="editConfigCollectionOverlay.view"
-                 position="right">
-    </umb-overlay>
-
-    <umb-overlay ng-if="rowDeleteOverlay.show"
-                 model="rowDeleteOverlay"
-                 view="rowDeleteOverlay.view"
-                 position="right">
-    </umb-overlay>
-
 </div>