diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbuserpreview.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbuserpreview.directive.js
new file mode 100644
index 0000000000..29db5f7238
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbuserpreview.directive.js
@@ -0,0 +1,29 @@
+(function () {
+    'use strict';
+
+    function UserPreviewDirective() {
+
+        function link(scope, el, attr, ctrl) {
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/users/umb-user-preview.html',
+            scope: {
+                avatar: "=?",
+                name: "=",
+                allowRemove: "=?",
+                onRemove: "&?"
+            },
+            link: link
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbUserPreview', UserPreviewDirective);
+
+})();
\ No newline at end of file
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 b69098a9ae..77cc8b2978 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
@@ -243,7 +243,33 @@
                 "name": "Admin",
                 "alias": "admin",
                 "id": 1,
-                "icon": "icon-medal"
+                "icon": "icon-medal",
+                "users": [
+                    {
+                        "id": "1",
+                        "name": "Angela Stone",
+                        "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/jina/128.jpg",
+                        "state": "active"
+                    },
+                    {
+                        "id": "1",
+                        "name": "Beverly Silva",
+                        "avatar": "",
+                        "state": "disabled"
+                    },
+                    {
+                        "id": "1",
+                        "name": "Ruth Turner",
+                        "avatar": "",
+                        "state": "pending"
+                    },
+                    {
+                        "id": "1",
+                        "name": "Arthur Welch",
+                        "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/ashleyford/128.jpg",
+                        "state": "active"
+                    }
+                ]
             };
             deferred.resolve(user);
             return deferred.promise;
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 637b13b965..338b22bf52 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -135,6 +135,7 @@
 @import "components/users/umb-users.less";
 @import "components/users/umb-user-role-picker-list.less";
 @import "components/users/umb-user-role-preview.less";
+@import "components/users/umb-user-preview.less";
 @import "components/users/umb-user.less";
 
 // Utilities
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less
new file mode 100644
index 0000000000..ac60786eb3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-user-preview.less
@@ -0,0 +1,52 @@
+.umb-user-preview {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    display: flex;
+    box-sizing: border-box;
+    border-bottom: 1px solid @gray-8;
+}
+
+.umb-user-preview:last-of-type {
+    border-bottom: none;
+    margin-bottom: 5px;
+}
+
+.umb-user-preview__avatar {
+    margin-right: 15px;
+}
+
+.umb-user-preview__content {
+    flex: 1 1 auto;
+}
+
+.umb-user-preview__name {
+    font-size: 15px;
+    font-weight: bold;
+    color: @black;
+    margin-bottom: 3px;
+    margin-top: 2px;
+}
+
+.umb-user-preview__actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+}
+
+.umb-user-preview__action {
+    margin-left: 5px;
+    margin-right: 5px;
+    font-size: 13px;
+    font-weight: bold;
+    color: @gray-5;
+}
+
+.umb-user-preview__action:hover {
+    color: @turquoise;
+    text-decoration: none;
+    opacity: 1;
+}
+
+.umb-user-preview__action--red:hover {
+    color: @red;
+}
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-preview.html b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-preview.html
new file mode 100644
index 0000000000..7753376206
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-user-preview.html
@@ -0,0 +1,20 @@
+<div class="umb-user-preview">
+
+    <div class="umb-user-preview__avatar">
+        <umb-avatar
+            size="xs"
+            color="secondary"
+            name="{{name}}"
+            img-src="{{avatar}}">
+        </umb-avatar>
+    </div>
+
+    <div class="umb-user-preview__content">
+        <div class="umb-user-preview__name">{{ name }}</div>
+    </div>
+
+    <div class="umb-user-preview__actions">
+        <a class="umb-user-preview__action umb-user-preview__action--red" title="Remove" href="" ng-if="allowRemove" ng-click="onRemove()">Remove</i></a>
+    <div>
+
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
index 12cb81e08d..b44103e726 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/role.controller.js
@@ -10,6 +10,11 @@
         vm.userRole = {};
 
         vm.goBack = goBack;
+        vm.openSectionPicker = openSectionPicker;
+        vm.openContentPicker = openContentPicker;
+        vm.openMediaPicker = openMediaPicker;
+        vm.removeSelectedItem = removeSelectedItem;
+        vm.getUserStateType = getUserStateType;
 
         function init() {
 
@@ -30,6 +35,68 @@
         function goBack() {
             $location.path("/users/users/overview").search("subview", "roles");
         }
+
+        function openSectionPicker() {
+            alert("open section picker");
+        }
+
+        function openContentPicker() {
+            vm.contentPicker = {
+                title: "Select content start node",
+                view: "contentpicker",
+                multiPicker: true,
+                show: true,
+                submit: function(model) {
+                    if(model.selection) {
+                        vm.userRole.startNodesContent = model.selection;
+                    }
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                },
+                close: function(oldModel) {
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                }
+            };
+        }
+
+        function openMediaPicker() {
+            vm.contentPicker = {
+                title: "Select media start node",
+                view: "treepicker",
+                section: "media",
+                treeAlias: "media",
+                entityType: "media",
+                multiPicker: true,
+                show: true,
+                submit: function(model) {
+                    if(model.selection) {
+                        vm.userRole.startNodesMedia = model.selection;
+                    }
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                },
+                close: function(oldModel) {
+                    vm.contentPicker.show = false;
+                    vm.contentPicker = null;
+                }
+            };
+        }
+
+        function removeSelectedItem(index, selection) {
+            selection.splice(index, 1);
+        }
+
+        function getUserStateType(state) {
+            switch (state) {
+                case "disabled" || "umbracoDisabled":
+                    return "danger";
+                case "pending":
+                    return "warning";
+                default:
+                    return "success";
+            }
+        }
  
         init();
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/role.html b/src/Umbraco.Web.UI.Client/src/views/users/role.html
index e51eda26b1..54cc1abebb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/role.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/role.html
@@ -8,7 +8,7 @@
 
             <umb-editor-header
                 name="vm.userRole.name"
-                hide-icon="true"
+                icon="vm.userRole.icon"
                 hide-description="true"
                 hide-alias="true">
             </umb-editor-header>
@@ -21,6 +21,119 @@
                     </umb-editor-sub-header-content-left>
                 </umb-editor-sub-header>
 
+                <div class="umb-packages-view-wrapper" style="padding: 0;">
+
+                    <div class="umb-package-details">
+
+                        <div class="umb-package-details__main-content">
+
+                            <div class="test-group">
+                                <div class="test-group-title">Something</div>
+                                <div class="test-group-content block-form">
+
+                                    <umb-control-group label="Sections" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+                                        <umb-node-preview
+                                            style="max-width: 100%;"
+                                            ng-repeat="section in vm.userRole.sections"
+                                            icon="section.icon"
+                                            name="section.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.userRole.sections)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openUserRolePicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+                                    </umb-control-group>
+
+                                    <umb-control-group label="Content start nodes" description="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+                                        <umb-node-preview
+                                            style="max-width: 100%;"
+                                            ng-repeat="node in vm.userRole.startNodesContent"
+                                            icon="node.icon"
+                                            name="node.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.userRole.startNodesContent)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openContentPicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+                                    </umb-control-group>
+
+                                    <umb-control-group label="Media start nodes" description="Donec quis lacinia ligula. Suspendisse ultrices risus ante">
+                                        <umb-node-preview
+                                            style="max-width: 100%;"
+                                            ng-repeat="node in vm.userRole.startNodesMedia"
+                                            icon="node.icon"
+                                            name="node.name"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.userRole.startNodesMedia)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openMediaPicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+                                    </umb-control-group>
+
+                                </div>
+                            </div>
+
+                            <div class="test-group">
+                                <div class="test-group-title">Default permissions</div>
+                                <div class="test-group-content">Some content here</div>
+                            </div>
+
+                            <div class="test-group">
+                                <div class="test-group-title">Granular permissions</div>
+                                <div class="test-group-content">Some content here</div>
+                            </div>
+
+                        </div>
+
+                        <div class="umb-package-details__sidebar">
+
+                            <div class="umb-package-details__section">
+
+                                <div class="umb-package-details__section-title">Users</div>
+
+                                <umb-user-preview
+                                    ng-repeat="user in vm.userRole.users"
+                                    name="user.name"
+                                    avatar="user.avatar"
+                                    allow-remove="true"
+                                    on-remove="vm.removeSelectedUser($index, vm.userRole.users)">
+                                </umb-user-preview>
+
+                                <a href=""
+                                    style="max-width: 100%;"
+                                    class="umb-node-preview-add"
+                                    ng-click="vm.openMediaPicker()"
+                                    prevent-default>
+                                    <localize key="general_add">Add</localize>
+                                </a>
+
+                            </div>
+
+                        </div>
+
+                    </div>
+
+                </div>
+
+
             </umb-editor-container>
 
             <umb-editor-footer>
@@ -45,4 +158,25 @@
 
     </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>
+
 </div>
\ No newline at end of file