diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbusergrouppreview.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbusergrouppreview.directive.js
index 7623dc0ae8..fdbfd088ab 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbusergrouppreview.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/users/umbusergrouppreview.directive.js
@@ -1,3 +1,51 @@
+/** 
+@ngdoc directive
+@name umbraco.directives.directive:umbUserGroupPreview
+@restrict E
+@scope
+
+@description
+Use this directive to render a user group preview, where you can see the permissions the user or group has in the back office.
+
+<h3>Markup example</h3>
+<pre>
+    <div>
+        <umb-user-group-preview
+            ng-repeat="userGroup in vm.user.userGroups"
+            icon="userGroup.icon"
+            name="userGroup.name"
+            sections="userGroup.sections"
+            content-start-node="userGroup.contentStartNode"
+            media-start-node="userGroup.mediaStartNode"
+            allow-remove="!vm.user.isCurrentUser"
+            on-remove="vm.removeSelectedItem($index, vm.user.userGroups)">
+        </umb-user-group-preview>
+    </div>
+</pre>
+
+@param {string} icon (<code>binding</code>): The user group icon.
+@param {string} name (<code>binding</code>): The user group name.
+@param {array} sections (<code>binding</code>) Lists out the sections where the user has authority to edit.
+@param {string} contentStartNode (<code>binding</code>)
+<ul>
+    <li>The starting point in the tree of the content section.</li>
+    <li>So the user has no authority to work on other branches, only on this branch in the content section.</li>
+</ul>
+@param {boolean} hideContentStartNode (<code>binding</code>) Hides the contentStartNode.
+@param {string} mediaStartNode (<code>binding</code>)
+<ul>
+<li> The starting point in the tree of the media section.</li>
+<li> So the user has no authority to work on other branches, only on this branch in the media section.</li>
+</ul>
+@param {boolean} hideMediaStartNode (<code>binding</code>) Hides the mediaStartNode.
+@param {array} permissions (<code>binding<code>) A list of permissions, the user can have.
+@param {boolean} allowRemove (<code>binding</code>): Shows or Hides the remove button.
+@param {function} onRemove (<code>expression</code>): Callback function when the remove button is clicked.
+@param {boolean} allowEdit (<code>binding</code>): Shows or Hides the edit button.
+@param {function} onEdit (<code>expression</code>): Callback function when the edit button is clicked.
+**/
+
+
 (function () {
     'use strict';
 
@@ -14,9 +62,8 @@
             scope: {
                 icon: "=?",
                 name: "=",
-                description: "=?",
                 sections: "=?",
-                contentStartNode: "=?",
+                contentStartNode: "=?", 
                 hideContentStartNode: "@?",
                 mediaStartNode: "=?",
                 hideMediaStartNode: "@?",
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/user.html b/src/Umbraco.Web.UI.Client/src/views/users/user.html
index a55b1bf83d..ebe493fce8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -87,7 +87,7 @@
                                             media-start-node="userGroup.mediaStartNode"
                                             allow-remove="!vm.user.isCurrentUser"
                                             on-remove="vm.removeSelectedItem($index, vm.user.userGroups)">
-                                        </umb-user-group-preview>
+                                        </umb-user-group-preview>  
 
                                         <a href=""
                                             ng-if="!vm.user.isCurrentUser"