diff --git a/app/portainer/components/access-datatable/accessDatatable.html b/app/portainer/components/access-datatable/accessDatatable.html
index cabcfeb02..eefa9697f 100644
--- a/app/portainer/components/access-datatable/accessDatatable.html
+++ b/app/portainer/components/access-datatable/accessDatatable.html
@@ -1,23 +1,10 @@
 <div class="datatable">
   <rd-widget>
-    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"> </rd-widget-header>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar small" ng-if="$ctrl.inheritFrom">
-        Access tagged as <code>inherited</code> are inherited from the group access. They cannot be removed or modified at the environment level but they can be overridden.
-      </div>
-      <div class="toolBar small" ng-if="$ctrl.inheritFrom"> Access tagged as <code>override</code> are overriding the group access for the related users/teams. </div>
-      <div class="toolBar vertical-center !gap-x-5 !gap-y-1 flex-wrap">
-        <div class="actionBar !gap-3">
-          <button
-            type="button"
-            class="btn btn-sm btn-dangerlight h-fit vertical-center !ml-0"
-            authorization="PortainerStackDelete"
-            ng-disabled="$ctrl.state.selectedItemCount === 0"
-            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
-            data-cy="access-removeButton"
-          >
-            <pr-icon icon="'trash-2'" feather="true" mode="'danger'"></pr-icon>Remove
-          </button>
+      <div class="toolBar">
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-white icon-primary icon-nested-blue'"></pr-icon>
+          {{ $ctrl.titleText }}
         </div>
         <div class="searchBar vertical-center">
           <pr-icon icon="'search'" feather="true"></pr-icon>
@@ -28,31 +15,55 @@
             ng-change="$ctrl.onTextFilterChange()"
             placeholder="Search..."
             ng-model-options="{ debounce: 300 }"
-            data-cy="access-searchInput"
           />
         </div>
+        <div class="actionBar">
+          <button
+            type="button"
+            class="btn btn-sm btn-dangerlight vertical-center"
+            ng-disabled="$ctrl.state.selectedItemCount === 0"
+            ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+          >
+            <pr-icon icon="'trash-2'" feather="true"></pr-icon>
+            Remove
+          </button>
+        </div>
       </div>
+
+      <div class="mx-4 mb-4 small text-muted">
+        <div class="" ng-if="$ctrl.inheritFrom">
+          Access tagged as <code>inherited</code> are inherited from the group access. They cannot be removed or modified at the environment level but they can be overridden.
+        </div>
+        <div class="" ng-if="$ctrl.inheritFrom"> Access tagged as <code>override</code> are overriding the group access for the related users/teams. </div>
+      </div>
+
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <div class="vertical-center">
+                  <span class="md-checkbox">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <table-column-header
+                    col-title="'Name'"
+                    can-sort="true"
+                    is-sorted="$ctrl.state.orderBy === 'Name'"
+                    is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
+                    ng-click="$ctrl.changeOrderBy('Name')"
+                  ></table-column-header>
+                </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Type')">
-                  Type
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Type'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Type'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Type')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/portainer/components/accessManagement/por-access-management-users-selector/por-access-management-users-selector.html b/app/portainer/components/accessManagement/por-access-management-users-selector/por-access-management-users-selector.html
index 4941e6904..4f217b57e 100644
--- a/app/portainer/components/accessManagement/por-access-management-users-selector/por-access-management-users-selector.html
+++ b/app/portainer/components/accessManagement/por-access-management-users-selector/por-access-management-users-selector.html
@@ -1,6 +1,6 @@
 <div class="form-group">
-  <label class="col-sm-3 col-lg-2 control-label text-left"> Select user(s) and/or team(s) </label>
-  <div class="col-sm-9 col-lg-4">
+  <label class="col-sm-3 col-lg-2 control-label text-left vertical-center"> Select user(s) and/or team(s) </label>
+  <div class="col-sm-9 col-lg-4 vertical-center">
     <span class="small text-muted" ng-if="$ctrl.options.length === 0"> No users or teams available. </span>
     <span
       isteven-multi-select
diff --git a/app/portainer/components/accessManagement/porAccessManagement.html b/app/portainer/components/accessManagement/porAccessManagement.html
index b40a8d6d2..b6ec6fbe2 100644
--- a/app/portainer/components/accessManagement/porAccessManagement.html
+++ b/app/portainer/components/accessManagement/porAccessManagement.html
@@ -6,7 +6,7 @@
         <form class="form-horizontal">
           <div ng-if="ctrl.entityType !== 'registry'" class="form-group">
             <span class="col-sm-12 small text-warning">
-              <p>
+              <p class="vertical-center">
                 <pr-icon icon="'alert-circle'" mode="'warning'" feather="true"></pr-icon>
                 Adding user access will require the affected user(s) to logout and login for the changes to be taken into account.
               </p>
@@ -19,12 +19,14 @@
             <label class="col-sm-3 col-lg-2 control-label text-left"> Role </label>
             <div class="col-sm-9 col-lg-6">
               <div class="flex items-center">
-                <select
-                  class="form-control"
-                  ng-model="ctrl.formValues.selectedRole"
-                  ng-options="role as ctrl.roleLabel(role) disable when ctrl.isRoleLimitedToBE(role) for role in ctrl.roles"
-                >
-                </select>
+                <div>
+                  <select
+                    class="form-control"
+                    ng-model="ctrl.formValues.selectedRole"
+                    ng-options="role as ctrl.roleLabel(role) disable when ctrl.isRoleLimitedToBE(role) for role in ctrl.roles"
+                  >
+                  </select>
+                </div>
                 <be-feature-indicator feature="ctrl.limitedFeature" class="space-left"></be-feature-indicator>
               </div>
             </div>
@@ -41,7 +43,10 @@
                 button-spinner="ctrl.actionInProgress"
                 data-cy="access-createAccess"
               >
-                <span ng-hide="ctrl.state.actionInProgress"><pr-icon icon="'plus'" feather="true"></pr-icon> Create access</span>
+                <span ng-hide="ctrl.state.actionInProgress" class="vertical-center">
+                  <pr-icon icon="'plus'" feather="true"></pr-icon>
+                  Create access
+                </span>
                 <span ng-show="ctrl.state.actionInProgress">Creating access...</span>
               </button>
             </div>
diff --git a/app/portainer/components/widget/rd-widget-title.ts b/app/portainer/components/widget/rd-widget-title.ts
index d47c4321c..639e2bbdf 100644
--- a/app/portainer/components/widget/rd-widget-title.ts
+++ b/app/portainer/components/widget/rd-widget-title.ts
@@ -14,8 +14,8 @@ export const rdWidgetTitle = {
     <div class="widget-header" ng-class="$ctrl.parentClasses">
       <div class="row">
         <span ng-class="$ctrl.classes" class="pull-left vertical-center">
-        <pr-icon icon="$ctrl.icon" class-name="'icon-nested-blue space-right'" mode="'primary'" feather="$ctrl.featherIcon"></pr-icon>
-        <span ng-transclude="title">{{ $ctrl.titleText }}</span>
+          <pr-icon icon="$ctrl.icon" feather="$ctrl.featherIcon" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          <span ng-transclude="title">{{ $ctrl.titleText }}</span>
         </span>
         <span ng-class="$ctrl.classes" class="pull-right" ng-transclude></span>
       </div>
diff --git a/app/portainer/views/endpoints/access/endpointAccess.html b/app/portainer/views/endpoints/access/endpointAccess.html
index 739c28335..41d99a79b 100644
--- a/app/portainer/views/endpoints/access/endpointAccess.html
+++ b/app/portainer/views/endpoints/access/endpointAccess.html
@@ -2,9 +2,9 @@
   title="'Environment access'"
   breadcrumbs="[
     { label:'Environments', link:'portainer.endpoints' },
-    { 
+    {
       label:ctrl.endpoint.Name,
-      link: 'portainer.endpoints.endpoint', 
+      link: 'portainer.endpoints.endpoint',
       linkParams:{id: ctrl.endpoint.Id}
     }, 'Access management']"
 >