diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
index 2a2d3f7b20..b7de022059 100644
--- a/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
+++ b/src/Umbraco.Web.UI.Client/src/common/resources/users.resource.js
@@ -170,25 +170,25 @@
                 "icon": "icon-medal",
                 "users": [
                     {
-                        "id": "1",
+                        "id": 1,
                         "name": "Angela Stone",
                         "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/jina/128.jpg",
                         "state": "active"
                     },
                     {
-                        "id": "1",
+                        "id": 2,
                         "name": "Beverly Silva",
                         "avatar": "",
                         "state": "disabled"
                     },
                     {
-                        "id": "1",
+                        "id": 3,
                         "name": "Ruth Turner",
                         "avatar": "",
                         "state": "pending"
                     },
                     {
-                        "id": "1",
+                        "id": 4,
                         "name": "Arthur Welch",
                         "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/ashleyford/128.jpg",
                         "state": "active"
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 48c7213eb4..90b43a2b2f 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -136,6 +136,7 @@
 @import "components/users/umb-user-group-picker-list.less";
 @import "components/users/umb-user-group-preview.less";
 @import "components/users/umb-user-preview.less";
+@import "components/users/umb-user-picker-list.less";
 @import "components/users/umb-user.less";
 
 // Utilities
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-picker-list.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-picker-list.less
new file mode 100644
index 0000000000..2e0d79e803
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-picker-list.less
@@ -0,0 +1,42 @@
+.umb-user-picker-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.umb-user-picker-list-item {
+    display: flex;
+    margin-bottom: 5px;
+    padding: 10px;
+    align-items: center;
+}
+
+.umb-user-picker-list-item:active,
+.umb-user-picker-list-item:focus {
+    text-decoration: none;
+}
+
+.umb-user-picker-list-item:hover {
+    background-color: @gray-10;
+    text-decoration: none;
+}
+
+.umb-user-picker-list-item__avatar {
+    margin-right: 15px;
+    position: relative;
+}
+
+.umb-user-picker-list-item__checkmark {
+    position: absolute;
+    bottom: -3px;
+    right: -3px;
+}
+
+.umb-user-picker-list-item__group {
+    font-size: 14px;
+    color: @gray-5;
+}
+
+.umb-user-picker-list-item__name {
+    font-size: 15px;
+    font-weight: bold;
+}
\ 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/overlays/userpicker/userpicker.controller.js
new file mode 100644
index 0000000000..f699f9df27
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.controller.js
@@ -0,0 +1,104 @@
+(function () {
+    "use strict";
+
+    function UserPickerController($scope, usersResource) {
+        
+        var vm = this;
+
+        vm.users = [];
+        vm.loading = false;
+        vm.usersOptions = {};
+
+        vm.selectUser = selectUser;
+        vm.searchUsers = searchUsers;
+        vm.changePageNumber = changePageNumber;
+
+        //////////
+
+        function onInit() {
+
+            vm.loading = true;
+
+            // make sure we can push to something
+            if(!$scope.model.selection) {
+                $scope.model.selection = [];
+            }
+
+            // get users
+            getUsers();
+            
+        }
+
+        function preSelect(selection, users) {
+            angular.forEach(selection, function(selected){
+                angular.forEach(users, function(user){
+                    if(selected.id === user.id) {
+                        user.selected = true;
+                    }
+                });
+            });
+        }
+
+        function selectUser(user) {
+
+            if(!user.selected) {
+                
+                user.selected = true;
+                $scope.model.selection.push(user);
+
+            } else {
+
+                angular.forEach($scope.model.selection, function(selectedUser, index){
+                    if(selectedUser.id === user.id) {
+                        user.selected = false;
+                        $scope.model.selection.splice(index, 1);
+                    }
+                });
+
+            }
+
+        }
+
+        var search = _.debounce(function () {
+            $scope.$apply(function () {
+                getUsers();
+            });
+        }, 500);
+
+        function searchUsers() {
+            search();
+        }
+
+        function getUsers() {
+
+            vm.loading = true;
+
+            // Get users
+            usersResource.getPagedResults(vm.usersOptions).then(function (users) {
+
+                vm.users = users.items;
+
+                vm.usersOptions.pageNumber = users.pageNumber;
+                vm.usersOptions.pageSize = users.pageSize;
+                vm.usersOptions.totalItems = users.totalItems;
+                vm.usersOptions.totalPages = users.totalPages;
+
+                preSelect($scope.model.selection, vm.users);
+
+                vm.loading = false;
+
+            });
+        }
+
+        function changePageNumber(pageNumber) {
+            vm.usersOptions.pageNumber = pageNumber;
+            getUsers();
+        }
+
+        onInit();
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Overlays.UserPickerController", UserPickerController);
+
+})();
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
new file mode 100644
index 0000000000..33c4dd41d8
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/userpicker/userpicker.html
@@ -0,0 +1,58 @@
+<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="(key,value) in user.userGroups">{{ value }}<span ng-if="!$last">, </span></span>
+                    </div>
+                </div>
+            </a>
+        </div>
+
+        <div class="flex justify-center">
+            <umb-pagination
+                ng-if="vm.usersOptions.totalPages"
+                page-number="vm.usersOptions.pageNumber"
+                total-pages="vm.usersOptions.totalPages"
+                on-change="vm.changePageNumber(pageNumber)">
+            </umb-pagination>
+        <div>
+
+    </div>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/group.controller.js
index ef2f9d378d..ee88ac8839 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
@@ -13,6 +13,7 @@
         vm.openSectionPicker = openSectionPicker;
         vm.openContentPicker = openContentPicker;
         vm.openMediaPicker = openMediaPicker;
+        vm.openUserPicker = openUserPicker;
         vm.removeSelectedItem = removeSelectedItem;
         vm.getUserStateType = getUserStateType;
 
@@ -84,6 +85,28 @@
             };
         }
 
+        function openUserPicker() {
+            vm.userPicker = {
+                title: "Select users",
+                view: "userpicker",
+                selection: vm.userGroup.users,
+                show: true,
+                submit: function(model) {
+                    /*
+                    if(model.selection) {
+                        vm.userGroup.startNodesMedia = model.selection;
+                    }
+                    */
+                    vm.userPicker.show = false;
+                    vm.userPicker = null;
+                },
+                close: function(oldModel) {
+                    vm.userPicker.show = false;
+                    vm.userPicker = null;
+                }
+            };
+        }
+
         function removeSelectedItem(index, selection) {
             selection.splice(index, 1);
         }
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 813cb80006..24bc7aa018 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.html
@@ -114,7 +114,7 @@
                                 <a href=""
                                     style="max-width: 100%;"
                                     class="umb-node-preview-add"
-                                    ng-click="vm.openMediaPicker()"
+                                    ng-click="vm.openUserPicker()"
                                     prevent-default>
                                     <localize key="general_add">Add</localize>
                                 </a>
@@ -190,4 +190,11 @@
         position="right">
     </umb-overlay>
 
+    <umb-overlay
+        ng-if="vm.userPicker.show"
+        model="vm.userPicker"
+        view="vm.userPicker.view"
+        position="right">
+    </umb-overlay>
+
 </div>
\ No newline at end of file