diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
index c4dfc133a9..64bd8dc096 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/content/edit.controller.js
@@ -7,6 +7,7 @@
         keyboardService, umbModelMapper, editorState, $http, eventsService, relationResource, overlayService, localizationService) {
 
         var evts = [];
+        var infiniteMode = $scope.infiniteModel && $scope.infiniteModel.infiniteMode;
 
         //setup scope vars
         $scope.defaultButton = null;
@@ -21,6 +22,8 @@
         $scope.page.isNew = $scope.isNew ? true : false;
         $scope.page.buttonGroupState = "init";
         $scope.page.culture = $scope.culture;
+        $scope.page.hideActionsMenu = infiniteMode ? true : false;
+        $scope.page.hideChangeVariant = infiniteMode ? true : false;
         $scope.allowOpen = true;
 
         // add all editors to an editors array to support split view 
@@ -31,8 +34,12 @@
         };
 
         function init(content) {
-
-            createButtons(content);
+            
+            if(infiniteMode) {
+                createInfiniteModeButtons(content);
+            } else {
+                createButtons(content);
+            }
 
             editorState.set($scope.content);
 
@@ -157,7 +164,9 @@
                     // if there are any and then clear them so the collection no longer persists them.
                     serverValidationManager.executeAndClearAllSubscriptions();
 
-                    syncTreeNode($scope.content, data.path, true);
+                    if(!infiniteMode) {
+                        syncTreeNode($scope.content, data.path, true);
+                    }
 
                     resetLastListPageNumber($scope.content);
 
@@ -185,6 +194,23 @@
 
         }
 
+        // create infinite editing buttons
+        function createInfiniteModeButtons(content) {
+
+            $scope.page.allowInfinitePublishAndClose = false;
+            $scope.page.allowInfiniteSaveAndClose = false;
+
+            // check for publish rights
+            if(_.contains(content.allowedActions, "U")) {
+                $scope.page.allowInfinitePublishAndClose = true;
+
+            // check for save rights
+            } else if( _.contains(content.allowedActions, "A")) {
+                $scope.page.allowInfiniteSaveAndClose = true;
+            }
+
+        }
+
         /** Syncs the content item to it's tree node - this occurs on first load and after saving */
         function syncTreeNode(content, path, initialLoad) {
 
@@ -221,7 +247,10 @@
             }).then(function (data) {
                 //success            
                 init($scope.content);
-                syncTreeNode($scope.content, data.path);
+
+                if(!infiniteMode) {
+                    syncTreeNode($scope.content, data.path);
+                }
 
                 $scope.page.buttonGroupState = "success";
                 return $q.when(data);
@@ -311,7 +340,9 @@
 
                         init($scope.content);
 
-                        syncTreeNode($scope.content, data.path);
+                        if(!infiniteMode) {
+                            syncTreeNode($scope.content, data.path);
+                        }
 
                         $scope.page.buttonGroupState = "success";
 
@@ -505,6 +536,30 @@
             }, 500);
         };
 
+        /* publish method used in infinite editing */
+        $scope.publishAndClose = function(content) {
+            $scope.publishAndCloseButtonState = "busy";
+            performSave({ saveMethod: contentResource.publish, action: "publish" }).then(function(){
+                if($scope.infiniteModel.submit) {
+                    $scope.infiniteModel.contentNode = content;
+                    $scope.infiniteModel.submit($scope.infiniteModel);
+                }
+                $scope.publishAndCloseButtonState = "success";
+            }).catch(angular.noop);;
+        };
+
+        /* save method used in infinite editing */
+        $scope.saveAndClose = function(content) {
+            $scope.saveAndCloseButtonState = "busy";
+            performSave({ saveMethod: $scope.saveMethod(), action: "save" }).then(function(){
+                if($scope.infiniteModel.submit) {
+                    $scope.infiniteModel.contentNode = content;
+                    $scope.infiniteModel.submit($scope.infiniteModel);
+                }
+                $scope.saveAndCloseButtonState = "success";
+            }).catch(angular.noop);;
+        };
+
         function moveNode(node, target) {
 
             contentResource.move({ "parentId": target.id, "id": node.id })
@@ -516,7 +571,9 @@
                     }
 
                     // sync the destination node
-                    navigationService.syncTree({ tree: "content", path: path, forceReload: true, activate: false });
+                    if(!infiniteMode) {
+                        navigationService.syncTree({ tree: "content", path: path, forceReload: true, activate: false });
+                    }
 
                     $scope.page.buttonRestore = "success";
                     notificationsService.success("Successfully restored " + node.name + " to " + target.name);
@@ -533,8 +590,8 @@
 
         // methods for infinite editing
         $scope.close = function() {
-            if($scope.model.close) {
-                $scope.model.close($scope.model);
+            if($scope.infiniteModel.close) {
+                $scope.infiniteModel.close($scope.infiniteModel);
             }
         };
 
@@ -563,7 +620,7 @@
                 getMethod: "&",
                 getScaffoldMethod: "&?",
                 culture: "=?",
-                model: "=?"
+                infiniteModel: "=?"
             }
         };
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
index cff26ae2e1..f29f41656d 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorheader.directive.js
@@ -313,6 +313,7 @@ Use this directive to construct a header inside the main editor window.
                 name: "=",
                 nameLocked: "=",
                 menu: "=",
+                hideMenu: "<?",
                 icon: "=",
                 hideIcon: "@",
                 alias: "=",
@@ -321,6 +322,7 @@ Use this directive to construct a header inside the main editor window.
                 hideDescription: "@",
                 descriptionLocked: "@",
                 variants: "=",
+                hideChangeVariant: "<?",
                 navigation: "=",
                 key: "=",
                 onBack: "&?",
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblaunchminieditor.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umblaunchminieditor.directive.js
deleted file mode 100644
index 11b934ce96..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblaunchminieditor.directive.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
-* @ngdoc directive
-* @name umbraco.directives.directive:umbLaunchMiniEditor 
-* @restrict E
-* @function
-* @description 
-* Used on a button to launch a mini content editor editor dialog
-**/
-angular.module("umbraco.directives")
-    .directive('umbLaunchMiniEditor', function (miniEditorHelper) {
-        return {
-            restrict: 'A',
-            replace: false,
-            scope: {
-                node: '=umbLaunchMiniEditor',
-            },
-            link: function(scope, element, attrs) {
-
-                element.click(function() {
-                    miniEditorHelper.launchMiniEditor(scope.node);
-                });
-
-            }
-        };
-    });
\ No newline at end of file
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 4ab253092b..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
@@ -85,6 +85,23 @@
             open(editor);
         }
 
+        /**
+         * @ngdoc method
+         * @name umbraco.services.editorService#contentPicker
+         * @methodOf umbraco.services.editorService
+         *
+         * @description
+         * Opens a content picker in infinite editing, the submit callback returns an array of selected items
+         * @returns {Object} editor object
+         */
+        function contentPicker(editor) {
+            editor.view = "views/common/infiniteeditors/treepicker/treepicker.html";
+            editor.size = "small";
+            editor.section = "content";
+            editor.treeAlias = "content";
+            open(editor);
+        }
+
         /**
          * @ngdoc method
          * @name umbraco.services.editorService#mediaEditor
@@ -174,16 +191,99 @@
             open(editor);
         }
 
+        function queryBuilder(editor) {
+            editor.view = "views/common/infiniteeditors/querybuilder/querybuilder.html";
+            editor.size = "small";
+            open(editor);
+        }
+
+        function treePicker(editor) {
+            editor.view = "views/common/infiniteeditors/treepicker/treepicker.html";
+            editor.size = "small";
+            open(editor);
+        }
+
+        function nodePermissions(editor) {
+            editor.view = "views/common/infiniteeditors/nodepermissions/nodepermissions.html";
+            editor.size = "small";
+            open(editor);
+        }
+
+        function insertCodeSnippet(editor) {
+            editor.view = "views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html";
+            editor.size = "small";
+            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,
             close: close,
             mediaEditor: mediaEditor,
             contentEditor: contentEditor,
+            contentPicker: contentPicker,
             mediaPicker: mediaPicker,
             iconPicker: iconPicker,
             documentTypeEditor: documentTypeEditor,
-            mediaTypeEditor: mediaTypeEditor
+            mediaTypeEditor: mediaTypeEditor,
+            queryBuilder: queryBuilder,
+            treePicker: treePicker,
+            nodePermissions: nodePermissions,
+            insertCodeSnippet: insertCodeSnippet,
+            userGroupPicker: userGroupPicker,
+            sectionPicker: sectionPicker,
+            userPicker: userPicker
         };
 
         return service;
diff --git a/src/Umbraco.Web.UI.Client/src/common/services/minieditorhelper.service.js b/src/Umbraco.Web.UI.Client/src/common/services/minieditorhelper.service.js
deleted file mode 100644
index 693457c7e8..0000000000
--- a/src/Umbraco.Web.UI.Client/src/common/services/minieditorhelper.service.js
+++ /dev/null
@@ -1,89 +0,0 @@
-(function () {
-    'use strict';
-
-    function miniEditorHelper(dialogService, editorState, fileManager, contentEditingHelper, $q) {
-
-        var launched = false;
-
-        function launchMiniEditor(node) {
-
-            var deferred = $q.defer();
-
-            launched = true;
-
-            //We need to store the current files selected in the file manager locally because the fileManager
-            // is a singleton and is shared globally. The mini dialog will also be referencing the fileManager 
-            // and we don't want it to be sharing the same files as the main editor. So we'll store the current files locally here,
-            // clear them out and then launch the dialog. When the dialog closes, we'll reset the fileManager to it's previous state.
-            var currFiles = _.groupBy(fileManager.getFiles(), "alias");
-            fileManager.clearFiles();
-
-            //We need to store the original editorState entity because it will need to change when the mini editor is loaded so that
-            // any property editors that are working with editorState get given the correct entity, otherwise strange things will 
-            // start happening.
-            var currEditorState = editorState.getCurrent();
-
-            dialogService.open({
-                template: "views/common/dialogs/content/edit.html",
-                id: node.id,
-                closeOnSave: true,
-                tabFilter: ["Generic properties"],
-                callback: function (data) {
-
-                    //set the node name back
-                    node.name = data.name;
-
-                    //reset the fileManager to what it was
-                    fileManager.clearFiles();
-                    _.each(currFiles, function (val, key) {
-                        fileManager.setFiles(key, _.map(currFiles['upload'], function (i) { return i.file; }));
-                    });
-
-                    //reset the editor state
-                    editorState.set(currEditorState);
-
-                    //Now we need to check if the content item that was edited was actually the same content item
-                    // as the main content editor and if so, update all property data	                
-                    if (data.id === currEditorState.id) {
-                        var changed = contentEditingHelper.reBindChangedProperties(currEditorState, data);
-                    }
-
-                    launched = false;
-                    
-                    deferred.resolve(data);
-
-                },
-                closeCallback: function () {
-                    //reset the fileManager to what it was
-                    fileManager.clearFiles();
-                    _.each(currFiles, function (val, key) {
-                        fileManager.setFiles(key, _.map(currFiles['upload'], function (i) { return i.file; }));
-                    });
-
-                    //reset the editor state
-                    editorState.set(currEditorState);
-
-                    launched = false;
-
-                    deferred.reject();
-
-                }
-            });
-
-            return deferred.promise;
-
-        }
-
-        var service = {
-            launchMiniEditor: launchMiniEditor
-        };
-
-        return service;
-
-    }
-
-
-    angular.module('umbraco.services').factory('miniEditorHelper', miniEditorHelper);
-
-
-})();
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 7e37b622d3..e7564ca2ca 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/editor.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/editor.less
@@ -136,6 +136,9 @@ a.umb-editor-header__close-split-view:hover {
 	font-size: 13px;
 	color: @gray-4;
 	background-color: @white;
+}
+
+a.umb-variant-switcher__toggle {
 	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 	&:hover {
 		background-color: @gray-10;
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/dialogs/content/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/content/edit.controller.js
deleted file mode 100644
index c4aa39930d..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/content/edit.controller.js
+++ /dev/null
@@ -1,103 +0,0 @@
-function ContentEditDialogController($scope, editorState, $routeParams, $q, $timeout, $window, appState, contentResource, entityResource, navigationService, notificationsService, angularHelper, serverValidationManager, contentEditingHelper, treeService, fileManager, formHelper, umbRequestHelper, umbModelMapper, $http) {
-    
-    $scope.defaultButton = null;
-    $scope.subButtons = [];
-    var dialogOptions = $scope.$parent.dialogOptions;
-
-    // This is a helper method to reduce the amount of code repitition for actions: Save, Publish, SendToPublish
-    function performSave(args) {
-        contentEditingHelper.contentEditorPerformSave({
-            saveMethod: args.saveMethod,
-            scope: $scope,
-            content: $scope.content
-        }).then(function (content) {
-            //success            
-            if (dialogOptions.closeOnSave) {
-                $scope.submit(content);
-            }
-
-        }, function(err) {
-            //error
-        });
-    }
-
-    function filterTabs(entity, blackList) {
-        if (blackList) {
-            _.each(entity.tabs, function (tab) {
-                tab.hide = _.contains(blackList, tab.alias);
-            });
-        }
-
-        return entity;
-    };
-    
-    function init(content) {
-        var buttons = contentEditingHelper.configureContentEditorButtons({
-            create: $routeParams.create,
-            content: content,
-            methods: {
-                saveAndPublish: $scope.saveAndPublish,
-                sendToPublish: $scope.sendToPublish,
-                save: $scope.save,
-                unPublish: angular.noop
-            }
-        });
-        $scope.defaultButton = buttons.defaultButton;
-        $scope.subButtons = buttons.subButtons;
-
-        //This is a total hack but we have really no other way of sharing data to the property editors of this
-        // content item, so we'll just set the property on the content item directly
-        $scope.content.isDialogEditor = true;
-
-        editorState.set($scope.content);
-    }
-
-    //check if the entity is being passed in, otherwise load it from the server
-    if (angular.isObject(dialogOptions.entity)) {
-        $scope.loaded = true;
-        $scope.content = filterTabs(dialogOptions.entity, dialogOptions.tabFilter);
-        init($scope.content);
-    }
-    else {
-        contentResource.getById(dialogOptions.id)
-            .then(function(data) {
-                $scope.loaded = true;
-                $scope.content = filterTabs(data, dialogOptions.tabFilter);
-                init($scope.content);
-                //in one particular special case, after we've created a new item we redirect back to the edit
-                // route but there might be server validation errors in the collection which we need to display
-                // after the redirect, so we will bind all subscriptions which will show the server validation errors
-                // if there are any and then clear them so the collection no longer persists them.
-                serverValidationManager.executeAndClearAllSubscriptions();
-            });
-    }  
-
-    $scope.sendToPublish = function () {
-        performSave({ saveMethod: contentResource.sendToPublish });
-    };
-
-    $scope.saveAndPublish = function () {
-        performSave({ saveMethod: contentResource.publish });
-    };
-
-    $scope.save = function () {
-        performSave({ saveMethod: contentResource.save });
-    };
-
-    // this method is called for all action buttons and then we proxy based on the btn definition
-    $scope.performAction = function (btn) {
-
-        if (!btn || !angular.isFunction(btn.handler)) {
-            throw "btn.handler must be a function reference";
-        }
-
-        if (!$scope.busy) {
-            btn.handler.apply(this);
-        }
-    };
-
-}
-
-
-angular.module("umbraco")
-	.controller("Umbraco.Dialogs.Content.EditController", ContentEditDialogController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/common/dialogs/content/edit.html
deleted file mode 100644
index a5b73d1c98..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/dialogs/content/edit.html
+++ /dev/null
@@ -1,80 +0,0 @@
-<form novalidate name="contentForm"
-    ng-controller="Umbraco.Dialogs.Content.EditController"
-    ng-show="loaded"
-    ng-submit="save()"
-    val-form-manager
-    class="umb-mini-editor">
-
-	<div class="umb-panel">
-		<div class="umb-panel-header">
-			<umb-content-name
-			    placeholder="@placeholders_entername"
-			    ng-model="content.name"/>
-		</div>
-
-		<div class="umb-panel-body with-footer">
-
-            <div class="umb-pane" ng-if="content">
-
-                <umb-tabs-nav
-                    model="content.tabs"
-                    id-suffix="-mini-editor">
-                </umb-tabs-nav>
-
-                <umb-tabs-content>
-
-                    <umb-tab
-                        id="tab{{tab.id}}-mini-editor"
-                        ng-repeat="tab in content.tabs"
-                        rel="{{tab.id}}-mini-editor">
-                        
-                        <umb-property
-                            property="property"
-                            ng-repeat="property in tab.properties">
-                            <umb-property-editor model="property"></umb-property-editor>
-                        </umb-property>
-
-                    </umb-tab>
-
-                </umb-tabs-content>
-
-            </div>
-
-		</div>
-
-
-		<div class="umb-panel-footer" >
-			<div class="umb-el-wrap umb-panel-buttons">
-		        <div class="btn-toolbar umb-btn-toolbar pull-right">
-		        	<a href ng-click="close()" class="btn btn-link">
-		        		<localize key="general_close">Close</localize>
-					</a>
-		        
-
-                    <div class="btn-group dropup" ng-if="defaultButton">
-                        <!-- primary button -->
-                        <a class="btn btn-success" href="#" ng-click="performAction(defaultButton)" prevent-default>
-                            <localize key="{{defaultButton.labelKey}}">{{defaultButton.labelKey}}</localize>
-                        </a>
-
-                        <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" ng-if="subButtons.length > 0">
-                            <span class="caret"></span>
-                        </a>
-
-                        <!-- sub buttons -->
-                        <ul class="dropdown-menu bottom-up" role="menu" aria-labelledby="dLabel" ng-if="subButtons.length > 0">
-                            <li ng-repeat="btn in subButtons">
-                                <a href="#" ng-click="performAction(btn)" prevent-default>
-                                    <localize key="{{btn.labelKey}}">{{btn.labelKey}}</localize>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-			        
-		        </div>
-
-		      </div>
-			</div>
-		</div>
-	</div>
-</form>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/insert/insert.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.controller.js
similarity index 80%
rename from src/Umbraco.Web.UI.Client/src/views/common/overlays/insert/insert.controller.js
rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.controller.js
index e4c27fa63b..90d3e945a4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/insert/insert.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function InsertOverlayController($scope, localizationService) {
+    function InsertOverlayController($scope, localizationService, editorService) {
 
         var vm = this;
 
@@ -9,6 +9,7 @@
         vm.openPageFieldOverlay = openPageFieldOverlay;
         vm.openDictionaryItemOverlay = openDictionaryItemOverlay;
         vm.openPartialOverlay = openPartialOverlay;
+        vm.close = close;
 
         function onInit() {
             
@@ -88,8 +89,7 @@
                 var subtitle = values[1];
                 var emptyStateMessage = values[2];
 
-                vm.dictionaryItemOverlay = {
-                    view: "treepicker",
+                var dictionaryItemPicker = {
                     section: "settings",
                     treeAlias: "dictionary",
                     entityType: "dictionary",
@@ -97,25 +97,22 @@
                     title: title,
                     subtitle: subtitle,
                     emptyStateMessage: emptyStateMessage,
-                    show: true,
                     select: function(node){
-    
                         $scope.model.insert = {
                             "type": "dictionary",
                             "node": node
                         };
-    
                         $scope.model.submit($scope.model);
-    
-                        vm.dictionaryItemOverlay.show = false;
-                        vm.dictionaryItemOverlay = null;
+                        editorService.close();
                     },
     
-                    close: function(model) {
-                        vm.dictionaryItemOverlay.show = false;
-                        vm.dictionaryItemOverlay = null;
+                    close: function() {
+                        editorService.close();
                     }
                 };
+
+                editorService.treePicker(dictionaryItemPicker);
+
             });
         }
 
@@ -123,8 +120,7 @@
             localizationService.localize("template_insertPartialView").then(function(value){
                 var title = value;
 
-                vm.partialItemOverlay = {
-                    view: "treepicker",
+                var partialItemPicker = {
                     section: "settings",
                     treeAlias: "partialViews",
                     entityType: "partialView",
@@ -136,32 +132,32 @@
                         }
                     },
                     filterCssClass: "not-allowed",
-                    show: true,
-                    select: function(node){
-                        
+                    select: function(node) {
                         $scope.model.insert = {
                             "type": "partial",
                             "node": node
                         };
-    
-                        $scope.model.submit($scope.model);
-    
-                        vm.partialItemOverlay.show = false;
-                        vm.partialItemOverlay = null;
+                        $scope.model.submit($scope.model); 
+                        editorService.close();
                     },
-    
-                    close: function (model) {
-                        vm.partialItemOverlay.show = false;
-                        vm.partialItemOverlay = null;
+                    close: function () {
+                        editorService.close();
                     }
                 };
 
+                editorService.treePicker(partialItemPicker);
             });
         }
 
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
         onInit();
 
     }
 
-    angular.module("umbraco").controller("Umbraco.Overlays.InsertOverlay", InsertOverlayController);
+    angular.module("umbraco").controller("Umbraco.Editors.InsertOverlay", InsertOverlayController);
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html
new file mode 100644
index 0000000000..2cc5cb2e5c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/insertcodesnippet/insertcodesnippet.html
@@ -0,0 +1,68 @@
+<div ng-controller="Umbraco.Editors.InsertOverlay 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-box>
+                <umb-box-content>
+                    <div class="umb-insert-code-boxes">
+                        <div ng-if="model.allowedTypes.umbracoField" class="umb-insert-code-box" ng-click="vm.openPageFieldOverlay()">
+                            <div class="umb-insert-code-box__title"><localize key="template_insertPageField" /></div>
+                            <div class="umb-insert-code-box__description"><localize key="template_insertPageFieldDesc" /></div>
+                        </div>
+                        <div ng-if="model.allowedTypes.partial" class="umb-insert-code-box" ng-click="vm.openPartialOverlay()">
+                            <div class="umb-insert-code-box__title"><localize key="template_insertPartialView" /></div>
+                            <div class="umb-insert-code-box__description">
+                                <localize key="template_insertPartialViewDesc" />
+                            </div>
+                        </div>
+                        <div ng-if="model.allowedTypes.macro" class="umb-insert-code-box" ng-click="vm.openMacroPicker()">
+                            <div class="umb-insert-code-box__title"><localize key="template_insertMacro" /></div>
+                            <div class="umb-insert-code-box__description">
+                                <localize key="template_insertMacroDesc" />
+                
+                            </div>
+                        </div>
+                        <div ng-if="model.allowedTypes.dictionary" class="umb-insert-code-box" ng-click="vm.openDictionaryItemOverlay()">
+                            <div class="umb-insert-code-box__title"><localize key="template_insertDictionaryItem" /></div>
+                            <div class="umb-insert-code-box__description"><localize key="template_insertDictionaryItemDesc" /></div>
+                        </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"
+                    action="vm.close()">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
+
+    </umb-editor-view>
+
+    <umb-overlay ng-if="vm.macroPickerOverlay.show"
+                 model="vm.macroPickerOverlay"
+                 view="vm.macroPickerOverlay.view"
+                 position="right">
+    </umb-overlay>
+    <umb-overlay ng-if="vm.pageFieldOverlay.show"
+                 model="vm.pageFieldOverlay"
+                 position="right"
+                 view="vm.pageFieldOverlay.view">
+    </umb-overlay>
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/nodepermissions/nodepermissions.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/nodepermissions/nodepermissions.controller.js
similarity index 52%
rename from src/Umbraco.Web.UI.Client/src/views/common/overlays/nodepermissions/nodepermissions.controller.js
rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/nodepermissions/nodepermissions.controller.js
index 68e1c4cd86..15802feed9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/nodepermissions/nodepermissions.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/nodepermissions/nodepermissions.controller.js
@@ -5,21 +5,34 @@
 
         var vm = this;
 
-        function onInit() {
+        vm.submit = submit;
+        vm.close = close;
 
+        function onInit() {
             // set default title
             if(!$scope.model.title) {
                 localizationService.localize("defaultdialogs_permissionsEdit").then(function(value){
                     $scope.model.title = value + " " + $scope.model.node.name;
                 });
             }
-            
+        }
+
+        function submit() {
+            if($scope.model.submit) {
+                $scope.model.submit($scope.model);
+            }
+        }
+
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
         }
 
         onInit();
 
     }
 
-    angular.module("umbraco").controller("Umbraco.Overlays.NodePermissionsController", NodePermissionsController);
+    angular.module("umbraco").controller("Umbraco.Editors.NodePermissionsController", NodePermissionsController);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/nodepermissions/nodepermissions.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/nodepermissions/nodepermissions.html
new file mode 100644
index 0000000000..d41fc862b7
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/nodepermissions/nodepermissions.html
@@ -0,0 +1,56 @@
+<div class="block-form" ng-controller="Umbraco.Editors.NodePermissionsController 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-box>
+                <umb-box-content>
+                    <umb-control-group
+                        ng-repeat="(category, permissions) in model.node.permissions"
+                        label="{{category}}">
+                        <umb-permission
+                            ng-repeat="permission in permissions"
+                            name="permission.name"
+                            description="permission.description"
+                            selected="permission.checked">
+                        </umb-permission>
+                    </umb-control-group>
+                </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>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js
similarity index 90%
rename from src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js
index 7c1c6c78f3..fc273ab089 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.controller.js
@@ -1,7 +1,7 @@
 (function() {
     "use strict";
 
-    function QueryBuilderOverlayController($scope, templateQueryResource, localizationService) {
+    function QueryBuilderOverlayController($scope, templateQueryResource, localizationService, editorService) {
 
         var everything = "";
         var myWebsite = "";
@@ -31,6 +31,8 @@
         vm.setFilterTerm = setFilterTerm;
         vm.changeConstraintValue = changeConstraintValue;
         vm.datePickerChange = datePickerChange;
+        vm.submit = submit;
+        vm.close = close;
 
         function onInit() {
 
@@ -87,33 +89,24 @@
         }
 
         function chooseSource(query) {
-            vm.contentPickerOverlay = {
-                view: "treepicker",
-                section: "content",
-                treeAlias: "content",
-                show: true,
+            var contentPicker = {
                 submit: function(model) {
-
                     var selectedNodeId = model.selection[0].id;
                     var selectedNodeName = model.selection[0].name;
-
                     if (selectedNodeId > 0) {
                         query.source = { id: selectedNodeId, name: selectedNodeName };
                     } else {
                         query.source.name = myWebsite;
                         delete query.source.id;
                     }
-
                     throttledFunc();
-
-                    vm.contentPickerOverlay.show = false;
-                    vm.contentPickerOverlay = null;
+                    editorService.close();
                 },
-                close: function(oldModel) {
-                    vm.contentPickerOverlay.show = false;
-                    vm.contentPickerOverlay = null;
+                close: function() {
+                    editorService.close();
                 }
             };
+            editorService.contentPicker(contentPicker);
         }
 
         function getPropertyOperators(property) {
@@ -194,6 +187,18 @@
             }
         }
 
+        function submit(model) {
+            if($scope.model.submit) {
+                $scope.model.submit(model);
+            }
+        }
+
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
         var throttledFunc = _.throttle(function() {
 
                 templateQueryResource.postTemplateQuery(vm.query)
@@ -216,6 +221,6 @@
             });
     }
 
-    angular.module("umbraco").controller("Umbraco.Overlays.QueryBuilderController", QueryBuilderOverlayController);
+    angular.module("umbraco").controller("Umbraco.Editors.QueryBuilderController", QueryBuilderOverlayController);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html
new file mode 100644
index 0000000000..e7f0cd9a1b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/querybuilder/querybuilder.html
@@ -0,0 +1,186 @@
+<div ng-controller="Umbraco.Editors.QueryBuilderController 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-box>
+				<umb-box-content>
+
+					<div class="umb-control-group umb-querybuilder">
+
+						<div class="row">
+							<div class="query-items">
+								
+								<span><localize key="template_iWant">I want</localize></span>
+				
+								<div class="btn-group">
+				
+									<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
+										{{vm.query.contentType.name}}
+										<span class="caret"></span>
+									</a>
+									
+									<ul class="dropdown-menu">
+										<li ng-repeat="contentType in vm.contentTypes">
+											<a href ng-click="vm.setContentType(contentType)">{{contentType.name}}</a>
+										</li>
+									</ul>
+				
+								</div>
+				
+								<span><localize key="template_from">from</localize></span>
+				
+								<a href class="btn btn-link" ng-click="vm.chooseSource(vm.query)">
+									{{vm.query.source.name}}
+									<span class="caret"></span>	
+								</a>
+				
+							</div>
+				
+							<div class="query-items" ng-repeat="filter in vm.query.filters">
+				
+								<span ng-if="$first">
+									<localize key="template_where">where</localize>
+								</span>
+								<span ng-if="!$first">
+									<localize key="template_and">and</localize>
+								</span>
+				
+								<div class="btn-group">
+				
+									<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
+										{{filter.property.name}}
+										<span class="caret"></span>
+									</a>
+				
+									<ul class="dropdown-menu">
+										<li ng-repeat="property in vm.properties">
+											<a href ng-click="vm.setFilterProperty(filter, property)">
+												{{property.name}}
+											</a>
+										</li>
+									</ul>
+				
+								</div>
+				
+								<div class="btn-group" ng-if="filter.property">
+									<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
+										{{filter.term.name}}
+										<span class="caret"></span>
+									</a>
+									<ul class="dropdown-menu">
+										<li ng-repeat="term in vm.getPropertyOperators(filter.property)">
+											<a href ng-click="vm.setFilterTerm(filter, term)">
+												{{term.name}}
+											</a>
+										</li>
+									</ul>
+								</div>
+				
+								<span ng-switch="filter.term.appliesTo[0]">
+				
+									<!-- Filter term types  (string, int, date) -->
+									<input type="text" ng-switch-when="string" style="width:90px;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
+									<input type="number" ng-switch-when="int" style="width:90px;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
+				
+									<span ng-switch-when="datetime">
+										<umb-date-time-picker options="vm.datePickerConfig"
+																on-change="vm.datePickerChange(event, filter)">
+										</umb-date-time-picker>
+									</span>
+				
+								</span>
+				
+								
+								
+								<a href ng-click="vm.addFilter(vm.query)">
+									<i class="icon-add"></i>
+								</a>
+				
+								<a href ng-click="vm.trashFilter(vm.query, filter)">
+									<i class="icon-trash"></i>
+								</a>
+				
+							</div>
+				
+				
+							<div class="query-items">
+				
+								<span><localize key="template_orderBy">order by</localize></span>
+				
+								<div class="btn-group">
+									<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
+										{{vm.query.sort.property.name}}
+										<span class="caret"></span>
+									</a>
+				
+									<ul class="dropdown-menu">
+										<li ng-repeat="property in vm.properties">
+											<a href ng-click="vm.setSortProperty(vm.query, property)">
+													{{property.name}}
+												</a>
+										</li>
+									</ul>
+				
+								</div>
+				
+								<a href class="btn" ng-click="vm.changeSortOrder(vm.query)">
+									{{vm.query.sort.translation.currentLabel}}
+								</a>
+				
+							</div>
+						</div>
+				
+						<h5>{{model.result.resultCount}} <localize key="template_itemsReturned">items, returned in</localize> {{model.result.executionTime}} ms</h5>
+				
+						<ul class="nav unstyled">
+							<li ng-repeat="item in model.result.sampleResults">
+								<i class="icon icon-document turquoise-d1"></i> {{item.name}}
+							</li>
+						</ul>
+				
+						<pre>
+				{{model.result.queryExpression}}
+						</pre>
+				
+					</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.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/treepicker/treepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js
similarity index 98%
rename from src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.controller.js
rename to src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js
index da6d2582e3..5b5de1b393 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.controller.js
@@ -1,5 +1,5 @@
 //used for the media picker dialog
-angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
+angular.module("umbraco").controller("Umbraco.Editors.TreePickerController",
     function ($scope,
         $q,
         entityResource,
@@ -63,6 +63,8 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
         vm.hideSearch = hideSearch;
         vm.closeMiniListView = closeMiniListView;
         vm.selectListViewNode = selectListViewNode;
+        vm.submit = submit;
+        vm.close = close;
 
         function initDialogTree() {
             vm.dialogTreeApi.callbacks.treeLoaded(treeLoadedHandler);
@@ -97,7 +99,7 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
                     });
                 }
             }
-            else if (vm.treeAlias === "member" || vm.section) {
+            else if (vm.treeAlias === "member" || vm.section === "member") {
                 vm.entityType = "Member";
                 if (!$scope.model.title) {
                     localizationService.localize("defaultdialogs_selectMember").then(function(value){
@@ -609,6 +611,18 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
         function closeMiniListView() {
             vm.miniListView = undefined;
         }
+
+        function submit(model) {
+            if($scope.model.submit) {
+                $scope.model.submit(model);
+            }
+        }
+
+        function close() {
+            if($scope.model.close) {
+                $scope.model.close();
+            }
+        }
         
         //initialize
         onInit();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html
new file mode 100644
index 0000000000..7270abbc7c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html
@@ -0,0 +1,111 @@
+<div ng-controller="Umbraco.Editors.TreePickerController as vm">
+
+    <form name="propertySettingsForm" novalidate val-form-manager>
+
+        <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-box>
+                        <umb-box-content>
+
+                            <div ng-hide="vm.miniListView">
+
+                                <div class="umb-language-picker" ng-if="vm.showLanguageSelector && vm.languages.length > 1" on-outside-click="vm.page.languageSelectorIsOpen = false" style="padding-bottom: 5px">
+                                    <div class="umb-language-picker__toggle" ng-click="vm.toggleLanguageSelector()">
+                                        <div>{{vm.selectedLanguage.name}}</div>
+                                        <ins class="umb-language-picker__expand" ng-class="{'icon-navigation-down': !vm.languageSelectorIsOpen, 'icon-navigation-up': vm.languageSelectorIsOpen}" class="icon-navigation-right">&nbsp;</ins>
+                                    </div>
+                                    <div class="umb-language-picker__dropdown" ng-if="vm.languageSelectorIsOpen">
+                                        <a ng-click="vm.selectLanguage(language)" ng-repeat="language in vm.languages" href="">{{language.name}}</a>
+                                    </div>
+                                </div>
+                        
+                                <div class="umb-control-group">
+                                    <umb-tree-search-box
+                                        ng-if="vm.enableSearh"
+                                        hide-search-callback="vm.hideSearch"
+                                        search-callback="vm.onSearchResults"
+                                        search-from-id="{{vm.searchInfo.searchFromId}}"
+                                        search-from-name="{{vm.searchInfo.searchFromName}}"
+                                        show-search="{{vm.searchInfo.showSearch}}"
+                                        section="{{vm.section}}">
+                                    </umb-tree-search-box>
+                                </div>
+                        
+                                <umb-tree-search-results ng-if="vm.searchInfo.showSearch"
+                                                            results="vm.searchInfo.results"
+                                                            select-result-callback="vm.selectResult">
+                                </umb-tree-search-results>
+                        
+                                <umb-empty-state ng-if="!vm.hasItems && vm.emptyStateMessage" position="center">
+                                    {{ vm.emptyStateMessage }}
+                                </umb-empty-state>
+                        
+                                <div ng-if="vm.treeReady" ng-hide="vm.searchInfo.showSearch" ng-animate="'tree-fade-out'">
+                                    <umb-tree 
+                                        section="{{vm.section}}"
+                                        treealias="{{vm.treeAlias}}"
+                                        hideheader="{{vm.hideHeader}}"
+                                        hideoptions="true"
+                                        isdialog="true"
+                                        only-initialized="{{vm.onlyInitialized}}"
+                                        customtreeparams="{{vm.customTreeParams}}"
+                                        enablelistviewsearch="true"
+                                        enablelistviewexpand="true"
+                                        enablecheckboxes="{{vm.multiPicker}}"
+                                        on-init="vm.initDialogTree()"
+                                        api="vm.dialogTreeApi">
+                                    </umb-tree>
+                                </div>
+                        
+                            </div>
+                        
+                            <umb-mini-list-view 
+                                ng-if="vm.miniListView"
+                                node="vm.miniListView"
+                                entity-type="{{vm.entityType}}"
+                                start-node-id="vm.startNodeId"
+                                on-select="vm.selectListViewNode(node)"
+                                on-close="vm.closeMiniListView()">
+                            </umb-mini-list-view>
+
+                        </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
+                        ng-if="vm.multiPicker"
+                        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>
+
+    </form>
+
+</div>
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/help/help.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/help/help.controller.js
deleted file mode 100644
index 29f4be0261..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/help/help.controller.js
+++ /dev/null
@@ -1,57 +0,0 @@
-angular.module("umbraco")
-    .controller("Umbraco.Overlays.HelpController", function ($scope, $location, $routeParams, helpService, userService, localizationService) {
-        $scope.section = $routeParams.section;
-        $scope.version = Umbraco.Sys.ServerVariables.application.version + " assembly: " + Umbraco.Sys.ServerVariables.application.assemblyVersion;
-        $scope.model.subtitle = "Umbraco version" + " " + $scope.version;
-
-        if(!$scope.model.title) {
-            localizationService.localize("general_help").then(function(value) {
-                $scope.model.title = value;
-            });
-        }
-
-        if(!$scope.section){
-            $scope.section = "content";
-        }
-
-        $scope.sectionName = $scope.section;
-
-        var rq = {};
-        rq.section = $scope.section;
-
-        //translate section name
-        localizationService.localize("sections_" + rq.section).then(function (value) {
-            $scope.sectionName = value;
-        });
-
-        userService.getCurrentUser().then(function(user){
-
-        	rq.lang = user.locale;
-
-    	    if($routeParams.url){
-    	    	rq.path = decodeURIComponent($routeParams.url);
-
-    	    	if(rq.path.indexOf(Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath) === 0){
-    				rq.path = rq.path.substring(Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath.length);
-    			}
-
-    			if(rq.path.indexOf(".aspx") > 0){
-    				rq.path = rq.path.substring(0, rq.path.indexOf(".aspx"));
-    			}
-
-    	    }else{
-    	    	rq.path = rq.section + "/" + $routeParams.tree + "/" + $routeParams.method;
-    	    }
-
-    	    helpService.findHelp(rq).then(function(topics){
-    	    	$scope.topics = topics;
-    	    });
-
-    	    helpService.findVideos(rq).then(function(videos){
-    	        $scope.videos = videos;
-    	    });
-
-        });
-
-
-    });
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/help/help.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/help/help.html
deleted file mode 100644
index ecfdd24828..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/help/help.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<div ng-controller="Umbraco.Overlays.HelpController">
-
-    <div class="umb-control-group">
-        <h5><localize key="help_helpTopicsFor">Help topics for</localize>: {{sectionName}}</h5>
-        <ul class="unstyled list-icons" ng-show="topics">
-            <li ng-repeat="topic in topics">
-                <i class="icon icon-help-alt"></i>
-
-                <a target="_blank" href="{{topic.link}}?utm_source=core&utm_medium=help&utm_content=topic-link&utm_campaign=our" title="{{topic.title}}">
-                     {{topic.title}}
-                </a>
-                <small class="umb-detail">{{topic.description}}</small>
-            </li>
-        </ul>
-        <ul class="unstyled list-icons">
-            <li>
-                <i class="icon icon-favorite"></i>
-                <a target="_blank" href="http://our.umbraco.org?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=our">
-                     <localize key="help_goTo">go to</localize> our.umbraco.org
-                </a>
-                <small class="umb-detail">
-                    <localize key="defaultdialogs_theFriendliestCommunity">The friendliest community</localize>
-                </small>
-            </li>
-        </ul>
-    </div>
-
-    <div class="umb-control-group">
-        <h5><localize key="help_videoChaptersFor">Video chapters for</localize>: {{sectionName}}</h5>
-        <ul class="thumbnails" ng-show="videos">
-            <li class="span2" ng-repeat="video in videos">
-                <div class="thumbnail" style="margin-right: 20px">
-                    <a target="_blank" href="{{video.link}}?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv" title="{{video.title}}">
-                        <img ng-src="{{video.thumbnail}}?width=120" alt="{{video.title}}">
-                    </a>
-                </div>
-            </li>
-        </ul>
-        <ul class="unstyled list-icons">
-            <li>
-                <i class="icon icon-tv-old"></i>
-                <a target="_blank" href="http://umbraco.tv?utm_source=core&utm_medium=help&utm_content=link&utm_campaign=tv">
-                    <localize key="help_goTo">go to</localize> umbraco.tv
-                </a>
-                <small class="umb-detail"><localize key="help_theBestUmbracoVideoTutorials">The best Umbraco video tutorials</localize></small>
-            </li>
-        </ul>
-    </div>
-
-</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/insert/insert.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/insert/insert.html
deleted file mode 100644
index 19005ccc69..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/insert/insert.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div ng-controller="Umbraco.Overlays.InsertOverlay as vm">
-    <div class="umb-insert-code-boxes">
-        <div ng-if="model.allowedTypes.umbracoField" class="umb-insert-code-box" ng-click="vm.openPageFieldOverlay()">
-            <div class="umb-insert-code-box__title"><localize key="template_insertPageField" /></div>
-            <div class="umb-insert-code-box__description"><localize key="template_insertPageFieldDesc" /></div>
-        </div>
-        <div ng-if="model.allowedTypes.partial" class="umb-insert-code-box" ng-click="vm.openPartialOverlay()">
-            <div class="umb-insert-code-box__title"><localize key="template_insertPartialView" /></div>
-            <div class="umb-insert-code-box__description">
-                <localize key="template_insertPartialViewDesc" />
-            </div>
-        </div>
-        <div ng-if="model.allowedTypes.macro" class="umb-insert-code-box" ng-click="vm.openMacroPicker()">
-            <div class="umb-insert-code-box__title"><localize key="template_insertMacro" /></div>
-            <div class="umb-insert-code-box__description">
-                <localize key="template_insertMacroDesc" />
-
-            </div>
-        </div>
-        <div ng-if="model.allowedTypes.dictionary" class="umb-insert-code-box" ng-click="vm.openDictionaryItemOverlay()">
-            <div class="umb-insert-code-box__title"><localize key="template_insertDictionaryItem" /></div>
-            <div class="umb-insert-code-box__description"><localize key="template_insertDictionaryItemDesc" /></div>
-        </div>
-    </div>
-
-    <umb-overlay ng-if="vm.macroPickerOverlay.show"
-                 model="vm.macroPickerOverlay"
-                 view="vm.macroPickerOverlay.view"
-                 position="right">
-    </umb-overlay>
-    <umb-overlay ng-if="vm.pageFieldOverlay.show"
-                 model="vm.pageFieldOverlay"
-                 position="right"
-                 view="vm.pageFieldOverlay.view">
-    </umb-overlay>
-    <umb-overlay ng-if="vm.dictionaryItemOverlay.show"
-                 model="vm.dictionaryItemOverlay"
-                 position="right"
-                 view="vm.dictionaryItemOverlay.view">
-    </umb-overlay>
-    <umb-overlay ng-if="vm.partialItemOverlay.show"
-                 model="vm.partialItemOverlay"
-                 view="vm.partialItemOverlay.view"
-                 position="right">
-    </umb-overlay>
-</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/nodepermissions/nodepermissions.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/nodepermissions/nodepermissions.html
deleted file mode 100644
index 7578266562..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/nodepermissions/nodepermissions.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="block-form" ng-controller="Umbraco.Overlays.NodePermissionsController as vm">
-    <umb-control-group
-        ng-repeat="(category, permissions) in model.node.permissions"
-        label="{{category}}">
-        <umb-permission
-            ng-repeat="permission in permissions"
-            name="permission.name"
-            description="permission.description"
-            selected="permission.checked">
-        </umb-permission>
-    </umb-control-group>
-</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
deleted file mode 100644
index d469c45181..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/querybuilder/querybuilder.html
+++ /dev/null
@@ -1,149 +0,0 @@
-<div ng-controller="Umbraco.Overlays.QueryBuilderController as vm">
-
-	<div class="umb-control-group umb-querybuilder">
-
-        <div class="row">
-			<div class="query-items">
-				
-				<span><localize key="template_iWant">I want</localize></span>
-
-				<div class="btn-group">
-
-					<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
-						{{vm.query.contentType.name}}
-						<span class="caret"></span>
-					</a>
-					
-					<ul class="dropdown-menu">
-						<li ng-repeat="contentType in vm.contentTypes">
-							<a href ng-click="vm.setContentType(contentType)">{{contentType.name}}</a>
-						</li>
-					</ul>
-
-				</div>
-
-				<span><localize key="template_from">from</localize></span>
-
-				<a href class="btn btn-link" ng-click="vm.chooseSource(vm.query)">
-					{{vm.query.source.name}}
-					<span class="caret"></span>	
-				</a>
-
-			</div>
-
-			<div class="query-items" ng-repeat="filter in vm.query.filters">
-
-				<span ng-if="$first">
-                    <localize key="template_where">where</localize>
-                </span>
-				<span ng-if="!$first">
-                    <localize key="template_and">and</localize>
-                </span>
-
-				<div class="btn-group">
-
-					<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
-		            	{{filter.property.name}}
-						<span class="caret"></span>
-		            </a>
-
-					<ul class="dropdown-menu">
-						<li ng-repeat="property in vm.properties">
-							<a href ng-click="vm.setFilterProperty(filter, property)">
-		                    	{{property.name}}
-							</a>
-						</li>
-					</ul>
-
-				</div>
-
-				<div class="btn-group" ng-if="filter.property">
-					<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
-						{{filter.term.name}}
-						<span class="caret"></span>
-					</a>
-					<ul class="dropdown-menu">
-						<li ng-repeat="term in vm.getPropertyOperators(filter.property)">
-							<a href ng-click="vm.setFilterTerm(filter, term)">
-								{{term.name}}
-							</a>
-						</li>
-					</ul>
-				</div>
-
-                <span ng-switch="filter.term.appliesTo[0]">
-
-                    <!-- Filter term types  (string, int, date) -->
-                    <input type="text" ng-switch-when="string" style="width:90px;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
-                    <input type="number" ng-switch-when="int" style="width:90px;" ng-model="filter.constraintValue" ng-change="vm.changeConstraintValue()" />
-
-                    <span ng-switch-when="datetime">
-                        <umb-date-time-picker options="vm.datePickerConfig"
-                                              on-change="vm.datePickerChange(event, filter)">
-                        </umb-date-time-picker>
-                    </span>
-
-                </span>
-
-				
-				
-				<a href ng-click="vm.addFilter(vm.query)">
-					<i class="icon-add"></i>
-				</a>
-
-				<a href ng-click="vm.trashFilter(vm.query, filter)">
-					<i class="icon-trash"></i>
-				</a>
-
-			</div>
-
-
-			<div class="query-items">
-
-				<span><localize key="template_orderBy">order by</localize></span>
-
-				<div class="btn-group">
-					<a class="btn btn-link dropdown-toggle" data-toggle="dropdown" href="#">
-						{{vm.query.sort.property.name}}
-						<span class="caret"></span>
-					</a>
-
-					<ul class="dropdown-menu">
-						<li ng-repeat="property in vm.properties">
-							<a href ng-click="vm.setSortProperty(vm.query, property)">
-				  				{{property.name}}
-				  			</a>
-						</li>
-					</ul>
-
-				</div>
-
-				<a href class="btn" ng-click="vm.changeSortOrder(vm.query)">
-					{{vm.query.sort.translation.currentLabel}}
-				</a>
-
-			</div>
-		</div>
-
-		<h5>{{model.result.resultCount}} <localize key="template_itemsReturned">items, returned in</localize> {{model.result.executionTime}} ms</h5>
-
-		<ul class="nav unstyled">
-			<li ng-repeat="item in model.result.sampleResults">
-				<i class="icon icon-document turquoise-d1"></i> {{item.name}}
-			</li>
-		</ul>
-
-		<pre>
-{{model.result.queryExpression}}
-        </pre>
-
-	</div>
-
-	<umb-overlay
-		ng-if="vm.contentPickerOverlay.show"
-		model="vm.contentPickerOverlay"
-		view="vm.contentPickerOverlay.view"
-		position="right">
-	</umb-overlay>
-
-</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/treepicker/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.html
deleted file mode 100644
index ef9b063739..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/treepicker/treepicker.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<div ng-controller="Umbraco.Overlays.TreePickerController as vm">
-    <div ng-hide="vm.miniListView">
-
-        <div class="umb-language-picker" ng-if="vm.showLanguageSelector && vm.languages.length > 1" on-outside-click="vm.page.languageSelectorIsOpen = false" style="padding-bottom: 5px">
-            <div class="umb-language-picker__toggle" ng-click="vm.toggleLanguageSelector()">
-                <div>{{vm.selectedLanguage.name}}</div>
-                <ins class="umb-language-picker__expand" ng-class="{'icon-navigation-down': !vm.languageSelectorIsOpen, 'icon-navigation-up': vm.languageSelectorIsOpen}" class="icon-navigation-right">&nbsp;</ins>
-            </div>
-            <div class="umb-language-picker__dropdown" ng-if="vm.languageSelectorIsOpen">
-                <a ng-click="vm.selectLanguage(language)" ng-repeat="language in vm.languages" href="">{{language.name}}</a>
-            </div>
-        </div>
-
-        <div class="umb-control-group">
-            <umb-tree-search-box ng-if="vm.enableSearh"
-                                 hide-search-callback="vm.hideSearch"
-                                 search-callback="vm.onSearchResults"
-                                 search-from-id="{{vm.searchInfo.searchFromId}}"
-                                 search-from-name="{{vm.searchInfo.searchFromName}}"
-                                 show-search="{{vm.searchInfo.showSearch}}"
-                                 section="{{vm.section}}">
-            </umb-tree-search-box>
-        </div>
-
-        <umb-tree-search-results ng-if="vm.searchInfo.showSearch"
-                                 results="vm.searchInfo.results"
-                                 select-result-callback="vm.selectResult">
-        </umb-tree-search-results>
-
-        <umb-empty-state ng-if="!vm.hasItems && vm.emptyStateMessage" position="center">
-            {{ vm.emptyStateMessage }}
-        </umb-empty-state>
-
-        <div ng-if="vm.treeReady" ng-hide="vm.searchInfo.showSearch" ng-animate="'tree-fade-out'">
-            <umb-tree section="{{vm.section}}"
-                      treealias="{{vm.treeAlias}}"
-                      hideheader="{{vm.hideHeader}}"
-                      hideoptions="true"
-                      isdialog="true"
-                      only-initialized="{{vm.onlyInitialized}}"
-                      customtreeparams="{{vm.customTreeParams}}"
-                      enablelistviewsearch="true"
-                      enablelistviewexpand="true"
-                      enablecheckboxes="{{vm.multiPicker}}"
-                      on-init="vm.initDialogTree()"
-                      api="vm.dialogTreeApi">
-            </umb-tree>
-        </div>
-
-    </div>
-
-    <umb-mini-list-view ng-if="vm.miniListView"
-                        node="vm.miniListView"
-                        entity-type="{{vm.entityType}}"
-                        start-node-id="vm.startNodeId"
-                        on-select="vm.selectListViewNode(node)"
-                        on-close="vm.closeMiniListView()">
-    </umb-mini-list-view>
-
-</div>
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/components/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
index 750b20986f..c5cecb2190 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/content/edit.html
@@ -16,12 +16,14 @@
                     <div class="umb-split-view__content" ng-if="!editor.loading">
                         <umb-editor-header 
                             menu="page.menu"
+                            hide-menu="page.hideActionsMenu"
                             name="editor.content.name"
                             hide-icon="true"
                             hide-description="true" 
                             hide-alias="true"
                             navigation="editor.content.apps"
                             variants="editor.content.variants"
+                            hide-change-variant="page.hideChangeVariant"
                             on-back="backToListView()"
                             show-back-button="page.listViewPath !== null"
                             split-view-open="editors.length > 1"
@@ -57,16 +59,16 @@
                 <umb-editor-footer-content-right>
 
                     <umb-button
-                        ng-if="model.infiniteMode"
+                        ng-if="infiniteModel.infiniteMode"
                         action="close()"
                         button-style="link"
-                        label="Close"
+                        label-key="general_close"
                         type="button">
                     </umb-button>
 
                     <umb-button 
                         alias="preview" 
-                        ng-if="!page.isNew && content.allowPreview" 
+                        ng-if="!page.isNew && content.allowPreview"
                         type="button" 
                         button-style="info" 
                         action="preview(content)"
@@ -75,7 +77,7 @@
                     </umb-button>
 
                     <umb-button-group 
-                        ng-if="defaultButton && !content.trashed" 
+                        ng-if="defaultButton && !content.trashed && !infiniteModel.infiniteMode" 
                         button-style="success"
                         default-button="defaultButton" 
                         sub-buttons="subButtons" 
@@ -84,6 +86,24 @@
                         float="right">
                     </umb-button-group>
 
+                    <umb-button
+                        ng-if="infiniteModel.infiniteMode && page.allowInfiniteSaveAndClose"
+                        action="saveAndClose(content)"
+                        button-style="primary"
+                        state="saveAndCloseButtonState"
+                        label-key="buttons_saveAndClose"
+                        type="button">
+                    </umb-button>
+
+                    <umb-button
+                        ng-if="infiniteModel.infiniteMode && page.allowInfinitePublishAndClose"
+                        action="publishAndClose(content)"
+                        button-style="primary"
+                        state="publishAndCloseButtonState"
+                        label-key="buttons_publishAndClose"
+                        type="button">
+                    </umb-button>
+
                     <umb-button 
                         alias="restore" 
                         ng-if="content.trashed" 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
index b409cdd8d0..9d259d2c70 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-header.html
@@ -50,11 +50,15 @@
                         server-validation-field="Alias">
                     </umb-generate-alias>
                     
-                    <a ng-if="variants.length > 0" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
+                    <a ng-if="variants.length > 0 && hideChangeVariant !== true" class="umb-variant-switcher__toggle" href="" ng-click="vm.dropdownOpen = !vm.dropdownOpen">
                         <span>{{vm.currentVariant.language.name}}</span>
                         <ins class="umb-variant-switcher__expand" ng-class="{'icon-navigation-down': !vm.dropdownOpen, 'icon-navigation-up': vm.dropdownOpen}">&nbsp;</ins>
                     </a>
 
+                    <span ng-if="hideChangeVariant" class="umb-variant-switcher__toggle">
+                        <span>{{vm.currentVariant.language.name}}</span>
+                    </span>
+
                     <umb-dropdown ng-if="vm.dropdownOpen" style="width: 100%; max-height: 250px; overflow-y: scroll; margin-top: 5px;" on-close="vm.dropdownOpen = false" umb-keyboard-list>
                         <umb-dropdown-item class="umb-variant-switcher__item" ng-class="{'umb-variant-switcher_item--current': variant.current}" ng-repeat="variant in variants">
                             <a href="" class="umb-variant-switcher__name-wrapper" ng-click="selectVariant($event, variant)" prevent-default>
@@ -102,7 +106,7 @@
             </umb-editor-navigation>
         </div>
 
-        <div ng-if="menu.currentNode && splitViewOpen !== true" style="margin-left: 20px;">
+        <div ng-if="menu.currentNode && splitViewOpen !== true && hideMenu !== true" style="margin-left: 20px;">
             <umb-editor-menu
                 data-element="editor-actions"
                 current-node="menu.currentNode"
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js
index ec55549c78..d3086a5b34 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/content.edit.controller.js
@@ -8,6 +8,8 @@
  */
 function ContentEditController($scope, $routeParams, contentResource) {
 
+    var infiniteMode = $scope.model && $scope.model.infiniteMode;
+
     function scaffoldEmpty() {
         return contentResource.getScaffold($routeParams.id, $routeParams.doctype);
     }
@@ -15,12 +17,12 @@ function ContentEditController($scope, $routeParams, contentResource) {
         return contentResource.getBlueprintScaffold($routeParams.id, $routeParams.blueprintId);
     }
 
-    $scope.contentId = $routeParams.id;
+    $scope.contentId = infiniteMode ? $scope.model.id : $routeParams.id;
     $scope.saveMethod = contentResource.save;
     $scope.getMethod = contentResource.getById;
     $scope.getScaffoldMethod = $routeParams.blueprintId ? scaffoldBlueprint : scaffoldEmpty;
     $scope.page = $routeParams.page;
-    $scope.isNew = $routeParams.create;
+    $scope.isNew = infiniteMode ? $scope.model.create : $routeParams.create;
     $scope.culture = $routeParams.cculture ? $routeParams.cculture : $routeParams.mculture; //load the default culture selected in the main tree if any
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/edit.html b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
index 288fb74294..ddd9dd35ec 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/edit.html
@@ -8,6 +8,6 @@
                     tree-alias="content"
                     is-new="isNew"
                     culture="culture"
-                    model="model">
+                    infinite-model="model">
     </content-editor>
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.controller.js
index 00551ff8ba..c58a5573a9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function partialViewMacrosEditController($scope, $routeParams, codefileResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, angularHelper, $timeout, contentEditingHelper, localizationService, templateHelper, macroResource) {
+    function partialViewMacrosEditController($scope, $routeParams, codefileResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, angularHelper, $timeout, contentEditingHelper, localizationService, templateHelper, macroResource, editorService) {
 
         var vm = this;
 
@@ -121,50 +121,38 @@
         }
 
         function openInsertOverlay() {
-
-            vm.insertOverlay = {
-                view: "insert",
+            var insertOverlay = {
                 allowedTypes: {
                     macro: true,
                     dictionary: true,
                     umbracoField: true
                 },
-                hideSubmitButton: true,
-                show: true,
                 submit: function(model) {
-
                     switch(model.insert.type) {
                         case "macro":
                             var macroObject = macroService.collectValueData(model.insert.selectedMacro, model.insert.macroParams, "Mvc");
                             insert(macroObject.syntax);
                             break;
-
                         case "dictionary":
                         	var code = templateHelper.getInsertDictionarySnippet(model.insert.node.name);
                         	insert(code);
                             break;
-
                         case "umbracoField":
                             insert(model.insert.umbracoField);
                             break;
                     }
-
-                    vm.insertOverlay.show = false;
-                    vm.insertOverlay = null;
-
+                    editorService.close();
                 },
                 close: function(oldModel) {
                     // close the dialog
-                    vm.insertOverlay.show = false;
-                    vm.insertOverlay = null;
+                    editorService.close();
                     // focus editor
                     vm.editor.focus();
                 }
             };
-
+            editorService.insertCodeSnippet(insertOverlay);
         }
 
-
         function openMacroOverlay() {
 
             vm.macroPickerOverlay = {
@@ -224,56 +212,46 @@
                 var title = values[0];
                 var emptyStateMessage = values[1];
 
-                vm.dictionaryItemOverlay = {
-                    view: "treepicker",
+                var dictionaryPicker = {
                     section: "settings",
                     treeAlias: "dictionary",
                     entityType: "dictionary",
                     multiPicker: false,
-                    show: true,
                     title: title,
                     emptyStateMessage: emptyStateMessage,
                     select: function(node){
-
                         var code = templateHelper.getInsertDictionarySnippet(node.name);
                         insert(code);
-
-                        vm.dictionaryItemOverlay.show = false;
-                        vm.dictionaryItemOverlay = null;
+                        editorService.close();
                     },
                     close: function (model) {
                         // close dialog
-                        vm.dictionaryItemOverlay.show = false;
-                        vm.dictionaryItemOverlay = null;
+                        editorService.close();
                         // focus editor
                         vm.editor.focus();
                     }
                 };
 
+                editorService.treePicker(dictionaryPicker);
+
             });
         }
 
         function openQueryBuilderOverlay() {
-            vm.queryBuilderOverlay = {
-                view: "querybuilder",
-                show: true,
+            var queryBuilder = {
                 submit: function (model) {
-
                     var code = templateHelper.getQuerySnippet(model.result.queryExpression);
                     insert(code);
-
-                    vm.queryBuilderOverlay.show = false;
-                    vm.queryBuilderOverlay = null;
+                    editorService.close();
                 },
-
                 close: function (model) {
                     // close dialog
-                    vm.queryBuilderOverlay.show = false;
-                    vm.queryBuilderOverlay = null;
+                    editorService.close();
                     // focus editor
                     vm.editor.focus();
                 }
             };
+            editorService.queryBuilder(queryBuilder);
         }
 
         /* Local functions */
diff --git a/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.html b/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.html
index c3877aa8d1..810b1cb8ae 100644
--- a/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/partialviewmacros/edit.html
@@ -76,13 +76,6 @@
         </umb-editor-view>
     </form>
 
-    <umb-overlay
-       ng-if="vm.insertOverlay.show"
-       model="vm.insertOverlay"
-       view="vm.insertOverlay.view"
-       position="right">
-   </umb-overlay>
-
     <umb-overlay
        ng-if="vm.macroPickerOverlay.show"
        model="vm.macroPickerOverlay"
@@ -97,18 +90,4 @@
         view="vm.pageFieldOverlay.view">
     </umb-overlay>
 
-    <umb-overlay
-        ng-if="vm.dictionaryItemOverlay.show"
-        model="vm.dictionaryItemOverlay"
-        position="right"
-        view="vm.dictionaryItemOverlay.view">
-    </umb-overlay>
-
-    <umb-overlay
-        ng-if="vm.queryBuilderOverlay.show"
-        model="vm.queryBuilderOverlay"
-        position="right"
-        view="vm.queryBuilderOverlay.view">
-    </umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.controller.js
index f6e017a8e9..d5a17c83c7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function PartialViewsEditController($scope, $routeParams, codefileResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, angularHelper, $timeout, contentEditingHelper, localizationService, templateHelper) {
+    function PartialViewsEditController($scope, $routeParams, codefileResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, angularHelper, $timeout, contentEditingHelper, localizationService, templateHelper, editorService) {
 
         var vm = this;
 
@@ -126,16 +126,12 @@
         }
 
         function openInsertOverlay() {
-
-            vm.insertOverlay = {
-                view: "insert",
+            var insertOverlay = {
                 allowedTypes: {
                     macro: true,
                     dictionary: true,
                     umbracoField: true
                 },
-                hideSubmitButton: true,
-                show: true,
                 submit: function(model) {
 
                     switch(model.insert.type) {
@@ -143,30 +139,24 @@
                             var macroObject = macroService.collectValueData(model.insert.selectedMacro, model.insert.macroParams, "Mvc");
                             insert(macroObject.syntax);
                             break;
-
                         case "dictionary":
                         	var code = templateHelper.getInsertDictionarySnippet(model.insert.node.name);
                         	insert(code);
                             break;
-                            
                         case "umbracoField":
                             insert(model.insert.umbracoField);
                             break;
                     }
-
-                    vm.insertOverlay.show = false;
-                    vm.insertOverlay = null;
-
+                    editorService.close();
                 },
-                close: function(oldModel) {
+                close: function() {
                     // close the dialog
-                    vm.insertOverlay.show = false;
-                    vm.insertOverlay = null;
+                    editorService.close();
                     // focus editor
                     vm.editor.focus();
                 }
             };
-
+            editorService.insertCodeSnippet(insertOverlay);
         }
 
 
@@ -229,57 +219,45 @@
                 var title = values[0];
                 var emptyStateMessage = values[1];
 
-                vm.dictionaryItemOverlay = {
-                    view: "treepicker",
+                var dictionaryItem = {
                     section: "settings",
                     treeAlias: "dictionary",
                     entityType: "dictionary",
                     multiPicker: false,
-                    show: true,
                     title: title,
                     emptyStateMessage: emptyStateMessage,
                     select: function(node){
-
                         var code = templateHelper.getInsertDictionarySnippet(node.name);
                         insert(code);
-
-                        vm.dictionaryItemOverlay.show = false;
-                        vm.dictionaryItemOverlay = null;
+                        editorService.close();
                     },
                     close: function (model) {
                         // close dialog
-                        vm.dictionaryItemOverlay.show = false;
-                        vm.dictionaryItemOverlay = null;
+                        editorService.close();
                         // focus editor
                         vm.editor.focus();
                     }
                 };
+                editorService.treePicker(dictionaryItem);
             });
         }
 
         function openQueryBuilderOverlay() {
-            vm.queryBuilderOverlay = {
-                view: "querybuilder",
-                show: true,
+            var queryBuilder = {
                 title: "Query for content",
-
                 submit: function (model) {
-
                     var code = templateHelper.getQuerySnippet(model.result.queryExpression);
                     insert(code);
-                    
-                    vm.queryBuilderOverlay.show = false;
-                    vm.queryBuilderOverlay = null;
+                    editorService.close();
                 },
-
-                close: function (model) {
+                close: function () {
                     // close dialog
-                    vm.queryBuilderOverlay.show = false;
-                    vm.queryBuilderOverlay = null;
+                    editorService.close();
                     // focus editor
                     vm.editor.focus();   
                 }
             };
+            editorService.queryBuilder(queryBuilder);
         }
 
         /* Local functions */
diff --git a/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.html b/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.html
index ef5dae7adf..4a16ad4ebf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/partialviews/edit.html
@@ -84,13 +84,6 @@
         </umb-editor-view>
     </form>
 
-    <umb-overlay
-       ng-if="vm.insertOverlay.show"
-       model="vm.insertOverlay"
-       view="vm.insertOverlay.view"
-       position="right">
-   </umb-overlay>
-
     <umb-overlay
        ng-if="vm.macroPickerOverlay.show"
        model="vm.macroPickerOverlay"
@@ -105,18 +98,4 @@
         view="vm.pageFieldOverlay.view">
     </umb-overlay>
 
-    <umb-overlay
-        ng-if="vm.dictionaryItemOverlay.show"
-        model="vm.dictionaryItemOverlay"
-        position="right"
-        view="vm.dictionaryItemOverlay.view">
-    </umb-overlay>
-
-    <umb-overlay
-        ng-if="vm.queryBuilderOverlay.show"
-        model="vm.queryBuilderOverlay"
-        position="right"
-        view="vm.queryBuilderOverlay.view">
-    </umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.controller.js
index 3e1999cfb0..a4b54b0e10 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.controller.js
@@ -1,6 +1,6 @@
 //this controller simply tells the dialogs service to open a mediaPicker window
 //with a specified callback, this callback will receive an object with a selection on it
-function mediaPickerController($scope, dialogService, entityResource, $log, iconHelper) {
+function mediaPickerController($scope, dialogService, entityResource, $log, iconHelper, editorService) {
 
     function trim(str, chr) {
         var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^' + chr + '+|' + chr + '+$', 'g');
@@ -14,7 +14,6 @@ function mediaPickerController($scope, dialogService, entityResource, $log, icon
     $scope.sortable = false;
 
     var dialogOptions = {
-        view: "treepicker",
         multiPicker: false,
         entityType: "Media",
         section: "media",
@@ -27,30 +26,26 @@ function mediaPickerController($scope, dialogService, entityResource, $log, icon
         angular.extend(dialogOptions, $scope.model.config);
     }
 
-    $scope.openContentPicker = function() {
-      $scope.contentPickerOverlay = dialogOptions;
-      $scope.contentPickerOverlay.show = true;
+    $scope.openTreePicker = function () {
+        var treePicker = dialogOptions;
 
-      $scope.contentPickerOverlay.submit = function(model) {
+        treePicker.submit = function (model) {
+            if (treePicker.multiPicker) {
+                _.each(model.selection, function (item, i) {
+                    $scope.add(item);
+                });
+            } else {
+                $scope.clear();
+                $scope.add(model.selection[0]);
+            }
+            editorService.close();
+        };
 
-         if ($scope.contentPickerOverlay.multiPicker) {
-             _.each(model.selection, function (item, i) {
-                 $scope.add(item);
-             });
-         }
-         else {
-             $scope.clear();
-             $scope.add(model.selection[0]);
-         }
+        treePicker.close = function () {
+            editorService.close();
+        };
 
-         $scope.contentPickerOverlay.show = false;
-         $scope.contentPickerOverlay = null;
-      };
-
-      $scope.contentPickerOverlay.close = function(oldModel) {
-         $scope.contentPickerOverlay.show = false;
-         $scope.contentPickerOverlay = null;
-      };
+        editorService.treePicker(treePicker);
     }
 
     $scope.remove =function(index){
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.html
index a130c54277..03bcad9289 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediapicker.html
@@ -11,23 +11,16 @@
 			allow-remove="allowRemove"
 			allow-edit="allowEdit"
 			on-remove="remove($index)"
-			on-edit="openContentPicker()">
+			on-edit="openTreePicker()">
 		</umb-node-preview>
 	</div>
 
 	<a ng-show="model.config.multiPicker === true || renderModel.length === 0"
 		class="umb-node-preview-add"
 		href=""
-		ng-click="openContentPicker()"
+		ng-click="openTreePicker()"
 		prevent-default>
 		<localize key="general_add">Add</localize>
 	</a>
 
-	<umb-overlay
-		ng-if="contentPickerOverlay.show"
-		model="contentPickerOverlay"
-		position="right"
-		view="contentPickerOverlay.view">
-	</umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.controller.js
index 5c84bf8c01..1c61baf54a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.controller.js
@@ -3,7 +3,7 @@
 angular.module('umbraco')
     .controller("Umbraco.PrevalueEditors.TreePickerController",
 
-    function ($scope, dialogService, entityResource, $log, iconHelper) {
+    function ($scope, dialogService, entityResource, $log, iconHelper, editorService) {
         $scope.renderModel = [];
         $scope.ids = [];
 
@@ -12,7 +12,6 @@ angular.module('umbraco')
         $scope.sortable = false;
 
         var config = {
-            view: "treepicker",
             multiPicker: false,
             entityType: "Document",
             type: "content",
@@ -51,28 +50,24 @@ angular.module('umbraco')
         }
 
         $scope.openContentPicker = function () {
-            $scope.treePickerOverlay = config;
-            $scope.treePickerOverlay.section = config.type;
-            $scope.treePickerOverlay.show = true;
-
-            $scope.treePickerOverlay.submit = function (model) {
+            var treePicker = config;
+            treePicker.section = config.type;
 
+            treePicker.submit = function (model) {
                 if (config.multiPicker) {
                     populate(model.selection);
                 } else {
                     populate(model.selection[0]);
                 }
-
-                $scope.treePickerOverlay.show = false;
-                $scope.treePickerOverlay = null;
+                editorService.close();
             };
 
-            $scope.treePickerOverlay.close = function (oldModel) {
-                $scope.treePickerOverlay.show = false;
-                $scope.treePickerOverlay = null;
+            treePicker.close = function () {
+                editorService.close();
             };
 
-        }
+            editorService.treePicker(treePicker);
+        };
 
         $scope.remove = function (index) {
             $scope.renderModel.splice(index, 1);
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
index 7d68a9c82e..ae260b4502 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treepicker.html
@@ -23,11 +23,4 @@
 		<localize key="general_add">Add</localize>
 	</a>
 
-	<umb-overlay
-		ng-if="treePickerOverlay.show"
-		model="treePickerOverlay"
-		position="right"
-		view="treePickerOverlay.view">
-	</umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.controller.js b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.controller.js
index 5a53e00e1c..6d5d205fa1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.controller.js
@@ -3,7 +3,7 @@
 angular.module('umbraco')
 .controller("Umbraco.PrevalueEditors.TreeSourceController",
 	
-	function($scope, dialogService, entityResource, $log, iconHelper){
+	function($scope, dialogService, entityResource, $log, iconHelper, editorService){
 
 	    if (!$scope.model) {
 	        $scope.model = {};
@@ -33,20 +33,21 @@ angular.module('umbraco')
 
 
 		$scope.openContentPicker =function(){
-			$scope.treePickerOverlay = {
-                view: "treepicker",
+			var treePicker = {
                 idType: $scope.model.config.idType,
 				section: $scope.model.value.type,
 				treeAlias: $scope.model.value.type,
 				multiPicker: false,
-				show: true,
 				submit: function(model) {
 					var item = model.selection[0];
 					populate(item);
-					$scope.treePickerOverlay.show = false;
-					$scope.treePickerOverlay = null;
+					editorService.close();
+				},
+				close: function() {
+					editorService.close();
 				}
 			};
+			editorService.treePicker(treePicker);
 		};
 
 		$scope.clear = function() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.html b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.html
index df9f64db9f..4ad6fd5986 100644
--- a/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.html
+++ b/src/Umbraco.Web.UI.Client/src/views/prevalueeditors/treesource.html
@@ -77,11 +77,4 @@
 		</span>
 	</div>
 
-	<umb-overlay
-		ng-if="treePickerOverlay.show"
-		model="treePickerOverlay"
-		position="right"
-		view="treePickerOverlay.view">
-	</umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
index c51b375dc6..919f0fee39 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
@@ -10,10 +10,9 @@
  * @param {any} angularHelper
  * @param {any} navigationService
  * @param {any} $location
- * @param {any} miniEditorHelper
  * @param {any} localizationService
  */
-function contentPickerController($scope, entityResource, editorState, iconHelper, $routeParams, angularHelper, navigationService, $location, miniEditorHelper, localizationService) {
+function contentPickerController($scope, entityResource, editorState, iconHelper, $routeParams, angularHelper, navigationService, $location, localizationService, editorService) {
 
     var unsubscribe;
 
@@ -117,7 +116,6 @@ function contentPickerController($scope, entityResource, editorState, iconHelper
 
     //the dialog options for the picker
     var dialogOptions = {
-        view: "treepicker",
         multiPicker: $scope.model.config.multiPicker,
         entityType: entityType,
         filterCssClass: "not-allowed not-published",
@@ -185,28 +183,24 @@ function contentPickerController($scope, entityResource, editorState, iconHelper
     }
 
     //dialog
-    $scope.openContentPicker = function() {
-      $scope.contentPickerOverlay = dialogOptions;
-      $scope.contentPickerOverlay.show = true;
+    $scope.openContentPicker = function () {
+        $scope.contentPicker = dialogOptions;
 
-      $scope.contentPickerOverlay.submit = function(model) {
+        $scope.contentPicker.submit = function (model) {
+            if (angular.isArray(model.selection)) {
+                _.each(model.selection, function (item, i) {
+                    $scope.add(item);
+                });
+            }
+            angularHelper.getCurrentForm($scope).$setDirty();
+            editorService.close();
+        }
 
-          if (angular.isArray(model.selection)) {
-             _.each(model.selection, function (item, i) {
-                  $scope.add(item);
-             });
-          }
+        $scope.contentPicker.close = function () {
+            editorService.close();
+        }
 
-          angularHelper.getCurrentForm($scope).$setDirty();
-
-          $scope.contentPickerOverlay.show = false;
-          $scope.contentPickerOverlay = null;
-      }
-
-      $scope.contentPickerOverlay.close = function(oldModel) {
-          $scope.contentPickerOverlay.show = false;
-          $scope.contentPickerOverlay = null;
-      }
+        editorService.contentPicker($scope.contentPicker);
 
     };
 
@@ -246,17 +240,25 @@ function contentPickerController($scope, entityResource, editorState, iconHelper
         $scope.renderModel = [];
     };
 
-    $scope.openMiniEditor = function(node) {
-        miniEditorHelper.launchMiniEditor(node).then(function(updatedNode){
-            // update the node
-            node.name = updatedNode.name;
-            node.published = updatedNode.hasPublishedVersion;
-            if(entityType !== "Member") {
-                entityResource.getUrl(updatedNode.id, entityType).then(function(data){
-                    node.url = data;
-                });
+    $scope.openContentEditor = function(node) {
+        var contentEditor = {
+            id: node.id,
+            submit: function(model) {
+                // update the node
+                node.name = model.contentNode.name;
+                node.published = model.contentNode.hasPublishedVersion;
+                if(entityType !== "Member") {
+                    entityResource.getUrl(model.contentNode.id, entityType).then(function(data){
+                        node.url = data;
+                    });
+                }
+                editorService.close();
+            },
+            close: function() {
+                editorService.close();
             }
-        });
+        };
+        editorService.contentEditor(contentEditor);
     };
 
     //when the scope is destroyed we need to unsubscribe
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
index 6571dfcc03..0a41119a48 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
@@ -15,7 +15,7 @@
                               allow-remove="allowRemoveButton"
                               allow-open="model.config.showOpenButton && allowOpenButton && !dialogEditor"
                               on-remove="remove($index)"
-                              on-open="openMiniEditor(node)">
+                              on-open="openContentEditor(node)">
             </umb-node-preview>
         </div>
 
@@ -77,11 +77,4 @@
 
     </ng-form>
 
-    <umb-overlay
-      ng-if="contentPickerOverlay.show"
-      model="contentPickerOverlay"
-      view="contentPickerOverlay.view"
-      position="right">
-    </umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.controller.js
index f8d5751ea1..fcb3e81fe9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.controller.js
@@ -1,6 +1,6 @@
 //this controller simply tells the dialogs service to open a memberPicker window
 //with a specified callback, this callback will receive an object with a selection on it
-function memberPickerController($scope, dialogService, entityResource, $log, iconHelper, angularHelper){
+function memberPickerController($scope, dialogService, entityResource, $log, iconHelper, angularHelper, editorService){
 
     function trim(str, chr) {
         var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^' + chr + '+|' + chr + '+$', 'g');
@@ -11,7 +11,6 @@ function memberPickerController($scope, dialogService, entityResource, $log, ico
     $scope.allowRemove = true;
 
     var dialogOptions = {
-        view: "treepicker",
         multiPicker: false,
         entityType: "Member",
         section: "member",
@@ -39,26 +38,24 @@ function memberPickerController($scope, dialogService, entityResource, $log, ico
         angular.extend(dialogOptions, $scope.model.config);
     }
 
-    $scope.openMemberPicker = function() {
-       $scope.memberPickerOverlay = dialogOptions;
-       $scope.memberPickerOverlay.show = true;
+    $scope.openMemberPicker = function () {
 
-       $scope.memberPickerOverlay.submit = function(model) {
+        var memberPicker = dialogOptions;
 
-          if (model.selection) {
-             _.each(model.selection, function(item, i) {
-                $scope.add(item);
-             });
-          }
+        memberPicker.submit = function (model) {
+            if (model.selection) {
+                _.each(model.selection, function (item, i) {
+                    $scope.add(item);
+                });
+            }
+            editorService.close();
+        };
 
-          $scope.memberPickerOverlay.show = false;
-          $scope.memberPickerOverlay = null;
-       };
+        memberPicker.close = function () {
+            editorService.close();
+        };
 
-       $scope.memberPickerOverlay.close = function(oldModel) {
-          $scope.memberPickerOverlay.show = false;
-          $scope.memberPickerOverlay = null;
-       };
+        editorService.treePicker(memberPicker);
 
     };
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.html
index 4d4d531876..d8f04eeae5 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/memberpicker/memberpicker.html
@@ -18,11 +18,4 @@
 		<localize key="general_add">Add</localize>
 	</a>
 
-   <umb-overlay
-      ng-if="memberPickerOverlay.show"
-      model="memberPickerOverlay"
-      position="right"
-      view="memberPickerOverlay.view">
-   </umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
index e0ba9e57b3..8aea4fb97f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.controller.js
@@ -1,6 +1,6 @@
 angular.module("umbraco")
     .controller("Umbraco.PropertyEditors.RelatedLinksController",
-        function ($rootScope, $scope, dialogService, iconHelper) {
+        function ($rootScope, $scope, dialogService, iconHelper, editorService) {
 
             if (!$scope.model.value) {
                 $scope.model.value = [];
@@ -18,61 +18,47 @@
             $scope.currentEditLink = null;
             $scope.hasError = false;
 
-            $scope.internal = function($event) {
-               $scope.currentEditLink = null;
+            $scope.internal = function ($event) {
+                $scope.currentEditLink = null;
 
-                $scope.contentPickerOverlay = {
-                    view: "treepicker",
+                var contentPicker = {
                     section: "content",
                     treeAlias: "content",
                     multiPicker: false,
-                    show: true,
-                    idType: $scope.model.config.idType ? $scope.model.config.idType : "int"
+                    idType: $scope.model.config.idType ? $scope.model.config.idType : "int",
+                    submit: function (model) {
+                        select(model.selection[0]);
+                        editorService.close();
+                    },
+                    close: function () {
+                        editorService.close();
+                    }
                 };
 
-               $scope.contentPickerOverlay.submit = function(model) {
+                editorService.treePicker(contentPicker);
 
-                  select(model.selection[0]);
-
-                  $scope.contentPickerOverlay.show = false;
-                  $scope.contentPickerOverlay = null;
-               };
-
-               $scope.contentPickerOverlay.close = function(oldModel) {
-                  $scope.contentPickerOverlay.show = false;
-                  $scope.contentPickerOverlay = null;
-               };
-
-               $event.preventDefault();
+                $event.preventDefault();
             };
 
             $scope.selectInternal = function ($event, link) {
-               $scope.currentEditLink = link;
+                $scope.currentEditLink = link;
 
-                $scope.contentPickerOverlay = {
-                    view: "treepicker",
+                var contentPicker = {
                     section: "content",
                     treeAlias: "content",
                     multiPicker: false,
-                    show: true,
-                    idType: $scope.model.config.idType ? $scope.model.config.idType : "int"
+                    idType: $scope.model.config.idType ? $scope.model.config.idType : "int",
+                    submit: function (model) {
+                        select(model.selection[0]);
+                        editorService.close();
+                    },
+                    close: function () {
+                        editorService.close();
+                    }
                 };
-               
-               $scope.contentPickerOverlay.submit = function(model) {
-
-                  select(model.selection[0]);
-
-                  $scope.contentPickerOverlay.show = false;
-                  $scope.contentPickerOverlay = null;
-               };
-
-               $scope.contentPickerOverlay.close = function(oldModel) {
-                  $scope.contentPickerOverlay.show = false;
-                  $scope.contentPickerOverlay = null;
-               };
-
-               $event.preventDefault();
+                editorService.treePicker(contentPicker);
 
+                $event.preventDefault();
             };
 
             $scope.edit = function (idx) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
index c9c81b3021..221e7666f7 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/relatedlinks/relatedlinks.html
@@ -88,11 +88,4 @@
         </tfoot>
     </table>
 
-   <umb-overlay
-      ng-if="contentPickerOverlay.show"
-      model="contentPickerOverlay"
-      view="contentPickerOverlay.view"
-      position="right">
-   </umb-overlay>
-
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
index a1d0d44af6..8eb4488a9c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.controller.js
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function TemplatesEditController($scope, $routeParams, $timeout, templateResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, treeService, contentEditingHelper, localizationService, angularHelper, templateHelper) {
+    function TemplatesEditController($scope, $routeParams, $timeout, templateResource, assetsService, notificationsService, editorState, navigationService, appState, macroService, treeService, contentEditingHelper, localizationService, angularHelper, templateHelper, editorService) {
 
         var vm = this;
         var oldMasterTemplateAlias = null;
@@ -326,57 +326,43 @@
         vm.closeShortcuts = closeShortcuts;
 
         function openInsertOverlay() {
-
-            vm.insertOverlay = {
-                view: "insert",
+            var insertOverlay = {
                 allowedTypes: {
                     macro: true,
                     dictionary: true,
                     partial: true,
                     umbracoField: true
                 },
-                hideSubmitButton: true,
-                show: true,
                 submit: function(model) {
-
                     switch(model.insert.type) {
-
                         case "macro":
                             var macroObject = macroService.collectValueData(model.insert.selectedMacro, model.insert.macroParams, "Mvc");
                             insert(macroObject.syntax);
                             break;
-
                         case "dictionary":
                         	var code = templateHelper.getInsertDictionarySnippet(model.insert.node.name);
                         	insert(code);
                             break;
-
                         case "partial":
                             var code = templateHelper.getInsertPartialSnippet(model.insert.node.parentId, model.insert.node.name);
                             insert(code);
                             break;
-                            
                         case "umbracoField":
                             insert(model.insert.umbracoField);
                             break;
                     }
-
-                    vm.insertOverlay.show = false;
-                    vm.insertOverlay = null;
-
+                    editorService.close();
                 },
                 close: function(oldModel) {
                     // close the dialog
-                    vm.insertOverlay.show = false;
-                    vm.insertOverlay = null;
+                    editorService.close();
                     // focus editor
                     vm.editor.focus();
                 }
             };
-
+            editorService.insertCodeSnippet(insertOverlay);
         }
 
-
         function openMacroOverlay() {
 
             vm.macroPickerOverlay = {
@@ -436,31 +422,28 @@
                 var title = values[0];
                 var emptyStateMessage = values[1];
 
-                vm.dictionaryItemOverlay = {
-                    view: "treepicker",
+                var dictionaryItem = {
                     section: "settings",
                     treeAlias: "dictionary",
                     entityType: "dictionary",
                     multiPicker: false,
-                    show: true,
                     title: title,
                     emptyStateMessage: emptyStateMessage,
                     select: function(node){
                         var code = templateHelper.getInsertDictionarySnippet(node.name);
                         insert(code);
-    
-                        vm.dictionaryItemOverlay.show = false;
-                        vm.dictionaryItemOverlay = null;
+                        editorService.close();
                     },
                     close: function (model) {
                         // close dialog
-                        vm.dictionaryItemOverlay.show = false;
-                        vm.dictionaryItemOverlay = null;
+                        editorService.close();
                         // focus editor
                         vm.editor.focus();
                     }
                 };
 
+                editorService.treePicker(dictionaryItem);
+
             });
 
         }
@@ -470,13 +453,11 @@
             localizationService.localize("template_insertPartialView").then(function(value){
                 var title = value;
 
-                vm.partialItemOverlay = {
-                    view: "treepicker",
+                var partialItem = {
                     section: "settings", 
                     treeAlias: "partialViews",
                     entityType: "partialView",
                     multiPicker: false,
-                    show: true,
                     title: title,
                     filter: function(i) {
                         if(i.name.indexOf(".cshtml") === -1 && i.name.indexOf(".vbhtml") === -1) {
@@ -485,45 +466,36 @@
                     },
                     filterCssClass: "not-allowed",
                     select: function(node){
-                        
                         var code = templateHelper.getInsertPartialSnippet(node.parentId, node.name);
                         insert(code);
-    
-                        vm.partialItemOverlay.show = false;
-                        vm.partialItemOverlay = null;
+                        editorService.close();
                     },
                     close: function (model) {
                         // close dialog
-                        vm.partialItemOverlay.show = false;
-                        vm.partialItemOverlay = null;
+                        editorService.close();
                         // focus editor
                         vm.editor.focus();
                     }
                 };
+
+                editorService.treePicker(partialItem);
             });
         }
 
         function openQueryBuilderOverlay() {
-            vm.queryBuilderOverlay = {
-                view: "querybuilder",
-                show: true,
+            var queryBuilder = {
                 submit: function (model) {
-
                     var code = templateHelper.getQuerySnippet(model.result.queryExpression);
                     insert(code);
-                    
-                    vm.queryBuilderOverlay.show = false;
-                    vm.queryBuilderOverlay = null;
+                    editorService.close();
                 },
-
-                close: function (model) {
-                    // close dialog
-                    vm.queryBuilderOverlay.show = false;
-                    vm.queryBuilderOverlay = null;
+                close: function () {
+                    editorService.close();
                     // focus editor
                     vm.editor.focus();   
                 }
             };
+            editorService.queryBuilder(queryBuilder);
         }
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/templates/edit.html b/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
index 636a463058..0b1b574e70 100644
--- a/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/templates/edit.html
@@ -124,13 +124,6 @@
         </umb-editor-view>
     </form>
 
-    <umb-overlay
-       ng-if="vm.insertOverlay.show"
-       model="vm.insertOverlay"
-       view="vm.insertOverlay.view"
-       position="right">
-   </umb-overlay>
-
     <umb-overlay
        ng-if="vm.macroPickerOverlay.show"
        model="vm.macroPickerOverlay"
@@ -145,33 +138,12 @@
         view="vm.pageFieldOverlay.view">
     </umb-overlay>
 
-    <umb-overlay
-        ng-if="vm.dictionaryItemOverlay.show"
-        model="vm.dictionaryItemOverlay"
-        position="right"
-        view="vm.dictionaryItemOverlay.view">
-    </umb-overlay>
-
-    <umb-overlay
-        ng-if="vm.queryBuilderOverlay.show"
-        model="vm.queryBuilderOverlay"
-        position="right"
-        view="vm.queryBuilderOverlay.view">
-    </umb-overlay>
-
     <umb-overlay
        ng-if="vm.sectionsOverlay.show"
        model="vm.sectionsOverlay"
        view="vm.sectionsOverlay.view"
        position="right">
    </umb-overlay>
-
-   <umb-overlay
-       ng-if="vm.partialItemOverlay.show"
-       model="vm.partialItemOverlay"
-       view="vm.partialItemOverlay.view"
-       position="right">
-   </umb-overlay>
    
    <umb-overlay
        ng-if="vm.masterTemplateOverlay.show"
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 4a364d7f9f..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
@@ -1,9 +1,10 @@
 (function () {
     "use strict";
 
-    function UserGroupEditController($scope, $location, $routeParams, userGroupsResource, localizationService, contentEditingHelper) {
+    function UserGroupEditController($scope, $location, $routeParams, userGroupsResource, localizationService, contentEditingHelper, editorService) {
 
         var vm = this;
+        var contentPickerOpen = false;
 
         vm.page = {};        
         vm.page.rootIcon = "icon-folder";
@@ -103,34 +104,27 @@
         }
 
         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() {
-            vm.contentPicker = {
+            var contentPicker = {
                 title: vm.labels.selectContentStartNode,
-                view: "treepicker",
                 section: "content",
                 treeAlias: "content",
                 hideSubmitButton: true,
                 hideHeader: false,
-                show: true,
                 submit: function (model) {
                     if (model.selection) {
                         vm.userGroup.contentStartNode = model.selection[0];
@@ -139,26 +133,23 @@
                             vm.userGroup.contentStartNode.icon = "icon-folder";
                         }
                     }
-                    vm.contentPicker.show = false;
-                    vm.contentPicker = null;
+                    editorService.close();
                 },
-                close: function (oldModel) {
-                    vm.contentPicker.show = false;
-                    vm.contentPicker = null;
+                close: function () {
+                    editorService.close();
                 }
             };
+            editorService.treePicker(contentPicker);
         }
 
         function openMediaPicker() {
-            vm.contentPicker = {
+            var mediaPicker = {
                 title: vm.labels.selectMediaStartNode,
-                view: "treepicker",
                 section: "media",
                 treeAlias: "media",
                 entityType: "media",
                 hideSubmitButton: true,
                 hideHeader: false,
-                show: true,
                 submit: function (model) {
                     if (model.selection) {
                         vm.userGroup.mediaStartNode = model.selection[0];
@@ -167,30 +158,28 @@
                             vm.userGroup.mediaStartNode.icon = "icon-folder";
                         }
                     }
-                    vm.contentPicker.show = false;
-                    vm.contentPicker = null;
+                    editorService.close();
                 },
-                close: function (oldModel) {
-                    vm.contentPicker.show = false;
-                    vm.contentPicker = null;
+                close: function () {
+                    editorService.close();
                 }
             };
+            editorService.treePicker(mediaPicker);
         }
 
         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);
         }
 
         /**
@@ -216,13 +205,11 @@
         }
 
         function openGranularPermissionsPicker() {
-            vm.contentPicker = {
+            var contentPicker = {
                 title: vm.labels.selectNode,
-                view: "treepicker",
                 section: "content",
                 treeAlias: "content",
                 hideSubmitButton: true,
-                show: true,
                 submit: function (model) {
                     if (model.selection) {
                         var node = model.selection[0];
@@ -234,11 +221,12 @@
                         setPermissionsForNode(node);
                     }
                 },
-                close: function (oldModel) {
-                    vm.contentPicker.show = false;
-                    vm.contentPicker = null;
+                close: function () {
+                    editorService.close();
                 }
             };
+            editorService.treePicker(contentPicker);
+            contentPickerOpen = true;
         }
 
         function setPermissionsForNode(node) {
@@ -249,9 +237,7 @@
             }
 
             vm.nodePermissions = {
-                view: "nodepermissions",
                 node: node,
-                show: true,
                 submit: function (model) {
 
                     if (model && model.node && model.node.permissions) {
@@ -271,20 +257,21 @@
                         }
                     }
 
-                    // close node permisssions overlay
-                    vm.nodePermissions.show = false;
-                    vm.nodePermissions = null;
-                    // close content picker overlay
-                    if(vm.contentPicker) {
-                        vm.contentPicker.show = false;
-                        vm.contentPicker = null;
+                    editorService.close();
+
+                    if(contentPickerOpen) {
+                        editorService.close();
+                        contentPickerOpen = false;
                     }
+
                 },
-                close: function (oldModel) {
-                    vm.nodePermissions.show = false;
-                    vm.nodePermissions = null;
+                close: function () {
+                    editorService.close();
                 }
             };
+
+            editorService.nodePermissions(vm.nodePermissions);
+
         }
 
         function removeSelectedItem(index, selection) {
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 408283b442..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,39 +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.contentPicker.show"
-        model="vm.contentPicker"
-        view="vm.contentPicker.view"
-        position="right">
-    </umb-overlay>
-    
-    <umb-overlay
-        ng-if="vm.mediaPicker.show"
-        model="vm.mediaPicker"
-        view="vm.mediaPicker.view"
-        position="right">
-    </umb-overlay>
-
-    <umb-overlay
-        ng-if="vm.userPicker.show"
-        model="vm.userPicker"
-        view="vm.userPicker.view"
-        position="right">
-    </umb-overlay>
-
-    <umb-overlay
-        ng-if="vm.nodePermissions.show"
-        model="vm.nodePermissions"
-        view="vm.nodePermissions.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 c9a0c48d8c..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
@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function UserEditController($scope, eventsService, $q, $timeout, $location, $routeParams, formHelper, usersResource, userService, contentEditingHelper, localizationService, notificationsService, mediaHelper, Upload, umbRequestHelper, usersHelper, authResource, dateHelper) {
+    function UserEditController($scope, eventsService, $q, $timeout, $location, $routeParams, formHelper, usersResource, userService, contentEditingHelper, localizationService, notificationsService, mediaHelper, Upload, umbRequestHelper, usersHelper, authResource, dateHelper, editorService) {
 
         var vm = this;
 
@@ -197,40 +197,33 @@
         }
 
         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() {
-            vm.contentPicker = {
+            var contentPicker = {
                 title: vm.labels.selectContentStartNode,
-                view: "treepicker",
                 section: "content",
                 treeAlias: "content",
                 multiPicker: true,
                 selection: vm.user.startContentIds,
                 hideHeader: false,
-                show: true,
                 submit: function (model) {
                     // select items
                     if (model.selection) {
@@ -242,22 +235,18 @@
                             multiSelectItem(item, vm.user.startContentIds);
                         });
                     }
-                    // close overlay
-                    vm.contentPicker.show = false;
-                    vm.contentPicker = null;
+                    editorService.close();
                 },
-                close: function (oldModel) {
-                    // close overlay
-                    vm.contentPicker.show = false;
-                    vm.contentPicker = null;
+                close: function () {
+                    editorService.close();
                 }
             };
+            editorService.treePicker(contentPicker);
         }
 
         function openMediaPicker() {
-            vm.mediaPicker = {
+            var mediaPicker = {
                 title: vm.labels.selectMediaStartNode,
-                view: "treepicker",
                 section: "media",
                 treeAlias: "media",
                 entityType: "media",
@@ -276,15 +265,14 @@
                         });
                     }
                     // close overlay
-                    vm.mediaPicker.show = false;
-                    vm.mediaPicker = null;
+                    editorService.close();
                 },
-                close: function (oldModel) {
+                close: function () {
                     // close overlay
-                    vm.mediaPicker.show = false;
-                    vm.mediaPicker = null;
+                    editorService.close();
                 }
             };
+            editorService.treePicker(mediaPicker);
         }
 
         function multiSelectItem(item, selection) {
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 32c1c3d641..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,22 +65,4 @@
 
     </form>
 
-    <umb-overlay ng-if="vm.userGroupPicker.show"
-                 model="vm.userGroupPicker"
-                 view="vm.userGroupPicker.view"
-                 position="right">
-    </umb-overlay>
-
-    <umb-overlay ng-if="vm.contentPicker.show"
-                 model="vm.contentPicker"
-                 view="vm.contentPicker.view"
-                 position="right">
-    </umb-overlay>
-
-    <umb-overlay ng-if="vm.mediaPicker.show"
-                 model="vm.mediaPicker"
-                 view="vm.mediaPicker.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 3c5c083477..d78095a90f 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 abf2f80ff2..71dfaa686c 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
@@ -538,11 +538,4 @@
 
     </div>
 
-    <umb-overlay
-        ng-if="vm.userGroupPicker.show"
-        model="vm.userGroupPicker"
-        view="vm.userGroupPicker.view"
-        position="right">
-    </umb-overlay>
-
 </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index e8d26d8270..28b8f65dd3 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -124,6 +124,7 @@
         <key alias="listNumeric">Numeric List</key>
         <key alias="macroInsert">Insert macro</key>
         <key alias="pictureInsert">Insert picture</key>
+        <key alias="publishAndClose">Publish and close</key>
         <key alias="relations">Edit relations</key>
         <key alias="returnToList">Return to list</key>
         <key alias="save">Save</key>