diff --git a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
index 1331ddc7d1..0bbfe34fe1 100644
--- a/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
+++ b/src/Umbraco.Web.UI.Client/src/common/services/editor.service.js
@@ -215,6 +215,57 @@
             open(editor);
         }
 
+        /**
+         * @ngdoc method
+         * @name umbraco.services.editorService#userGroupPicker
+         * @methodOf umbraco.services.editorService
+         *
+         * @description
+         * Opens the user group picker in infinite editing, the submit callback returns an array of the selected user groups
+         * @param {Callback} editor.submit Submits the editor
+         * @param {Callback} editor.close Closes the editor
+         * @returns {Object} editor object
+         */
+        function userGroupPicker(editor) {
+            editor.view = "views/common/infiniteeditors/usergrouppicker/usergrouppicker.html";
+            editor.size = "small";
+            open(editor);
+        }
+
+        /**
+         * @ngdoc method
+         * @name umbraco.services.editorService#sectionPicker
+         * @methodOf umbraco.services.editorService
+         *
+         * @description
+         * Opens the section picker in infinite editing, the submit callback returns an array of the selected sections
+         * @param {Callback} editor.submit Submits the editor
+         * @param {Callback} editor.close Closes the editor
+         * @returns {Object} editor object
+         */
+        function sectionPicker(editor) {
+            editor.view = "views/common/infiniteeditors/sectionpicker/sectionpicker.html";
+            editor.size = "small";
+            open(editor);
+        }
+
+        /**
+         * @ngdoc method
+         * @name umbraco.services.editorService#sectionPicker
+         * @methodOf umbraco.services.editorService
+         *
+         * @description
+         * Opens the section picker in infinite editing, the submit callback returns an array of the selected users
+         * @param {Callback} editor.submit Submits the editor
+         * @param {Callback} editor.close Closes the editor
+         * @returns {Object} editor object
+         */
+        function userPicker(editor) {
+            editor.view = "views/common/infiniteeditors/userpicker/userpicker.html";
+            editor.size = "small";
+            open(editor);
+        }
+
         var service = {
             getEditors: getEditors,
             open: open,
@@ -229,7 +280,10 @@
             queryBuilder: queryBuilder,
             treePicker: treePicker,
             nodePermissions: nodePermissions,
-            insertCodeSnippet: insertCodeSnippet
+            insertCodeSnippet: insertCodeSnippet,
+            userGroupPicker: userGroupPicker,
+            sectionPicker: sectionPicker,
+            userPicker: userPicker
         };
 
         return service;
diff --git a/src/Umbraco.Web.UI.Client/src/less/tree.less b/src/Umbraco.Web.UI.Client/src/less/tree.less
index 201ea238bf..d5ef7ccec5 100644
--- a/src/Umbraco.Web.UI.Client/src/less/tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/tree.less
@@ -162,6 +162,7 @@
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	flex: 1 0 auto;
 }
 
 .umb-tree li > div:hover a:not(.umb-options) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/sectionpicker/sectionpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/sectionpicker/sectionpicker.controller.js
similarity index 84%
rename from src/Umbraco.Web.UI.Client/src/views/common/overlays/sectionpicker/sectionpicker.controller.js
rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/sectionpicker/sectionpicker.controller.js
index f39da7074d..d6e8978e38 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/sectionpicker/sectionpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/sectionpicker/sectionpicker.controller.js
@@ -9,6 +9,8 @@
         vm.loading = false;
 
         vm.selectSection = selectSection;
+        vm.submit = submit;
+        vm.close = close;
 
         //////////
 
@@ -80,10 +82,22 @@
             });
         }
 
+        function submit(model) {
+            if($scope.model.submit) {
+                $scope.model.submit(model);
+            }
+        }
+
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
         onInit();
 
     }
 
-    angular.module("umbraco").controller("Umbraco.Overlays.SectionPickerController", SectionPickerController);
+    angular.module("umbraco").controller("Umbraco.Editors.SectionPickerController", SectionPickerController);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/sectionpicker/sectionpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/sectionpicker/sectionpicker.html
new file mode 100644
index 0000000000..8ca1993dcc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/sectionpicker/sectionpicker.html
@@ -0,0 +1,54 @@
+<div ng-controller="Umbraco.Editors.SectionPickerController as vm">
+
+    <umb-editor-view>
+
+        <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-load-indicator
+                ng-if="vm.loading">
+            </umb-load-indicator>
+
+            <umb-box ng-if="!vm.loading">
+                <umb-box-content>
+                    <ul class="umb-tree">
+                        <li ng-repeat="section in vm.sections" class="umb-tree-item">
+                            <div style="padding: 5px 10px;" ng-class="{'umb-tree-node-checked': section.selected }">
+                                <a href="" ng-click="vm.selectSection(section)">
+                                    <i class="icon umb-tree-icon {{section.icon}}"></i>
+                                    <span>{{ section.name }}</span>
+                                </a>
+                            </div>
+                        </li>
+                    </ul>
+                </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"
+                    action="vm.close()">
+                </umb-button>
+                <umb-button
+                    type="button"
+                    button-style="success"
+                    label-key="general_submit"
+                    action="vm.submit(model)">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
+
+    </umb-editor-view>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.controller.js
similarity index 82%
rename from src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.controller.js
rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.controller.js
index 72d56f7884..8e075e1ab4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.controller.js
@@ -9,6 +9,8 @@
         vm.loading = false;
 
         vm.selectUserGroup = selectUserGroup;
+        vm.submit = submit;
+        vm.close = close;
 
         //////////
 
@@ -75,10 +77,22 @@
 
         }
 
+        function submit(model) {
+            if($scope.model.submit) {
+                $scope.model.submit(model);
+            }
+        }
+
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
         onInit();
 
     }
 
-    angular.module("umbraco").controller("Umbraco.Overlays.UserGroupPickerController", UserGroupPickerController);
+    angular.module("umbraco").controller("Umbraco.Editors.UserGroupPickerController", UserGroupPickerController);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html
new file mode 100644
index 0000000000..e97d80648b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/usergrouppicker/usergrouppicker.html
@@ -0,0 +1,100 @@
+<div ng-controller="Umbraco.Editors.UserGroupPickerController as vm">
+
+    <umb-editor-view>
+
+        <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-load-indicator ng-if="vm.loading"></umb-load-indicator>
+                
+            <umb-box>
+                <umb-box-content>
+                
+                    <div class="form-search" style="margin-bottom: 15px;">
+                        <i class="icon-search"></i>
+                        <input type="text"
+                                ng-model="searchTerm"
+                                class="umb-search-field search-query input-block-level -full-width-input"
+                                localize="placeholder"
+                                placeholder="@placeholders_filter"
+                                umb-auto-focus
+                                no-dirty-check />
+                    </div>
+                
+                    <div class="umb-user-group-picker-list">
+            
+                        <a href="" class="umb-user-group-picker-list-item" ng-repeat="userGroup in vm.userGroups | filter:searchTerm" ng-click="vm.selectUserGroup(userGroup)">
+            
+                            <div class="umb-user-group-picker-list-item__icon">
+                                <i ng-if="!userGroup.selected" class="{{userGroup.icon}}"></i>
+                                <umb-checkmark ng-if="userGroup.selected" checked="userGroup.selected" size="xs"></umb-checkmark>
+                            </div>
+            
+                            <div>
+                                <div class="umb-user-group-picker-list-item__name">{{ userGroup.name }}</div>
+            
+                                <div class="umb-user-group-picker-list-item__permission" ng-if="userGroup.sections">
+                                    <span>
+                                        <span class="bold"><localize key="main_sections">Sections</localize>:</span>
+                                        <span ng-repeat="section in userGroup.sections">{{ section.name }}<span ng-if="!$last">, </span></span>
+                                    </span>
+                                </div>
+            
+                                <div class="umb-user-group-picker-list-item__permission">
+                                    <span>
+                                        <span class="bold"><localize key="user_startnode">Content start node</localize>:</span>
+                                        <span ng-if="!userGroup.contentStartNode"><localize key="user_noStartNode">No start node selected</localize></span>
+                                        <span ng-if="userGroup.contentStartNode">{{ userGroup.contentStartNode.name }}</span>
+                                    </span>
+                                </div>
+            
+                                <div class="umb-user-group-picker-list-item__permission">
+                                    <span>
+                                        <span class="bold"><localize key="user_mediastartnode">Media start node</localize>:</span>
+                                        <span ng-if="!userGroup.mediaStartNode"><localize key="user_noStartNode">No start node selected</localize></span>
+                                        <span ng-if="userGroup.mediaStartNode">{{ userGroup.mediaStartNode.name }}</span>
+                                    </span>
+                                </div>
+                            </div>
+                        </a>
+            
+                    </div>
+                
+                    <umb-empty-state
+                        ng-if="vm.userGroups.length === 0 && !vm.loading"
+                        position="center">
+                        No user groups have been added
+                    </umb-empty-state>
+                    
+                </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"
+                    action="vm.close()">
+                </umb-button>
+                <umb-button
+                    type="button"
+                    button-style="success"
+                    label-key="general_submit"
+                    action="vm.submit(model)">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
+
+    </umb-editor-view>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.controller.js
similarity index 86%
rename from src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.controller.js
rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.controller.js
index 2ccd17934b..2bd73a5558 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.controller.js
@@ -12,6 +12,8 @@
         vm.selectUser = selectUser;
         vm.searchUsers = searchUsers;
         vm.changePageNumber = changePageNumber;
+        vm.submit = submit;
+        vm.close = close;
 
         //////////
 
@@ -102,10 +104,22 @@
             getUsers();
         }
 
+        function submit(model) {
+            if($scope.model.submit) {
+                $scope.model.submit(model);
+            }
+        }
+
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
         onInit();
 
     }
 
-    angular.module("umbraco").controller("Umbraco.Overlays.UserPickerController", UserPickerController);
+    angular.module("umbraco").controller("Umbraco.Editors.UserPickerController", UserPickerController);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html
new file mode 100644
index 0000000000..bc6c8b5761
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/userpicker/userpicker.html
@@ -0,0 +1,90 @@
+<div ng-controller="Umbraco.Editors.UserPickerController as vm">
+
+    <umb-editor-view>
+
+        <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-load-indicator
+                ng-if="vm.loading">
+            </umb-load-indicator>
+
+            <umb-box>
+                <umb-box-content>
+                    <div class="form-search" style="margin-bottom: 15px;">
+                        <i class="icon-search"></i>
+                        <input type="text"
+                            ng-model="vm.usersOptions.filter"
+                            ng-change="vm.searchUsers()"
+                            class="umb-search-field search-query input-block-level -full-width-input"
+                            localize="placeholder"
+                            placeholder="@placeholders_filter"
+                            umb-auto-focus
+                            revent-enter-submit
+                            no-dirty-check />
+                    </div>
+                    <div class="umb-user-picker-item-list">
+                        <a href="" class="umb-user-picker-list-item" ng-repeat="user in vm.users" ng-click="vm.selectUser(user)">
+                            <div class="umb-user-picker-list-item__avatar">
+                                <umb-checkmark
+                                    class="umb-user-picker-list-item__checkmark" 
+                                    ng-if="user.selected"
+                                    checked="user.selected">
+                                </umb-checkmark>
+                                <umb-avatar
+                                    size="s"
+                                    color="secondary"
+                                    name="{{user.name}}"
+                                    img-src="{{user.avatars[0]}}"
+                                    img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
+                                </umb-avatar>
+                            </div>
+                            <div class="umb-user-picker-list-item__content">
+                                <div class="umb-user-picker-list-item__name">{{ user.name }}</div>
+                                <div class="umb-user-picker-list-item__group">
+                                    <span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
+            
+                    <div class="flex justify-center">
+                        <umb-pagination
+                            ng-if="vm.usersOptions.totalPages"
+                            page-number="vm.usersOptions.pageNumber"
+                            total-pages="vm.usersOptions.totalPages"
+                            on-change="vm.changePageNumber(pageNumber)">
+                        </umb-pagination>
+                    </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"
+                    action="vm.close()">
+                </umb-button>
+                <umb-button
+                    type="button"
+                    button-style="success"
+                    label-key="general_submit"
+                    action="vm.submit(model)">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
+
+    </umb-editor-view>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/sectionpicker/sectionpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/sectionpicker/sectionpicker.html
deleted file mode 100644
index 577dab63b2..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/sectionpicker/sectionpicker.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<div ng-controller="Umbraco.Overlays.SectionPickerController as vm">
-
-    <umb-load-indicator
-        ng-if="vm.loading">
-    </umb-load-indicator>
-
-    <div ng-if="!vm.loading">
-
-        <ul class="umb-tree">
-            <li ng-repeat="section in vm.sections">
-                <div style="padding: 5px 10px;" ng-class="{'umb-tree-node-checked': section.selected }">
-                    <a href="" ng-click="vm.selectSection(section)">
-                        <div style="position: relative; overflow: initial;">
-                            <i class="icon umb-tree-icon {{section.icon}}"></i>
-                        </div>
-                        <span>{{ section.name }}</span>
-                    </a>
-                </div>
-            </li>
-        </ul>
-
-    </div>
-
-</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.html
deleted file mode 100644
index 4768052844..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/usergrouppicker/usergrouppicker.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<div ng-controller="Umbraco.Overlays.UserGroupPickerController as vm">
-
-    <umb-load-indicator ng-if="vm.loading">
-    </umb-load-indicator>
-
-    <div ng-if="!vm.loading">
-
-        <div class="form-search" style="margin-bottom: 15px;">
-            <i class="icon-search"></i>
-            <input type="text"
-                   ng-model="searchTerm"
-                   class="umb-search-field search-query input-block-level -full-width-input"
-                   localize="placeholder"
-                   placeholder="@placeholders_filter"
-                   umb-auto-focus
-                   no-dirty-check />
-        </div>
-
-        <div class="umb-user-group-picker-list">
-
-            <a href="" class="umb-user-group-picker-list-item" ng-repeat="userGroup in vm.userGroups | filter:searchTerm" ng-click="vm.selectUserGroup(userGroup)">
-
-                <div class="umb-user-group-picker-list-item__icon">
-                    <i ng-if="!userGroup.selected" class="{{userGroup.icon}}"></i>
-                    <umb-checkmark ng-if="userGroup.selected" checked="userGroup.selected" size="xs"></umb-checkmark>
-                </div>
-
-                <div>
-                    <div class="umb-user-group-picker-list-item__name">{{ userGroup.name }}</div>
-
-                    <div class="umb-user-group-picker-list-item__permission" ng-if="userGroup.sections">
-                        <span>
-                            <span class="bold"><localize key="main_sections">Sections</localize>:</span>
-                            <span ng-repeat="section in userGroup.sections">{{ section.name }}<span ng-if="!$last">, </span></span>
-                        </span>
-                    </div>
-
-                    <div class="umb-user-group-picker-list-item__permission">
-                        <span>
-                            <span class="bold"><localize key="user_startnode">Content start node</localize>:</span>
-                            <span ng-if="!userGroup.contentStartNode"><localize key="user_noStartNode">No start node selected</localize></span>
-                            <span ng-if="userGroup.contentStartNode">{{ userGroup.contentStartNode.name }}</span>
-                        </span>
-                    </div>
-
-                    <div class="umb-user-group-picker-list-item__permission">
-                        <span>
-                            <span class="bold"><localize key="user_mediastartnode">Media start node</localize>:</span>
-                            <span ng-if="!userGroup.mediaStartNode"><localize key="user_noStartNode">No start node selected</localize></span>
-                            <span ng-if="userGroup.mediaStartNode">{{ userGroup.mediaStartNode.name }}</span>
-                        </span>
-                    </div>
-                </div>
-            </a>
-
-        </div>
-
-        <umb-empty-state ng-if="vm.userGroups.length === 0"
-                         position="center">
-            No user groups have been added
-        </umb-empty-state>
-
-    </div>
-
-</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.html
deleted file mode 100644
index 517a63f60b..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<div ng-controller="Umbraco.Overlays.UserPickerController as vm">
-
-    <umb-load-indicator
-        ng-if="vm.loading">
-    </umb-load-indicator>
-
-    <div class="form-search" style="margin-bottom: 15px;">
-        <i class="icon-search"></i>
-        <input type="text"
-            ng-model="vm.usersOptions.filter"
-            ng-change="vm.searchUsers()"
-            class="umb-search-field search-query input-block-level -full-width-input"
-            localize="placeholder"
-            placeholder="@placeholders_filter"
-            umb-auto-focus
-            revent-enter-submit
-            no-dirty-check />
-    </div>
-
-    <div ng-if="!vm.loading">
-
-        <div class="umb-user-picker-item-list">
-            <a href="" class="umb-user-picker-list-item" ng-repeat="user in vm.users" ng-click="vm.selectUser(user)">
-                <div class="umb-user-picker-list-item__avatar">
-                    <umb-checkmark
-                        class="umb-user-picker-list-item__checkmark" 
-                        ng-if="user.selected"
-                        checked="user.selected">
-                    </umb-checkmark>
-                    <umb-avatar
-                        size="s"
-                        color="secondary"
-                        name="{{user.name}}"
-                        img-src="{{user.avatars[0]}}"
-                        img-srcset="{{user.avatars[1]}} 2x, {{user.avatars[2]}} 3x">
-                    </umb-avatar>
-                </div>
-                <div class="umb-user-picker-list-item__content">
-                    <div class="umb-user-picker-list-item__name">{{ user.name }}</div>
-                    <div class="umb-user-picker-list-item__group">
-                        <span ng-repeat="userGroup in user.userGroups">{{ userGroup.name }}<span ng-if="!$last">, </span></span>
-                    </div>
-                </div>
-            </a>
-        </div>
-
-        <div class="flex justify-center">
-            <umb-pagination
-                ng-if="vm.usersOptions.totalPages"
-                page-number="vm.usersOptions.pageNumber"
-                total-pages="vm.usersOptions.totalPages"
-                on-change="vm.changePageNumber(pageNumber)">
-            </umb-pagination>
-        </div>
-
-    </div>
-
-</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
index e282dbbb55..54096d413b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
@@ -104,23 +104,18 @@
         }
 
         function openSectionPicker() {
-            vm.sectionPicker = {
-                view: "sectionpicker",
+            var oldSelection = angular.copy(vm.userGroup.sections);
+            var sectionPicker = {
                 selection: vm.userGroup.sections,
-                closeButtonLabel: vm.labels.cancel,
-                show: true,
                 submit: function (model) {
-                    vm.sectionPicker.show = false;
-                    vm.sectionPicker = null;
+                    editorService.close();
                 },
-                close: function (oldModel) {
-                    if (oldModel.selection) {
-                        vm.userGroup.sections = oldModel.selection;
-                    }
-                    vm.sectionPicker.show = false;
-                    vm.sectionPicker = null;
+                close: function () {
+                    vm.userGroup.sections = oldSelection;
+                    editorService.close();
                 }
             };
+            editorService.sectionPicker(sectionPicker);
         }
 
         function openContentPicker() {
@@ -173,19 +168,18 @@
         }
 
         function openUserPicker() {
-            vm.userPicker = {
-                view: "userpicker",
+            var oldSelection = angular.copy(vm.userGroup.users);
+            var userPicker = {
                 selection: vm.userGroup.users,
-                show: true,
-                submit: function (model) {
-                    vm.userPicker.show = false;
-                    vm.userPicker = null;
+                submit: function () {
+                    editorService.close();
                 },
-                close: function (oldModel) {
-                    vm.userPicker.show = false;
-                    vm.userPicker = null;
+                close: function () {
+                    vm.userGroup.users = oldSelection;
+                    editorService.close();
                 }
             };
+            editorService.userPicker(userPicker);
         }
 
         /**
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/group.html b/src/Umbraco.Web.UI.Client/src/views/users/group.html
index 415d6c86f2..c9b4695708 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.html
@@ -211,18 +211,4 @@
 
     </form>
 
-    <umb-overlay
-        ng-if="vm.sectionPicker.show"
-        model="vm.sectionPicker"
-        view="vm.sectionPicker.view"
-        position="right">
-    </umb-overlay>
-
-    <umb-overlay
-        ng-if="vm.userPicker.show"
-        model="vm.userPicker"
-        view="vm.userPicker.view"
-        position="right">
-    </umb-overlay>
-
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
index 97b2f14652..a65b9602ec 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.controller.js
@@ -197,28 +197,23 @@
         }
 
         function openUserGroupPicker() {
-            vm.userGroupPicker = {
-                view: "usergrouppicker",
+            var oldSelection = angular.copy(vm.user.userGroups);
+            var userGroupPicker = {
                 selection: vm.user.userGroups,
-                closeButtonLabel: vm.labels.cancel,
-                show: true,
                 submit: function (model) {
                     // apply changes
                     if (model.selection) {
                         vm.user.userGroups = model.selection;
                     }
-                    vm.userGroupPicker.show = false;
-                    vm.userGroupPicker = null;
+                    editorService.close();
                 },
-                close: function (oldModel) {
-                    // rollback on close
-                    if (oldModel.selection) {
-                        vm.user.userGroups = oldModel.selection;
-                    }
-                    vm.userGroupPicker.show = false;
-                    vm.userGroupPicker = null;
+                close: function () {
+                    // roll back the selection
+                    vm.user.userGroups = oldSelection;
+                    editorService.close();
                 }
             };
+            editorService.userGroupPicker(userGroupPicker);
         }
 
         function openContentPicker() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.html b/src/Umbraco.Web.UI.Client/src/views/users/user.html
index 5d4c07c1bb..c34f0791d5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -65,10 +65,4 @@
 
     </form>
 
-    <umb-overlay ng-if="vm.userGroupPicker.show"
-                 model="vm.userGroupPicker"
-                 view="vm.userGroupPicker.view"
-                 position="right">
-    </umb-overlay>
-
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
index c3cee9292c..ff97e0c259 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function UsersController($scope, $timeout, $location, $routeParams, usersResource, userGroupsResource, userService, localizationService, contentEditingHelper, usersHelper, formHelper, notificationsService, dateHelper) {
+    function UsersController($scope, $timeout, $location, $routeParams, usersResource, userGroupsResource, userService, localizationService, contentEditingHelper, usersHelper, formHelper, notificationsService, dateHelper, editorService) {
 
         var vm = this;
         var localizeSaving = localizationService.localize("general_saving");
@@ -300,16 +300,13 @@
             return _.find(users, function (u) { return u.id === userId });
         }
 
-        function openBulkUserGroupPicker(event) {
+        function openBulkUserGroupPicker() {
             var firstSelectedUser = getUserFromArrayById(vm.selection[0], vm.users);
 
             vm.selectedBulkUserGroups = _.clone(firstSelectedUser.userGroups);
 
-            vm.userGroupPicker = {
-                view: "usergrouppicker",
+            var userGroupPicker = {
                 selection: vm.selectedBulkUserGroups,
-                closeButtonLabelKey: "general_cancel",
-                show: true,
                 submit: function (model) {
                     usersResource.setUserGroupsOnUsers(model.selection, vm.selection).then(function (data) {
                         // sorting to ensure they show up in right order when updating the UI
@@ -323,42 +320,36 @@
                                 user.userGroups = vm.selectedBulkUserGroups;
                             });
                         vm.selectedBulkUserGroups = [];
-                        vm.userGroupPicker.show = false;
-                        vm.userGroupPicker = null;
+                        editorService.close();
                         clearSelection();
                     }, angular.noop);
                 },
-                close: function (oldModel) {
+                close: function () {
                     vm.selectedBulkUserGroups = [];
-                    vm.userGroupPicker.show = false;
-                    vm.userGroupPicker = null;
+                    editorService.close();
                 }
             };
+            editorService.userGroupPicker(userGroupPicker);
         }
 
-        function openUserGroupPicker(event) {
-            vm.userGroupPicker = {
-                view: "usergrouppicker",
+        function openUserGroupPicker() {
+            var oldSelection = angular.copy(vm.newUser.userGroups);
+            var userGroupPicker = {
                 selection: vm.newUser.userGroups,
-                closeButtonLabelKey: "general_cancel",
-                show: true,
                 submit: function (model) {
                     // apply changes
                     if (model.selection) {
                         vm.newUser.userGroups = model.selection;
                     }
-                    vm.userGroupPicker.show = false;
-                    vm.userGroupPicker = null;
+                    editorService.close();
                 },
-                close: function (oldModel) {
+                close: function () {
                     // rollback on close
-                    if (oldModel.selection) {
-                        vm.newUser.userGroups = oldModel.selection;
-                    }
-                    vm.userGroupPicker.show = false;
-                    vm.userGroupPicker = null;
+                    vm.newUser.userGroups = oldSelection;
+                    editorService.close();
                 }
             };
+            editorService.userGroupPicker(userGroupPicker);
         }
 
         function removeSelectedUserGroup(index, selection) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
index f82958769a..bf2f88c552 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
@@ -541,11 +541,4 @@
 
     </div>
 
-    <umb-overlay
-        ng-if="vm.userGroupPicker.show"
-        model="vm.userGroupPicker"
-        view="vm.userGroupPicker.view"
-        position="right">
-    </umb-overlay>
-
 </div>