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 29d4145121..453785f537 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
@@ -432,6 +432,24 @@
             open(editor);
         }
 
+        /**
+         * @ngdoc method
+         * @name umbraco.services.editorService#macroPicker
+         * @methodOf umbraco.services.editorService
+         *
+         * @description
+         * Opens a member group picker in infinite editing.
+         * 
+         * @param {Callback} editor.submit Submits the editor.
+         * @param {Callback} editor.close Closes the editor.
+         * @returns {Object} editor object
+         */
+        function memberGroupPicker(editor) {
+            editor.view = "views/common/infiniteeditors/membergrouppicker/membergrouppicker.html";
+            editor.size = "small";
+            open(editor);
+        }
+
         var service = {
             getEditors: getEditors,
             open: open,
@@ -458,7 +476,8 @@
             templateSections: templateSections,
             userPicker: userPicker,
             itemPicker: itemPicker,
-            macroPicker: macroPicker
+            macroPicker: macroPicker,
+            memberGroupPicker: memberGroupPicker
         };
 
         return service;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/membergrouppicker/membergrouppicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/membergrouppicker/membergrouppicker.controller.js
index 83567ee1fa..4fab2a753a 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/membergrouppicker/membergrouppicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/membergrouppicker/membergrouppicker.controller.js
@@ -1,10 +1,15 @@
 //used for the member picker dialog
-angular.module("umbraco").controller("Umbraco.Overlays.MemberGroupPickerController",
-    function($scope, eventsService, entityResource, searchService, $log, localizationService) {
+angular.module("umbraco").controller("Umbraco.Editors.MemberGroupPickerController",
+    function($scope, eventsService, localizationService) {
+
+        var vm = this;
 
         $scope.dialogTreeApi = {};
         $scope.multiPicker = $scope.model.multiPicker;
 
+        vm.submit = submit;
+        vm.close = close;
+
         function activate() {
 
             if(!$scope.model.title) {
@@ -59,6 +64,18 @@ angular.module("umbraco").controller("Umbraco.Overlays.MemberGroupPickerControll
             $scope.dialogTreeApi.callbacks.treeNodeSelect(nodeSelectHandler);
         };
         
+        function close() {
+            if($scope.model && $scope.model.close) {
+                $scope.model.close();
+            }
+        }
+    
+        function submit() {
+            if($scope.model && $scope.model.submit) {
+                $scope.model.submit($scope.model);
+            }
+        }
+        
         activate();
 
     });
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/membergrouppicker/membergrouppicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/membergrouppicker/membergrouppicker.html
index ab481d5f0d..13af3e4108 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/membergrouppicker/membergrouppicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/membergrouppicker/membergrouppicker.html
@@ -1,13 +1,49 @@
-<div ng-controller="Umbraco.Overlays.MemberGroupPickerController">
+<div ng-controller="Umbraco.Editors.MemberGroupPickerController as vm">
 
-	<umb-tree section="member"
-				 treealias="memberGroups"
-				 hideheader="true"
-				 hideoptions="true"
-				 isdialog="true"
-				 api="dialogTreeApi"
-                 on-init="onTreeInit()"
-				 enablecheckboxes="{{model.multiPicker}}">
-	</umb-tree>
+	<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-tree 
+						section="member"
+						treealias="memberGroups"
+						hideheader="true"
+						hideoptions="true"
+						isdialog="true"
+						api="dialogTreeApi"
+						on-init="onTreeInit()"
+						enablecheckboxes="{{model.multiPicker}}">
+					</umb-tree>
+				</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"
+						state="vm.saveButtonState"
+						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/propertyeditors/membergrouppicker/membergrouppicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js
index 640eb5fa02..b66c46f66d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.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 memberGroupPicker($scope, dialogService){
+function memberGroupPicker($scope, editorService){
 
     function trim(str, chr) {
         var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^' + chr + '+|' + chr + '+$', 'g');
@@ -18,34 +18,25 @@ function memberGroupPicker($scope, dialogService){
     }
 
     $scope.openMemberGroupPicker = function() {
-
-      $scope.memberGroupPicker = {};
-      $scope.memberGroupPicker.multiPicker = true;
-      $scope.memberGroupPicker.view = "memberGroupPicker";
-      $scope.memberGroupPicker.show = true;
-
-      $scope.memberGroupPicker.submit = function(model) {
-
-         if(model.selectedMemberGroups) {
-            _.each(model.selectedMemberGroups, function (item, i) {
-                $scope.add(item);
-            });
-         }
-
-         if(model.selectedMemberGroup) {
-            $scope.clear();
-            $scope.add(model.selectedMemberGroup);
-         }
-
-         $scope.memberGroupPicker.show = false;
-         $scope.memberGroupPicker = null;
-      };
-
-      $scope.memberGroupPicker.close = function(oldModel) {
-         $scope.memberGroupPicker.show = false;
-         $scope.memberGroupPicker = null;
-      };
-
+        var memberGroupPicker = {
+            multiPicker: true,
+            submit: function(model) {
+                if(model.selectedMemberGroups) {
+                    _.each(model.selectedMemberGroups, function (item, i) {
+                        $scope.add(item);
+                    });
+                }
+                if(model.selectedMemberGroup) {
+                    $scope.clear();
+                    $scope.add(model.selectedMemberGroup);
+                }
+                editorService.close();
+            },
+            close: function() {
+                editorService.close();
+            }
+        };
+        editorService.memberGroupPicker(memberGroupPicker);
     };
 
     $scope.remove =function(index){
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html
index 0f2a9e58d6..afd0c358a6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergrouppicker/membergrouppicker.html
@@ -18,11 +18,4 @@
 		<localize key="general_add">Add</localize>
 	</a>
 
-   <umb-overlay
-      ng-if="memberGroupPicker.show"
-      model="memberGroupPicker"
-      position="right"
-      view="memberGroupPicker.view">
-   </umb-overlay>
-
 </div>