diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js
index b21859f5c4..984866dca1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.controller.js
@@ -15,6 +15,8 @@
         vm.selectUserGroup = selectUserGroup;
         vm.deleteUserGroups = deleteUserGroups;
 
+        vm.filter = null;
+
         var currentUser = null;
 
         function onInit() {
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html
index 4d252a3ae0..46923dd27d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/groups/groups.html
@@ -8,7 +8,7 @@
         <umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
             <umb-button
                 type="button"
-                button-style="action"
+                button-style="outline"
                 action="vm.createUserGroup()"
                 label="Create Group"
                 label-key="actions_createGroup">
@@ -18,18 +18,10 @@
         <umb-editor-sub-header-content-right ng-if="vm.selection.length === 0">
 
             <umb-editor-sub-header-section>
-            <div class="form-search -no-margin-bottom pull-right">
-                <div class="inner-addon left-addon">
-                    <i class="icon icon-search"></i>
-                    <input class="form-control search-input"
-                        type="text"
-                        localize="placeholder"
-                        placeholder="@placeholders_filter"
-                        ng-model="vm.filter"
-                        prevent-enter-submit
-                        no-dirty-check>
-                </div>
-            </div>
+
+                <umb-mini-search model="vm.filter">
+                </umb-mini-search>
+
             </umb-editor-sub-header-section>
 
         </umb-editor-sub-header-content-right>
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
index 024d4539bc..4ee31806a3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js
@@ -14,7 +14,7 @@
         vm.userStates = [];
         vm.selection = [];
         vm.newUser = {};
-        vm.usersOptions = {};
+        vm.usersOptions = {filter:null};
         vm.userSortData = [
             { label: "Name (A-Z)", key: "Name", direction: "Ascending" },
             { label: "Name (Z-A)", key: "Name", direction: "Descending" },
diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
index afaaf865c8..638e6376c3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
+++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html
@@ -11,7 +11,7 @@
             <umb-editor-sub-header-content-left ng-if="vm.selection.length === 0">
                 <umb-button-group
                     ng-if="vm.defaultButton"
-                    button-style="action"
+                    button-style="outline"
                     default-button="vm.defaultButton"
                     sub-buttons="vm.subButtons">
                 </umb-button-group>
@@ -27,18 +27,10 @@
                     </umb-layout-selector>
                 </umb-editor-sub-header-section>
                 <umb-editor-sub-header-section>
-                    <div class="form-search -no-margin-bottom pull-right">
-                        <div class="inner-addon left-addon">
-                            <i class="icon icon-search"></i>
-                            <input class="form-control search-input"
-                                   type="text" localize="placeholder"
-                                   placeholder="@general_typeToSearch"
-                                   ng-model="vm.usersOptions.filter"
-                                   ng-change="vm.searchUsers()"
-                                   prevent-enter-submit
-                                   no-dirty-check>
-                        </div>
-                    </div>
+
+                    <umb-mini-search model="vm.usersOptions.filter" on-search="vm.searchUsers()" on-start-typing="vm.searchUsers()">
+                    </umb-mini-search>
+
                 </umb-editor-sub-header-section>
             </umb-editor-sub-header-content-right>
 
@@ -180,7 +172,7 @@
 
         <!-- Layout: Cards -->
         <div class="umb-user-cards" ng-if="vm.activeLayout.path === '1' && vm.loading === false">
-            <div class="umb-user-card" ng-class="{'-selected': user.selected, '-selectable': vm.isSelectable(user)}" ng-repeat="user in vm.users track by user.key" ng-click="vm.selectUser(user, $event)">
+            <div class="umb-user-card umb-outline umb-outline--surrounding" ng-class="{'-selected': user.selected, '-selectable': vm.isSelectable(user)}" ng-repeat="user in vm.users track by user.key" ng-click="vm.selectUser(user, $event)">
                 <div class="umb-user-card__content">
                     <umb-badge class="umb-user-card__badge" size="xs" ng-if="user.userDisplayState.key !== 'Active'" color="{{user.userDisplayState.color}}">
                         {{ user.userDisplayState.name }}
@@ -233,7 +225,7 @@
                     <div ng-repeat="user in vm.users track by user.key"
                         ng-click="vm.selectUser(user, vm.selection, $event)"
                         ng-class="{'-selected': user.selected, '-selectable': vm.isSelectable(user)}"
-                        class="umb-table-row umb-user-table-row">
+                        class="umb-table-row umb-user-table-row umb-outline umb-outline--surrounding">
                         <div class="umb-table-cell umb-user-table-col-avatar not-fixed" scope="row" style="width: 70px; padding:10px 15px;">
                             <a ng-click="vm.clickUser(user, $event)" ng-href="#{{::vm.getEditPath(user)}}">
                                 <umb-avatar