diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
index 3f58f98fd4..e2d4cb708d 100644
--- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less
+++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less
@@ -772,20 +772,6 @@
   line-height: 1;
 }
 
-//
-// Member group picker
-// --------------------------------------------------
-
-.umb-member-group-box {
-  width: 45%;
-}
-.umb-member-group-box:nth-child(1){
-  float:left;
-}
-.umb-member-group-box:nth-child(2){
-  float:right;
-}
-
 //
 // Related links
 // --------------------------------------------------
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergroups/membergroups.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergroups/membergroups.controller.js
index 0d9b726b5d..fd613d8539 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergroups/membergroups.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergroups/membergroups.controller.js
@@ -1,15 +1,4 @@
-function memberGroupController($scope) {
-
-    //set the available to the keys of the dictionary who's value is true
-    $scope.getAvailable = function () {
-        var available = [];
-        for (var n in $scope.model.value) {
-            if ($scope.model.value[n] === false) {
-                available.push(n);
-            }
-        }
-        return available;
-    };
+function memberGroupController($scope, editorService, memberGroupResource) {
     //set the selected to the keys of the dictionary who's value is true
     $scope.getSelected = function () {
         var selected = [];
@@ -21,16 +10,35 @@
         return selected;
     };
 
-    $scope.addItem = function(item) {
-        //keep the model up to date
-        $scope.model.value[item] = true;
-    };
-    
-    $scope.removeItem = function (item) {
-        //keep the model up to date
-        $scope.model.value[item] = false;
-    };
-
+    $scope.pickGroup = function() {
+        editorService.memberGroupPicker({
+            multiPicker: true,
+            submit: function (model) {
+                var selectedGroupIds = _.map(model.selectedMemberGroups
+                    ? model.selectedMemberGroups
+                    : [model.selectedMemberGroup],
+                    function(id) { return parseInt(id) }
+                );
+                // TODO: replace with memberGroupResource.getByIds(selectedGroupIds) if it's merged in (see #3845) - or rewrite it for this
+                memberGroupResource.getGroups().then(function (selectedGroups) {
+                    // TODO: this filter can be removed once we have memberGroupResource.getByIds(selectedGroupIds)
+                    selectedGroups = _.filter(selectedGroups, function(group) {
+                        return selectedGroupIds.indexOf(group.id) >= 0;
+                    });
+                    _.each(selectedGroups, function(group) {
+                        $scope.model.value[group.name] = true;
+                    });
+                });
+                editorService.close();
+            },
+            close: function () {
+                editorService.close();
+            }
+        });
+    }
 
+    $scope.removeGroup = function (group) {
+        $scope.model.value[group] = false;
+    }
 }
-angular.module('umbraco').controller("Umbraco.PropertyEditors.MemberGroupController", memberGroupController);
\ No newline at end of file
+angular.module('umbraco').controller("Umbraco.PropertyEditors.MemberGroupController", memberGroupController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergroups/membergroups.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergroups/membergroups.html
index d8eb44db3b..9b59d48ab9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergroups/membergroups.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/membergroups/membergroups.html
@@ -1,18 +1,11 @@
 <div ng-controller="Umbraco.PropertyEditors.MemberGroupController">
-    <div class="umb-member-group-box">
-        <h5><localize key="content_notmemberof">Not a member of group(s)</localize></h5>
-        <ul>
-            <li ng-repeat="item in getAvailable()">
-                <a href="" ng-click="addItem(item)">{{item}}</a>
-            </li>
-        </ul>
-    </div>
-    <div class="umb-member-group-box">
-        <h5><localize key="content_memberof">Member of group(s)</localize></h5>
-        <ul>
-            <li ng-repeat="item in getSelected()">
-                <a href="" ng-click="removeItem(item)">{{item}}</a>
-            </li>
-        </ul>
-    </div>
+    <umb-node-preview ng-repeat="group in getSelected() | orderBy"
+                      icon="'icon-users'"
+                      name="group"
+                      allow-remove="true"
+                      on-remove="removeGroup(group)">
+    </umb-node-preview>
+    <a href ng-click="pickGroup()" class="umb-node-preview-add" prevent-default>			  
+        <localize key="general_add">Add</localize>
+    </a>
 </div>