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
deleted file mode 100644
index 10b5601304..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.controller.js
+++ /dev/null
@@ -1,16 +0,0 @@
-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
deleted file mode 100644
index 02b92f44f7..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/rowdeleteconfirm.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<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-danger ng-scope"><localize key="grid_warning">Warning!</localize></h3>
-
-                    <p>
-                        <localize key="grid_youAreDeleting">You are deleting the row configuration </localize> <strong>{{model.dialogData.rowName}}</strong>
-                    </p>
-
-                    <p>
-                        <localize key="grid_deletingARow">
-                            Modifying a row configuration name will result in loss of
-                            data for any existing content that is based on this configuration.
-                        </localize>
-                    </p>
-
-                    <p>
-                        <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="danger"
-                            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 f273ea63e6..9614eabb7e 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,22 @@
 angular.module("umbraco")
     .controller("Umbraco.PropertyEditors.GridPrevalueEditorController",
-        function ($scope, gridService, editorService) {
+        function ($scope, gridService, editorService, localizationService, overlayService) {
+
+            var vm = this;
+
+            vm.configureTemplate = configureTemplate;
+            vm.deleteTemplate = deleteTemplate;
+
+            vm.configureLayout = configureLayout;
+            vm.deleteLayout = deleteLayout;
+
+            vm.toggleCollection = toggleCollection;
+            vm.percentage = percentage;
+            vm.zeroWidthFilter = zeroWidthFilter;
+
+            vm.removeConfigValue = removeConfigValue;
+            vm.editConfig = editConfig;
+            vm.editStyles = editStyles;
 
             var emptyModel = {
                 styles: [
@@ -73,19 +89,17 @@ angular.module("umbraco")
             };
 
             /****************
-                template
+                Template
             *****************/
 
-            $scope.configureTemplate = function (template) {
+            function configureTemplate(template) {
 
                 var index = $scope.model.value.templates.indexOf(template);
 
                 if (template === undefined) {
                     template = {
                         name: "",
-                        sections: [
-
-                        ]
+                        sections: []
                     };
                 }
 
@@ -109,28 +123,24 @@ angular.module("umbraco")
                 };
 
                 editorService.open(layoutConfigOverlay);
+            }
 
-            };
-
-            $scope.deleteTemplate = function (index) {
+            function deleteTemplate(index) {
                 $scope.model.value.templates.splice(index, 1);
-            };
-
+            }
 
             /****************
                 Row
             *****************/
 
-            $scope.configureLayout = function (layout) {
+            function configureLayout(layout) {
 
                 var index = $scope.model.value.layouts.indexOf(layout);
 
                 if (layout === undefined) {
                     layout = {
                         name: "",
-                        areas: [
-
-                        ]
+                        areas: []
                     };
                 }
 
@@ -154,35 +164,37 @@ angular.module("umbraco")
                 };
 
                 editorService.open(rowConfigOverlay);
+            }
 
-            };
+            function deleteLayout(layout, index, event) {
 
-            //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",
+                const dialog = {
+                    view: "views/propertyEditors/grid/overlays/rowdeleteconfirm.html",
+                    layout: layout,
+                    submitButtonLabelKey: "contentTypeEditor_yesDelete",
+                    submitButtonStyle: "danger",
                     submit: function (model) {
                         $scope.model.value.layouts.splice(index, 1);
-                        editorService.close();
+                        overlayService.close();
                     },
-                    close: function (model) {
-                        editorService.close();
+                    close: function () {
+                        overlayService.close();
                     }
                 };
 
-                editorService.open(rowDeleteOverlay);
-            };
+                localizationService.localize("general_delete").then(value => {
+                    dialog.title = value;
+                    overlayService.open(dialog);
+                });
 
+                event.preventDefault();
+                event.stopPropagation();
+            }
 
             /****************
-                utillities
+                Utilities
             *****************/
-            $scope.toggleCollection = function (collection, toggle) {
+            function toggleCollection(collection, toggle) {
                 if (toggle) {
                     collection = [];
                 } else {
@@ -190,21 +202,21 @@ angular.module("umbraco")
                 }
             };
 
-            $scope.percentage = function (spans) {
+            function percentage(spans) {
                 return ((spans / $scope.model.value.columns) * 100).toFixed(8);
-            };
+            }
 
-            $scope.zeroWidthFilter = function (cell) {
+            function zeroWidthFilter(cell) {
                 return cell.grid > 0;
-            };
+            }
 
             /****************
                 Config
             *****************/
 
-            $scope.removeConfigValue = function (collection, index) {
+            function removeConfigValue(collection, index) {
                 collection.splice(index, 1);
-            };
+            }
 
             var editConfigCollection = function (configValues, title, callback) {
 
@@ -225,27 +237,27 @@ angular.module("umbraco")
                 editorService.open(editConfigCollectionOverlay);
             };
 
-            $scope.editConfig = function () {
+            function editConfig() {
                 editConfigCollection($scope.model.value.config, "Settings", function (data) {
                     $scope.model.value.config = data;
                 });
-            };
+            }
 
-            $scope.editStyles = function () {
+            function editStyles() {
                 editConfigCollection($scope.model.value.styles, "Styling", function (data) {
                     $scope.model.value.styles = data;
                 });
-            };
+            }
 
             /****************
-                editors
+                Editors
             *****************/
             gridService.getGridEditors().then(function (response) {
                 $scope.editors = response.data;
             });
 
 
-            /* init grid data */
+            /* Init grid data */
             if (!$scope.model.value || $scope.model.value === "" || !$scope.model.value.templates) {
                 $scope.model.value = emptyModel;
             } else {
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 34a59cabf1..a1ff49c883 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
@@ -1,4 +1,4 @@
-<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController" class="usky-grid usky-grid-configuration">
+<div ng-controller="Umbraco.PropertyEditors.GridPrevalueEditorController as vm" class="usky-grid usky-grid-configuration">
     <div class="grid-layout">
         <div class="control-group uSky-templates">
 
@@ -17,14 +17,13 @@
 
                 <li ng-repeat="template in model.value.templates" class="clearfix">
 
-                    <div ng-click="configureTemplate(template)"
-                         class="preview-rows layout">
+                    <div ng-click="vm.configureTemplate(template)" class="preview-rows layout">
 
                         <div class="preview-row">
                             <div class="preview-col"
                                  ng-class="{last:$last}"
-                                 ng-repeat="section in template.sections | filter:zeroWidthFilter"
-                                 ng-style="{width: percentage(section.grid) + '%', height: '60px', 'max-width': '100%'}">
+                                 ng-repeat="section in template.sections | filter: vm.zeroWidthFilter"
+                                 ng-style="{width: vm.percentage(section.grid) + '%', height: '60px', 'max-width': '100%'}">
                                 <div class="preview-cell"></div>
                             </div>
                         </div>
@@ -32,7 +31,7 @@
 
                     <div>
                         {{template.name}} <br />
-                        <button type="button" class="btn btn-small btn-link" ng-click="deleteTemplate($index)">
+                        <button type="button" class="btn btn-small btn-link" ng-click="vm.deleteTemplate($index)">
                             <i class="icon-delete red" aria-hidden="true"></i>
                             <localize key="general_delete">Delete</localize>
                         </button>
@@ -41,8 +40,7 @@
                 </li>
             </ul>
 
-            <button type="button" class="btn btn-small btn-info"
-                    ng-click="configureTemplate()">
+            <button type="button" class="btn btn-small btn-info" ng-click="vm.configureTemplate()">
                 <i class="icon-add" aria-hidden="true"></i>
                 <localize key="grid_addGridLayout" />
             </button>
@@ -66,14 +64,13 @@
 
                     <li ng-repeat="layout in model.value.layouts" class="clearfix">
 
-                        <div ng-click="configureLayout(layout)"
-                             class="preview-rows columns">
+                        <div ng-click="vm.configureLayout(layout)" class="preview-rows columns">
 
                             <div class="preview-row">
                                 <div class="preview-col"
                                      ng-class="{last:$last}"
-                                     ng-repeat="area in layout.areas | filter:zeroWidthFilter"
-                                     ng-style="{width: percentage(area.grid) + '%', 'max-width': '100%'}">
+                                     ng-repeat="area in layout.areas | filter: vm.zeroWidthFilter"
+                                     ng-style="{width: vm.percentage(area.grid) + '%', 'max-width': '100%'}">
 
                                     <div class="preview-cell">
                                         <p ng-show="area.maxItems > 0">{{area.maxItems}}</p>
@@ -84,7 +81,7 @@
 
                         <div>
                             {{layout.label || layout.name}}<br />
-                            <button type="button" class="btn btn-small btn-link" ng-click="deleteLayout($index)">
+                            <button type="button" class="btn btn-small btn-link" ng-click="vm.deleteLayout(layout, $index, $event)">
                                 <i class="icon-delete red" aria-hidden="true"></i>
                                 <localize key="general_delete">Delete</localize>
                             </button>
@@ -93,7 +90,7 @@
                     </li>
                 </ul>
 
-                <button type="button" class="btn btn-small" ng-click="configureLayout()">
+                <button type="button" class="btn btn-small btn-info" ng-click="vm.configureLayout()">
                     <i class="icon-add" aria-hidden="true"></i>
                     <localize key="grid_addRowConfiguration">Add row configuration</localize>
                 </button>
@@ -121,7 +118,7 @@
                 <li ng-repeat="configValue in model.value.config">
                     <i class="icon icon-navigation handle" aria-hidden="true"></i>
 
-                    <button type="button" class="btn-link" ng-click="removeConfigValue(model.value.config, $index)">
+                    <button type="button" class="btn-link" ng-click="vm.removeConfigValue(model.value.config, $index)">
                         <i class="icon icon-delete red" aria-hidden="true"></i>
                         {{configValue.label}}
                     </button>
@@ -130,7 +127,7 @@
 
             <ul class="unstyled list-icons">
                 <li>                    
-                    <button type="button" ng-click="editConfig()" class="btn-link">
+                    <button type="button" ng-click="vm.editConfig()" class="btn-link">
                         <i class="icon icon-settings-alt-2 turquoise" aria-hidden="true"></i>
                         <localize key="general_edit">Edit</localize>
                     </button>
@@ -149,7 +146,7 @@
                 <li ng-repeat="style in model.value.styles">
                     <i class="icon icon-navigation handle" aria-hidden="true"></i>
 
-                    <button type="button" class="btn-link" ng-click="removeConfigValue(model.value.styles, $index)">
+                    <button type="button" class="btn-link" ng-click="vm.removeConfigValue(model.value.styles, $index)">
                         <i class="icon icon-delete red" aria-hidden="true"></i>
                         {{style.label}}
                     </button>
@@ -159,7 +156,7 @@
 
             <ul class="unstyled list-icons">
                 <li>                    
-                    <button type="button" ng-click="editStyles()" class="btn-link">
+                    <button type="button" ng-click="vm.editStyles()" class="btn-link">
                         <i class="icon icon-settings-alt-2 turquoise" aria-hidden="true"></i>
                         <localize key="general_edit">Edit</localize>
                     </button>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/overlays/rowdeleteconfirm.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/overlays/rowdeleteconfirm.html
new file mode 100644
index 0000000000..2ba56a5b88
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/overlays/rowdeleteconfirm.html
@@ -0,0 +1,16 @@
+<div>
+
+    <div ng-if="model.layout" class="umb-alert umb-alert--warning mb2">
+        <localize key="grid_youAreDeleting">You are deleting the row configuration</localize> <strong>{{model.layout.name}}</strong>.
+    </div>
+
+    <p>
+        <localize key="grid_deletingARow">
+            Modifying a row configuration name will result in loss of
+            data for any existing content that is based on this configuration.
+        </localize>
+    </p>
+
+    <localize key="defaultdialogs_confirmdelete"></localize>?
+
+</div>