diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbbox.directive.js
new file mode 100644
index 0000000000..b3f57e6b5e
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbbox.directive.js
@@ -0,0 +1,19 @@
+(function(){
+    'use strict';
+
+    function BoxDirective() {
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            transclude: true,
+            templateUrl: 'views/components/html/umb-box/umb-box.html'
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbBox', BoxDirective);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbboxcontent.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbboxcontent.directive.js
new file mode 100644
index 0000000000..6b62575bee
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbboxcontent.directive.js
@@ -0,0 +1,18 @@
+(function(){
+    'use strict';
+
+    function BoxContentDirective() {
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            transclude: true,
+            templateUrl: 'views/components/html/umb-box/umb-box-content.html'
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('umbBoxContent', BoxContentDirective);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbboxheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbboxheader.directive.js
new file mode 100644
index 0000000000..d005fa9efc
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbboxheader.directive.js
@@ -0,0 +1,23 @@
+(function(){
+    'use strict';
+
+    function BoxHeaderDirective() {
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            transclude: true,
+            templateUrl: 'views/components/html/umb-box/umb-box-header.html',
+            scope: {
+                titleKey: "@?",
+                title: "@?"
+            }
+        };
+
+        return directive;
+
+    }
+
+    angular.module('umbraco.directives').directive('umbBoxHeader', BoxHeaderDirective);
+
+})();
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-content.html b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-content.html
new file mode 100644
index 0000000000..f3ebfcb505
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-content.html
@@ -0,0 +1 @@
+<div class="umb-box-content" ng-transclude></div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html
new file mode 100644
index 0000000000..6feffe9d3d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box-header.html
@@ -0,0 +1,6 @@
+<div class="umb-box-header" ng-transclude>
+    <div class="umb-box-header-title">
+        <localize ng-if="titleKey" key="{{titleKey}}"></localize>
+        <span ng-if="title">{{title}}</span>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box.html b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box.html
new file mode 100644
index 0000000000..38c4ff58fe
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/html/umb-box/umb-box.html
@@ -0,0 +1 @@
+<div class="umb-box" ng-transclude></div>
\ No newline at end of file
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 a9df8afcd3..f1427e3266 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/group.html
@@ -21,11 +21,11 @@
 
                         <div class="umb-package-details__main-content">
 
-                            <div class="umb-box">
-                                <div class="umb-box-header">
-                                    <div class="umb-box-header-title"><localize key="user_access">Access</localize></div>
-                                </div>
-                                <div class="umb-box-content block-form">
+                            <umb-box>
+
+                                <umb-box-header title-key="user_access"></umb-box-header>
+
+                                <umb-box-content class="block-form">
 
                                     <umb-control-group style="margin-bottom: 20px;" label="@main_sections" description="@user_sectionsHelp">
                                         <umb-node-preview
@@ -93,14 +93,12 @@
 
                                     </umb-control-group>
 
-                                </div>
-                            </div>
+                                </umb-box-content>
+                            </umb-box>
 
-                            <div class="umb-box">
-                                <div class="umb-box-header">
-                                    <div class="umb-box-header-title"><localize key="user_permissionsDefault">Default permissions</localize></div>
-                                </div>
-                                <div class="umb-box-content block-form">
+                            <umb-box>
+                                <umb-box-header title-key="user_permissionsDefault"></umb-box-header>
+                                <umb-box-content class="block-form">
                                     <umb-control-group
                                         ng-repeat="(category, permissions) in vm.userGroup.defaultPermissions"
                                         label="{{ category }}">
@@ -111,14 +109,12 @@
                                             selected="permission.checked">
                                         </umb-permission>
                                     </umb-control-group>
-                                </div>
-                            </div>
+                                </umb-box-content>
+                            </umb-box>
 
-                            <div class="umb-box">
-                                <div class="umb-box-header">
-                                    <div class="umb-box-header-title"><localize key="user_permissionsGranular">Granular permissions</localize></div>
-                                </div>
-                                <div class="umb-box-content block-form">
+                            <umb-box>
+                                <umb-box-header title-key="user_permissionsGranular"></umb-box-header>
+                                <umb-box-content class="block-form">
                                     <umb-control-group label="Nodes" description="@user_permissionsGranularHelp">
                                         
                                         <umb-node-preview
@@ -142,8 +138,8 @@
                                         </a>
                                     </umb-control-group>
                                     
-                                </div>
-                            </div>
+                                </umb-box-content>
+                            </umb-box>
 
                         </div>
 
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 94c8360346..603931d7e3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/user.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/user.html
@@ -20,14 +20,12 @@
                     <div class="umb-package-details">
 
                         <div class="umb-package-details__main-content">
-
-                            <div class="umb-box">
-                                <div class="umb-box-header">
-                                    <div class="umb-box-header-title">
-                                        <localize key="user_profile">Profile</localize>
-                                    </div>
-                                </div>
-                                <div class="umb-box-content block-form">
+                          
+                              <umb-box>
+                                 
+                                <umb-box-header title-key="user_profile"></umb-box-header>
+                                
+                                <umb-box-content class="block-form">
 
                                     <umb-control-group label="@general_email">
                                         <input 
@@ -69,16 +67,12 @@
                                         <span class="help-inline" val-msg-for="culture" val-toggle-msg="required"><localize key="general_required">Required</localize></span>
                                         <span class="help-inline" val-msg-for="culture" val-toggle-msg="valServerField"></span>
                                     </umb-control-group>
-                                </div>
-                            </div>
+                                </umb-box-content> 
+                            </umb-box>
 
-                            <div class="umb-box">
-                                <div class="umb-box-header">
-                                    <div class="umb-box-header-title">
-                                        <localize key="user_access">Access</localize>
-                                    </div>
-                                </div>
-                                <div class="umb-box-content block-form">
+                            <umb-box>
+                                <umb-box-header title-key="user_access"></umb-box-header>
+                                <umb-box-content class="block-form">
 
                                     <umb-control-group style="margin-bottom: 25px;" label="@general_groups" description="@user_groupsHelp">
 
@@ -160,8 +154,8 @@
 
                                     </umb-control-group>
 
-                                </div>
-                            </div>
+                                </umb-box-content>
+                            </umb-box>
                         </div>
 
                         <div class="umb-package-details__sidebar">