diff --git a/changelog.d/settings-shuffle.change b/changelog.d/settings-shuffle.change
deleted file mode 100644
index f1d9ecf89..000000000
--- a/changelog.d/settings-shuffle.change
+++ /dev/null
@@ -1,3 +0,0 @@
-rearranged and split settings to make more sense and be less of a wall of text
-on mobile settings now take up full width and presented in navigation style
-improved styles for settings
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 78698803e..a1e3ec412 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -50,11 +50,9 @@
     }
 
     &.two-column {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
+      column-count: 2;
 
       > li {
-        margin: 0;
         break-inside: avoid;
       }
     }
@@ -108,13 +106,11 @@
   &.-mobile {
     .tabs {
       .menu-item {
-        font-size: 1.2em;
-        padding-top: 0.75em;
-        padding-bottom: 0.75em;
+        font-size: 1.2em
       }
     }
 
-    .setting-list:not(.suboptions),
+    .setting-list,
     .option-list {
       padding-left: 0.25em;
 
@@ -125,7 +121,7 @@
       }
 
       &.two-column {
-        grid-template-columns: 1fr;
+        column-count: 1;
       }
     }
   }
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index bc0039118..fa6b7f8ad 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -1,4 +1,4 @@
-import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'
 
 import InstanceTab from './admin_tabs/instance_tab.vue'
 import LimitsTab from './admin_tabs/limits_tab.vue'
diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
index d3a66aedb..18e1148dc 100644
--- a/src/components/settings_modal/settings_modal_user_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -1,4 +1,4 @@
-import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'
 
 import DataImportExportTab from './tabs/data_import_export_tab.vue'
 import MutesAndBlocksTab from './tabs/mutes_and_blocks_tab.vue'
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index 306d8e898..5deca7868 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -1,11 +1,8 @@
 .settings_tab-switcher {
   height: 100%;
 
-  [full-height="true"] {
-    height: 100%
-  }
-
   .setting-item {
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index b2b291e9b..6709b6e02 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -80,7 +80,6 @@
       icon="eye-slash"
       data-tab-name="mutesAndBlocks"
       :full-width="true"
-      :full-height="true"
     >
       <MutesAndBlocksTab />
     </div>
@@ -96,6 +95,7 @@
       :label="$t('settings.security_tab')"
       icon="lock"
       data-tab-name="security"
+      :full-width="true"
     >
       <SecurityTab />
     </div>
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 371d40012..3bb5ec508 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -1,3 +1,5 @@
+import VerticalTabSwitcher from 'src/components/tab_switcher/vertical_tab_switcher.jsx'
+
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
@@ -86,7 +88,8 @@ const AppearanceTab = {
     UnitSetting,
     ProfileSettingIndicator,
     Preview,
-    PaletteEditor
+    PaletteEditor,
+    VerticalTabSwitcher
   },
   mounted () {
     useInterfaceStore().getThemeData()
diff --git a/src/components/settings_modal/tabs/composing_tab.vue b/src/components/settings_modal/tabs/composing_tab.vue
index 507ac5c79..a48e6928e 100644
--- a/src/components/settings_modal/tabs/composing_tab.vue
+++ b/src/components/settings_modal/tabs/composing_tab.vue
@@ -13,8 +13,7 @@
               :user-default="$store.state.profileConfig.defaultScope"
               :initial-scope="$store.state.profileConfig.defaultScope"
               :on-scope-change="changeDefaultScope"
-              :unstyled="false"
-              uns
+              :unstyled="false"uns
             />
             <ProfileSettingIndicator :is-profile="true" />
           </label>
@@ -83,9 +82,7 @@
           </ChoiceSetting>
         </li>
       </ul>
-      <h3 v-if="expertLevel > 0">
-        {{ $t('settings.attachments') }}
-      </h3>
+      <h3 v-if="expertLevel > 0">{{ $t('settings.attachments') }}</h3>
       <ul class="setting-list">
         <li>
           <BooleanSetting
@@ -94,18 +91,18 @@
           >
             {{ $t('settings.image_compression') }}
           </BooleanSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <BooleanSetting
-                path="alwaysUseJpeg"
-                expert="1"
-                parent-path="imageCompression"
-              >
-                {{ $t('settings.always_use_jpeg') }}
-              </BooleanSetting>
-            </li>
-          </ul>
         </li>
+        <ul class="setting-list suboptions">
+          <li>
+            <BooleanSetting
+              path="alwaysUseJpeg"
+              expert="1"
+              parent-path="imageCompression"
+            >
+              {{ $t('settings.always_use_jpeg') }}
+            </BooleanSetting>
+          </li>
+        </ul>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/developer_tab.js b/src/components/settings_modal/tabs/developer_tab.js
index f8f21e9f4..e9978884e 100644
--- a/src/components/settings_modal/tabs/developer_tab.js
+++ b/src/components/settings_modal/tabs/developer_tab.js
@@ -23,23 +23,6 @@ const VersionTab = {
       return pleromaFeCommitUrl + this.frontendVersion
     },
     ...SharedComputedObject(),
-  },
-  methods: {
-    clearAssetCache () {
-      this.clearCache(cacheKey)
-    },
-    clearEmojiCache () {
-      this.clearCache(emojiCacheKey)
-    },
-    clearCache (key) {
-      clearCache(key)
-        .then(() => {
-          this.$store.dispatch('settingsSaved', { success: true })
-        })
-        .catch(error => {
-          this.$store.dispatch('settingsSaved', { error })
-        })
-    }
   }
 }
 
diff --git a/src/components/settings_modal/tabs/developer_tab.vue b/src/components/settings_modal/tabs/developer_tab.vue
index aafa4ec17..6b4480db7 100644
--- a/src/components/settings_modal/tabs/developer_tab.vue
+++ b/src/components/settings_modal/tabs/developer_tab.vue
@@ -4,7 +4,7 @@
     class="developer-tab"
   >
     <div class="setting-item">
-      <h3>{{ $t('settings.version.title') }}</h3>
+      <h3>{{ $t('settings.version.title')}}</h3>
       <dl class="setting-list">
         <dt>{{ $t('settings.version.backend_version') }}</dt>
         <dd>
@@ -20,12 +20,12 @@
           <a
             :href="frontendVersionLink"
             target="_blank"
-          >
+            >
             {{ frontendVersion }}
           </a>
         </dd>
       </dl>
-      <h3>{{ $t('settings.debug') }}</h3>
+      <h3>{{ $t('settings.debug')}}</h3>
       <ul class="setting-list">
         <li>
           <BooleanSetting path="virtualScrolling">
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 4d3b01c46..60f67ccc4 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -7,10 +7,12 @@ import FloatSetting from '../helpers/float_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import FontControl from 'src/components/font_control/font_control.vue'
+import { defaultHorizontalUnits } from '../helpers/unit_setting.js'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 import localeService from 'src/services/locale/locale.service.js'
+import { clearCache, cacheKey, emojiCacheKey } from 'src/services/sw/sw.js'
 
 const GeneralTab = {
   props: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 2796c9a95..4c36c8d58 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -136,13 +136,8 @@
           </BooleanSetting>
         </li>
       </ul>
-      <h3 v-if="expertLevel > 0">
-        {{ $t('settings.confirmations') }}
-      </h3>
-      <ul
-        v-if="expertLevel > 0"
-        class="setting-list"
-      >
+      <h3 v-if="expertLevel > 0">{{ $t('settings.confirmations') }}</h3>
+      <ul v-if="expertLevel > 0" class="setting-list">
         <li class="select-multiple">
           <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
           <ul class="option-list">
diff --git a/src/components/settings_modal/tabs/layout_tab.vue b/src/components/settings_modal/tabs/layout_tab.vue
index 999040d9d..d4a7e757a 100644
--- a/src/components/settings_modal/tabs/layout_tab.vue
+++ b/src/components/settings_modal/tabs/layout_tab.vue
@@ -24,6 +24,16 @@
             {{ $t('settings.autohide_floating_post_button') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="userPopoverOverlay"
@@ -49,6 +59,9 @@
             {{ $t('settings.theme_editor_min_width') }}
           </UnitSetting>
         </li>
+      </ul>
+      <h3>{{ $t('settings.columns') }}</h3>
+      <ul class="setting-list">
         <li>
           <UnitSetting
             path="navbarSize"
@@ -59,19 +72,6 @@
             {{ $t('settings.navbar_size') }}
           </UnitSetting>
         </li>
-      </ul>
-      <h3>{{ $t('settings.columns') }}</h3>
-      <ul class="setting-list">
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
         <li v-if="instanceSpecificPanelPresent">
           <BooleanSetting path="hideISP">
             {{ $t('settings.hide_isp') }}
@@ -109,7 +109,7 @@
           </ChoiceSetting>
         </li>
         <li v-if="expertLevel > 0">
-          <h4> {{ $t('settings.column_sizes') }} </h4>
+          {{ $t('settings.column_sizes') }}
           <div class="column-settings">
             <UnitSetting
               v-for="column in columns"
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 351c1dd9c..10228888c 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -1,7 +1,7 @@
 <template>
   <div :label="$t('settings.notifications')">
     <div class="setting-item">
-      <h3>{{ $t('settings.notification_setting_annoyance') }}</h3>
+      <h2>{{ $t('settings.notification_setting_annoyance') }}</h2>
       <ul class="setting-list">
         <li>
           <BooleanSetting path="closingDrawerMarksAsSeen">
@@ -29,7 +29,7 @@
       </ul>
     </div>
     <div class="setting-item">
-      <h3>{{ $t('settings.notification_setting_filters') }}</h3>
+      <h2>{{ $t('settings.notification_setting_filters') }}</h2>
       <ul class="setting-list">
         <li>
           <BooleanSetting
@@ -40,13 +40,13 @@
           </BooleanSetting>
         </li>
         <li>
-          <h4> {{ $t('settings.notification_visibility') }}</h4>
+          <h3> {{ $t('settings.notification_visibility') }}</h3>
           <p v-if="expertLevel > 0">
             {{ $t('settings.notification_setting_filters_chrome_push') }}
           </p>
           <ul class="setting-list two-column">
             <li>
-              <h5> {{ $t('settings.notification_visibility_mentions') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.mentions">
@@ -61,7 +61,7 @@
               </ul>
             </li>
             <li>
-              <h5> {{ $t('settings.notification_visibility_statuses') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_statuses') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.statuses">
@@ -76,7 +76,7 @@
               </ul>
             </li>
             <li>
-              <h5> {{ $t('settings.notification_visibility_likes') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_likes') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.likes">
@@ -91,7 +91,7 @@
               </ul>
             </li>
             <li>
-              <h5> {{ $t('settings.notification_visibility_repeats') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_repeats') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.repeats">
@@ -106,7 +106,7 @@
               </ul>
             </li>
             <li>
-              <h5> {{ $t('settings.notification_visibility_emoji_reactions') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_emoji_reactions') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.emojiReactions">
@@ -121,7 +121,7 @@
               </ul>
             </li>
             <li>
-              <h5> {{ $t('settings.notification_visibility_follows') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_follows') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.follows">
@@ -136,7 +136,7 @@
               </ul>
             </li>
             <li>
-              <h5> {{ $t('settings.notification_visibility_follow_requests') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_follow_requests') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.followRequest">
@@ -151,7 +151,7 @@
               </ul>
             </li>
             <li>
-              <h5> {{ $t('settings.notification_visibility_moves') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_moves') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.moves">
@@ -166,7 +166,7 @@
               </ul>
             </li>
             <li>
-              <h5> {{ $t('settings.notification_visibility_polls') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_polls') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.polls">
@@ -181,7 +181,7 @@
               </ul>
             </li>
             <li v-if="canReceiveReports">
-              <h5> {{ $t('settings.notification_visibility_reports') }}</h5>
+              <h4> {{ $t('settings.notification_visibility_reports') }}</h4>
               <ul class="setting-list">
                 <li>
                   <BooleanSetting path="notificationVisibility.reports">
@@ -201,6 +201,8 @@
           <BooleanSetting path="showExtraNotifications">
             {{ $t('settings.notification_show_extra') }}
           </BooleanSetting>
+        </li>
+        <li>
           <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
@@ -243,7 +245,7 @@
       v-if="expertLevel > 0"
       class="setting-item"
     >
-      <h3>{{ $t('settings.notification_setting_privacy') }}</h3>
+      <h2>{{ $t('settings.notification_setting_privacy') }}</h2>
       <ul class="setting-list">
         <li>
           <BooleanSetting
diff --git a/src/components/settings_modal/tabs/posts_tab.vue b/src/components/settings_modal/tabs/posts_tab.vue
index f95411d61..ac5c286e1 100644
--- a/src/components/settings_modal/tabs/posts_tab.vue
+++ b/src/components/settings_modal/tabs/posts_tab.vue
@@ -16,43 +16,6 @@
           >
             {{ $t('settings.conversation_display') }}
           </ChoiceSetting>
-          <ul
-            v-if="mergedConfig.conversationDisplay !== 'linear'"
-            class="setting-list suboptions"
-          >
-            <li>
-              <BooleanSetting path="conversationTreeAdvanced">
-                {{ $t('settings.tree_advanced') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting
-                path="conversationTreeFadeAncestors"
-                :expert="1"
-              >
-                {{ $t('settings.tree_fade_ancestors') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <IntegerSetting
-                path="maxDepthInThread"
-                :min="3"
-                :expert="1"
-              >
-                {{ $t('settings.max_depth_in_thread') }}
-              </IntegerSetting>
-            </li>
-            <li>
-              <ChoiceSetting
-                id="conversationOtherRepliesButton"
-                path="conversationOtherRepliesButton"
-                :options="conversationOtherRepliesButtonOptions"
-                :expert="1"
-              >
-                {{ $t('settings.conversation_other_replies_button') }}
-              </ChoiceSetting>
-            </li>
-          </ul>
         </li>
         <li>
           <FontControl
@@ -72,6 +35,43 @@
             @update:model-value="v => updateFont('monospace', v)"
           />
         </li>
+        <ul
+          v-if="mergedConfig.conversationDisplay !== 'linear'"
+          class="setting-list suboptions"
+        >
+          <li>
+            <BooleanSetting path="conversationTreeAdvanced">
+              {{ $t('settings.tree_advanced') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting
+              path="conversationTreeFadeAncestors"
+              :expert="1"
+            >
+              {{ $t('settings.tree_fade_ancestors') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <IntegerSetting
+              path="maxDepthInThread"
+              :min="3"
+              :expert="1"
+            >
+              {{ $t('settings.max_depth_in_thread') }}
+            </IntegerSetting>
+          </li>
+          <li>
+            <ChoiceSetting
+              id="conversationOtherRepliesButton"
+              path="conversationOtherRepliesButton"
+              :options="conversationOtherRepliesButtonOptions"
+              :expert="1"
+            >
+              {{ $t('settings.conversation_other_replies_button') }}
+            </ChoiceSetting>
+          </li>
+        </ul>
         <li>
           <BooleanSetting path="greentext">
             <i18n-t
@@ -103,16 +103,6 @@
           >
             {{ $t('settings.mention_link_display') }}
           </ChoiceSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <BooleanSetting
-                v-if="mergedConfig.mentionLinkDisplay !== 'short'"
-                path="mentionLinkFadeDomain"
-              >
-                {{ $t('settings.mention_link_fade_domain') }}
-              </BooleanSetting>
-            </li>
-          </ul>
         </li>
         <li>
           <BooleanSetting
@@ -127,6 +117,14 @@
             {{ $t('settings.mention_link_show_avatar') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            v-if="mergedConfig.mentionLinkDisplay !== 'short'"
+            path="mentionLinkFadeDomain"
+          >
+            {{ $t('settings.mention_link_fade_domain') }}
+          </BooleanSetting>
+        </li>
         <li v-if="user">
           <BooleanSetting
             path="mentionLinkBoldenYou"
@@ -144,22 +142,22 @@
           >
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
-          <ul
-            v-if="mergedConfig.useAbsoluteTimeFormat"
-            class="setting-list suboptions"
-          >
-            <li>
-              <UnitSetting
-                path="absoluteTimeFormatMinAge"
-                unit-set="time"
-                :units="['s', 'm', 'h', 'd']"
-                :min="0"
-              >
-                {{ $t('settings.absolute_time_format_min_age') }}
-              </UnitSetting>
-            </li>
-          </ul>
         </li>
+        <ul
+          v-if="mergedConfig.useAbsoluteTimeFormat"
+          class="setting-list suboptions"
+        >
+          <li>
+            <UnitSetting
+              path="absoluteTimeFormatMinAge"
+              unit-set="time"
+              :units="['s', 'm', 'h', 'd']"
+              :min="0"
+            >
+              {{ $t('settings.absolute_time_format_min_age') }}
+            </UnitSetting>
+          </li>
+        </ul>
       </ul>
       <h3>{{ $t('settings.attachments') }}</h3>
       <ul class="setting-list">
@@ -172,27 +170,27 @@
           <BooleanSetting path="hideNsfw">
             {{ $t('settings.nsfw_clickthrough') }}
           </BooleanSetting>
-          <ul class="setting-list suboptions">
-            <li>
-              <BooleanSetting
-                path="preloadImage"
-                expert="1"
-                parent-path="hideNsfw"
-              >
-                {{ $t('settings.preload_images') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting
-                path="useOneClickNsfw"
-                expert="1"
-                parent-path="hideNsfw"
-              >
-                {{ $t('settings.use_one_click_nsfw') }}
-              </BooleanSetting>
-            </li>
-          </ul>
         </li>
+        <ul class="setting-list suboptions">
+          <li>
+            <BooleanSetting
+              path="preloadImage"
+              expert="1"
+              parent-path="hideNsfw"
+            >
+              {{ $t('settings.preload_images') }}
+            </BooleanSetting>
+          </li>
+          <li>
+            <BooleanSetting
+              path="useOneClickNsfw"
+              expert="1"
+              parent-path="hideNsfw"
+            >
+              {{ $t('settings.use_one_click_nsfw') }}
+            </BooleanSetting>
+          </li>
+        </ul>
         <li>
           <BooleanSetting
             path="loopVideo"
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
index d1e6e3c87..4431550ae 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -1,97 +1,116 @@
 <template>
   <div :label="$t('settings.security_tab')">
     <div class="setting-item">
-      <h3>{{ $t('settings.change_email') }}</h3>
-      <ul class="setting-list">
-        <li>
-          <h4>{{ $t('settings.new_email') }}</h4>
-          <input
-            v-model="newEmail"
-            type="email"
-            autocomplete="email"
-            class="input"
-          >
-        </li>
-        <li>
-          <h4>{{ $t('settings.current_password') }}</h4>
-          <input
-            v-model="changeEmailPassword"
-            type="password"
-            autocomplete="current-password"
-            class="input"
-          >
-        </li>
-        <li>
-          <button
-            class="btn button-default"
-            @click="changeEmail"
-          >
-            {{ $t('settings.save') }}
-          </button>
-        </li>
-        <li>
-          <p v-if="changedEmail">
-            {{ $t('settings.changed_email') }}
-          </p>
-          <template v-if="changeEmailError !== false">
-            <p>{{ $t('settings.change_email_error') }}</p>
-            <p>{{ changeEmailError }}</p>
-          </template>
-        </li>
-      </ul>
+      <h2>{{ $t('settings.change_email') }}</h2>
+      <div>
+        <p>{{ $t('settings.new_email') }}</p>
+        <input
+          v-model="newEmail"
+          type="email"
+          autocomplete="email"
+          class="input"
+        >
+      </div>
+      <div>
+        <p>{{ $t('settings.current_password') }}</p>
+        <input
+          v-model="changeEmailPassword"
+          type="password"
+          autocomplete="current-password"
+          class="input"
+        >
+      </div>
+      <button
+        class="btn button-default"
+        @click="changeEmail"
+      >
+        {{ $t('settings.save') }}
+      </button>
+      <p v-if="changedEmail">
+        {{ $t('settings.changed_email') }}
+      </p>
+      <template v-if="changeEmailError !== false">
+        <p>{{ $t('settings.change_email_error') }}</p>
+        <p>{{ changeEmailError }}</p>
+      </template>
     </div>
 
     <div class="setting-item">
-      <h3>{{ $t('settings.change_password') }}</h3>
-      <ul class="setting-list">
-        <li>
-          <h4>{{ $t('settings.current_password') }}</h4>
-          <input
-            v-model="changePasswordInputs[0]"
-            type="password"
-            class="input"
-          >
-        </li>
-        <li>
-          <h4>{{ $t('settings.new_password') }}</h4>
-          <input
-            v-model="changePasswordInputs[1]"
-            type="password"
-            class="input"
-          >
-        </li>
-        <li>
-          <h4>{{ $t('settings.confirm_new_password') }}</h4>
-          <input
-            v-model="changePasswordInputs[2]"
-            type="password"
-            class="input"
-          >
-        </li>
-        <li>
-          <button
-            class="btn button-default"
-            @click="changePassword"
-          >
-            {{ $t('settings.save') }}
-          </button>
-        </li>
-        <li>
-          <p v-if="changedPassword">
-            {{ $t('settings.changed_password') }}
-          </p>
-          <p v-else-if="changePasswordError !== false">
-            {{ $t('settings.change_password_error') }}
-          </p>
-          <p v-if="changePasswordError">
-            {{ changePasswordError }}
-          </p>
-        </li>
-      </ul>
+      <h2>{{ $t('settings.change_password') }}</h2>
+      <div>
+        <p>{{ $t('settings.current_password') }}</p>
+        <input
+          v-model="changePasswordInputs[0]"
+          type="password"
+          class="input"
+        >
+      </div>
+      <div>
+        <p>{{ $t('settings.new_password') }}</p>
+        <input
+          v-model="changePasswordInputs[1]"
+          type="password"
+          class="input"
+        >
+      </div>
+      <div>
+        <p>{{ $t('settings.confirm_new_password') }}</p>
+        <input
+          v-model="changePasswordInputs[2]"
+          type="password"
+          class="input"
+        >
+      </div>
+      <button
+        class="btn button-default"
+        @click="changePassword"
+      >
+        {{ $t('settings.save') }}
+      </button>
+      <p v-if="changedPassword">
+        {{ $t('settings.changed_password') }}
+      </p>
+      <p v-else-if="changePasswordError !== false">
+        {{ $t('settings.change_password_error') }}
+      </p>
+      <p v-if="changePasswordError">
+        {{ changePasswordError }}
+      </p>
     </div>
 
     <div class="setting-item">
-      <h3>{{ $t('settings.account_alias') }}</h3>
+      <h2>{{ $t('settings.oauth_tokens') }}</h2>
+      <table class="oauth-tokens">
+        <thead>
+          <tr>
+            <th>{{ $t('settings.app_name') }}</th>
+            <th>{{ $t('settings.valid_until') }}</th>
+            <th />
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="oauthToken in oauthTokens"
+            :key="oauthToken.id"
+          >
+            <td>{{ oauthToken.appName }}</td>
+            <td>{{ oauthToken.validUntil }}</td>
+            <td class="actions">
+              <button
+                class="btn button-default"
+                @click="revokeToken(oauthToken.id)"
+              >
+                {{ $t('settings.revoke_token') }}
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <mfa />
+
+    <div class="setting-item">
+      <h2>{{ $t('settings.account_alias') }}</h2>
       <table>
         <thead>
           <tr>
@@ -159,40 +178,8 @@
       </template>
     </div>
 
-
     <div class="setting-item">
-      <h3>{{ $t('settings.oauth_tokens') }}</h3>
-      <table class="oauth-tokens">
-        <thead>
-          <tr>
-            <th>{{ $t('settings.app_name') }}</th>
-            <th>{{ $t('settings.valid_until') }}</th>
-            <th />
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="oauthToken in oauthTokens"
-            :key="oauthToken.id"
-          >
-            <td>{{ oauthToken.appName }}</td>
-            <td>{{ oauthToken.validUntil }}</td>
-            <td class="actions">
-              <button
-                class="btn button-default"
-                @click="revokeToken(oauthToken.id)"
-              >
-                {{ $t('settings.revoke_token') }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-    <mfa />
-
-    <div class="setting-item">
-      <h3>{{ $t('settings.move_account') }}</h3>
+      <h2>{{ $t('settings.move_account') }}</h2>
       <p>{{ $t('settings.move_account_notes') }}</p>
       <div>
         <i18n-t
@@ -235,7 +222,7 @@
     </div>
 
     <div class="setting-item">
-      <h3>{{ $t('settings.delete_account') }}</h3>
+      <h2>{{ $t('settings.delete_account') }}</h2>
       <p v-if="!deletingAccount">
         {{ $t('settings.delete_account_description') }}
       </p>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 8c78fddc1..91caa6a8c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -139,34 +139,32 @@
             class="status-heading"
           >
             <div class="heading-name-row">
-              <div
-                v-if="status.user"
-                class="heading-left"
-              >
+              <div class="heading-left">
                 <h4
-                  v-if="status.user.name_html"
                   class="status-username"
-                  :title="status.user.name"
+                  :title="status.user?.name ?? $t('status.unknown_user_info')"
                 >
-                  <RichContent
-                    :html="status.user.name"
-                    :emoji="status.user.emoji"
-                    :is-local="status.user.is_local"
-                  />
+                  <user-link
+                    v-if="status.user?.name"
+                    class="account-name"
+                    :title="status.user?.screen_name_ui"
+                    :user="status?.user"
+                    :at="false"
+                  >
+                    <RichContent
+                      :html="status.user.name"
+                      :emoji="status.user.emoji"
+                      :is-local="status.user.is_local"
+                    />
+                    <span>{{ status.user.name }}</span>
+                  </user-link>
+                  <span
+                    v-else
+                    class="account-name unknown"
+                  >
+                    {{ $t('status.unknown_user') }}
+                  </span>
                 </h4>
-                <h4
-                  v-else
-                  class="status-username"
-                  :title="status.user.name"
-                >
-                  {{ status.user.name }}
-                </h4>
-                <user-link
-                  class="account-name"
-                  :title="status.user.screen_name_ui"
-                  :user="status.user"
-                  :at="false"
-                />
                 <img
                   v-if="!!(status.user && status.user.favicon)"
                   class="status-favicon"
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/tab_switcher/vertical_tab_switcher.jsx
similarity index 93%
rename from src/components/settings_modal/helpers/vertical_tab_switcher.jsx
rename to src/components/tab_switcher/vertical_tab_switcher.jsx
index ce5e3fa20..9367821a7 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/tab_switcher/vertical_tab_switcher.jsx
@@ -128,8 +128,10 @@ export default {
       const props = slot.props
       if (!props) return
       const active = this.activeIndex === index
-      const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
-
+      const classes = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
+      if (props.fullHeight) {
+        classes.push('-full-height')
+      }
       let delayRender = slot.props['delay-render']
       if (delayRender && active) {
         slot.props['delay-render'] = false
@@ -157,20 +159,13 @@ export default {
         </h2>
       )
 
-      const contentClasses = ['tab-content']
-      if (props['full-width']) {
-        contentClasses.push('-full-width')
-      }
-      if (props['full-height']) {
-        contentClasses.push('-full-height')
-      }
       return (
-        <div class={wrapperClasses} >
+        <div class={classes} >
           <div class="tab-mobile-header">
             {header}
           </div>
           <div class="tab-slot-wrapper">
-            <div class={contentClasses} >
+            <div class={ ['tab-content', props['full-width'] ? '-full-width' : null].join(' ') } >
               {renderSlot}
             </div>
           </div>
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.scss b/src/components/tab_switcher/vertical_tab_switcher.scss
similarity index 98%
rename from src/components/settings_modal/helpers/vertical_tab_switcher.scss
rename to src/components/tab_switcher/vertical_tab_switcher.scss
index 4ac03ae59..4a0b10203 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss
+++ b/src/components/tab_switcher/vertical_tab_switcher.scss
@@ -39,10 +39,6 @@
       &.-full-width {
         align-self: stretch;
       }
-
-      &.-full-height {
-        flex: 1;
-      }
     }
 
     .tab-content-label {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e1f5fb23d..d2e37eb17 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -407,7 +407,7 @@
     "posts": "Posts",
     "developer": "Developer",
     "debug": "Debug",
-    "mention_links": "Mention Links",
+    "mention_links": "Mention links",
     "appearance": "Appearance",
     "confirm_new_setting": "Confirm new setting?",
     "confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
@@ -830,7 +830,7 @@
     "user_popover_avatar_overlay": "Show user popover over user avatar",
     "user_card_left_justify": "Justify user bio to the left",
     "user_card_hide_personal_marks": "Hide personal marks (highlight/note) in user profiles",
-    "posts_appearance": "Posts Appearance",
+    "posts_appearance": "Posts appearance",
     "fun": "Fun",
     "greentext": "Meme arrows",
     "plaintext_quotes": "Highlight plaintext {0}",