diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index d99573decb..ff834de837 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -77,7 +77,6 @@
 @import "main.less";
 @import "listview.less";
 @import "gridview.less";
-@import "filter-toggle.less";
 
 @import "forms/umb-validation-label.less";
 
@@ -173,6 +172,7 @@
 @import "components/umb-textstring.less";
 @import "components/umb-textarea.less";
 @import "components/umb-dropdown.less";
+@import "components/umb-filter.less";
 @import "components/umb-range-slider.less";
 @import "components/umb-number.less";
 @import "components/umb-tags-editor.less";
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-filter.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-filter.less
new file mode 100644
index 0000000000..7432555472
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-filter.less
@@ -0,0 +1,13 @@
+.umb-filter {
+    position: relative;
+}
+
+.umb-filter .umb-filter__toggle {
+    display: flex;
+}
+
+.umb-filter .umb-filter__label {
+    margin-left: 5px;
+    margin-right: 3px;
+    max-width: 150px;
+}
diff --git a/src/Umbraco.Web.UI.Client/src/less/filter-toggle.less b/src/Umbraco.Web.UI.Client/src/less/filter-toggle.less
deleted file mode 100644
index 82f9f3f553..0000000000
--- a/src/Umbraco.Web.UI.Client/src/less/filter-toggle.less
+++ /dev/null
@@ -1,20 +0,0 @@
-.filter-toggle{
-    margin: 0;
-    padding: 0 8px 0 0;
-    position: relative;
-}
-
-.filter-toggle__level{
-    display: inline-block;
-    font-weight: 700;
-    margin: 0 5px;
-    max-width: 150px;
-}
-
-.filter-toggle__icon{
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto 0;
-}
diff --git a/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less b/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less
index 787e50f204..d2968696dc 100644
--- a/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less
+++ b/src/Umbraco.Web.UI.Client/src/less/utilities/_spacing.less
@@ -35,10 +35,13 @@
    7 = 7th step in spacing scale
 */
 
-.m-center {
-    margin-left: auto;
+.m-center,
+.mx-auto {
+    margin-left: auto; 
     margin-right: auto;
 }
+.ml-auto { margin-left: auto; }
+.mr-auto { margin-right: auto; }
 
 .mt0 { margin-top: @spacing-none; }
 .mt1 { margin-top: @spacing-extra-small; }
diff --git a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
index a5278138ae..ed8c4b3213 100644
--- a/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
+++ b/src/Umbraco.Web.UI.Client/src/views/logviewer/search.html
@@ -21,34 +21,37 @@
                 <umb-editor-sub-header>
                     <umb-editor-sub-header-content-left class="flex-auto flex-wrap">
 
-                        <!-- Log Level filter -->
-                        <div class="flex log-viewer-filter" style="position: relative;">
-                            <button type="button"
-                                    class="btn-link dropdown-toggle flex mb2 filter-toggle"
-                                    ng-click="vm.page.showLevelFilter = !vm.page.showLevelFilter"
-                                    aria-haspopup="true"
-                                    aria-expanded="{{vm.page.showLevelFilter === undefined ? false : vm.page.showLevelFilter}}">
-                                <span>
-                                    <localize key="logViewer_logLevels">Log Levels</localize>:
-                                </span>
-                                <span class="filter-toggle__level truncate">{{ vm.getFilterName(vm.logLevels) }}</span>
-                                <span class="filter-toggle__icon caret" aria-hidden="true"></span>
-                            </button>
-                            <umb-dropdown class="pull-left" ng-if="vm.page.showLevelFilter" on-close="vm.page.showLevelFilter = false;">
-                                <umb-dropdown-item ng-repeat="level in vm.logLevels" class="dropdown-item">
-                                    <div class="flex items-center">
+                        <div class="flex mr-auto mb2">
+
+                            <!-- Log Level filter -->
+                            <div class="umb-filter">
+                                <button type="button"
+                                        class="btn btn-link dropdown-toggle umb-filter__toggle"
+                                        ng-click="vm.page.showLevelFilter = !vm.page.showLevelFilter"
+                                        aria-haspopup="true"
+                                        aria-expanded="{{vm.page.showLevelFilter === undefined ? false : vm.page.showLevelFilter}}">
+
+                                    <span><localize key="logViewer_logLevels">Log Levels</localize>:</span>
+                                    <span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.logLevels) }}</span>
+                                    <span class="caret" aria-hidden="true"></span>
+                                </button>
+                                <umb-dropdown class="pull-left" ng-if="vm.page.showLevelFilter" on-close="vm.page.showLevelFilter = false;">
+                                    <umb-dropdown-item ng-repeat="level in vm.logLevels" class="dropdown-item">
+                                        <div class="flex items-center">
                                         <umb-checkbox input-id="loglevel-{{$index}}"
                                                       name="loglevel"
                                                       model="level.selected"
                                                       on-change="vm.setLogLevelFilter(level)">
                                         </umb-checkbox>
 
-                                        <label for="loglevel-{{$index}}">
-                                            <umb-badge size="s" color="{{level.logTypeColor}}">{{level.name}}</umb-badge>
-                                        </label>
-                                    </div>
-                                </umb-dropdown-item>
-                            </umb-dropdown>
+                                            <label for="loglevel-{{$index}}">
+                                                <umb-badge size="s" color="{{level.logTypeColor}}">{{level.name}}</umb-badge>
+                                            </label>
+                                        </div>
+                                    </umb-dropdown-item>
+                                </umb-dropdown>
+                            </div>
+
                         </div>
 
                         <div class="flex search-box">
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 a0098d411c..503b49bb3f 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
@@ -103,21 +103,21 @@
         </umb-editor-sub-header>
 
         <!-- Filters -->
-        <div style="margin-bottom: 20px;" class="flex items-center">
+        <div class="flex items-center mb3">
 
             <div style="font-size: 16px;">
                 <span class="bold"><localize key="sections_users">Users</localize></span> <span ng-if="vm.usersOptions.totalItems">({{vm.usersOptions.totalItems}})</span>
             </div>
 
-            <div class="flex" style="margin-left: auto;">
+            <div class="flex ml-auto">
 
                 <!-- State filter -->
-                <div style="position: relative;" ng-if="vm.userStatesFilter.length > 0">
-                    <a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('state')">
+                <div class="umb-filter" ng-if="vm.userStatesFilter.length > 0">
+                    <button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('state')">
                         <span><localize key="general_status">Status</localize>:</span>
-                        <span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
-                        <span class="caret"></span>
-                    </a>
+                        <span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.userStatesFilter) }}</span>
+                        <span class="caret" aria-hidden="true"></span>
+                    </button>
                     <umb-dropdown class="pull-right" ng-if="vm.page.showStatusFilter" on-close="vm.page.showStatusFilter = false;">
                         <umb-dropdown-item ng-repeat="userState in vm.userStatesFilter | filter:{ key: '!All'}" ng-show="userState.count > 0" style="padding: 8px 20px 8px 16px;">
                             <umb-checkbox model="userState.selected"
@@ -129,12 +129,12 @@
                 </div>
 
                 <!-- Groups filter -->
-                <div style="position: relative;">
-                    <a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('group')">
-                        <span><localize key="general_groups"></localize>:</span>
-                        <span class="bold truncate dib" style="margin-left: 5px; margin-right: 3px; max-width: 150px;">{{ vm.getFilterName(vm.userGroups) }}</span>
-                        <span class="caret"></span>
-                    </a>
+                <div class="umb-filter">
+                    <button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('group')">
+                        <span><localize key="general_groups">Groups</localize>:</span>
+                        <span class="bold truncate dib umb-filter__label">{{ vm.getFilterName(vm.userGroups) }}</span>
+                        <span class="caret" aria-hidden="true"></span>
+                    </button>
                     <umb-dropdown class="pull-right" ng-if="vm.page.showGroupFilter" on-close="vm.page.showGroupFilter = false;">
                         <umb-dropdown-item ng-repeat="userGroup in vm.userGroups" style="padding: 8px 20px 8px 16px;">
                             <umb-checkbox model="userGroup.selected"
@@ -146,15 +146,15 @@
                 </div>
 
                 <!-- Order By -->
-                <div style="position: relative;">
-                    <a class="btn btn-link dropdown-toggle flex" href="" ng-click="vm.toggleFilter('orderBy')">
+                <div class="umb-filter">
+                    <button type="button" class="btn btn-link dropdown-toggle umb-filter__toggle" ng-click="vm.toggleFilter('orderBy')">
                         <span><localize key="general_orderBy">Order by</localize>:</span>
-                        <span class="bold" style="margin-left: 2px;">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
-                        <span class="caret"></span>
-                    </a>
+                        <span class="bold truncate dib umb-filter__label">{{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} </span>
+                        <span class="caret" aria-hidden="true"></span>
+                    </button>
                     <umb-dropdown class="pull-right" ng-if="vm.page.showOrderByFilter" on-close="vm.page.showOrderByFilter = false;" umb-keyboard-list>
                         <umb-dropdown-item ng-repeat="sortData in vm.userSortData">
-                            <a href="#" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)" prevent-default>{{sortData.label}}</a>
+                            <button type="button" ng-click="vm.setOrderByFilter(sortData.key, sortData.direction)">{{sortData.label}}</button>
                         </umb-dropdown-item>
                     </umb-dropdown>
                 </div>