diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbnodepreview.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbnodepreview.directive.js
index 77f6f06a30..9966e94b70 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbnodepreview.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbnodepreview.directive.js
@@ -103,6 +103,7 @@
                 icon: "=?",
                 name: "=",
                 description: "=?",
+                permissions: "=?",
                 published: "=?",
                 sortable: "=?",
                 allowOpen: "=?",
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbpermission.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbpermission.directive.js
new file mode 100644
index 0000000000..bae87789ca
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbpermission.directive.js
@@ -0,0 +1,36 @@
+(function () {
+    'use strict';
+
+    function PermissionDirective() {
+
+        function link(scope, el, attr, ctrl) {
+
+            scope.change = function() {
+                scope.selected = !scope.selected;
+                if(scope.onChange) {
+                    scope.onChange({'selected': scope.selected});
+                }
+            };
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/users/umb-permission.html',
+            scope: {
+                name: "=",
+                description: "=?",
+                selected: "=",
+                onChange: "&"
+            },
+            link: link
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbPermission', PermissionDirective);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index 54d662f5d8..a7478f6c5e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -123,7 +123,6 @@
 @import "components/umb-badge.less";
 @import "components/umb-nested-content.less";
 @import "components/umb-checkmark.less";
-@import "components/umb-permission.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";
@@ -141,6 +140,9 @@
 @import "components/users/umb-user-preview.less";
 @import "components/users/umb-user-picker-list.less";
 @import "components/users/umb-user.less";
+@import "components/users/umb-permission-group.less";
+@import "components/users/umb-permission.less";
+
 
 // Utilities
 @import "utilities/layout/_display.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-permission.less b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-permission.less
similarity index 93%
rename from src/Umbraco.Web.UI.Client/src/less/components/umb-permission.less
rename to src/Umbraco.Web.UI.Client/src/less/components/users/umb-permission.less
index 1aba704435..6e616c6baa 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-permission.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/users/umb-permission.less
@@ -2,6 +2,7 @@
     display: flex;
     border-bottom: 1px solid @gray-9;
     padding: 7px 0;
+    cursor: pointer;
 }
 
 .umb-permission:last-of-type {
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/overlays/nodepermissions/nodepermissions.controller.js
new file mode 100644
index 0000000000..ecadc4dea6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/nodepermissions/nodepermissions.controller.js
@@ -0,0 +1,111 @@
+(function () {
+    "use strict";
+
+    function NodePermissionsController($scope) {
+
+        var vm = this;
+
+        function onInit() {
+
+            // fake node permissions
+            $scope.model.node.permissions = [
+                {
+                    "groupName": "Group 1",
+                    "permissions": [
+                        {
+                            "name": "Edit content (save)",
+                            "description": "Lorem ipsum dolor sit amet",
+                            "checked": false
+                        },
+                        {
+                            "name": "Browse content",
+                            "description": "Nullam egestas porta mi, quis finibus nisl commodo a",
+                            "checked": true
+                        },
+                        {
+                            "name": "Publish",
+                            "description": "Aliquam molestie consequat felis",
+                            "checked": true
+                        },
+                        {
+                            "name": "Send to publish",
+                            "description": "Sed pharetra sodales enim quis molestie",
+                            "checked": true
+                        },
+                        {
+                            "name": "Delete",
+                            "description": "Vitae porta mauris turpis sit amet ligula",
+                            "checked": true
+                        },
+                        {
+                            "name": "Create",
+                            "description": "Vestibulum pretium sapien id turpis elementum viverra",
+                            "checked": true
+                        },
+                    ]
+                },
+                {
+                    "groupName": "Group 2",
+                    "permissions": [
+                        {
+                            "name": "Move",
+                            "description": "Vestibulum pretium sapien id turpis elementum viverra",
+                            "checked": true
+                        },
+                        {
+                            "name": "Copy",
+                            "description": "Phasellus sagittis, dolor vel accumsan porttitor",
+                            "checked": false
+                        },
+                        {
+                            "name": "Sort",
+                            "description": "Aliquam erat volutpat",
+                            "checked": false
+                        }
+                    ]
+                },
+                {
+                    "groupName": "Group 3",
+                    "permissions": [
+                        {
+                            "name": "Culture and Hostnames",
+                            "description": "Lorem ipsum dolor sit amet",
+                            "checked": true
+                        },
+                        {
+                            "name": "Audit Trail",
+                            "description": "Lorem ipsum dolor sit amet",
+                            "checked": true
+                        },
+                        {
+                            "name": "Translate",
+                            "description": "Lorem ipsum dolor sit amet",
+                            "checked": true
+                        },
+                        {
+                            "name": "Change document type",
+                            "description": "Lorem ipsum dolor sit amet",
+                            "checked": true
+                        },
+                        {
+                            "name": "Public access",
+                            "description": "Lorem ipsum dolor sit amet",
+                            "checked": true
+                        },
+                        {
+                            "name": "Rollback",
+                            "description": "Lorem ipsum dolor sit amet",
+                            "checked": true
+                        }
+                    ]
+                }
+            ];
+        }
+
+        onInit();
+
+    }
+
+    angular.module("umbraco").controller("Umbraco.Overlays.NodePermissionsController", NodePermissionsController);
+
+})();
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
new file mode 100644
index 0000000000..6043451269
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/nodepermissions/nodepermissions.html
@@ -0,0 +1,13 @@
+<div class="block-form" ng-controller="Umbraco.Overlays.NodePermissionsController as vm">
+    <p class="abstract" style="margin-bottom: 20px;">Nam tellus purus, malesuada sed purus ut, semper sollicitudin odio.</p>
+    <umb-control-group
+        ng-repeat="group in model.node.permissions"
+        label="{{group.groupName}}">
+        <umb-permission
+            ng-repeat="permission in group.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/components/umb-node-preview.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
index 02bce43611..a48d522e3b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-node-preview.html
@@ -1,8 +1,16 @@
 <div class="umb-node-preview" ng-class="{'umb-node-preview--sortable': sortable, 'umb-node-preview--unpublished': published === false }">
     <i ng-if="icon" class="umb-node-preview__icon {{ icon }}"></i>
     <div class="umb-node-preview__content">
-        <div class="umb-node-preview__name">{{ name }}</div>
-        <div ng-if="description" class="umb-node-preview__description">{{ description }}</div>
+        <div class="flex items-center">
+            <div class="umb-node-preview__name">{{ name }}</div>
+            <div ng-if="description" class="umb-node-preview__description">{{ description }}</div>
+        </div>
+        <div class="umb-user-group-preview__permission" ng-if="permissions">
+            <span>
+                <span class="bold">Permissions:</span>
+                <span ng-repeat="permission in permissions">{{ permission.name }}<span ng-if="!$last">, </span></span>
+            </span>
+        </div>
     </div>
     <div class="umb-node-preview__actions">
         <a class="umb-node-preview__action" title="Open" href="" ng-if="allowOpen"  ng-click="onOpen()"><localize key="general_open">Open</localize></a>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/users/umb-permission.html b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-permission.html
new file mode 100644
index 0000000000..d33584f73b
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/users/umb-permission.html
@@ -0,0 +1,11 @@
+<div class="umb-permission">
+    <umb-toggle
+        class="umb-permission__toggle"
+        checked="selected"
+        on-click="change(checked)">
+    </umb-toggle>
+    <div ng-click="change(checked)">
+        <div>{{ name }} </div>
+        <div class="umb-permission__description">{{ description }}</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js b/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js
index 614be714f5..3c74ca2fe9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/content/content.rights.controller.js
@@ -14,7 +14,6 @@
         vm.editPermissions = editPermissions;
         vm.setPermissions = setPermissions;
         vm.removePermissions = removePermissions;
-        vm.togglePermission = togglePermission;
         vm.cancelManagePermissions = cancelManagePermissions;
 
         function onInit() {
@@ -126,10 +125,6 @@
             vm.viewState = state;
         }
 
-        function togglePermission(permission) {
-            permission.checked = !permission.checked;
-        }
-
         function editPermissions(group) {
             vm.selectedUserGroup = group;
             setViewSate("managePermissions");
diff --git a/src/Umbraco.Web.UI.Client/src/views/content/rights.html b/src/Umbraco.Web.UI.Client/src/views/content/rights.html
index defedb550e..25d5d87628 100644
--- a/src/Umbraco.Web.UI.Client/src/views/content/rights.html
+++ b/src/Umbraco.Web.UI.Client/src/views/content/rights.html
@@ -54,31 +54,20 @@
     <div ng-show="vm.viewState === 'managePermissions'">
 
         <div class="umb-dialog-body" ng-cloak>
-            <div class="umb-pane">
-
+            <div class="umb-pane block-form">
                 <h5>Set permissions for {{ vm.selectedUserGroup.name }}</h5>
                 <p class="abstract" style="margin-bottom: 20px;">Nam tellus purus, malesuada sed purus ut, semper sollicitudin odio.</p>
-
-                <div ng-repeat="group in vm.selectedUserGroup.permissions">
-
-                    <h5>{{ group.groupName }}</h5>
-
-                    <div class="umb-permission" ng-repeat="permission in group.permissions">
-                        <umb-toggle
-                            class="umb-permission__toggle"
-                            checked="permission.checked"
-                            on-click="vm.togglePermission(permission)">
-                        </umb-toggle>
-                        <div>
-                            <div>{{ permission.name }} </div>
-                            <div class="umb-permission__description">{{ permission.description }}</div>
-                        </div>
-                    </div>
-
-                </div>
-
+                <umb-control-group
+                    ng-repeat="group in vm.selectedUserGroup.permissions"
+                    label="{{group.groupName}}">
+                    <umb-permission
+                        ng-repeat="permission in group.permissions"
+                        name="permission.name"
+                        description="permission.description"
+                        selected="permission.checked">
+                    </umb-permission>
+                </umb-control-group>
             </div>
-
         </div>
 
         <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
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 af140e45ea..ca4219214c 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
@@ -20,6 +20,7 @@
     vm.getUserStateType = getUserStateType;
     vm.save = save;
     vm.togglePermission = togglePermission;
+    vm.openGranularPermissionsPicker = openGranularPermissionsPicker;
     
     function init() {
 
@@ -166,6 +167,66 @@
       };
     }
 
+    function openGranularPermissionsPicker() {
+      vm.contentPicker = {
+        title: "Select node",
+        view: "contentpicker",
+        hideSubmitButton: true,
+        show: true,
+        submit: function (model) {
+          if (model.selection) {
+            setPermissionsForNode(model.selection[0]);
+          }
+        },
+        close: function (oldModel) {
+          vm.firstPicker.show = false;
+          vm.firstPicker = null;
+        }
+      };
+    }
+
+    function setPermissionsForNode(node) {
+      vm.nodePermissions = {
+        title: "Set permissions for " + node.name,
+        view: "nodepermissions",
+        node: node,
+        show: true,
+        submit: function (model) {
+
+          if (model && model.node && model.node.permissions) {
+            // clear allowed permissions before we make the list 
+            // so we don't have deplicates
+            node.allowedPermissions = [];
+
+            // get list of checked permissions
+            angular.forEach(model.node.permissions, function (permissionGroup) {
+              angular.forEach(permissionGroup.permissions, function (permission) {
+                if (permission.checked) {
+                  node.allowedPermissions.push(permission);
+                }
+              });
+            });
+
+            if(!vm.userGroup.nodes) {
+              vm.userGroup.nodes = [];
+            }
+            vm.userGroup.nodes.push(node);
+          }
+
+          // close node permisssions overlay
+          vm.nodePermissions.show = false;
+          vm.nodePermissions = null;
+          // close content picker overlay
+          vm.contentPicker.show = false;
+          vm.contentPicker = null;
+        },
+        close: function (oldModel) {
+          vm.nodePermissions.show = false;
+          vm.nodePermissions = null;
+        }
+      };
+    }
+
     function removeSelectedItem(index, selection) {
       if (selection && selection.length > 0) {
         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 1681eab4ea..4cce0ebaf4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.html
@@ -89,32 +89,45 @@
 
                             <div class="test-group">
                                 <div class="test-group-title">Default permissions</div>
-
-                                <div ng-repeat="(category, permissions) in vm.userGroup.permissions">
-                                    <div class="test-group-sub-header" >
-                                        {{ category }}
-                                    </div>
-
-                                    <div class="test-group-content">
-                                        <div class="umb-permission" ng-repeat="permission in permissions">
-                                            <umb-toggle
-                                                class="umb-permission__toggle"
-                                                checked="permission.checked"
-                                                on-click="vm.togglePermission(permission)">
-                                            </umb-toggle>
-                                            <div>
-                                                <div>{{ permission.name }}</div>
-                                                <div class="umb-permission__description">{{ permission.description }}</div>
-                                            </div>
-                                        </div>
-                                    </div>
+                                <div class="test-group-content block-form">
+                                    <umb-control-group
+                                        ng-repeat="(category, permissions) in vm.userGroup.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>
-
                             </div>
 
                             <div class="test-group">
                                 <div class="test-group-title">Granular permissions</div>
-                                <div class="test-group-content">Some content here</div>
+                                <div class="test-group-content block-form">
+                                    <umb-control-group label="Nodes" description="Donec quis lacinia ligula. Suspendisse ultrices risus ante">
+                                        
+                                        <umb-node-preview
+                                            ng-repeat="node in vm.userGroup.nodes"
+                                            style="max-width: 100%;"
+                                            icon="node.icon"
+                                            name="node.name"
+                                            permissions="node.allowedPermissions"
+                                            allow-remove="true"
+                                            on-remove="vm.removeSelectedItem($index, vm.userGroup.nodes)">
+                                        </umb-node-preview>
+
+                                        <a href=""
+                                            style="max-width: 100%;"
+                                            class="umb-node-preview-add"
+                                            ng-click="vm.openGranularPermissionsPicker()"
+                                            prevent-default>
+                                            <localize key="general_add">Add</localize>
+                                        </a>
+                                    </umb-control-group>
+                                    
+                                </div>
                             </div>
 
                         </div>
@@ -219,4 +232,11 @@
         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