diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index 2f3b5aa40..fd5b53caa 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -3,6 +3,11 @@
     margin: 0.5em 2em;
   }
 
+  .setting-section {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+
   .toolbar {
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
index 27c1fdc55..e26a1b921 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -1,4 +1,5 @@
 .FrontendsTab {
+  padding: 0 1em;
   .cards-list {
     padding: 0;
   }
@@ -34,7 +35,8 @@
 
   h5 {
     margin: 0;
-    font-size: 1.15em
+    font-size: 1.15em;
+    text-transform: capitalize;
   }
 
   dl {
diff --git a/src/components/settings_modal/admin_tabs/users_tab.scss b/src/components/settings_modal/admin_tabs/users_tab.scss
index 70237c189..d5c9b3ab5 100644
--- a/src/components/settings_modal/admin_tabs/users_tab.scss
+++ b/src/components/settings_modal/admin_tabs/users_tab.scss
@@ -2,14 +2,26 @@
   max-height: 100%;
   display: flex;
   flex-direction: column;
-  overflow-y: hidden;
+  padding: 0;
+
+  h3 {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+
+  .splitter {
+    max-height: 100%;
+    display: flex;
+    overflow-y: hidden;
+  }
 
   .filters-section {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
-    grid-auto-columns: 1fr;
-    grid-auto-flow: row;
-    gap: 0.5em 1em;
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    border-right: 1px solid var(--border);
+    padding: 0 1em;
+    margin-right: 1em;
 
     > div {
       flex: 0 1 auto;
@@ -17,7 +29,6 @@
 
     .filter {
       display: block;
-      margin-bottom: 0.5em;
       min-width: 14em;
 
       .query-label {
@@ -29,4 +40,8 @@
       }
     }
   }
+
+  .users-list {
+    flex: 1 0 30em;
+  }
 }
diff --git a/src/components/settings_modal/admin_tabs/users_tab.vue b/src/components/settings_modal/admin_tabs/users_tab.vue
index fcc9e9df1..4cd2d7c05 100644
--- a/src/components/settings_modal/admin_tabs/users_tab.vue
+++ b/src/components/settings_modal/admin_tabs/users_tab.vue
@@ -6,140 +6,143 @@
     <h3>
       {{ $t('admin_dash.users.title') }}
     </h3>
-    <div class="filters-section">
-      <label class="filter">
-        <div class="query-label">
-          {{ $t('admin_dash.users.labels.query') }}
-        </div>
-        <input
-          v-model="filtersQuery"
-          class="input string-input filter-input"
-        >
-      </label>
-      <label class="filter">
-        <div class="query-label">
-          {{ $t('admin_dash.users.labels.name') }}
-        </div>
-        <input
-          v-model="filtersName"
-          class="input string-input filter-input"
-        >
-      </label>
-      <label class="filter">
-        <div class="query-label">
-          {{ $t('admin_dash.users.labels.email') }}
-        </div>
-        <input
-          v-model="filtersEmail"
-          class="input string-input filter-input"
-        >
-      </label>
-      <div class="filter">
-        <div class="query-label">
-          {{ $t('admin_dash.users.labels.origin') }}
-        </div>
-        <Select
-          v-model="filtersOrigin"
-        >
-          <option
-            value="all"
+    <div class="splitter">
+      <div class="filters-section">
+        <label class="filter">
+          <div class="query-label">
+            {{ $t('admin_dash.users.labels.query') }}
+          </div>
+          <input
+            v-model="filtersQuery"
+            class="input string-input filter-input"
           >
-            {{ $t('admin_dash.users.options.all') }}
-          </option>
-          <option
-            value="local"
+        </label>
+        <label class="filter">
+          <div class="query-label">
+            {{ $t('admin_dash.users.labels.name') }}
+          </div>
+          <input
+            v-model="filtersName"
+            class="input string-input filter-input"
           >
-            {{ $t('admin_dash.users.options.only_local') }}
-          </option>
-          <option
-            value="external"
+        </label>
+        <label class="filter">
+          <div class="query-label">
+            {{ $t('admin_dash.users.labels.email') }}
+          </div>
+          <input
+            v-model="filtersEmail"
+            class="input string-input filter-input"
           >
-            {{ $t('admin_dash.users.options.only_external') }}
-          </option>
-        </Select>
-      </div>
-      <div class="filter">
-        <div class="query-label">
-          {{ $t('admin_dash.users.labels.activity') }}
-        </div>
-        <Select
-          v-model="filtersActivity"
-        >
-          <option
-            value="all"
-          >
-            {{ $t('admin_dash.users.options.all') }}
-          </option>
-          <option
-            value="active"
-          >
-            {{ $t('admin_dash.users.options.only_active') }}
-          </option>
-          <option
-            value="deactivated"
-          >
-            {{ $t('admin_dash.users.options.only_deactivated') }}
-          </option>
-        </Select>
-      </div>
-      <div class="filter">
-        <div class="query-label">
-          {{ $t('admin_dash.users.labels.privileges') }}
-        </div>
-        <Select v-model="filtersPrivileges">
-          <option
-            value="all"
-          >
-            {{ $t('admin_dash.users.options.all') }}
-          </option>
-          <option
-            value="admin"
-          >
-            {{ $t('admin_dash.users.options.only_admins') }}
-          </option>
-          <option
-            value="modsnadmins"
-          >
-            {{ $t('admin_dash.users.options.only_privileged') }}
-          </option>
-          <option
-            value="moderator"
-          >
-            {{ $t('admin_dash.users.options.only_moderators') }}
-          </option>
-        </Select>
-      </div>
-      <div class="filter">
-        <Checkbox v-model="filtersNeedApproval">
-          {{ $t('admin_dash.users.options.only_unapproved') }}
-        </Checkbox>
-      </div>
-      <div class="filter">
-        <Checkbox v-model="filtersUnconfirmed">
-          {{ $t('admin_dash.users.options.only_unconfirmed') }}
-        </Checkbox>
+        </label>
+        <div class="filter">
+          <div class="query-label">
+            {{ $t('admin_dash.users.labels.origin') }}
+          </div>
+          <Select
+            v-model="filtersOrigin"
+          >
+            <option
+              value="all"
+            >
+              {{ $t('admin_dash.users.options.all') }}
+            </option>
+            <option
+              value="local"
+            >
+              {{ $t('admin_dash.users.options.only_local') }}
+            </option>
+            <option
+              value="external"
+            >
+              {{ $t('admin_dash.users.options.only_external') }}
+            </option>
+          </Select>
+        </div>
+        <div class="filter">
+          <div class="query-label">
+            {{ $t('admin_dash.users.labels.activity') }}
+          </div>
+          <Select
+            v-model="filtersActivity"
+          >
+            <option
+              value="all"
+            >
+              {{ $t('admin_dash.users.options.all') }}
+            </option>
+            <option
+              value="active"
+            >
+              {{ $t('admin_dash.users.options.only_active') }}
+            </option>
+            <option
+              value="deactivated"
+            >
+              {{ $t('admin_dash.users.options.only_deactivated') }}
+            </option>
+          </Select>
+        </div>
+        <div class="filter">
+          <div class="query-label">
+            {{ $t('admin_dash.users.labels.privileges') }}
+          </div>
+          <Select v-model="filtersPrivileges">
+            <option
+              value="all"
+            >
+              {{ $t('admin_dash.users.options.all') }}
+            </option>
+            <option
+              value="admin"
+            >
+              {{ $t('admin_dash.users.options.only_admins') }}
+            </option>
+            <option
+              value="modsnadmins"
+            >
+              {{ $t('admin_dash.users.options.only_privileged') }}
+            </option>
+            <option
+              value="moderator"
+            >
+              {{ $t('admin_dash.users.options.only_moderators') }}
+            </option>
+          </Select>
+        </div>
+        <div class="filter">
+          <Checkbox v-model="filtersNeedApproval">
+            {{ $t('admin_dash.users.options.only_unapproved') }}
+          </Checkbox>
+        </div>
+        <div class="filter">
+          <Checkbox v-model="filtersUnconfirmed">
+            {{ $t('admin_dash.users.options.only_unconfirmed') }}
+          </Checkbox>
+        </div>
       </div>
+      <List
+        class="users-list"
+        ref="usersList"
+        :fetch-function="fetchUsers"
+        selectable
+        scrollable
+        @select="onSelect"
+      >
+        <template #header="{selected}">
+          <ModerationTools :users="selected" />
+        </template>
+        <template #item="{item}">
+          <AdminUserCard :user-id="item.id" />
+        </template>
+        <template #load>
+          <span> loading </span>
+        </template>
+        <template #empty>
+          <span> no users </span>
+        </template>
+      </List>
     </div>
-    <List
-      ref="usersList"
-      :fetch-function="fetchUsers"
-      selectable
-      scrollable
-      @select="onSelect"
-    >
-      <template #header="{selected}">
-        <ModerationTools :users="selected" />
-      </template>
-      <template #item="{item}">
-        <AdminUserCard :user-id="item.id" />
-      </template>
-      <template #load>
-        <span> loading </span>
-      </template>
-      <template #empty>
-        <span> no users </span>
-      </template>
-    </List>
   </div>
 </template>
 <script src="./users_tab.js"></script>
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
index e407d29e5..cbe1be158 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@@ -160,19 +160,25 @@ export default {
         'tab-content-wrapper',
         active ? '-active' : '-hidden',
       ]
+      const slotWrapperClasses = [
+        'tab-slot-wrapper',
+        active ? '-active' : '-hidden',
+      ]
       const contentClasses = ['tab-content']
-      if (props['full-width'] || props['full-width'] === '') {
+      if (props['full-width'] || props['full-width'] != null) {
         contentClasses.push('-full-width')
         wrapperClasses.push('-full-width')
+        slotWrapperClasses.push('-full-width')
       }
-      if (props['full-height'] || props['full-width'] === '') {
+      if (props['full-height'] || props['full-width'] != null) {
         contentClasses.push('-full-height')
         wrapperClasses.push('-full-height')
+        slotWrapperClasses.push('-full-height')
       }
       return (
         <div class={wrapperClasses}>
           <div class="tab-mobile-header">{header}</div>
-          <div class="tab-slot-wrapper">
+          <div class={slotWrapperClasses}>
             <div class={contentClasses}>{renderSlot}</div>
           </div>
         </div>
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.scss b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
index 8db960914..3fff96688 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
@@ -49,6 +49,16 @@
       grid-template-areas: ". content .";
       flex-direction: column;
 
+      &.-full-width {
+        padding-left: 0;
+        padding-right: 0;
+      }
+
+      &.-full-height {
+        padding-top: 0;
+        padding-bottom: 0;
+      }
+
       .tab-content {
         grid-area: content;
 
@@ -57,6 +67,8 @@
         }
 
         &.-full-height {
+          display: flex;
+          flex-direction: column;
           height: 100%;
 
           > * {