diff --git a/build/copy_plugin.js b/build/copy_plugin.js
index a783fe7ff..694048a36 100644
--- a/build/copy_plugin.js
+++ b/build/copy_plugin.js
@@ -29,9 +29,9 @@ const copyPlugin = ({ inUrl, inFs }) => {
       order: 'post',
       sequential: true,
       async handler () {
-        console.log(`Copying '${inFs}' to ${copyTarget}...`)
+        console.info(`Copying '${inFs}' to ${copyTarget}...`)
         await cp(inFs, copyTarget, { recursive: true })
-        console.log('Done.')
+        console.info('Done.')
       }
     }
   }]
diff --git a/build/sw_plugin.js b/build/sw_plugin.js
index a2c792b7d..d970c5c09 100644
--- a/build/sw_plugin.js
+++ b/build/sw_plugin.js
@@ -178,7 +178,7 @@ export const buildSwPlugin = ({
       order: 'post',
       sequential: true,
       async handler () {
-        console.log('Building service worker for production')
+        console.info('Building service worker for production')
         await build(config)
       }
     }
diff --git a/changelog.d/admin_tab.add b/changelog.d/admin_tab.add
new file mode 100644
index 000000000..403695a09
--- /dev/null
+++ b/changelog.d/admin_tab.add
@@ -0,0 +1,2 @@
+Most of the remaining AdminFE tabs were added into Admin Dashboard
+It's now possible to customize PWA Manfiest from PleromaFE
diff --git a/src/App.scss b/src/App.scss
index ee1654bb7..1eee63a7e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -513,6 +513,12 @@ nav {
   }
 }
 
+label {
+  &.-disabled {
+    color: var(--textFaint);
+  }
+}
+
 input,
 textarea {
   border: none;
@@ -553,6 +559,10 @@ textarea {
   &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
+    color: var(--textFaint);
+
+    /* stylelint-disable-next-line declaration-no-important */
+    background-color: transparent !important;
   }
 
   &[type="range"] {
@@ -578,6 +588,8 @@ textarea {
       & + label::before {
         opacity: 0.5;
       }
+
+      background-color: var(--background);
     }
 
     + label::before {
@@ -677,7 +689,8 @@ option {
   list-style: none;
   display: grid;
   grid-auto-flow: row dense;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+  grid-gap: 0.5em;
 
   li {
     border: 1px solid var(--border);
@@ -698,7 +711,6 @@ option {
     --_roundness-right: 0;
 
     position: relative;
-    flex: 1 1 auto;
   }
 
   > *:first-child,
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index c8bba4c44..1e0f5ad05 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -1,7 +1,7 @@
 <template>
   <label
     class="checkbox"
-    :class="[{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
+    :class="[{ ['-disabled']: disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }, radio ? '-radio' : '-checkbox']"
   >
     <span
       v-if="!!$slots.before"
@@ -123,7 +123,7 @@ export default {
 
   .disabled {
     .checkbox-indicator::before {
-      background-color: var(--background);
+      background-color: transparent;
     }
   }
 
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 9e2c338cf..5124fd53a 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -1,24 +1,28 @@
 <template>
   <div class="font-control">
-    <Checkbox
-      v-if="typeof fallback !== 'undefined'"
-      :id="name + '-o'"
-      class="font-checkbox"
-      :model-value="present"
-      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
-    >
-      <i18n-t
-        scope="global"
-        keypath="settings.style.fonts.override"
-        tag="span"
+    <div class="setting-item">
+      <Checkbox
+        v-if="typeof fallback !== 'undefined'"
+        :id="name + '-o'"
+        class="font-checkbox setting-control setting-label"
+        :model-value="present"
+        @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
       >
-        {{ label }}
-      </i18n-t>
-    </Checkbox>
+        <i18n-t
+          scope="global"
+          keypath="settings.style.fonts.override"
+          tag="span"
+        >
+          <span>
+            {{ label }}
+          </span>
+        </i18n-t>
+      </Checkbox>
+    </div>
     {{ ' ' }}
     <div
       v-if="modelValue?.family"
-      class="font-input"
+      class="font-input setting-item"
     >
       <label
         v-if="manualEntry"
@@ -69,7 +73,7 @@
       </span>
       <span
         v-else
-        class="btn-group"
+        class="font-selector btn-group"
       >
         <button
           class="btn button-default"
@@ -132,18 +136,6 @@
 <script src="./font_control.js"></script>
 
 <style lang="scss">
-.font-control {
-  .custom-font {
-    min-width: 20em;
-    max-width: 20em;
-  }
-
-  .font-input {
-    margin-left: 2em;
-    margin-top: 0.5em;
-  }
-}
-
 .invalid-tooltip {
   margin: 0.5em 1em;
   min-width: 10em;
diff --git a/src/components/interface_language_switcher/interface_language_switcher.js b/src/components/interface_language_switcher/interface_language_switcher.js
index bd7b641a5..721c19887 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.js
+++ b/src/components/interface_language_switcher/interface_language_switcher.js
@@ -3,6 +3,8 @@ import localeService from '../../services/locale/locale.service.js'
 import Select from '../select/select.vue'
 import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
 
+import { v4 as uuidv4 } from 'uuid';
+
 export default {
   components: {
     Select,
@@ -26,7 +28,9 @@ export default {
     languages () {
       return localeService.languages
     },
-
+    uniqueId () {
+        return uuidv4()
+    },
     controlledLanguage: {
       get: function () {
         return Array.isArray(this.modelValue) ? this.modelValue : [this.modelValue]
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 8b300d43b..a547b98a5 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -1,30 +1,32 @@
 <template>
-  <div class="interface-language-switcher">
-    <label>
-      <slot />
-      <ProfileSettingIndicator :is-profile="profile" />
-    </label>
-    <ul class="setting-list">
-      <li
-        v-for="index of controlledLanguage.keys()"
-        :key="index"
+  <ul class="interface-language-switcher setting-list">
+    <li
+      v-for="index of controlledLanguage.keys()"
+      :key="index"
+      class="setting-item"
+    >
+      <label
+        class="setting-label"
+        :for="uniqueId+index"
       >
-        <label>
-          {{ index === 0 ? $t('settings.primary_language') : $t('settings.fallback_language', { index }, index) }}
-          <Select
-            class="language-select"
-            :model-value="controlledLanguage[index]"
-            @update:model-value="val => setLanguageAt(index, val)"
+        {{ index === 0 ? $t('settings.primary_language') : $t('settings.fallback_language', { index }, index) }}
+      </label>
+      <span class="setting-control btn-group">
+        <Select
+          :id="uniqueId+index"
+          :name="uniqueId+index"
+          class="language-select"
+          :model-value="controlledLanguage[index]"
+          @update:model-value="val => setLanguageAt(index, val)"
+        >
+          <option
+            v-for="lang in languages"
+            :key="lang.code"
+            :value="lang.code"
           >
-            <option
-              v-for="lang in languages"
-              :key="lang.code"
-              :value="lang.code"
-            >
-              {{ lang.name }}
-            </option>
-          </Select>
-        </label>
+            {{ lang.name }}
+          </option>
+        </Select>
         <button
           v-if="controlledLanguage.length > 1 && index !== 0"
           class="button-default btn"
@@ -32,25 +34,53 @@
         >
           {{ $t('settings.remove_language') }}
         </button>
-      </li>
-      <li>
-        <button
-          class="button-default btn"
-          @click="addLanguage"
-        >
-          {{ $t('settings.add_language') }}
-        </button>
-      </li>
-    </ul>
-  </div>
+      </span>
+    </li>
+    <li class="add-button">
+      <button
+        class="button-default btn"
+        @click="addLanguage"
+      >
+        {{ $t('settings.add_language') }}
+      </button>
+    </li>
+  </ul>
 </template>
 
 <script src="./interface_language_switcher.js"></script>
 
 <style lang="scss">
 .interface-language-switcher {
-  .language-select {
-    margin-right: 1em;
+  .setting-list {
+    .setting-item {
+      display: grid;
+      grid-template-columns: subgrid;
+    }
+  }
+
+  .add-button {
+    display: block;
+    text-align: center;
+    padding-bottom: 1em;
+
+    .default-button {
+      display: block;
+      width: auto;
+    }
+  }
+
+  .-mobile & {
+    li.setting-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5em;
+      align-items: stretch;
+      border-bottom: none;
+    }
+
+    .add-button {
+      border-bottom: 1px solid var(--border);
+    }
   }
 }
 </style>
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index f6b056e6b..b969a416e 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -395,7 +395,7 @@
   }
 
   form textarea {
-    line-height: 16px;
+    line-height: 1;
     resize: vertical;
   }
 
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 96be5312c..78b3b348c 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -26,6 +26,7 @@
 /* TODO fix order of styles */
 label.Select {
   padding: 0;
+  display: flex;
 
   select {
     appearance: none;
@@ -33,13 +34,12 @@ label.Select {
     border: none;
     color: var(--text);
     margin: 0;
-    padding: 0 2em 0 0.2em;
+    padding: 0 2em 0 0.5em;
     font-family: var(--font);
     font-size: 1em;
     width: 100%;
     z-index: 1;
-    height: 2em;
-    line-height: 16px;
+    line-height: 2;
 
     &[multiple],
     &[size] {
@@ -79,7 +79,7 @@ label.Select {
     position: absolute;
     top: 0;
     bottom: 0;
-    right: 5px;
+    right: 0.5em;
     height: 100%;
     width: 0.875em;
     font-family: var(--font);
diff --git a/src/components/settings_modal/admin_tabs/auth_tab.js b/src/components/settings_modal/admin_tabs/auth_tab.js
new file mode 100644
index 000000000..a078291e6
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/auth_tab.js
@@ -0,0 +1,39 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import TupleSetting from '../helpers/tuple_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+import MapSetting from '../helpers/map_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const AuthTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    TupleSetting,
+    AttachmentSetting,
+    GroupSetting,
+    ListSetting,
+    MapSetting
+  },
+  computed: {
+    ...SharedComputedObject(),
+    LDAPEnabled () {
+      return this.$store.state.adminSettings.draft[':pleroma'][':ldap'][':enabled']
+    },
+  }
+}
+
+export default AuthTab
diff --git a/src/components/settings_modal/admin_tabs/auth_tab.vue b/src/components/settings_modal/admin_tabs/auth_tab.vue
new file mode 100644
index 000000000..ef32aa4e0
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/auth_tab.vue
@@ -0,0 +1,105 @@
+<template>
+  <div :label="$t('admin_dash.tabs.job_queues')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.auth.MFA') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <h4>{{ $t('admin_dash.auth.TOTP') }}</h4>
+          <ul class="setting-list suboptions">
+            <li>
+              <IntegerSetting path=":pleroma.:instance.:multi_factor_authentication.:totp.:digits" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:instance.:multi_factor_authentication.:totp.:period" />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.auth.backup_codes') }}</h4>
+          <ul class="setting-list suboptions">
+            <li>
+              <IntegerSetting path=":pleroma.:instance.:multi_factor_authentication.:backup_codes.:number" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:instance.:multi_factor_authentication.:backup_codes.:length" />
+            </li>
+          </ul>
+        </li>
+        <GroupSetting path=":pleroma.:instance.:multi_factor_authentication" />
+      </ul>
+      <h3>{{ $t('admin_dash.auth.OAuth') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <StringSetting path=":pleroma.:auth.:auth_template" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:auth.:enforce_oauth_admin_scope_usage" />
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:auth.:oauth_consumer_template" />
+        </li>
+        <li>
+          <ListSetting path=":pleroma.:auth.:oauth_consumer_strategies" />
+        </li>
+        <li>
+          <IntegerSetting path=":pleroma.:oauth2.:token_expires_in" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:oauth2.:issue_new_refresh_token" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:oauth2.:clean_expired_tokens" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.auth.LDAP') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:ldap.:enabled" />
+        </li>
+        <template v-if="LDAPEnabled">
+          <li>
+            <StringSetting path=":pleroma.:ldap.:host" />
+          </li>
+          <li>
+            <IntegerSetting path=":pleroma.:ldap.:port" />
+          </li>
+          <li>
+            <BooleanSetting path=":pleroma.:ldap.:tls" />
+          </li>
+          <li>
+            <!-- CONFIRM old admin FE only supports ONE setting which is Verify, is that correct or should we allow more than one? -->
+            <MapSetting
+              :allow-new="false"
+              path=":pleroma.:ldap.:tlsopts"
+            />
+          </li>
+          <li>
+            <BooleanSetting path=":pleroma.:ldap.:ssl" />
+          </li>
+          <li>
+            <!-- CONFIRM old admin FE only supports ONE setting which is Verify, is that correct or should we allow more than one? -->
+            <MapSetting
+              :allow-new="false"
+              path=":pleroma.:ldap.:sslopts"
+            />
+          </li>
+          <li>
+            <StringSetting path=":pleroma.:ldap.:base" />
+          </li>
+          <li>
+            <StringSetting path=":pleroma.:ldap.:uid" />
+          </li>
+          <li>
+            <StringSetting path=":pleroma.:ldap.:cacertfile" />
+          </li>
+          <li>
+            <StringSetting path=":pleroma.:ldap.:mail" />
+          </li>
+        </template>
+      </ul>
+    </div>
+    <!-- CONFIRM admin token is present in AdminFE but missing in both data and descriptions?? -->
+  </div>
+</template>
+
+<script src="./auth_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index d8f769e0b..7c137e35f 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -10,6 +10,22 @@ import ModifiedIndicator from '../helpers/modified_indicator.vue'
 import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
 import { useInterfaceStore } from 'src/stores/interface'
 
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faArrowsRotate,
+  faFolderOpen,
+  faServer,
+  faDownload
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faArrowsRotate,
+  faFolderOpen,
+  faDownload,
+  faServer
+)
+
 const EmojiTab = {
   components: {
     TabSwitcher,
@@ -44,10 +60,12 @@ const EmojiTab = {
   },
 
   computed: {
+    ...SharedComputedObject(),
     pack () {
       return this.packName !== '' ? this.knownPacks[this.packName] : undefined
     },
     packMeta () {
+      if (this.packName === '') return {}
       if (this.editedMetadata[this.packName] === undefined) {
         this.editedMetadata[this.packName] = clone(this.pack.pack)
       }
@@ -98,8 +116,6 @@ const EmojiTab = {
           return Promise.reject(resp)
         }
       }).then(() => {
-        this.$refs.createPackPopover.hidePopover()
-
         this.packName = this.newPackName
         this.newPackName = ''
       })
@@ -205,8 +221,6 @@ const EmojiTab = {
           for (const pack in this.knownRemotePacks[inst]) {
             this.sortPackFiles(`${pack}@${inst}`)
           }
-
-          this.$refs.remotePackPopover.hidePopover()
         })
         .catch(data => {
           this.displayError(data)
@@ -223,8 +237,6 @@ const EmojiTab = {
         .then(data => data.json())
         .then(resp => {
           if (resp === 'ok') {
-            this.$refs.downloadPackPopover.hidePopover()
-
             return this.refreshPackList()
           } else {
             this.displayError(resp.error)
@@ -242,8 +254,6 @@ const EmojiTab = {
         .then(data => data.json())
         .then(resp => {
           if (resp === 'ok') {
-            this.$refs.additionalRemotePopover.hidePopover()
-
             return this.refreshPackList()
           } else {
             this.displayError(resp.error)
@@ -262,8 +272,6 @@ const EmojiTab = {
         .then(data => data.json())
         .then(resp => {
           if (resp === 'ok') {
-            this.$refs.additionalRemotePopover.hidePopover()
-
             return this.refreshPackList()
           } else {
             this.displayError(resp.error)
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index eefada63a..2f3b5aa40 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -1,10 +1,54 @@
-.emoji-tab {
-  .btn-group .btn:not(:first-child) {
-    margin-left: 0.5em;
+.EmojiTab {
+  .setting-list {
+    margin: 0.5em 2em;
   }
 
-  .pack-info-wrapper {
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+
+    .header-buttons {
+      display: flex;
+      flex: 1 0 auto;
+      justify-content: end;
+      align-items: end;
+
+      &:not(.btn-group) {
+        gap: 0.5em;
+      }
+
+      .header-text {
+        flex: 1 0 auto;
+      }
+    }
+
+    .button-default {
+      flex: 0 0 auto;
+      padding: 0.5em;
+      font-size: 1rem;
+    }
+
+    .popover-wrapper {
+      display: flex;
+    }
+  }
+
+  .selector-buttons,
+  .meta-buttons {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5em;
+    margin-left: 1em;
+  }
+
+  h5 {
     margin-top: 1em;
+    margin-bottom: 0.25em;
+  }
+
+  h3.toolbar {
+    align-items: end;
   }
 
   .emoji-info-input {
@@ -18,8 +62,8 @@
   }
 
   .emoji {
-    width: 32px;
-    height: 32px;
+    width: 2em;
+    height: 2em;
   }
 
   .emoji-unsaved {
@@ -30,6 +74,22 @@
     display: flex;
     flex-wrap: wrap;
     gap: 1em;
+
+    .button-unstyled {
+      display: flex;
+    }
+
+    .emoji-item,
+    .placeholder {
+      width: 2em;
+      height: 2em;
+      opacity: 0.5;
+    }
+
+    .placeholder {
+      background: var(--textFaint);
+      border-radius: 0.5em;
+    }
   }
 }
 
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 9095192fe..038f522b1 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -1,168 +1,75 @@
 <template>
   <div
-    class="emoji-tab"
+    class="EmojiTab"
     :label="$t('admin_dash.tabs.emoji')"
   >
-    <div class="setting-item">
-      <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
+    <div class="setting-section">
+      <h3 class="toolbar">
+        <span class="header-text">
+          {{ $t('admin_dash.emoji.emoji_packs') }}
+        </span>
 
-      <ul class="setting-list">
-        <h3>{{ $t('admin_dash.emoji.global_actions') }}</h3>
-
-        <li class="btn-group setting-item">
+        <span class="header-buttons btn-group">
           <button
-            class="button button-default btn"
+            class="button button-default"
             type="button"
+            :title="$t('admin_dash.emoji.reload')"
             @click="reloadEmoji"
           >
-            {{ $t('admin_dash.emoji.reload') }}
-          </button>
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="importFromFS"
-          >
-            {{ $t('admin_dash.emoji.importFS') }}
-          </button>
-        </li>
-
-        <li class="btn-group setting-item">
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="$refs.remotePackPopover.showPopover"
-          >
-            {{ $t('admin_dash.emoji.remote_packs') }}
-
-            <Popover
-              ref="remotePackPopover"
-              popover-class="emoji-tab-edit-popover popover-default"
-              trigger="click"
-              placement="bottom"
-              bound-to-selector=".emoji-tab"
-              :bound-to="{ x: 'container' }"
-              :offset="{ y: 5 }"
-            >
-              <template #content>
-                <div class="emoji-tab-popover-input">
-                  <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
-                  <input
-                    v-model="remotePackInstance"
-                    class="input"
-                    :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
-                  >
-                  <button
-                    class="button button-default btn emoji-tab-popover-button"
-                    type="button"
-                    @click="listRemotePacks"
-                  >
-                    {{ $t('admin_dash.emoji.do_list') }}
-                  </button>
-                </div>
-              </template>
-            </Popover>
-          </button>
-          <button
-            class="button button-default emoji-panel-additional-actions"
-            @click="$refs.additionalRemotePopover.showPopover"
-          >
-            <FAIcon
-              icon="chevron-down"
-            />
-
-            <Popover
-              ref="additionalRemotePopover"
-              popover-class="emoji-tab-edit-popover popover-default"
-              trigger="click"
-              placement="bottom"
-              bound-to-selector=".emoji-tab"
-              :bound-to="{ x: 'container' }"
-              :offset="{ y: 5 }"
-            >
-              <template #content>
-                <div class="emoji-tab-popover-input">
-                  <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
-                  <input
-                    v-model="newPackName"
-                    :placeholder="$t('admin_dash.emoji.new_pack_name')"
-                    class="input"
-                  >
-                  <h3>Import pack from URL</h3>
-                  <input
-                    v-model="remotePackURL"
-                    class="input"
-                    placeholder="Pack .zip URL"
-                  >
-                  <button
-                    class="button button-default btn emoji-tab-popover-button"
-                    type="button"
-                    :disabled="newPackName.trim() === '' || remotePackURL.trim() === ''"
-                    @click="downloadRemoteURLPack"
-                  >
-                    Import
-                  </button>
-                  <h3>Import pack from a file</h3>
-                  <input
-                    type="file"
-                    accept="application/zip"
-                    class="emoji-tab-popover-file input"
-                    @change="remotePackFile = $event.target.files"
-                  >
-                  <button
-                    class="button button-default btn emoji-tab-popover-button"
-                    type="button"
-                    :disabled="newPackName.trim() === '' || remotePackFile === null || remotePackFile.length === 0"
-                    @click="downloadRemoteFilePack"
-                  >
-                    Import
-                  </button>
-                </div>
-              </template>
-            </Popover>
-          </button>
-        </li>
-
-        <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3>
-
-        <li>
-          <h4>{{ $t('admin_dash.emoji.edit_pack') }}</h4>
-
-          <Select
-            v-model="packName"
-            class="form-control"
-          >
-            <option
-              value=""
-              disabled
-              hidden
-            >
-              {{ $t('admin_dash.emoji.emoji_pack') }}
-            </option>
-            <option
-              v-for="(pack, listPackName) in knownPacks"
-              :key="listPackName"
-              :label="listPackName"
-            >
-              {{ listPackName }}
-            </option>
-          </Select>
-
-          <button
-            class="button button-default btn emoji-tab-popover-button"
-            type="button"
-            @click="$refs.createPackPopover.showPopover"
-          >
-            {{ $t('admin_dash.emoji.create_pack') }}
+            <FAIcon icon="arrows-rotate" />
+            {{ $t('admin_dash.emoji.reload_short') }}
           </button>
           <Popover
-            ref="createPackPopover"
             popover-class="emoji-tab-edit-popover popover-default"
             trigger="click"
             placement="bottom"
-            bound-to-selector=".emoji-tab"
-            :bound-to="{ x: 'container' }"
-            :offset="{ y: 5 }"
           >
+            <template #trigger>
+              <button
+                class="button button-default"
+                type="button"
+                :title="$t('admin_dash.emoji.remote_packs')"
+              >
+                <FAIcon icon="download" />
+                {{ $t('admin_dash.emoji.remote_packs_short') }}
+              </button>
+            </template>
+            <template #content>
+              <div class="emoji-tab-popover-input">
+                <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
+                <input
+                  v-model="remotePackInstance"
+                  class="input"
+                  :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
+                >
+                <button
+                  class="button button-default emoji-tab-popover-button"
+                  type="button"
+                  @click="listRemotePacks"
+                >
+                  {{ $t('admin_dash.emoji.do_list') }}
+                </button>
+              </div>
+            </template>
+          </Popover>
+
+          <Popover
+            ref="additionalRemotePopover"
+            popover-class="emoji-tab-edit-popover popover-default"
+            trigger="click"
+            placement="bottom"
+          >
+            <template #trigger>
+              <button
+                class="button button-default emoji-panel-additional-actions"
+                :title="$t('admin_dash.emoji.import_pack')"
+                @click="$refs.additionalRemotePopover.showPopover"
+              >
+                <FAIcon icon="folder-open" />
+                {{ $t('admin_dash.emoji.import_pack_short') }}
+              </button>
+            </template>
+
             <template #content>
               <div class="emoji-tab-popover-input">
                 <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
@@ -171,94 +78,276 @@
                   :placeholder="$t('admin_dash.emoji.new_pack_name')"
                   class="input"
                 >
+                <h3>Import pack from URL</h3>
+                <input
+                  v-model="remotePackURL"
+                  class="input"
+                  placeholder="Pack .zip URL"
+                >
                 <button
                   class="button button-default btn emoji-tab-popover-button"
                   type="button"
-                  @click="createEmojiPack"
+                  :disabled="newPackName.trim() === '' || remotePackURL.trim() === ''"
+                  @click="downloadRemoteURLPack"
                 >
-                  {{ $t('admin_dash.emoji.create') }}
+                  Import
+                </button>
+                <h3>Import pack from a file</h3>
+                <input
+                  type="file"
+                  accept="application/zip"
+                  class="emoji-tab-popover-file input"
+                  @change="remotePackFile = $event.target.files"
+                >
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                  :disabled="newPackName.trim() === '' || remotePackFile === null || remotePackFile.length === 0"
+                  @click="downloadRemoteFilePack"
+                >
+                  Import
                 </button>
               </div>
             </template>
           </Popover>
-        </li>
-      </ul>
+        </span>
+      </h3>
+      <div class="setting-section">
+        <h4 class="toolbar">
+          {{ $t('admin_dash.emoji.edit_pack') }}
+        </h4>
+        <div class="setting-item selector-buttons">
+          <button
+            :disabled="!pack || pack.remote !== undefined"
+            class="button button-default btn"
+            type="button"
+            @click="deleteModalVisible = true"
+          >
+            {{ $t('admin_dash.emoji.delete_pack') }}
 
-      <div v-if="pack">
-        <div class="pack-info-wrapper">
-          <ul class="setting-list">
-            <li>
-              <label>
-                {{ $t('admin_dash.emoji.description') }}
+            <ConfirmModal
+              v-if="deleteModalVisible"
+              :title="$t('admin_dash.emoji.delete_title')"
+              :cancel-text="$t('status.delete_confirm_cancel_button')"
+              :confirm-text="$t('status.delete_confirm_accept_button')"
+              @cancelled="deleteModalVisible = false"
+              @accepted="deleteEmojiPack"
+            >
+              {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
+            </ConfirmModal>
+          </button>
+
+          <button
+            :disabled="!pack || pack.remote === undefined"
+            class="button button-default btn"
+            type="button"
+            @click="$refs.downloadPackPopover.showPopover"
+          >
+            {{ $t('admin_dash.emoji.download_pack') }}
+
+            <Popover
+              ref="downloadPackPopover"
+              trigger="click"
+              placement="bottom"
+              bound-to-selector=".emoji-tab"
+              popover-class="emoji-tab-edit-popover popover-default"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+            >
+              <template #content>
+                <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
+                <div>
+                  <div>
+                    <div class="emoji-tab-popover-input">
+                      <label>
+                        {{ $t('admin_dash.emoji.download_as_name') }}
+                        <input
+                          v-model="remotePackDownloadAs"
+                          class="emoji-data-input input"
+                          :placeholder="$t('admin_dash.emoji.download_as_name_full')"
+                        >
+                      </label>
+
+                      <div
+                        v-if="downloadWillReplaceLocal"
+                        class="warning"
+                      >
+                        <em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
+                      </div>
+                    </div>
+
+                    <button
+                      class="button button-default btn"
+                      type="button"
+                      @click="downloadRemotePack"
+                    >
+                      {{ $t('admin_dash.emoji.download') }}
+                    </button>
+                  </div>
+                </div>
+              </template>
+            </Popover>
+          </button>
+
+          <span class="btn-group">
+            <Select
+              v-model="packName"
+              class="form-control"
+            >
+              <option
+                value=""
+                disabled
+                hidden
+              >
+                {{ $t('admin_dash.emoji.emoji_pack') }}
+              </option>
+              <option
+                v-for="(pack, listPackName) in knownPacks"
+                :key="listPackName"
+                :label="listPackName"
+              >
+                {{ listPackName }}
+              </option>
+            </Select>
+
+            <Popover
+              ref="createPackPopover"
+              popover-class="emoji-tab-edit-popover popover-default"
+              trigger="click"
+              placement="bottom"
+            >
+              <template #trigger>
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                >
+                  {{ $t('admin_dash.emoji.create_pack') }}
+                </button>
+              </template>
+              <template #content>
+                <div class="emoji-tab-popover-input">
+                  <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
+                  <input
+                    v-model="newPackName"
+                    :placeholder="$t('admin_dash.emoji.new_pack_name')"
+                    class="input"
+                  >
+                  <button
+                    class="button button-default btn emoji-tab-popover-button"
+                    type="button"
+                    @click="createEmojiPack"
+                  >
+                    {{ $t('admin_dash.emoji.create') }}
+                  </button>
+                </div>
+              </template>
+            </Popover>
+          </span>
+        </div>
+        <h5>
+          {{ $t('admin_dash.emoji.metadata') }}
+
+          <ModifiedIndicator
+            :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
+            message-key="admin_dash.emoji.emoji_changed"
+          />
+        </h5>
+        <ul class="setting-list">
+          <li>
+            <label
+              class="setting-item"
+              :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
+            >
+              <span class="setting-label">
                 <ModifiedIndicator
                   :changed="metaEdited('description')"
                   message-key="admin_dash.emoji.metadata_changed"
                 />
-
-                <textarea
-                  v-model="packMeta.description"
-                  :disabled="pack.remote !== undefined"
-                  class="bio resize-height input"
-                />
-              </label>
-            </li>
-            <li>
-              <label>
-                {{ $t('admin_dash.emoji.homepage') }}
+                {{ $t('admin_dash.emoji.description') }}
+              </span>
+              <textarea
+                v-model="packMeta.description"
+                :disabled="!pack || pack.remote !== undefined"
+                height="4"
+                class="bio resize-height input textarea setting-control"
+              />
+            </label>
+          </li>
+          <li>
+            <label
+              class="setting-item"
+              :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
+            >
+              <span class="setting-label">
                 <ModifiedIndicator
                   :changed="metaEdited('homepage')"
                   message-key="admin_dash.emoji.metadata_changed"
                 />
+                {{ $t('admin_dash.emoji.homepage') }}
+              </span>
 
-                <input
-                  v-model="packMeta.homepage"
-                  class="emoji-info-input input"
-                  :disabled="pack.remote !== undefined"
-                >
-              </label>
-            </li>
-            <li>
-              <label>
-                {{ $t('admin_dash.emoji.fallback_src') }}
+              <input
+                v-model="packMeta.homepage"
+                class="emoji-info-input input setting-control"
+                :disabled="!pack || pack.remote !== undefined"
+              >
+            </label>
+          </li>
+          <li>
+            <label
+              class="setting-item"
+              :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
+            >
+              <span class="setting-label">
                 <ModifiedIndicator
                   :changed="metaEdited('fallback-src')"
                   message-key="admin_dash.emoji.metadata_changed"
                 />
+                {{ $t('admin_dash.emoji.fallback_src') }}
+              </span>
 
-                <input
-                  v-model="packMeta['fallback-src']"
-                  class="emoji-info-input input"
-                  :disabled="pack.remote !== undefined"
-                >
-              </label>
-            </li>
-            <li>
-              <label>
+              <input
+                v-model="packMeta['fallback-src']"
+                class="emoji-info-input input setting-control"
+                :disabled="!pack || pack.remote !== undefined"
+              >
+            </label>
+          </li>
+          <li>
+            <label
+              class="setting-item"
+              :class="{ ['-disabled']: !pack || pack.remote !== undefined }"
+            >
+              <span class="setting-label">
                 {{ $t('admin_dash.emoji.fallback_sha256') }}
+              </span>
 
-                <input
-                  v-model="packMeta['fallback-src-sha256']"
-                  :disabled="true"
-                  class="emoji-info-input input"
-                >
-              </label>
-            </li>
-            <li>
+              <input
+                v-model="packMeta['fallback-src-sha256']"
+                :disabled="!pack || pack.remote !== undefined"
+                class="emoji-info-input input setting-control"
+              >
+            </label>
+          </li>
+          <li>
+            <div class="setting-item">
               <Checkbox
                 v-model="packMeta['share-files']"
-                :disabled="pack.remote !== undefined"
+                :disabled="!pack || pack.remote !== undefined"
+                class="setting-label setting-control"
               >
+                <ModifiedIndicator
+                  :changed="metaEdited('share-files')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
                 {{ $t('admin_dash.emoji.share') }}
               </Checkbox>
-
-              <ModifiedIndicator
-                :changed="metaEdited('share-files')"
-                message-key="admin_dash.emoji.metadata_changed"
-              />
-            </li>
-            <li class="btn-group">
+            </div>
+          </li>
+          <li>
+            <div class="meta-buttons">
               <button
-                v-if="pack.remote === undefined"
+                v-if="pack && pack.remote === undefined"
                 class="button button-default btn"
                 type="button"
                 @click="savePackMetadata"
@@ -266,148 +355,89 @@
                 {{ $t('admin_dash.emoji.save_meta') }}
               </button>
               <button
-                v-if="pack.remote === undefined"
+                v-if="pack && pack.remote === undefined"
                 class="button button-default btn"
                 type="button"
                 @click="savePackMetadata"
               >
                 {{ $t('admin_dash.emoji.revert_meta') }}
               </button>
-
-              <button
-                v-if="pack.remote === undefined"
-                class="button button-default btn"
-                type="button"
-                @click="deleteModalVisible = true"
-              >
-                {{ $t('admin_dash.emoji.delete_pack') }}
-
-                <ConfirmModal
-                  v-if="deleteModalVisible"
-                  :title="$t('admin_dash.emoji.delete_title')"
-                  :cancel-text="$t('status.delete_confirm_cancel_button')"
-                  :confirm-text="$t('status.delete_confirm_accept_button')"
-                  @cancelled="deleteModalVisible = false"
-                  @accepted="deleteEmojiPack"
-                >
-                  {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
-                </ConfirmModal>
-              </button>
-
-              <button
-                v-if="pack.remote !== undefined"
-                class="button button-default btn"
-                type="button"
-                @click="$refs.downloadPackPopover.showPopover"
-              >
-                {{ $t('admin_dash.emoji.download_pack') }}
-
-                <Popover
-                  ref="downloadPackPopover"
-                  trigger="click"
-                  placement="bottom"
-                  bound-to-selector=".emoji-tab"
-                  popover-class="emoji-tab-edit-popover popover-default"
-                  :bound-to="{ x: 'container' }"
-                  :offset="{ y: 5 }"
-                >
-                  <template #content>
-                    <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
-                    <div>
-                      <div>
-                        <div class="emoji-tab-popover-input">
-                          <label>
-                            {{ $t('admin_dash.emoji.download_as_name') }}
-                            <input
-                              v-model="remotePackDownloadAs"
-                              class="emoji-data-input input"
-                              :placeholder="$t('admin_dash.emoji.download_as_name_full')"
-                            >
-                          </label>
-
-                          <div
-                            v-if="downloadWillReplaceLocal"
-                            class="warning"
-                          >
-                            <em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
-                          </div>
-                        </div>
-
-                        <button
-                          class="button button-default btn"
-                          type="button"
-                          @click="downloadRemotePack"
-                        >
-                          {{ $t('admin_dash.emoji.download') }}
-                        </button>
-                      </div>
-                    </div>
-                  </template>
-                </Popover>
-              </button>
-            </li>
-          </ul>
-        </div>
-
-        <ul class="setting-list">
-          <h4>
-            {{ $t('admin_dash.emoji.files') }}
-
-            <ModifiedIndicator
-              v-if="pack"
-              :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
-              message-key="admin_dash.emoji.emoji_changed"
-            />
-          </h4>
-
-          <div
-            v-if="pack"
-            class="emoji-list"
-          >
-            <EmojiEditingPopover
-              v-if="pack.remote === undefined"
-              placement="bottom"
-              new-upload
-              :title="$t('admin_dash.emoji.adding_new')"
-              :pack-name="packName"
-              @update-pack-files="updatePackFiles"
-              @display-error="displayError"
-            >
-              <template #trigger>
-                <FAIcon
-                  icon="plus"
-                  size="2x"
-                  :title="$t('admin_dash.emoji.add_file')"
-                />
-              </template>
-            </EmojiEditingPopover>
-
-            <EmojiEditingPopover
-              v-for="(file, shortcode) in pack.files"
-              ref="emojiPopovers"
-              :key="shortcode"
-              placement="top"
-              :title="$t(`admin_dash.emoji.${pack.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
-              :shortcode="shortcode"
-              :file="file"
-              :pack-name="packName"
-              :remote="pack.remote"
-              :known-local-packs="knownLocalPacks"
-              @update-pack-files="updatePackFiles"
-              @display-error="displayError"
-            >
-              <template #trigger>
-                <StillImage
-                  class="emoji"
-                  :src="emojiAddr(file)"
-                  :title="`:${shortcode}:`"
-                  :alt="`:${shortcode}:`"
-                />
-              </template>
-            </EmojiEditingPopover>
-          </div>
+            </div>
+          </li>
         </ul>
+        <h5>
+          {{ $t('admin_dash.emoji.files') }}
+
+          <ModifiedIndicator
+            :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
+            message-key="admin_dash.emoji.emoji_changed"
+          />
+        </h5>
+
+        <div
+          class="emoji-list setting-list"
+        >
+          <EmojiEditingPopover
+            v-if="pack && pack.remote === undefined"
+            class="emoji-item"
+            placement="bottom"
+            new-upload
+            :title="$t('admin_dash.emoji.adding_new')"
+            :pack-name="packName"
+            @update-pack-files="updatePackFiles"
+            @display-error="displayError"
+          >
+            <template #trigger>
+              <FAIcon
+                icon="plus"
+                size="2x"
+                :title="$t('admin_dash.emoji.add_file')"
+              />
+            </template>
+          </EmojiEditingPopover>
+          <template v-if="!pack">
+            <div
+              v-for="(_, i) in new Array(20)"
+              :key="i"
+              class="placeholder"
+            />
+          </template>
+
+
+          <EmojiEditingPopover
+            v-for="(file, shortcode) in (pack?.files || [])"
+            ref="emojiPopovers"
+            :key="shortcode"
+            placement="top"
+            :title="$t(`admin_dash.emoji.${pack?.remote === undefined ? 'editing' : 'copying'}`, [shortcode])"
+            :shortcode="shortcode"
+            :file="file"
+            :pack-name="packName"
+            :remote="pack?.remote"
+            :known-local-packs="knownLocalPacks"
+            @update-pack-files="updatePackFiles"
+            @display-error="displayError"
+          >
+            <template #trigger>
+              <StillImage
+                class="emoji"
+                :src="emojiAddr(file)"
+                :title="`:${shortcode}:`"
+                :alt="`:${shortcode}:`"
+              />
+            </template>
+          </EmojiEditingPopover>
+        </div>
       </div>
+      <h3>{{ $t('admin_dash.emoji.advanced') }}</h3>
+      <button
+        class="button button-default btn"
+        type="button"
+        @click="importFromFS"
+      >
+        <FAIcon icon="server" />
+        {{ $t('admin_dash.emoji.importFS') }}
+      </button>
     </div>
   </div>
 </template>
diff --git a/src/components/settings_modal/admin_tabs/federation_tab.js b/src/components/settings_modal/admin_tabs/federation_tab.js
new file mode 100644
index 000000000..97b4e0040
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/federation_tab.js
@@ -0,0 +1,34 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+import ListTupleSetting from '../helpers/list_tuple_setting.vue'
+import MapSetting from '../helpers/map_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const FederationTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    IntegerSetting,
+    StringSetting,
+    AttachmentSetting,
+    ListSetting,
+    ListTupleSetting,
+    GroupSetting,
+    MapSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default FederationTab
diff --git a/src/components/settings_modal/admin_tabs/federation_tab.vue b/src/components/settings_modal/admin_tabs/federation_tab.vue
new file mode 100644
index 000000000..29a19e0b7
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/federation_tab.vue
@@ -0,0 +1,68 @@
+<template>
+  <div :label="$t('admin_dash.tabs.federation')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.federation.global') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:federating" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:skip_thread_containment" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:external_user_synchronization" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.federation.restrictions') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <MapSetting path=":pleroma.:instance.:quarantined_instances" />
+        </li>
+        <li>
+          <MapSetting path=":pleroma.:instance.:rejected_instances" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.federation.activitypub') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:allow_relay" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:activitypub.:unfollow_blocked" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:activitypub.:outgoing_blocks" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:activitypub.:blockers_visible" />
+        </li>
+        <li>
+          <IntegerSetting path=":pleroma.:activitypub.:follow_handshake_timeout" />
+        </li>
+        <li>
+          <IntegerSetting path=":pleroma.:activitypub.:note_replies_output_limit" />
+        </li>
+        <li>
+          <IntegerSetting path=":pleroma.:instance.:federation_incoming_replies_max_depth" />
+        </li>
+        <li>
+          <IntegerSetting path=":pleroma.:instance.:federation_reachability_timeout_days" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:allow_relay" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:activitypub.:sign_object_fetches" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:activitypub.:authorized_fetch_mode" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:activitypub.:client_api_enabled" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./federation_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index a9a4777da..c63e76214 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -44,10 +44,10 @@ const FrontendsTab = {
     }
   },
   computed: {
+    ...SharedComputedObject(),
     frontends () {
       return this.$store.state.adminSettings.frontends
-    },
-    ...SharedComputedObject()
+    }
   },
   methods: {
     canInstall (frontend) {
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
index 3bc347087..27c1fdc55 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -1,8 +1,24 @@
-.frontends-tab {
+.FrontendsTab {
   .cards-list {
     padding: 0;
   }
 
+  li.frontend-card {
+    display: flex;
+    margin: 0;
+    flex-direction: column;
+  }
+
+  .frontend-buttons {
+    margin-top: 0.5em;
+    display: flex;
+    justify-content: end;
+    gap: 0.5em;
+    flex-wrap: wrap;
+    flex: 1 0 auto;
+    align-items: end;
+  }
+
   .relative {
     position: relative;
   }
@@ -16,10 +32,26 @@
     inset: 0;
   }
 
+  h5 {
+    margin: 0;
+    font-size: 1.15em
+  }
+
+  dl {
+    margin-left: 1em;
+  }
+
+  dt {
+    margin-top: 0.5em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: hidden;
+  }
+
   dd {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow-x: hidden;
-    max-width: 10em;
   }
+
 }
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 954d9ef51..d0d764395 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -1,17 +1,17 @@
 <template>
   <div
-    class="frontends-tab"
+    class="FrontendsTab"
     :label="$t('admin_dash.tabs.frontends')"
   >
-    <div class="setting-item">
-      <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.frontend.title') }}</h3>
       <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
       <ul
         v-if="adminDraft"
         class="setting-list"
       >
         <li>
-          <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
+          <h4>{{ $t('admin_dash.frontend.default_frontend') }}</h4>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
           <ul class="setting-list">
             <li>
@@ -38,13 +38,14 @@
           v-if="working"
           class="overlay"
         />
-        <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
+        <h4>{{ $t('admin_dash.frontend.available_frontends') }}</h4>
         <ul class="cards-list">
           <li
             v-for="frontend in frontends"
             :key="frontend.name"
+            class="frontend-card"
           >
-            <strong>{{ frontend.name }}</strong>
+            <h5>{{ frontend.name }}</h5>
             {{ ' ' }}
             <span v-if="adminDraft && adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name">
               <i18n-t
@@ -89,7 +90,7 @@
                 >{{ frontend.build_url }}</a>
               </dd>
             </dl>
-            <div>
+            <div class="frontend-buttons">
               <span class="btn-group">
                 <button
                   class="button button-default btn"
diff --git a/src/components/settings_modal/admin_tabs/http_tab.js b/src/components/settings_modal/admin_tabs/http_tab.js
new file mode 100644
index 000000000..82e2bb010
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/http_tab.js
@@ -0,0 +1,46 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+import TupleSetting from '../helpers/tuple_setting.vue'
+import MapSetting from '../helpers/map_setting.vue'
+import ProxySetting from '../helpers/proxy_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { get } from 'lodash'
+
+const HTTPTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    AttachmentSetting,
+    MapSetting,
+    GroupSetting,
+    ListSetting,
+    TupleSetting,
+    ProxySetting
+  },
+  computed: {
+    ...SharedComputedObject(),
+    sslOptions () {
+      const desc = get(this.$store.state.adminSettings.descriptions, ':pleroma.:http.:adapter.:ssl_options.:versions')
+      return new Set(desc.suggestions.map(option => ({
+        label: option.replace(':tlsv', 'TLS v'),
+        value: option
+      })))
+    },
+  }
+}
+
+export default HTTPTab
diff --git a/src/components/settings_modal/admin_tabs/http_tab.vue b/src/components/settings_modal/admin_tabs/http_tab.vue
new file mode 100644
index 000000000..9ea067be8
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/http_tab.vue
@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="LinksTab"
+    :label="$t('admin_dash.tabs.http')"
+  >
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.http.outbound') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <ProxySetting
+            hide-description
+            path=":pleroma.:http.:proxy_url"
+          />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:http.:send_user_agent" />
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:http.:user_agent" />
+        </li>
+        <li>
+          <ListSetting
+            override-available-options
+            :options="sslOptions"
+            path=":pleroma.:http.:adapter.:ssl_options.:versions"
+          />
+        </li>
+        <li>
+          <GroupSetting path=":pleroma.:http.:adapter" />
+        </li>
+      </ul>
+    </div>
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.http.incoming') }}</h3>
+      <ul class="setting-list">
+        <h4>{{ $t('admin_dash.http.security') }}</h4>
+        <li>
+          <BooleanSetting path=":pleroma.:http_security.:enabled" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:http_security.:sts" />
+        </li>
+        <li>
+          <IntegerSetting path=":pleroma.:http_security.:sts_max_age" />
+        </li>
+        <li>
+          <IntegerSetting path=":pleroma.:http_security.:ct_max_age" />
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:http_security.:referrer_policy" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:http_security.:allow_unsafe_eval" />
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:http_security.:report_url" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.http.web_push') }}</h3>
+      <p>{{ $t('admin_dash.http.web_push_description') }}</p>
+      <ul class="setting-list">
+        <li>
+          <StringSetting
+            path=":web_push_encryption.:vapid_details.:subject"
+          />
+        </li>
+        <li>
+          <StringSetting
+            path=":web_push_encryption.:vapid_details.:public_key"
+          />
+        </li>
+        <li>
+          <StringSetting
+            path=":web_push_encryption.:vapid_details.:private_key"
+          />
+        </li>
+      </ul>
+      <!-- CONFIRM admin_token should go there but something is wrong with both data and description. -->
+      <!-- given the nature of the setting it's probably better to not expose it and deprecate it on backend side -->
+    </div>
+  </div>
+</template>
+
+<!--<style lang="scss" src="./http_tab.scss"></style>-->
+
+<script src="./http_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.js b/src/components/settings_modal/admin_tabs/instance_tab.js
index b07bafe8f..ddbd58a88 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.js
+++ b/src/components/settings_modal/admin_tabs/instance_tab.js
@@ -2,18 +2,15 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import StringSetting from '../helpers/string_setting.vue'
+import ColorSetting from '../helpers/color_setting.vue'
 import GroupSetting from '../helpers/group_setting.vue'
 import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+import PWAManifestIconsSetting from '../helpers/pwa_manifest_icons_setting.vue'
+import MapSetting from '../helpers/map_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faGlobe
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faGlobe
-)
+import { get } from 'lodash'
 
 const InstanceTab = {
   provide () {
@@ -27,11 +24,29 @@ const InstanceTab = {
     ChoiceSetting,
     IntegerSetting,
     StringSetting,
+    ColorSetting,
     AttachmentSetting,
+    ListSetting,
+    PWAManifestIconsSetting,
+    MapSetting,
     GroupSetting
   },
   computed: {
-    ...SharedComputedObject()
+    ...SharedComputedObject(),
+    providersOptions () {
+      const desc = get(this.$store.state.adminSettings.descriptions, [':pleroma', 'Pleroma.Web.Metadata', ':providers'])
+      return new Set(desc.suggestions.map(option => ({
+        label: option.replace('Pleroma.Web.Metadata.Providers.', ''),
+        value: option
+      })))
+    },
+    limitLocalContentOptions () {
+      const desc = get(this.$store.state.adminSettings.descriptions, [':pleroma', ':instance', ':limit_to_local_content'])
+      return new Set(desc.suggestions.map(option => ({
+        label: option !== 'false' ? this.$t('admin_dash.instance.' + option) : this.$t('general.no'),
+        value: option
+      })))
+    }
   }
 }
 
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index 32e8df259..fa55cef41 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -1,17 +1,13 @@
 <template>
   <div :label="$t('admin_dash.tabs.instance')">
-    <div class="setting-item">
-      <h2>{{ $t('admin_dash.instance.instance') }}</h2>
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.instance.instance') }}</h3>
       <ul class="setting-list">
         <li>
           <StringSetting path=":pleroma.:instance.:name" />
         </li>
-        <!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
-        <li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
-          <AttachmentSetting
-            compact
-            path=":pleroma.:instance.:favicon"
-          />
+        <li>
+          <StringSetting path=":pleroma.:instance.:contact_username" />
         </li>
         <li>
           <StringSetting path=":pleroma.:instance.:email" />
@@ -22,87 +18,68 @@
         <li>
           <StringSetting path=":pleroma.:instance.:short_description" />
         </li>
+        <li>
+          <ListSetting
+            force-new
+            ignore-suggestions
+            path=":pleroma.:instance.:languages"
+          />
+        </li>
+        <li>
+          <StringSetting path=":pleroma.:instance.:status_page" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.instance.branding') }}</h3>
+      <ul class="setting-list">
+        <!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
+        <li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
+          <AttachmentSetting
+            compact
+            path=":pleroma.:instance.:favicon"
+          />
+        </li>
         <li>
           <AttachmentSetting
             compact
             path=":pleroma.:instance.:instance_thumbnail"
           />
         </li>
+        <h4>{{ $t('admin_dash.instance.pwa.manifest') }}</H4>
+        <li>
+          <PWAManifestIconsSetting path=":pleroma.:manifest.:icons" />
+        </li>
+        <li>
+          <ColorSetting hide-draft-buttons path=":pleroma.:manifest.:theme_color" />
+        </li>
+        <li>
+          <ColorSetting hide-draft-buttons path=":pleroma.:manifest.:background_color" />
+        </li>
+        <li>
+          <GroupSetting path=":pleroma.:manifest" />
+        </li>
+        <h4>{{ $t('admin_dash.instance.misc_brand') }}</H4>
         <li>
           <AttachmentSetting path=":pleroma.:instance.:background_image" />
         </li>
       </ul>
-    </div>
-    <div class="setting-item">
-      <h2>{{ $t('admin_dash.instance.registrations') }}</h2>
+      <h3>{{ $t('admin_dash.instance.rich_metadata') }}</h3>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path=":pleroma.:instance.:registrations_open" />
-          <ul class="setting-list suboptions">
-            <li>
-              <BooleanSetting
-                path=":pleroma.:instance.:invites_enabled"
-                parent-path=":pleroma.:instance.:registrations_open"
-                parent-invert
-              />
-            </li>
-          </ul>
+          <ListSetting
+            override-available-options
+            :options="providersOptions"
+            :path="[':pleroma','Pleroma.Web.Metadata', ':providers']"
+          />
         </li>
         <li>
-          <BooleanSetting path=":pleroma.:instance.:birthday_required" />
-          <ul class="setting-list suboptions">
-            <li>
-              <IntegerSetting
-                path=":pleroma.:instance.:birthday_min_age"
-                parent-path=":pleroma.:instance.:birthday_required"
-              />
-            </li>
-          </ul>
-        </li>
-        <li>
-          <BooleanSetting path=":pleroma.:instance.:account_activation_required" />
-        </li>
-        <li>
-          <BooleanSetting path=":pleroma.:instance.:account_approval_required" />
-        </li>
-        <li>
-          <h3>{{ $t('admin_dash.instance.captcha_header') }}</h3>
-          <ul class="setting-list">
-            <li>
-              <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']" />
-              <ul class="setting-list suboptions">
-                <li>
-                  <ChoiceSetting
-                    :path="[':pleroma', 'Pleroma.Captcha', ':method']"
-                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-                    :option-label-map="{
-                      'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
-                      'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
-                    }"
-                  />
-                  <IntegerSetting
-                    :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
-                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
-                  />
-                </li>
-                <li
-                  v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
-                >
-                  <h4>{{ $t('admin_dash.instance.kocaptcha') }}</h4>
-                  <ul class="setting-list">
-                    <li>
-                      <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']" />
-                    </li>
-                  </ul>
-                </li>
-              </ul>
-            </li>
-          </ul>
+          <BooleanSetting
+            :path="[':pleroma','Pleroma.Web.Metadata', ':unfurl_nsfw']"
+          />
         </li>
       </ul>
     </div>
-    <div class="setting-item">
-      <h2>{{ $t('admin_dash.instance.access') }}</h2>
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.instance.access') }}</h3>
       <ul class="setting-list">
         <li>
           <BooleanSetting
@@ -115,6 +92,8 @@
           <ChoiceSetting
             override-backend-description
             override-backend-description-label
+            override-available-options
+            :options="limitLocalContentOptions"
             path=":pleroma.:instance.:limit_to_local_content"
           />
         </li>
diff --git a/src/components/settings_modal/admin_tabs/job_queues_tab.js b/src/components/settings_modal/admin_tabs/job_queues_tab.js
new file mode 100644
index 000000000..b0f583c55
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/job_queues_tab.js
@@ -0,0 +1,34 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import TupleSetting from '../helpers/tuple_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const JobQueuesTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    TupleSetting,
+    AttachmentSetting,
+    GroupSetting,
+    ListSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default JobQueuesTab
diff --git a/src/components/settings_modal/admin_tabs/job_queues_tab.vue b/src/components/settings_modal/admin_tabs/job_queues_tab.vue
new file mode 100644
index 000000000..ad54d57f4
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/job_queues_tab.vue
@@ -0,0 +1,157 @@
+<template>
+  <div :label="$t('admin_dash.tabs.job_queues')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.job_queues.Gun.title') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <h4>{{ $t('admin_dash.job_queues.Gun.connections_pools') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting path=":pleroma.:connections_pool.:connect_timeout" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:connections_pool.:connection_acquisition_retries" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:connections_pool.:connection_acquisition_wait" />
+            </li>
+            <li>
+              <!-- CONFIRM what is this -->
+              <IntegerSetting path=":pleroma.:connections_pool.:retry" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:connections_pool.:max_connections" />
+            </li>
+            <li>
+              <!-- CONFIRM what is this -->
+              <IntegerSetting path=":pleroma.:connections_pool.:max_idle_time" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:connections_pool.:reclaim_multiplier" />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.job_queues.Gun.pools.title') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <h5>{{ $t('admin_dash.job_queues.Gun.pools.default') }}</h5>
+              <ul class="setting-list suboptions">
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:default.:size" />
+                </li>
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:default.:max_waiting" />
+                </li>
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:default.:recv_timeout" />
+                </li>
+              </ul>
+              <GroupSetting path=":pleroma.:pools.:default" />
+            </li>
+            <li>
+              <h5>{{ $t('admin_dash.job_queues.Gun.pools.federation') }}</h5>
+              <ul class="setting-list suboptions">
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:federation.:size" />
+                </li>
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:federation.:max_waiting" />
+                </li>
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:federation.:recv_timeout" />
+                </li>
+              </ul>
+              <GroupSetting path=":pleroma.:pools.:federation" />
+            </li>
+            <li>
+              <!-- CONFIRM what is this? -->
+              <h5>{{ $t('admin_dash.job_queues.Gun.pools.rich_media') }}</h5>
+              <ul class="setting-list suboptions">
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:rich_media.:size" />
+                </li>
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:rich_media.:max_waiting" />
+                </li>
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:rich_media.:recv_timeout" />
+                </li>
+              </ul>
+              <GroupSetting path=":pleroma.:pools.:rich_media" />
+            </li>
+            <li>
+              <h5>{{ $t('admin_dash.job_queues.Gun.pools.media') }}</h5>
+              <ul class="setting-list suboptions">
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:media.:size" />
+                </li>
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:media.:max_waiting" />
+                </li>
+                <li>
+                  <IntegerSetting path=":pleroma.:pools.:media.:recv_timeout" />
+                </li>
+              </ul>
+              <GroupSetting path=":pleroma.:pools.:media" />
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.job_queues.Hackney.title') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <h4>{{ $t('admin_dash.job_queues.Hackney.federation') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting path=":pleroma.:hackney_pools.:federation.:max_connections" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:hackney_pools.:federation.:timeout" />
+            </li>
+          </ul>
+          <GroupSetting path=":pleroma.:hackney_pools.:federation" />
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.job_queues.Hackney.media') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting path=":pleroma.:hackney_pools.:media.:max_connections" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:hackney_pools.:media.:timeout" />
+            </li>
+          </ul>
+          <GroupSetting path=":pleroma.:hackney_pools.:media" />
+        </li>
+        <li>
+          <!-- CONFIRM what is this -->
+          <h4>{{ $t('admin_dash.job_queues.Hackney.rich_media') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting path=":pleroma.:hackney_pools.:rich_media.:max_connections" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:hackney_pools.:rich_media.:timeout" />
+            </li>
+          </ul>
+          <GroupSetting path=":pleroma.:hackney_pools.:rich_media" />
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.job_queues.Hackney.upload') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting path=":pleroma.:hackney_pools.:upload.:max_connections" />
+            </li>
+            <li>
+              <IntegerSetting path=":pleroma.:hackney_pools.:upload.:timeout" />
+            </li>
+          </ul>
+          <GroupSetting path=":pleroma.:hackney_pools.:upload" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./job_queues_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.js b/src/components/settings_modal/admin_tabs/limits_tab.js
index acf7d3436..c1126f49c 100644
--- a/src/components/settings_modal/admin_tabs/limits_tab.js
+++ b/src/components/settings_modal/admin_tabs/limits_tab.js
@@ -4,14 +4,6 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import StringSetting from '../helpers/string_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faGlobe
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faGlobe
-)
 
 const LimitsTab = {
   components: {
diff --git a/src/components/settings_modal/admin_tabs/limits_tab.vue b/src/components/settings_modal/admin_tabs/limits_tab.vue
index ef4b9271d..04afde020 100644
--- a/src/components/settings_modal/admin_tabs/limits_tab.vue
+++ b/src/components/settings_modal/admin_tabs/limits_tab.vue
@@ -1,10 +1,10 @@
 <template>
   <div :label="$t('admin_dash.tabs.limits')">
-    <div class="setting-item">
-      <h2>{{ $t('admin_dash.limits.arbitrary_limits') }}</h2>
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.limits.arbitrary_limits') }}</h3>
       <ul class="setting-list">
         <li>
-          <h3>{{ $t('admin_dash.limits.posts') }}</h3>
+          <h4>{{ $t('admin_dash.limits.posts') }}</h4>
           <ul class="setting-list">
             <li>
               <IntegerSetting
@@ -24,7 +24,7 @@
           </ul>
         </li>
         <li>
-          <h3>{{ $t('admin_dash.limits.uploads') }}</h3>
+          <h4>{{ $t('admin_dash.limits.uploads') }}</h4>
           <ul class="setting-list">
             <li>
               <IntegerSetting
@@ -50,7 +50,7 @@
           </ul>
         </li>
         <li>
-          <h3>{{ $t('admin_dash.limits.users') }}</h3>
+          <h4>{{ $t('admin_dash.limits.users') }}</h4>
           <ul class="setting-list">
             <li>
               <IntegerSetting
@@ -74,7 +74,7 @@
               />
             </li>
             <li>
-              <h4>{{ $t('admin_dash.limits.profile_fields') }}</h4>
+              <h5>{{ $t('admin_dash.limits.profile_fields') }}</h5>
               <ul class="setting-list">
                 <li>
                   <IntegerSetting
@@ -108,7 +108,7 @@
               </ul>
             </li>
             <li>
-              <h4>{{ $t('admin_dash.limits.user_uploads') }}</h4>
+              <h5>{{ $t('admin_dash.limits.user_uploads') }}</h5>
               <ul class="setting-list">
                 <li>
                   <IntegerSetting
@@ -128,6 +128,25 @@
             </li>
           </ul>
         </li>
+        <li>
+          <h4>{{ $t('admin_dash.limits.other') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:max_report_comment_size"
+                draft-mode
+              />
+            </li>
+            <li>
+              <IntegerSetting
+                source="admin"
+                path=":pleroma.:instance.:max_endorsed_users"
+                draft-mode
+              />
+            </li>
+          </ul>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/admin_tabs/links_tab.js b/src/components/settings_modal/admin_tabs/links_tab.js
new file mode 100644
index 000000000..026b099a5
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/links_tab.js
@@ -0,0 +1,109 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { get } from 'lodash'
+
+const LinksTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    AttachmentSetting,
+    GroupSetting,
+    ListSetting,
+    Checkbox
+  },
+  computed: {
+    classIsPresent () {
+      return this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][':class'] !== false
+    },
+    relIsPresent () {
+      return this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][':rel'] !== false
+    },
+    truncateIsPresent () {
+      return this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Formatter'][':truncate'] !== false
+    },
+    truncateDescription () {
+      return get(this.$store.state.adminSettings.descriptions, [':pleroma', 'Pleroma.Formatter', ':truncate'])
+    },
+    ttlSettersOptions () {
+      const desc = get(this.$store.state.adminSettings.descriptions, ':pleroma.:rich_media.:ttl_setters')
+      return new Set(desc.suggestions.map(option => ({
+        label: option.replace('Pleroma.Web.RichMedia.Parser.TTL.', ''),
+        value: option
+      })))
+    },
+    parsersOptions () {
+      const desc = get(this.$store.state.adminSettings.descriptions, ':pleroma.:rich_media.:parsers')
+      return new Set(desc.suggestions.map(option => ({
+        label: option.replace('Pleroma.Web.RichMedia.Parsers.', ''),
+        value: option
+      })))
+    },
+    validateTLDOptions () {
+      return [{
+        label: this.$t('general.yes'),
+        value: true
+      }, {
+        label: this.$t('general.no'),
+        value: false
+      }, {
+        label: this.$t('admin_dash.links.no_scheme'),
+        value: ':no_scheme'
+      }]
+    },
+    mediaProxyEnabled () {
+      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][':enabled']
+    },
+    mediaInvalidationProvider () {
+      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][':invalidation'][':provider']
+    },
+    ...SharedComputedObject()
+  },
+  methods: {
+    checkRel (e) {
+      this.$store.commit(
+        'updateAdminDraft',
+        {
+          path: [':pleroma','Pleroma.Formatter',':rel'],
+          value: e ? '' : false
+        }
+      )
+    },
+    checkClass (e) {
+      this.$store.commit(
+        'updateAdminDraft',
+        {
+          path: [':pleroma','Pleroma.Formatter',':class'],
+          value: e ? '' : false
+        }
+      )
+    },
+    checkTruncate (e) {
+      this.$store.commit(
+        'updateAdminDraft',
+        {
+          path: [':pleroma','Pleroma.Formatter',':truncate'],
+          value: e ? 20 : false
+        }
+      )
+    }
+  }
+}
+
+export default LinksTab
diff --git a/src/components/settings_modal/admin_tabs/links_tab.vue b/src/components/settings_modal/admin_tabs/links_tab.vue
new file mode 100644
index 000000000..1d446a0dd
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/links_tab.vue
@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="LinksTab"
+    :label="$t('admin_dash.tabs.media_proxy')"
+  >
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.links.link_previews') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:rich_media.:enabled" />
+        </li>
+        <li>
+          <ListSetting
+            override-available-options
+            :options="parsersOptions"
+            path=":pleroma.:rich_media.:parsers"
+          />
+        </li>
+        <li>
+          <IntegerSetting
+            path=":pleroma.:rich_media.:timeout"
+          />
+        </li>
+        <li>
+          <ListSetting
+            override-available-options
+            :options="ttlSettersOptions"
+            path=":pleroma.:rich_media.:ttl_setters"
+          />
+        </li>
+        <li>
+          <ListSetting
+            path=":pleroma.:rich_media.:ignore_tld"
+            ignore-suggestions
+          />
+        </li>
+        <li>
+          <ListSetting path=":pleroma.:rich_media.:ignore_hosts" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./links_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/mailer_tab.js b/src/components/settings_modal/admin_tabs/mailer_tab.js
new file mode 100644
index 000000000..44b2f33df
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/mailer_tab.js
@@ -0,0 +1,65 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import ColorSetting from '../helpers/color_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const MailerTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    AttachmentSetting,
+    ColorSetting,
+    GroupSetting
+  },
+  computed: {
+    adaptersLabels () {
+      const prefix = 'Swoosh.Adapters.'
+      const descriptions = this.$store.state.adminSettings.descriptions
+      const options = descriptions[':pleroma']['Pleroma.Emails.Mailer'][':adapter'].suggestions
+
+      return Object.fromEntries(options.map(value => [
+        value, value.replace(prefix, '')
+      ]))
+    },
+    startTLSLabels () {
+      return {
+        ':always': this.$t('admin_dash.generic_enforcement.always'),
+        ':if_available': this.$t('admin_dash.generic_enforcement.if_available'),
+        ':never': this.$t('admin_dash.generic_enforcement.never')
+      }
+      // return Object.fromEntries(options.map(value => [
+      //   value, value.replace(prefix, '')
+      // ]))
+    },
+    adapter () {
+      return this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Emails.Mailer'][':adapter']
+    },
+    mailerEnabled () {
+      return this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Emails.Mailer'][':enabled']
+    },
+    ...SharedComputedObject()
+  },
+  methods: {
+    adapterHasKey (key) {
+      const descriptions = this.$store.state.adminSettings.descriptions
+      const mailerStuff = descriptions[':pleroma']['Pleroma.Emails.Mailer']
+      const adapterStuff = mailerStuff[':subgroup,' + this.adapter]
+      return Object.prototype.hasOwnProperty.call(adapterStuff, key)
+    }
+  }
+}
+
+export default MailerTab
diff --git a/src/components/settings_modal/admin_tabs/mailer_tab.vue b/src/components/settings_modal/admin_tabs/mailer_tab.vue
new file mode 100644
index 000000000..53d8cd7f9
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/mailer_tab.vue
@@ -0,0 +1,179 @@
+<template>
+  <div :label="$t('admin_dash.tabs.mailer')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.mailer.styling') }}</h3>
+      <ul class="setting-list">
+        <h4>{{ $t('admin_dash.mailer.assets') }}</h4>
+        <li>
+          <StringSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':logo']" />
+        </li>
+        <h4>{{ $t('admin_dash.mailer.colors') }}</h4>
+        <li>
+          <ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':background_color']" />
+        </li>
+        <li>
+          <ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':content_background_color']" />
+        </li>
+        <li>
+          <ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':header_color']" />
+        </li>
+        <li>
+          <ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':text_color']" />
+        </li>
+        <li>
+          <ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':link_color']" />
+        </li>
+        <li>
+          <ColorSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling', ':text_muted_color']" />
+        </li>
+        <li>
+          <GroupSetting :path="[':pleroma','Pleroma.Emails.UserEmail', ':styling']" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.mailer.adapter') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting :path="[':pleroma','Pleroma.Emails.Mailer',':enabled']" />
+        </li>
+        <template v-if="mailerEnabled">
+          <li>
+            <ChoiceSetting
+              :path="[':pleroma','Pleroma.Emails.Mailer',':adapter']"
+              :option-label-map="adaptersLabels"
+            />
+            <h4>{{ $t('admin_dash.mailer.auth') }}</h4>
+            <ul class="setting-list suboptions">
+              <li v-if="adapterHasKey(':api_key')">
+                <!-- authentication info -->
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':api_key']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':access_key')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':access_key']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':access_token')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':access_token']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':username')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':username']"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':password')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':password']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':secret')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':secret']"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':auth')">
+                <ChoiceSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':auth']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+
+              <!-- server info -->
+              <li v-if="adapterHasKey(':relay')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':relay']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':ssl')">
+                <BooleanSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':ssl']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':tls')">
+                <ChoiceSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':tls']"
+                  :option-label-map="startTLSLabels"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':port')">
+                <IntegerSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':port']"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':server_id')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':server_id']"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':region')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':region']"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':domain')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':domain']"
+                  :subgroup="adapter"
+                />
+              </li>
+
+              <!-- sendmail exclusive -->
+              <li v-if="adapterHasKey(':cmd_path')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':cmd_path']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':cmd_args')">
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':cmd_args']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':qmail')">
+                <BooleanSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':qmail']"
+                  :password="true"
+                  :subgroup="adapter"
+                />
+              </li>
+              <li v-if="adapterHasKey(':retries')">
+                <IntegerSetting
+                  :path="[':pleroma','Pleroma.Emails.Mailer',':retries']"
+                  :subgroup="adapter"
+                />
+              </li>
+            </ul>
+          </li>
+        </template>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./mailer_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/media_proxy_tab.js b/src/components/settings_modal/admin_tabs/media_proxy_tab.js
new file mode 100644
index 000000000..af82593bc
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/media_proxy_tab.js
@@ -0,0 +1,38 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const MediaProxyTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    AttachmentSetting,
+    GroupSetting,
+    ListSetting
+  },
+  computed: {
+    mediaProxyEnabled () {
+      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][':enabled']
+    },
+    mediaInvalidationProvider () {
+      return this.$store.state.adminSettings.draft[':pleroma'][':media_proxy'][':invalidation'][':provider']
+    },
+    ...SharedComputedObject()
+  }
+}
+
+export default MediaProxyTab
diff --git a/src/components/settings_modal/admin_tabs/media_proxy_tab.vue b/src/components/settings_modal/admin_tabs/media_proxy_tab.vue
new file mode 100644
index 000000000..ed5f6f0b4
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/media_proxy_tab.vue
@@ -0,0 +1,135 @@
+<template>
+  <div :label="$t('admin_dash.tabs.media_proxy')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.media_proxy.basic') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:media_proxy.:enabled" />
+          <ul
+            v-if="mediaProxyEnabled"
+            class="setting-list suboptions"
+          >
+            <li>
+              <StringSetting path=":pleroma.:media_proxy.:base_url" />
+            </li>
+            <li>
+              <BooleanSetting path=":pleroma.:media_proxy.:proxy_opts.:redirect_on_failure" />
+            </li>
+            <li>
+              <ListSetting
+                ignore-suggestions
+                path=":pleroma.:media_proxy.:whitelist"
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <template v-if="mediaProxyEnabled">
+        <h3>{{ $t('admin_dash.media_proxy.invalidation') }}</h3>
+        <ul class="setting-list">
+          <li>
+            <BooleanSetting path=":pleroma.:media_proxy.:invalidation.:enabled" />
+            <ul class="setting-list suboptions">
+              <li>
+                <ChoiceSetting
+                  path=":pleroma.:media_proxy.:invalidation.:provider"
+                  parent-path=":pleroma.:media_proxy.:invalidation.:enabled"
+                />
+              </li>
+              <h4>{{ $t('admin_dash.media_proxy.invalidation_settings') }}</h4>
+              <ul class="setting-list suboptions">
+                <template v-if="mediaInvalidationProvider === 'Pleroma.Web.MediaProxy.Invalidation.Http'">
+                  <li>
+                    <StringSetting
+                      :path="[':pleroma', 'Pleroma.Web.MediaProxy.Invalidation.Http', ':method']"
+                      parent-path=":pleroma.:media_proxy.:invalidation.:enabled"
+                    />
+                  </li>
+                  <li>
+                    <ListSetting
+                      ignore-suggestions
+                      :path="[':pleroma', 'Pleroma.Web.MediaProxy.Invalidation.Http', ':headers']"
+                      parent-path=":pleroma.:media_proxy.:invalidation.:enabled"
+                    />
+                  </li>
+                  <li>
+                    <ListSetting
+                      :path="[':pleroma', 'Pleroma.Web.MediaProxy.Invalidation.Http', ':options']"
+                      parent-path=":pleroma.:media_proxy.:invalidation.:enabled"
+                    />
+                  </li>
+                </template>
+                <template v-if="mediaInvalidationProvider === 'Pleroma.Web.MediaProxy.Invalidation.Script'">
+                  <!-- TODO: you know the drill by now - list component -->
+                  <li>
+                    <StringSetting
+                      :path="[':pleroma', 'Pleroma.Web.MediaProxy.Invalidation.Script', ':script_path']"
+                      parent-path=":pleroma.:media_proxy.:invalidation.:enabled"
+                    />
+                  </li>
+                  <li>
+                    <StringSetting
+                      :path="[':pleroma', 'Pleroma.Web.MediaProxy.Invalidation.Script', ':url_format']"
+                      parent-path=":pleroma.:media_proxy.:invalidation.:enabled"
+                    />
+                  </li>
+                </template>
+              </ul>
+            </ul>
+          </li>
+        </ul>
+        <h3>{{ $t('admin_dash.media_proxy.limits') }}</h3>
+        <ul class="setting-list">
+          <li>
+            <IntegerSetting
+              path=":pleroma.:media_proxy.:proxy_opts.:max_body_length"
+            />
+          </li>
+          <li>
+            <IntegerSetting
+              path=":pleroma.:media_proxy.:proxy_opts.:max_read_duration"
+            />
+          </li>
+          <li>
+            <GroupSetting path=":pleroma.:media_proxy.:proxy_opts" />
+          </li>
+        </ul>
+        <!-- TODO: add whitelist when we have list component (hehe) -->
+        <h3>{{ $t('admin_dash.media_proxy.thumbnails') }}</h3>
+        <ul class="setting-list">
+          <li>
+            <BooleanSetting path=":pleroma.:media_preview_proxy.:enabled" />
+            <ul class="setting-list suboptions">
+              <li>
+                <IntegerSetting
+                  parent-path=":pleroma.:media_preview_proxy.:enabled"
+                  path=":pleroma.:media_preview_proxy.:image_quality"
+                />
+              </li>
+              <li>
+                <IntegerSetting
+                  parent-path=":pleroma.:media_preview_proxy.:enabled"
+                  path=":pleroma.:media_preview_proxy.:min_content_length"
+                />
+              </li>
+              <li>
+                <IntegerSetting
+                  parent-path=":pleroma.:media_preview_proxy.:enabled"
+                  path=":pleroma.:media_preview_proxy.:thumbnail_max_width"
+                />
+              </li>
+              <li>
+                <IntegerSetting
+                  parent-path=":pleroma.:media_preview_proxy.:enabled"
+                  path=":pleroma.:media_preview_proxy.:thumbnail_max_height"
+                />
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script src="./media_proxy_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/monitoring_tab.js b/src/components/settings_modal/admin_tabs/monitoring_tab.js
new file mode 100644
index 000000000..8593b9d69
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/monitoring_tab.js
@@ -0,0 +1,42 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const MonitoringTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    AttachmentSetting,
+    GroupSetting,
+    ListSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  },
+  methods: {
+  }
+}
+
+export default MonitoringTab
diff --git a/src/components/settings_modal/admin_tabs/monitoring_tab.vue b/src/components/settings_modal/admin_tabs/monitoring_tab.vue
new file mode 100644
index 000000000..762e44157
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/monitoring_tab.vue
@@ -0,0 +1,47 @@
+<template>
+  <div :label="$t('admin_dash.tabs.monitoring')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.monitoring.builtins') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting :path="[':pleroma','Pleroma.Emails.NewUsersDigestEmail',':enabled']" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:healthcheck" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.monitoring.prometheus') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting :path="[':prometheus','Pleroma.Web.Endpoint.MetricsExporter',':enabled']" />
+        </li>
+        <li>
+          <BooleanSetting
+            :parent-path="[':prometheus','Pleroma.Web.Endpoint.MetricsExporter',':enabled']"
+            :path="[':prometheus','Pleroma.Web.Endpoint.MetricsExporter',':auth']"
+          />
+        </li>
+        <li>
+          <StringSetting
+            :parent-path="[':prometheus','Pleroma.Web.Endpoint.MetricsExporter',':enabled']"
+            :path="[':prometheus','Pleroma.Web.Endpoint.MetricsExporter',':path']"
+          />
+        </li>
+        <li>
+          <ChoiceSetting
+            :parent-path="[':prometheus','Pleroma.Web.Endpoint.MetricsExporter',':enabled']"
+            :path="[':prometheus','Pleroma.Web.Endpoint.MetricsExporter',':format']"
+          />
+        </li>
+        <li>
+          <ListSetting
+            :parent-path="[':prometheus','Pleroma.Web.Endpoint.MetricsExporter',':enabled']"
+            :path="[':prometheus','Pleroma.Web.Endpoint.MetricsExporter',':ip_whitelist']"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./monitoring_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/other_tab.js b/src/components/settings_modal/admin_tabs/other_tab.js
new file mode 100644
index 000000000..dc6550d27
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/other_tab.js
@@ -0,0 +1,38 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import ColorSetting from '../helpers/color_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+import PWAManifestIconsSetting from '../helpers/pwa_manifest_icons_setting.vue'
+import MapSetting from '../helpers/map_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const OtherTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    ColorSetting,
+    AttachmentSetting,
+    ListSetting,
+    PWAManifestIconsSetting,
+    MapSetting,
+    GroupSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default OtherTab
diff --git a/src/components/settings_modal/admin_tabs/other_tab.vue b/src/components/settings_modal/admin_tabs/other_tab.vue
new file mode 100644
index 000000000..55e61607d
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/other_tab.vue
@@ -0,0 +1,52 @@
+<template>
+  <div :label="$t('admin_dash.tabs.other')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.other.uncategorized') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <StringSetting path=":pleroma.:instance.:static_dir" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:profile_directory" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.other.reports') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:report_strip_status" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.other.user_backup') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <IntegerSetting :path="[':pleroma','Pleroma.User.Backup',':purge_after_days']" />
+        </li>
+        <li>
+          <IntegerSetting :path="[':pleroma','Pleroma.User.Backup',':limit_days']" />
+        </li>
+        <!-- CONFIRM what is this?
+        <li>
+          <StringSetting :path="[':pleroma','Pleroma.User.Backup',':dir']" />
+        </li>
+        -->
+        <li>
+          <IntegerSetting :path="[':pleroma','Pleroma.User.Backup',':process_chunk_size']" />
+        </li>
+        <li>
+          <IntegerSetting :path="[':pleroma','Pleroma.User.Backup',':timeout']" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.other.privileges') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <ListSetting path=":pleroma.:instance.:admin_privileges" />
+        </li>
+        <li>
+          <ListSetting path=":pleroma.:instance.:moderator_privileges" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./other_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/posts_tab.js b/src/components/settings_modal/admin_tabs/posts_tab.js
new file mode 100644
index 000000000..d9f213594
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/posts_tab.js
@@ -0,0 +1,38 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import ColorSetting from '../helpers/color_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+import PWAManifestIconsSetting from '../helpers/pwa_manifest_icons_setting.vue'
+import MapSetting from '../helpers/map_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const PostsTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    ColorSetting,
+    AttachmentSetting,
+    ListSetting,
+    PWAManifestIconsSetting,
+    MapSetting,
+    GroupSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default PostsTab
diff --git a/src/components/settings_modal/admin_tabs/posts_tab.vue b/src/components/settings_modal/admin_tabs/posts_tab.vue
new file mode 100644
index 000000000..c76b2e4ee
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/posts_tab.vue
@@ -0,0 +1,29 @@
+<template>
+  <div :label="$t('admin_dash.tabs.posts')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.posts.global') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:instances_favicons.:enabled" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.posts.local') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <ListSetting path=":pleroma.:instance.:allowed_post_formats" />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.posts.remote') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <IntegerSetting path=":pleroma.:instance.:remote_post_retention_days" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:skip_thread_containment" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./posts_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/rates_tab.js b/src/components/settings_modal/admin_tabs/rates_tab.js
new file mode 100644
index 000000000..c602dcc8a
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/rates_tab.js
@@ -0,0 +1,20 @@
+import RateSetting from '../helpers/rate_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const RatesTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    RateSetting,
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default RatesTab
diff --git a/src/components/settings_modal/admin_tabs/rates_tab.vue b/src/components/settings_modal/admin_tabs/rates_tab.vue
new file mode 100644
index 000000000..3056a1920
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/rates_tab.vue
@@ -0,0 +1,41 @@
+<template>
+  <div :label="$t('admin_dash.tabs.instance')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.rate_limit.account_confirmation_resend') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:account_confirmation_resend" />
+        </li>
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:ap_routes" />
+        </li>
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:app_account_creation" />
+        </li>
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:authentication" />
+        </li>
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:oauth_app_creation" />
+        </li>
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:relation_id_action" />
+        </li>
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:search" />
+        </li>
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:status_id_action" />
+        </li>
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:statuses_actions" />
+        </li>
+        <li>
+          <RateSetting path=":pleroma.:rate_limit.:timeline" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./rates_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/registrations_tab.js b/src/components/settings_modal/admin_tabs/registrations_tab.js
new file mode 100644
index 000000000..3ce6c8044
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/registrations_tab.js
@@ -0,0 +1,34 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+import TupleSetting from '../helpers/tuple_setting.vue'
+import GroupSetting from '../helpers/group_setting.vue'
+import AttachmentSetting from '../helpers/attachment_setting.vue'
+import ListSetting from '../helpers/list_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const RegistrationsTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting,
+    TupleSetting,
+    AttachmentSetting,
+    GroupSetting,
+    ListSetting
+  },
+  computed: {
+    ...SharedComputedObject()
+  }
+}
+
+export default RegistrationsTab
diff --git a/src/components/settings_modal/admin_tabs/registrations_tab.vue b/src/components/settings_modal/admin_tabs/registrations_tab.vue
new file mode 100644
index 000000000..a52072c01
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/registrations_tab.vue
@@ -0,0 +1,182 @@
+<template>
+  <div :label="$t('admin_dash.tabs.instance')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.instance.registrations') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:registrations_open" />
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path=":pleroma.:instance.:invites_enabled"
+                parent-path=":pleroma.:instance.:registrations_open"
+                parent-invert
+              />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:birthday_required" />
+          <ul class="setting-list suboptions">
+            <li>
+              <IntegerSetting
+                path=":pleroma.:instance.:birthday_min_age"
+                parent-path=":pleroma.:instance.:birthday_required"
+              />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:account_activation_required" />
+        </li>
+        <li>
+          <BooleanSetting path=":pleroma.:instance.:account_approval_required" />
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.instance.captcha_header') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <BooleanSetting :path="[':pleroma', 'Pleroma.Captcha', ':enabled']" />
+              <ul class="setting-list suboptions">
+                <li>
+                  <ChoiceSetting
+                    :path="[':pleroma', 'Pleroma.Captcha', ':method']"
+                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                    :option-label-map="{
+                      'Pleroma.Captcha.Native': $t('admin_dash.captcha.native'),
+                      'Pleroma.Captcha.Kocaptcha': $t('admin_dash.captcha.kocaptcha')
+                    }"
+                  />
+                  <IntegerSetting
+                    :path="[':pleroma', 'Pleroma.Captcha', ':seconds_valid']"
+                    :parent-path="[':pleroma', 'Pleroma.Captcha', ':enabled']"
+                  />
+                </li>
+                <li
+                  v-if="adminDraft[':pleroma']['Pleroma.Captcha'][':enabled'] && adminDraft[':pleroma']['Pleroma.Captcha'][':method'] === 'Pleroma.Captcha.Kocaptcha'"
+                >
+                  <h5>{{ $t('admin_dash.instance.kocaptcha') }}</h5>
+                  <ul class="setting-list">
+                    <li>
+                      <StringSetting :path="[':pleroma', 'Pleroma.Captcha.Kocaptcha', ':endpoint']" />
+                    </li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.registrations.autofollow') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <ListSetting
+            path=":pleroma.:instance.:autofollowed_nicknames"
+          />
+        </li>
+        <li>
+          <ListSetting
+            path=":pleroma.:instance.:autofollowing_nicknames"
+          />
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.registrations.welcome.title') }}</h3>
+      <ul class="setting-list">
+        <p>{{ $t('admin_dash.registrations.welcome.description') }}</p>
+        <li>
+          <h4>{{ $t('admin_dash.registrations.welcome.direct_message') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <BooleanSetting
+                path=":pleroma.:welcome.:direct_message.:enabled"
+              />
+              <ul class="setting-list suboptions">
+                <li>
+                  <StringSetting
+                    path=":pleroma.:welcome.:direct_message.:sender_nickname"
+                    parent-path=":pleroma.:welcome.:direct_message.:enabled"
+                  />
+                </li>
+                <li>
+                  <StringSetting
+                    path=":pleroma.:welcome.:direct_message.:message"
+                    parent-path=":pleroma.:welcome.:direct_message.:enabled"
+                  />
+                </li>
+              </ul>
+              <GroupSetting path=":pleroma.:welcome.:direct_message" />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.registrations.welcome.chat_message') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <BooleanSetting
+                path=":pleroma.:welcome.:chat_message.:enabled"
+              />
+              <ul class="setting-list suboptions">
+                <li>
+                  <StringSetting
+                    tuple
+                    path=":pleroma.:welcome.:chat_message.:sender_nickname"
+                    parent-path=":pleroma.:welcome.:chat_message.:enabled"
+                  />
+                </li>
+                <li>
+                  <StringSetting
+                    path=":pleroma.:welcome.:chat_message.:message"
+                    parent-path=":pleroma.:welcome.:chat_message.:enabled"
+                  />
+                </li>
+              </ul>
+              <GroupSetting path=":pleroma.:welcome.:chat_message" />
+            </li>
+          </ul>
+        </li>
+        <li>
+          <h4>{{ $t('admin_dash.registrations.welcome.email_message') }}</h4>
+          <ul class="setting-list">
+            <li>
+              <BooleanSetting
+                path=":pleroma.:welcome.:email.:enabled"
+              />
+              <ul class="setting-list suboptions">
+                <li>
+                  <TupleSetting
+                    path=":pleroma.:welcome.:email.:sender"
+                    parent-path=":pleroma.:welcome.:email.:enabled"
+                  />
+                </li>
+                <li>
+                  <StringSetting
+                    path=":pleroma.:welcome.:email.:subject"
+                    parent-path=":pleroma.:welcome.:email.:enabled"
+                  />
+                </li>
+                <li>
+                  <StringSetting
+                    path=":pleroma.:welcome.:email.:html"
+                    parent-path=":pleroma.:welcome.:email.:enabled"
+                  />
+                </li>
+              </ul>
+              <GroupSetting path=":pleroma.:welcome.:email" />
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.registrations.restrictions') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <ListSetting
+            ignore-suggestions
+            :path="[':pleroma', 'Pleroma.User', ':email_blacklist']"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./registrations_tab.js"></script>
diff --git a/src/components/settings_modal/admin_tabs/uploads_tab.js b/src/components/settings_modal/admin_tabs/uploads_tab.js
new file mode 100644
index 000000000..40a184db1
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/uploads_tab.js
@@ -0,0 +1,46 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import StringSetting from '../helpers/string_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+
+const UploadsTab = {
+  provide () {
+    return {
+      defaultDraftMode: true,
+      defaultSource: 'admin'
+    }
+  },
+  data () {
+    return {
+      uploaders: [{
+        key: 'Pleroma.Uploaders.Local',
+        value: 'Pleroma.Uploaders.Local',
+        label: this.$t('admin_dash.uploads.local_uploader')
+      }, {
+        key: 'Pleroma.Uploaders.IPFS',
+        value: 'Pleroma.Uploaders.IPFS',
+        label: 'IPFS'
+      }, {
+        key: 'Pleroma.Uploaders.S3',
+        value: 'Pleroma.Uploaders.S3',
+        label: 'S3'
+      }]
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    StringSetting
+  },
+  computed: {
+    uploader () {
+      return this.$store.state.adminSettings.draft[':pleroma']['Pleroma.Upload'][':uploader']
+    },
+    ...SharedComputedObject()
+  }
+}
+
+export default UploadsTab
diff --git a/src/components/settings_modal/admin_tabs/uploads_tab.vue b/src/components/settings_modal/admin_tabs/uploads_tab.vue
new file mode 100644
index 000000000..d0462aff1
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/uploads_tab.vue
@@ -0,0 +1,110 @@
+<template>
+  <div :label="$t('admin_dash.tabs.uploads')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.uploads.upload') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <ChoiceSetting
+            :path="[':pleroma','Pleroma.Upload',':uploader']"
+            :options="uploaders"
+          />
+          <h4>{{ $t('admin_dash.uploads.uploader_settings') }}</h4>
+          <ul class="setting-list suboptions">
+            <template v-if="uploader === 'Pleroma.Uploaders.Local'">
+              <li>
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Uploaders.Local',':uploads']"
+                />
+              </li>
+            </template>
+            <template v-else-if="uploader === 'Pleroma.Uploaders.IPFS'">
+              <li>
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Uploaders.IPFS',':get_gateway_url']"
+                />
+              </li>
+              <li>
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Uploaders.IPFS',':post_gateway_url']"
+                />
+              </li>
+            </template>
+            <template v-else-if="uploader === 'Pleroma.Uploaders.S3'">
+              <li>
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Uploaders.S3',':bucket']"
+                />
+              </li>
+              <li>
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Uploaders.S3',':bucket_namespace']"
+                />
+              </li>
+              <li>
+                <BooleanSetting
+                  :path="[':pleroma','Pleroma.Uploaders.S3',':streaming_enabled']"
+                />
+              </li>
+              <li>
+                <StringSetting
+                  :path="[':pleroma','Pleroma.Uploaders.S3',':truncated_namespace']"
+                />
+              </li>
+            </template>
+            <li>
+              <IntegerSetting
+                :path="[':pleroma','Pleroma.Uploaders.Uploader',':timeout']"
+              />
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <h3>{{ $t('admin_dash.uploads.attachments') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting
+            path=":pleroma.:instance.:attachment_links"
+            :options="uploaders"
+          />
+        </li>
+        <li>
+          <BooleanSetting
+            path=":pleroma.:instance.:cleanup_attachments"
+            :options="uploaders"
+          />
+        </li>
+      </ul>
+      <!-- CONFIRM how filters work -->
+      <h3>{{ $t('admin_dash.uploads.filenames') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting
+            :path="[':pleroma','Pleroma.Upload',':link_name']"
+            :subgroup="adapter"
+          />
+        </li>
+        <li>
+          <IntegerSetting
+            :path="[':pleroma','Pleroma.Upload',':filename_display_max_length']"
+            :subgroup="adapter"
+          />
+        </li>
+        <li>
+          <StringSetting
+            :path="[':pleroma','Pleroma.Upload',':default_description']"
+            :subgroup="adapter"
+          />
+        </li>
+        <li>
+          <StringSetting
+            :path="[':pleroma','Pleroma.Upload',':base_url']"
+            :subgroup="adapter"
+          />
+        </li>
+        <!-- TODO: add mime-type when we have a dynamic list component -->
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./uploads_tab.js"></script>
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index a61d56e8c..a7804d78f 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -1,10 +1,11 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="AttachmentSetting"
+    class="AttachmentSetting setting-item"
     :class="{ '-compact': compact }"
   >
     <label
+      class="setting-label"
       :for="path"
       :class="{ 'faint': shouldBeDisabled }"
     >
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 391318955..2134ad7ce 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -1,9 +1,10 @@
 <template>
   <label
     v-if="matchesExpertLevel"
-    class="BooleanSetting"
+    class="BooleanSetting setting-item"
   >
     <Checkbox
+      class="setting-control setting-label"
       :model-value="visibleState"
       :disabled="shouldBeDisabled"
       :indeterminate="isIndeterminate"
@@ -13,6 +14,12 @@
         class="label"
         :class="{ 'faint': shouldBeDisabled }"
       >
+        <ModifiedIndicator
+          :changed="isChanged"
+          :onclick="reset"
+        />
+        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+        {{ ' ' }}
         <template v-if="backendDescriptionLabel">
           {{ backendDescriptionLabel }}
         </template>
@@ -22,19 +29,16 @@
         <slot v-else />
       </span>
     </Checkbox>
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
-    <DraftButtons />
     <p
-      v-if="backendDescriptionDescription"
+      v-if="backendDescriptionDescription || showDescription"
       class="setting-description"
       :class="{ 'faint': shouldBeDisabled }"
     >
-      {{ backendDescriptionDescription + ' ' }}
+      <slot name="description">
+        {{ backendDescriptionDescription + ' ' }}
+      </slot>
     </p>
+    <DraftButtons />
   </label>
 </template>
 
diff --git a/src/components/settings_modal/helpers/choice_setting.js b/src/components/settings_modal/helpers/choice_setting.js
index bdeece760..10e043082 100644
--- a/src/components/settings_modal/helpers/choice_setting.js
+++ b/src/components/settings_modal/helpers/choice_setting.js
@@ -9,6 +9,10 @@ export default {
   },
   props: {
     ...Setting.props,
+    overrideOptions: {
+      type: Boolean,
+      required: false
+    },
     options: {
       type: Array,
       required: false
@@ -22,7 +26,16 @@ export default {
   computed: {
     ...Setting.computed,
     realOptions () {
+      if (this.overrideOptions) {
+        return this.options
+      }
       if (this.realSource === 'admin') {
+        if (
+          !this.backendDescriptionSuggestions?.length ||
+            this.backendDescriptionSuggestions?.length === 0
+        ) {
+          return this.options
+        }
         return this.backendDescriptionSuggestions.map(x => ({
           key: x,
           value: x,
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 0e22eb306..318951026 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -1,18 +1,27 @@
 <template>
   <label
     v-if="matchesExpertLevel"
-    class="ChoiceSetting"
+    class="ChoiceSetting setting-item"
+    :class="{ 'faint': shouldBeDisabled }"
   >
-    <template v-if="backendDescriptionLabel">
-      {{ backendDescriptionLabel }}
-    </template>
-    <template v-else>
-      <slot />
-    </template>
-    {{ ' ' }}
+    <span class="setting-label">
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel }}
+      </template>
+      <template v-else>
+        <slot />
+      </template>
+    </span>
     <Select
-      :model-value="realDraftMode ? draft :state"
-      :disabled="disabled"
+      class="setting-control"
+      :model-value="realDraftMode ? draft : state"
+      :disabled="shouldBeDisabled"
       @update:model-value="update"
     >
       <option
@@ -24,11 +33,6 @@
         {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
       </option>
     </Select>
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons />
     <p
       v-if="backendDescriptionDescription"
@@ -40,3 +44,16 @@
 </template>
 
 <script src="./choice_setting.js"></script>
+
+<style lang="scss">
+.ChoiceSetting.setting-item {
+  .-mobile & {
+    display: block;
+
+    .setting-label {
+      display: block;
+      margin-bottom: 0.5em
+    }
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/color_setting.js b/src/components/settings_modal/helpers/color_setting.js
new file mode 100644
index 000000000..40fa038fe
--- /dev/null
+++ b/src/components/settings_modal/helpers/color_setting.js
@@ -0,0 +1,16 @@
+import Setting from './setting.js'
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+export default {
+  ...Setting,
+  components: {
+    ...Setting.components,
+    ColorInput
+  },
+  methods: {
+    ...Setting.methods,
+    getValue (e) {
+      return e
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/color_setting.vue b/src/components/settings_modal/helpers/color_setting.vue
new file mode 100644
index 000000000..6813bb2a2
--- /dev/null
+++ b/src/components/settings_modal/helpers/color_setting.vue
@@ -0,0 +1,71 @@
+<template>
+  <label
+    v-if="matchesExpertLevel"
+    class="ColorSetting setting-item"
+  >
+    <label
+      v-if="!hideLabel"
+      :for="path"
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    {{ ' ' }}
+    <ColorInput
+      :id="path"
+      class="setting-control color-setting-input"
+      :class="{ disabled: shouldBeDisabled }"
+      :disabled="shouldBeDisabled"
+      :placeholder="backendDescriptionSuggestions"
+      :model-value="realDraftMode ? draft : state"
+      @update:model-value="update"
+    />
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons v-if="!hideDraftButtons" />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+  </label>
+</template>
+
+<script src="./color_setting.js"></script>
+<style lang="scss">
+.ColorSetting {
+  &.setting-item {
+    display: grid;
+    grid-template-areas:
+      "label control"
+      ". desc"
+      ". draft";
+
+    .setting-label {
+      text-align: right;
+      align-self: center;
+    }
+
+    .setting-control {
+      align-self: end;
+    }
+  }
+
+  .color-setting-input {
+    align-self: baseline;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/draft_buttons.vue b/src/components/settings_modal/helpers/draft_buttons.vue
index 46a70e866..b07ea1ec4 100644
--- a/src/components/settings_modal/helpers/draft_buttons.vue
+++ b/src/components/settings_modal/helpers/draft_buttons.vue
@@ -2,6 +2,7 @@
 <!-- TODO make it reusable -->
 <template>
   <span
+    v-if="$parent.isDirty || $parent.canHardReset"
     class="DraftButtons"
   >
     <Popover
@@ -72,12 +73,10 @@ export default {
 
 <style lang="scss">
 .DraftButtons {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
-
-  .button-default {
-    margin-left: 0.5em;
-  }
+  gap: 0.5em;
+  margin-top: 0.5em
 }
 
 .draft-tooltip {
diff --git a/src/components/settings_modal/helpers/group_setting.js b/src/components/settings_modal/helpers/group_setting.js
index 23a2a2025..327654ff1 100644
--- a/src/components/settings_modal/helpers/group_setting.js
+++ b/src/components/settings_modal/helpers/group_setting.js
@@ -1,13 +1,5 @@
-import { isEqual } from 'lodash'
-
 import Setting from './setting.js'
 
 export default {
   ...Setting,
-  computed: {
-    ...Setting.computed,
-    isDirty () {
-      return !isEqual(this.state, this.draft)
-    }
-  }
 }
diff --git a/src/components/settings_modal/helpers/group_setting.vue b/src/components/settings_modal/helpers/group_setting.vue
index a4df4bf35..68e571f7d 100644
--- a/src/components/settings_modal/helpers/group_setting.vue
+++ b/src/components/settings_modal/helpers/group_setting.vue
@@ -1,7 +1,7 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="GroupSetting"
+    class="GroupSetting setting-item"
   >
     <ModifiedIndicator
       :changed="isChanged"
diff --git a/src/components/settings_modal/helpers/list_setting.js b/src/components/settings_modal/helpers/list_setting.js
new file mode 100644
index 000000000..def6064d0
--- /dev/null
+++ b/src/components/settings_modal/helpers/list_setting.js
@@ -0,0 +1,133 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Setting from './setting.js'
+
+export default {
+  ...Setting,
+  data () {
+    return {
+      newValue: '',
+    }
+  },
+  components: {
+    ...Setting.components,
+    Checkbox
+  },
+  props: {
+    ...Setting.props,
+    ignoreSuggestions: {
+      required: false,
+      type: Boolean
+    },
+    overrideAvailableOptions: {
+      required: false,
+      type: Boolean
+    },
+    options: {
+      required: false,
+      type: Set
+    },
+    allowNew: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
+    forceNew: {
+      required: false,
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    ...Setting.computed,
+    showNew () {
+      if (this.forceNew) return true
+      if (!this.allowNew) return false
+
+      const isExpert = this.$store.state.config.expertLevel > 0
+      const hasBuiltins = this.builtinEntries.length > 0
+
+      if (hasBuiltins) {
+        return isExpert
+      } else {
+        return true
+      }
+    },
+    valueSet () {
+      return new Set(this.visibleState)
+    },
+    suggestionsSet () {
+      const suggestions = this.backendDescriptionSuggestions
+      if (suggestions) {
+        return new Set(suggestions)
+      } else {
+        return new Set()
+      }
+    },
+    extraEntries () {
+      if (this.ignoreSuggestions) return [...this.valueSet.values()]
+      if (!this.suggestionsSet) return []
+      return [...this.valueSet.values()].filter((x) => {
+        return !this.builtinEntriesValueSet.has(x)
+      })
+    },
+    builtinEntries () {
+      if (this.ignoreSuggestions) return []
+      if (this.overrideAvailableOptions) {
+        return [...this.options]
+      }
+      if (!this.suggestionsSet) return []
+
+      const builtins = [...this.suggestionsSet.values()]
+      return builtins.map((option) => ({
+        label: option,
+        value: option
+      }))
+    },
+    builtinEntriesValueSet () {
+      return new Set(this.builtinEntries.map(x => x.value))
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    optionPresent (option) {
+      return this.valueSet.has(option)
+    },
+    getValue ({ event, value, index, eventType }) {
+      switch (eventType) {
+        case 'toggle': {
+          this.newValue = ''
+          const newSet = new Set(this.valueSet.values())
+          if (event) {
+            newSet.add(value)
+          } else {
+            newSet.delete(value)
+          }
+          return [...newSet.values()]
+        }
+
+        case 'add': {
+          if (!this.newValue) return this.valueSet.values()
+          const res = [...this.valueSet.values(), this.newValue]
+          this.newValue = ''
+          return res
+        }
+
+        case 'remove': {
+          const pre = [...this.valueSet.values()].slice(0, index)
+          const post = [...this.valueSet.values()].slice(index + 1)
+
+          return [...pre, ...post]
+        }
+
+        case 'edit': {
+          const pre = [...this.valueSet.values()].slice(0, index)
+          const post = [...this.valueSet.values()].slice(index + 1)
+          const string = event.target.value
+          if (!string) return [...this.valueSet.values()]
+
+          return [...pre, string, ...post]
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/list_setting.vue b/src/components/settings_modal/helpers/list_setting.vue
new file mode 100644
index 000000000..1dacba410
--- /dev/null
+++ b/src/components/settings_modal/helpers/list_setting.vue
@@ -0,0 +1,92 @@
+<template>
+  <div
+    v-if="matchesExpertLevel"
+    class="ListSetting setting-item"
+  >
+    <label
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <ul class="setting-list">
+      <li
+        v-for="(item, i) in builtinEntries"
+        :key="i"
+      >
+        <Checkbox
+          :disabled="shouldBeDisabled"
+          :model-value="optionPresent(item.value)"
+          @update:model-value="event => update({ event, value: item.value, eventType: 'toggle' })"
+        >
+          {{ item.label }}
+        </Checkbox>
+      </li>
+      <li
+        v-for="(item, index) in extraEntries"
+        :key="index"
+      >
+        <div class="btn-group">
+          <input
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :value="item"
+            @change="e => update({ event: e, index, eventType: 'edit' })"
+          >
+          <button
+            class="button-default"
+            @click="e => update({ index, eventType: 'remove' })"
+          >
+            <FAIcon icon="times" />
+          </button>
+        </div>
+      </li>
+      <li v-if="showNew">
+        <div class="btn-group">
+          <input
+            v-model="newValue"
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :disabled="shouldBeDisabled"
+          >
+          <button
+            class="button-default"
+            @click="e => update({ eventType: 'add' })"
+          >
+            <FAIcon icon="plus" />
+          </button>
+        </div>
+      </li>
+    </ul>
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+  </div>
+</template>
+
+<script src="./list_setting.js"></script>
+<style lang="scss">
+.ListSetting {
+  .setting-list {
+    .checkbox {
+      padding: 0.5em 0;
+    }
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/list_tuple_setting.js b/src/components/settings_modal/helpers/list_tuple_setting.js
new file mode 100644
index 000000000..2cbd93788
--- /dev/null
+++ b/src/components/settings_modal/helpers/list_tuple_setting.js
@@ -0,0 +1,44 @@
+import ListSetting from './list_setting.js'
+
+export default {
+  ...ListSetting,
+  data () {
+    return {
+      newValue: ['','']
+    }
+  },
+  methods: {
+    ...ListSetting.methods,
+    getValue ({ event, index, eventType, tuple }) {
+      switch (eventType) {
+        case 'add': {
+          if (!this.newValue[0] || !this.newValue[1]) return this.visibleState
+          const res = [...this.visibleState, this.newValue]
+          this.newValue = ['', '']
+          return res
+        }
+
+        case 'remove': {
+          const pre = this.visibleState.slice(0, index)
+          const post = this.visibleState.slice(index + 1)
+
+          return [...pre, ...post]
+        }
+
+        case 'edit': {
+          const pre = this.visibleState.slice(0, index)
+          const post = this.visibleState.slice(index + 1)
+          const item = this.visibleState[index]
+          const string = event.target.value
+          if (!string) return this.visibleState
+
+          if (tuple === 0) {
+            return [...pre, [string, item[1]], ...post]
+          } else {
+            return [...pre, [item[0], string], ...post]
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/list_tuple_setting.vue b/src/components/settings_modal/helpers/list_tuple_setting.vue
new file mode 100644
index 000000000..eb2f6e16e
--- /dev/null
+++ b/src/components/settings_modal/helpers/list_tuple_setting.vue
@@ -0,0 +1,113 @@
+<template>
+  <div
+    v-if="matchesExpertLevel"
+    class="ListTupleSetting"
+  >
+    <label
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <ul class="setting-list">
+      <li
+        v-for="(item, index) in visibleState"
+        :key="index"
+      >
+        <div class="btn-group">
+          <input
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :value="item.tuple[0]"
+            @change="e => update({ event: e, index, eventType: 'edit', tuple: 0 })"
+          >
+          <input
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :value="item.tuple[1]"
+            @change="e => update({ event: e, index, eventType: 'edit', tuple: 1 })"
+          >
+          <button
+            class="button-default"
+            @click="e => update({ index, eventType: 'remove' })"
+          >
+            <FAIcon icon="times" />
+          </button>
+        </div>
+      </li>
+      <li>
+        <div class="btn-group">
+          <input
+            v-model="newValue[0]"
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :disabled="shouldBeDisabled"
+            :placeholder="backendDescriptionSuggestions[0][0]"
+          >
+          <input
+            v-model="newValue[1]"
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :disabled="shouldBeDisabled"
+            :placeholder="backendDescriptionSuggestions[0][1]"
+          >
+          <button
+            class="button-default"
+            @click="e => update({ eventType: 'add' })"
+          >
+            <FAIcon icon="plus" />
+          </button>
+        </div>
+      </li>
+    </ul>
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+  </div>
+</template>
+
+<script src="./list_tuple_setting.js"></script>
+<style lang="scss">
+.ListTupleSetting {
+  .btn-group {
+    display: flex
+  }
+
+  dl {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    gap: 0.5em;
+    align-items: baseline;
+
+    dt {
+      display: inline;
+      font-weight: 800;
+
+      &::after {
+        content: ':'
+      }
+    }
+
+    dd {
+      display: inline;
+      margin: 0
+    }
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/map_setting.js b/src/components/settings_modal/helpers/map_setting.js
new file mode 100644
index 000000000..ad93ceacf
--- /dev/null
+++ b/src/components/settings_modal/helpers/map_setting.js
@@ -0,0 +1,70 @@
+import Setting from './setting.js'
+
+export default {
+  ...Setting,
+  props: {
+    ...Setting.props,
+    allowNew: {
+      required: false,
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      newValue: ['',''] // avoiding extra complexity by just using an array instead of an object
+    }
+  },
+  computed: {
+    ...Setting.computed,
+    // state that we'll show in the UI, i.e. transforming map into list
+    displayState () {
+      return Object.entries(this.visibleState)
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    getValue ({ event, key, eventType, isKey }) {
+      switch (eventType) {
+        case 'add': {
+          if (key === '') return this.visibleState
+          const res = {...this.visibleState, ...Object.fromEntries([this.newValue])}
+          this.newValue = ['', '']
+          return res
+        }
+
+        case 'remove': {
+          // initial state for this type is empty array
+          if (Array.isArray(this.visibleState)) return this.visibleState
+          const newEntries = Object.entries(this.visibleState).filter(([k]) => k !== key)
+
+          if (newEntries.length === 0 ) return []
+          return Object.fromEntries(newEntries)
+        }
+
+        case 'edit': {
+          const string = event.target.value
+          const newEntries = Object
+            .entries(this.visibleState)
+            .map(([k, v]) => {
+              if (isKey) {
+                if (k === key) {
+                  return [string, v]
+                } else {
+                  return [k, v]
+                }
+              } else {
+                if (k === key) {
+                  return [k, string]
+                } else {
+                  return [k, v]
+                }
+              }
+            })
+
+          return Object.fromEntries(newEntries)
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/map_setting.vue b/src/components/settings_modal/helpers/map_setting.vue
new file mode 100644
index 000000000..95adcb314
--- /dev/null
+++ b/src/components/settings_modal/helpers/map_setting.vue
@@ -0,0 +1,112 @@
+<template>
+  <div
+    v-if="matchesExpertLevel"
+    class="MapSetting setting-item"
+  >
+    <label
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <ul class="setting-list">
+      <li
+        v-for="(item, i) in displayState"
+        :key="i"
+      >
+        <div class="btn-group">
+          <input
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :value="item[0]"
+            @change="e => update({ event: e, key: item[0], eventType: 'edit', isKey: true })"
+          >
+          <input
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :value="item[1]"
+            @change="e => update({ event: e, key: item[0], eventType: 'edit', isKey: false })"
+          >
+          <button
+            class="button-default"
+            @click="e => update({ key: item[0], eventType: 'remove' })"
+          >
+            <FAIcon icon="times" />
+          </button>
+        </div>
+      </li>
+      <li v-if="allowNew">
+        <div class="btn-group">
+          <input
+            v-model="newValue[0]"
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :disabled="shouldBeDisabled"
+            :placeholder="backendDescriptionSuggestions[0][0]"
+          >
+          <input
+            v-model="newValue[1]"
+            class="input string-input"
+            :class="{ disabled: shouldBeDisabled }"
+            :disabled="shouldBeDisabled"
+            :placeholder="backendDescriptionSuggestions[0][1]"
+          >
+          <button
+            class="button-default"
+            @click="e => update({ eventType: 'add' })"
+          >
+            <FAIcon icon="plus" />
+          </button>
+        </div>
+      </li>
+    </ul>
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons />
+  </div>
+</template>
+
+<script src="./map_setting.js"></script>
+<style lang="scss">
+.MapSetting {
+  .btn-group {
+    display: flex
+  }
+
+  dl {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    gap: 0.5em;
+
+    dt {
+      display: inline;
+      font-weight: 800;
+
+      &::after {
+        content: ':'
+      }
+    }
+
+    dd {
+      display: inline;
+      margin: 0
+    }
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 32dc6f83f..26c18f928 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -1,10 +1,12 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="NumberSetting"
+    class="NumberSetting setting-item"
   >
     <label
+      v-if="!hideLabel"
       :for="path"
+      class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
       <template v-if="backendDescriptionLabel">
@@ -18,10 +20,11 @@
     {{ ' ' }}
     <input
       :id="path"
-      class="input number-input"
+      class="input number-input setting-control"
       type="number"
       :step="step || 1"
       :disabled="shouldBeDisabled"
+      :placeholder="backendDescriptionSuggestions"
       :min="min || 0"
       :value="realDraftMode ? draft :state"
       @change="update"
@@ -32,7 +35,7 @@
       :onclick="reset"
     />
     <ProfileSettingIndicator :is-profile="isProfileSetting" />
-    <DraftButtons />
+    <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
diff --git a/src/components/settings_modal/helpers/proxy_setting.js b/src/components/settings_modal/helpers/proxy_setting.js
new file mode 100644
index 000000000..ca717b60b
--- /dev/null
+++ b/src/components/settings_modal/helpers/proxy_setting.js
@@ -0,0 +1,53 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Setting from './setting.js'
+
+const getUrl = state => state?.tuple ? state.tuple[1] + ':' + state.tuple[2] : state
+const getSocks = state => state?.tuple
+
+export default {
+  ...Setting,
+  data () {
+    return {
+      urlField: '',
+      socksField: false
+    }
+  },
+  created () {
+    Setting.created()
+    this.urlField = getUrl(this.realDraftMode ? this.draft : this.state)
+    this.socksField = getSocks(this.realDraftMode ? this.draft : this.state)
+  },
+  computed: {
+    ...Setting.computed,
+    // state that we'll show in the UI, i.e. transforming map into list
+    displayState () {
+      if (this.visibleState?.tuple) {
+        return this.visibleState.tuple[1] + ':' + this.visibleState.tuple[2]
+      }
+      return this.visibleState
+    },
+    socksState () {
+      return getSocks(this.visibleState)
+    }
+  },
+  components: {
+    ...Setting.components,
+    Checkbox
+  },
+  methods: {
+    ...Setting.methods,
+    getValue ({ event, isProxy}) {
+      if (isProxy) {
+        this.socksField = event
+      } else {
+        this.urlField = event.target.value
+      }
+
+      if (this.socksField) {
+        return { tuple: [ ':socks5', ...this.urlField.split(':') ] }
+      } else {
+        return this.urlField
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/proxy_setting.vue b/src/components/settings_modal/helpers/proxy_setting.vue
new file mode 100644
index 000000000..869cbcdcc
--- /dev/null
+++ b/src/components/settings_modal/helpers/proxy_setting.vue
@@ -0,0 +1,59 @@
+<template>
+  <label
+    v-if="matchesExpertLevel"
+    class="ProxySetting setting-item"
+  >
+    <label
+      v-if="!hideLabel"
+      :for="path"
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    {{ ' ' }}
+    <div class="setting-control">
+      <input
+        :id="path"
+        class="input string-input"
+        :class="{ disabled: shouldBeDisabled }"
+        :disabled="shouldBeDisabled"
+        :placeholder="backendDescriptionSuggestions[0]"
+        :value="displayState"
+        @change="event => update({ event })"
+      >
+      {{ ' ' }}
+      <Checkbox
+        :model-value="socksState"
+        :disabled="shouldBeDisabled"
+        :indeterminate="isIndeterminate"
+        @update:model-value="event => update({ event, isProxy: true})"
+      >
+        SOCKS5
+        {{ ' ' }}
+      </Checkbox>
+    </div>
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <DraftButtons v-if="!hideDraftButtons" />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+  </label>
+</template>
+
+<script src="./proxy_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
new file mode 100644
index 000000000..9986f6f39
--- /dev/null
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
@@ -0,0 +1,99 @@
+import { clone } from 'lodash'
+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+
+import Setting from './setting.js'
+import Select from 'src/components/select/select.vue'
+import Attachment from 'src/components/attachment/attachment.vue'
+import MediaUpload from 'src/components/media_upload/media_upload.vue'
+
+export default {
+  ...Setting,
+  components: {
+    ...Setting.components,
+    Select,
+    Attachment,
+    MediaUpload
+  },
+  computed: {
+    ...Setting.computed,
+    purposeOptions () {
+      return ['any','monochrome','maskable'].map(value => ({
+        value,
+        key: value,
+        label: this.$t('admin_dash.instance.pwa.icon.' + value)
+      }))
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    attachment (e) {
+      const path = e[':src']
+      if (!path) {
+        return {
+          mimetype: '',
+          url: ''
+        }
+      }
+      const url = path.includes('://') ? path : this.$store.state.instance.server + path
+
+      return {
+        mimetype: fileTypeExt(url),
+        url
+      }
+    },
+    setMediaFile ({ event, index }) {
+      this.update({
+        event: {
+          target: {
+            value: event.url
+          },
+        },
+        index,
+        eventType: 'edit',
+        field: ':src'
+      })
+    },
+    setPurpose ({ event, index }) {
+      this.update({
+        event: {
+          target: {
+            value: event
+          },
+        },
+        index,
+        eventType: 'edit',
+        field: ':purpose'
+      })
+    },
+    getValue ({ event, field, index, eventType }) {
+      switch (eventType) {
+        case 'add': {
+          const res = [...this.visibleState, {}]
+          return res
+        }
+
+        case 'remove': {
+          const pre = this.visibleState.slice(0, index)
+          const post = this.visibleState.slice(index + 1)
+
+          return [...pre, ...post]
+        }
+
+        case 'edit': {
+          const pre = this.visibleState.slice(0, index)
+          const post = this.visibleState.slice(index + 1)
+          const item = clone(this.visibleState[index])
+          const string = event.target.value
+
+          if (!string)  {
+            delete item[field]
+          } else {
+            item[field] = string
+          }
+
+          return [...pre, item, ...post]
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
new file mode 100644
index 000000000..20e50fe25
--- /dev/null
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
@@ -0,0 +1,226 @@
+<template>
+  <div
+    v-if="matchesExpertLevel"
+    class="PWAManifestIconsSetting setting-item"
+  >
+    <label
+      class="pwa-label setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <div class="setting-control">
+      <ul class="item-list">
+        <li
+          v-if="visibleState.length === 0"
+          class="no_items"
+        >
+          {{ $t('admin_dash.instance.pwa.no_icons') }}
+          <button
+            v-if="visibleState.length === 0"
+            class="button-default add-button"
+            @click="e => update({ eventType: 'add' })"
+          >
+            <FAIcon icon="plus" />
+          </button>
+        </li>
+        <li
+          v-for="(item, index) in visibleState"
+          :key="index"
+        >
+          <div class="icon-element">
+            <div class="src-field">
+              <Attachment
+                class="src-attachment"
+                :compact="compact"
+                :attachment="attachment(item)"
+                size="small"
+                hide-description
+              />
+              <div class="src-url">
+                <label for="path">{{ $t('settings.url') }}</label>
+                <input
+                  :id="path"
+                  class="input string-input"
+                  :disabled="shouldBeDisabled"
+                  :value="item[':src']"
+                  @change="event => update({ event, index, eventType: 'edit', field: ':src' })"
+                >
+              </div>
+              <MediaUpload
+                ref="mediaUpload"
+                class="src-upload media-upload-icon"
+                :class="{ disabled: shouldBeDisabled }"
+                normal-button
+                :accept-types="acceptTypes"
+                @uploaded="event => setMediaFile({ event, index })"
+              />
+            </div>
+            <dl>
+              <dt>{{ $t('admin_dash.instance.pwa.icon.purpose') }}</dt>
+              <dd>
+                <Select
+                  :class="{ disabled: shouldBeDisabled }"
+                  :disabled="shouldBeDisabled"
+                  :model-value="item[':purpose']"
+                  @update:model-value="event => setPurpose({ event, index })"
+                >
+                  <option
+                    v-for="(purpose, index) in purposeOptions"
+                    :key="index"
+                    :value="purpose.value"
+                  >
+                    {{ purpose.label }}
+                  </option>
+                </Select>
+              </dd>
+              <dt><code>sizes</code>{{ $t('admin_dash.instance.pwa.optional') }}</dt>
+              <dd>
+                <input
+                  class="input string-input"
+                  :class="{ disabled: shouldBeDisabled }"
+                  :value="item[':sizes']"
+                  @change="e => update({ event: e, index, eventType: 'edit', field: ':sizes' })"
+                >
+              </dd>
+              <dt><code>type</code>{{ $t('admin_dash.instance.pwa.optional') }}</dt>
+              <dd>
+                <input
+                  class="input string-input"
+                  :class="{ disabled: shouldBeDisabled }"
+                  :value="item[':type']"
+                  @change="e => update({ event: e, index, eventType: 'edit', field: ':type' })"
+                >
+              </dd>
+            </dl>
+            <div class="buttons">
+              <button
+                v-if="index === visibleState.length - 1"
+                class="button-default add-button"
+                @click="e => update({ eventType: 'add' })"
+              >
+                <FAIcon icon="plus" />
+              </button>
+              <button
+                class="button-default delete-button"
+                @click="e => update({ index, eventType: 'remove' })"
+              >
+                <FAIcon icon="times" />
+              </button>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./pwa_manifest_icons_setting.js"></script>
+<style lang="scss">
+div.PWAManifestIconsSetting {
+  margin-left: 3em;
+
+  &.setting-item {
+    display: grid;
+    grid-template-areas:
+      "label"
+      "desc"
+      "control"
+      "draft";
+    grid-template-rows: 2em auto 1fr;
+    grid-template-columns: 1fr;
+  }
+
+  .pwa-label.setting-label {
+    align-self: end;
+    text-align: left;
+  }
+
+  .buttons {
+    display: flex;
+    gap: 0.5em;
+    justify-content: right;
+    margin-top: 0.5em;
+
+    button {
+      line-height: 2;
+    }
+  }
+
+  ul {
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, 12em);
+    grid-gap: 2em;
+  }
+
+  dl {
+    display: grid;
+    grid-template-columns: 1fr;
+    margin-top: 0.5em;
+    gap: 0.25em;
+    align-items: baseline;
+
+    dt {
+      font-weight: 800;
+
+      &::after {
+        content: ':'
+      }
+    }
+
+    dd {
+      margin: 0
+    }
+  }
+
+  .src-field {
+    display: grid;
+    grid-template-columns: auto;
+    justify-items: center;
+    gap: 0.5em;
+
+    .src-attachment {
+      width: 10em;
+      height: 10em;
+      display: block;
+      margin-bottom: 0.5em;
+    }
+
+    .src-upload {
+      display: block;
+      width: 100%;
+    }
+
+    .src-url {
+      display: flex;
+      flex-direction: column;
+      gap: 0.25em;
+      width: 100%;
+
+      label {
+        display: block;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/settings_modal/helpers/rate_setting.js b/src/components/settings_modal/helpers/rate_setting.js
new file mode 100644
index 000000000..7425cdba3
--- /dev/null
+++ b/src/components/settings_modal/helpers/rate_setting.js
@@ -0,0 +1,53 @@
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Setting from './setting.js'
+
+export default {
+  ...Setting,
+  data () {
+    return {
+      newValue: '',
+    }
+  },
+  components: {
+    ...Setting.components,
+    Checkbox
+  },
+  props: {
+    ...Setting.props
+  },
+  computed: {
+    ...Setting.computed,
+    isSeparate () {
+      // [[a1, b1], [a2, b2]] vs [a, b]
+      return Array.isArray(this.visibleState[0])
+    },
+    normalizedState () {
+      if (this.isSeparate) {
+        return this.visibleState.map(y => y.map(x => Number(x) || 0))
+      } else {
+        return [this.visibleState.map(x => Number(x) || 0)]
+      }
+    }
+  },
+  methods: {
+    ...Setting.methods,
+    getValue ({ event, side, index, eventType }) {
+      if (eventType === 'edit') {
+        const value = Number(event.target.value)
+        if (Number.isNaN(value)) return this.visibleState
+
+        const newVal = [...this.normalizedState.map(x => [...x])]
+        newVal[side][index] = value
+        return newVal
+      }
+
+      if (eventType === 'toggleMode') {
+        if (event === 'split') {
+          return [this.normalizedState[0], this.normalizedState[0]]
+        } else if (event === 'join') {
+          return [this.normalizedState[0]]
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/rate_setting.vue b/src/components/settings_modal/helpers/rate_setting.vue
new file mode 100644
index 000000000..f6216223c
--- /dev/null
+++ b/src/components/settings_modal/helpers/rate_setting.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    v-if="matchesExpertLevel"
+    class="RateSetting setting-item"
+  >
+    <label
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+    <div class="setting-control">
+      <table>
+        <tr>
+          <th>&nbsp;</th>
+          <th>
+            {{ $t('admin_dash.rate_limit.period') }}
+          </th>
+          <th>
+            {{ $t('admin_dash.rate_limit.amount') }}
+          </th>
+        </tr>
+        <tr>
+          <td v-if="isSeparate">
+            {{ $t('admin_dash.rate_limit.unauthenticated') }}
+          </td>
+          <td v-else>
+            {{ $t('admin_dash.rate_limit.rate_limit') }}
+          </td>
+          <td>
+            <input
+              class="input string-input"
+              type="number"
+              :value="normalizedState[0][0]"
+              @change="e => update({ event: e, index: 0, side: 0, eventType: 'edit' })"
+            >
+          </td>
+          <td>
+            <input
+              class="input string-input"
+              type="number"
+              :value="normalizedState[0][1]"
+              @change="e => update({ event: e, index: 1, side: 0, eventType: 'edit' })"
+            >
+          </td>
+        </tr>
+        <tr v-if="isSeparate">
+          <td>
+            {{ $t('admin_dash.rate_limit.authenticated') }}
+          </td>
+          <td>
+            <input
+              class="input string-input"
+              type="number"
+              :value="normalizedState[1][0]"
+              @change="e => update({ event: e, index: 0, side: 1, eventType: 'edit' })"
+            >
+          </td>
+          <td>
+            <input
+              class="input string-input"
+              type="number"
+              :value="normalizedState[1][1]"
+              @change="e => update({ event: e, index: 1, side: 1, eventType: 'edit' })"
+            >
+          </td>
+        </tr>
+      </table>
+      <Checkbox
+        :model-value="isSeparate"
+        @update:model-value="event => update({ event: event ? 'join' : 'split', eventType: 'toggleMode' })"
+      >
+        {{ $t('admin_dash.rate_limit.separate') }}
+      </Checkbox>
+    </div>
+    <DraftButtons />
+  </div>
+</template>
+
+<script src="./rate_setting.js"></script>
+<style lang="scss">
+.RateSetting {
+  &.setting-item {
+    display: grid;
+    grid-template-areas:
+      "label control"
+      "desc control"
+      ". draft";
+
+    .setting-label {
+      text-align: right;
+      align-self: center;
+    }
+
+    .setting-description {
+      text-align: right;
+    }
+
+    .setting-control {
+      align-self: end;
+    }
+  }
+
+  table {
+    margin-top: 0.5em;
+  }
+
+  th {
+    font-weight: normal;
+  }
+
+  td {
+    input {
+      width: 15ch;
+    }
+  }
+
+  margin-bottom: 2em;
+}
+</style>
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index df137157a..cf68eaa14 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -1,7 +1,7 @@
 import ModifiedIndicator from './modified_indicator.vue'
 import ProfileSettingIndicator from './profile_setting_indicator.vue'
 import DraftButtons from './draft_buttons.vue'
-import { get, set, cloneDeep } from 'lodash'
+import { get, set, cloneDeep, isEqual } from 'lodash'
 
 export default {
   components: {
@@ -18,6 +18,22 @@ export default {
       type: [String, Array],
       required: false
     },
+    showDescription: {
+      type: Boolean,
+      required: false
+    },
+    descriptionPathOverride: {
+      type: [String, Array],
+      required: false
+    },
+    suggestions: {
+      type: [String, Array],
+      required: false
+    },
+    subgroup: {
+      type: String,
+      required: false
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -37,17 +53,27 @@ export default {
       type: String,
       default: undefined
     },
+    hideDraftButtons: { // this is for the weird backend hybrid (Boolean|String or Boolean|Number) settings
+      required: false,
+      type: Boolean
+    },
+    hideLabel: {
+      type: Boolean
+    },
     hideDescription: {
       type: Boolean
     },
     swapDescriptionAndLabel: {
       type: Boolean
     },
+    backendDescriptionPath: {
+      type: [String, Array]
+    },
     overrideBackendDescription: {
       type: Boolean
     },
     overrideBackendDescriptionLabel: {
-      type: Boolean
+      type: [Boolean, String]
     },
     draftMode: {
       type: Boolean,
@@ -73,7 +99,7 @@ export default {
   },
   created () {
     if (this.realDraftMode && (this.realSource !== 'admin' || this.path == null)) {
-      this.draft = this.state
+      this.draft = cloneDeep(this.state)
     }
   },
   computed: {
@@ -114,10 +140,13 @@ export default {
       return typeof this.draftMode === 'undefined' ? this.defaultDraftMode : this.draftMode
     },
     backendDescription () {
-      return get(this.$store.state.adminSettings.descriptions, this.path)
+      return get(this.$store.state.adminSettings.descriptions, this.descriptionPath)
     },
     backendDescriptionLabel () {
       if (this.realSource !== 'admin') return ''
+      if (this.overrideBackendDescriptionLabel !== '' && typeof this.overrideBackendDescriptionLabel === 'string') {
+        return this.overrideBackendDescriptionLabel
+      }
       if (!this.backendDescription || this.overrideBackendDescriptionLabel) {
         return this.$t([
           'admin_dash',
@@ -132,6 +161,7 @@ export default {
       }
     },
     backendDescriptionDescription () {
+      if (this.description) return this.description
       if (this.realSource !== 'admin') return ''
       if (this.hideDescription) return null
       if (!this.backendDescription || this.overrideBackendDescription) {
@@ -148,13 +178,20 @@ export default {
       }
     },
     backendDescriptionSuggestions () {
-      return this.backendDescription?.suggestions
+      return this.backendDescription?.suggestions || this.suggestions
     },
     shouldBeDisabled () {
       if (this.path == null) {
         return this.disabled
       }
-      const parentValue = this.parentPath !== undefined ? get(this.configSource, this.parentPath) : null
+      let parentValue = null
+      if (this.parentPath !== undefined && this.realSource === 'admin') {
+        if (this.realDraftMode) {
+          parentValue = get(this.$store.state.adminSettings.draft, this.parentPath)
+        } else {
+          parentValue = get(this.configSource, this.parentPath)
+        }
+      }
       return this.disabled || (parentValue !== null ? (this.parentInvert ? parentValue : !parentValue) : false)
     },
     configSource () {
@@ -209,17 +246,29 @@ export default {
       if (this.path == null) return null
       return Array.isArray(this.path) ? this.path : this.path.split('.')
     },
+    descriptionPath () {
+      if (this.path == null) return null
+      if (this.descriptionPathOverride) return this.descriptionPathOverride
+      const path = Array.isArray(this.path) ? this.path : this.path.split('.')
+      if (this.subgroup) {
+        return [
+            ...path.slice(0, path.length - 1),
+            ':subgroup,' + this.subgroup,
+            ...path.slice(path.length - 1)
+        ]
+      }
+      return path
+    },
     isDirty () {
       if (this.path == null) return false
       if (this.realSource === 'admin' && this.canonPath.length > 3) {
         return false // should not show draft buttons for "grouped" values
       } else {
-        return this.realDraftMode && this.draft !== this.state
+        return this.realDraftMode && !isEqual(this.draft, this.state)
       }
     },
     canHardReset () {
-      return this.realSource === 'admin' && this.$store.state.adminSettings.modifiedPaths &&
-             this.$store.state.adminSettings.modifiedPaths.has(this.canonPath.join(' -> '))
+      return this.realSource === 'admin' && this.$store.state.adminSettings.modifiedPaths?.has(this.canonPath.join(' -> '))
     },
     matchesExpertLevel () {
       return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index d0c70b150..2ab205db1 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -1,13 +1,20 @@
 <template>
-  <label
+  <span
     v-if="matchesExpertLevel"
-    class="StringSetting"
+    class="StringSetting setting-item"
   >
     <label
+      v-if="!hideLabel"
       :for="path"
       class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -16,21 +23,17 @@
       </template>
       <slot v-else />
     </label>
-    {{ ' ' }}
     <input
       :id="path"
-      class="input string-input"
+      class="setting-control input string-input"
+      :class="{ disabled: shouldBeDisabled }"
       :disabled="shouldBeDisabled"
+      :placeholder="backendDescriptionSuggestions"
       :value="realDraftMode ? draft : state"
       @change="update"
     >
     {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
-    <DraftButtons />
+    <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
@@ -38,7 +41,7 @@
     >
       {{ backendDescriptionDescription + ' ' }}
     </p>
-  </label>
+  </span>
 </template>
 
 <script src="./string_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/tuple_setting.js b/src/components/settings_modal/helpers/tuple_setting.js
new file mode 100644
index 000000000..f6f4753c0
--- /dev/null
+++ b/src/components/settings_modal/helpers/tuple_setting.js
@@ -0,0 +1,16 @@
+import Setting from './setting.js'
+
+export default {
+  ...Setting,
+  methods: {
+    ...Setting.methods,
+    getValue ({ e, side }) {
+      const [a, b] = this.visibleState || []
+      if (side === 0) {
+        return { tuple: [e.target.value, b]}
+      } else {
+        return { tuple: [a, e.target.value]}
+      }
+    }
+  }
+}
diff --git a/src/components/settings_modal/helpers/tuple_setting.vue b/src/components/settings_modal/helpers/tuple_setting.vue
new file mode 100644
index 000000000..e39e23344
--- /dev/null
+++ b/src/components/settings_modal/helpers/tuple_setting.vue
@@ -0,0 +1,58 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="setting-item"
+  >
+    <label
+      v-if="!hideLabel"
+      :for="path"
+      class="setting-label"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      {{ ' ' }}
+      <template v-if="backendDescriptionLabel">
+        {{ backendDescriptionLabel + ' ' }}
+      </template>
+      <template v-else-if="source === 'admin'">
+        MISSING LABEL FOR {{ path }}
+      </template>
+      <slot v-else />
+    </label>
+    <span class="setting-control">
+      <input
+        :id="path"
+        class="input string-input"
+        :class="{ disabled: shouldBeDisabled }"
+        :disabled="shouldBeDisabled"
+        :placeholder="backendDescriptionSuggestions?.[0]?.[0]"
+        :value="visibleState?.tuple?.[0]"
+        @change="e => update({ e, side: 0 })"
+      >
+      {{ ' ' }}
+      <input
+        :id="path"
+        class="input string-input"
+        :class="{ disabled: shouldBeDisabled }"
+        :disabled="shouldBeDisabled"
+        :placeholder="backendDescriptionSuggestions?.[0]?.[1]"
+        :value="visibleState?.tuple?.[1]"
+        @change="e => update({ e, side: 1 })"
+      >
+    </span>
+    <DraftButtons v-if="!hideDraftButtons" />
+    <p
+      v-if="backendDescriptionDescription"
+      class="setting-description"
+      :class="{ 'faint': shouldBeDisabled }"
+    >
+      {{ backendDescriptionDescription + ' ' }}
+    </p>
+  </span>
+</template>
+
+<script src="./tuple_setting.js"></script>
diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
index 0c0d6a689..d23745fa4 100644
--- a/src/components/settings_modal/helpers/unit_setting.vue
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -1,16 +1,20 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="UnitSetting"
+    class="UnitSetting setting-item"
   >
     <label
       :for="path"
-      class="size-label"
+      class="setting-label size-label"
     >
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      {{ ' ' }}
       <slot />
     </label>
-    {{ ' ' }}
-    <span class="no-break">
+    <span class="no-break setting-control">
       <input
         :id="path"
         class="input number-input"
@@ -38,10 +42,6 @@
       </Select>
     </span>
     {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
   </span>
 </template>
 
@@ -50,7 +50,7 @@
 <style lang="scss">
 .UnitSetting {
   .no-break {
-    display: inline-block;
+    display: inline-flex;
   }
 
   .number-input {
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
index 7fea1cab8..de0e1af26 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@@ -159,11 +159,13 @@ export default {
 
       const wrapperClasses = ['tab-content-wrapper', active ? '-active' : '-hidden' ]
       const contentClasses = ['tab-content']
-      if (props['full-width']) {
+      if (props['full-width'] || props['full-width'] === '') {
         contentClasses.push('-full-width')
+        wrapperClasses.push('-full-width')
       }
-      if (props['full-height']) {
+      if (props['full-height'] || props['full-width'] === '') {
         contentClasses.push('-full-height')
+        wrapperClasses.push('-full-height')
       }
       return (
         <div class={wrapperClasses} >
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.scss b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
index b51df7d66..4bb4b7167 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.scss
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.scss
@@ -26,24 +26,6 @@
   }
 
   > .contents {
-    flex: 1 0 35em;
-
-    .tab-content {
-      align-self: center;
-
-      &:not(.-full-width) {
-        max-width: 40em;
-      }
-
-      &.-full-width {
-        align-self: stretch;
-      }
-
-      &.-full-height {
-        flex: 1;
-      }
-    }
-
     .tab-content-label {
       box-sizing: border-box;
       margin: 0;
@@ -60,8 +42,24 @@
       flex: 1 1 auto;
       height: 100%;
       overflow-y: auto;
-      display: flex;
+      display: grid;
+      grid-template-columns: minmax(1em, 1fr) minmax(min-content, 45em) minmax(1em, 1fr);
+      grid-template-areas: ". content .";
       flex-direction: column;
+
+      .tab-content {
+        grid-area: content;
+
+        &.-full-width {
+          grid-column: 1 / 4;
+        }
+
+        &.-full-height {
+          > * {
+            height: 100%;
+          }
+        }
+      }
     }
 
     .tab-content-wrapper {
@@ -109,6 +107,10 @@
         flex-shrink: 1;
       }
     }
+
+    .tab-slot-wrapper {
+      grid-template-columns: 0 minmax(min-content, 45em) 0;
+    }
   }
 
   @supports (container-type: inline-size) {
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index b4677fe7f..789ebd0ee 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -170,7 +170,7 @@ const SettingsModal = {
   },
   computed: {
     ...mapState(useInterfaceStore, {
-      temporaryChangesTimeoutId: store => store.temporaryChangesTimeoutId,
+      temporaryChangesCountdown: store => store.temporaryChangesCountdown,
       currentSaveStateNotice: store => store.settings.currentSaveStateNotice,
       modalActivated: store => store.settingsModalState !== 'hidden',
       modalMode: store => store.settingsModalMode,
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index fd24697b6..032b603fa 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -6,6 +6,7 @@
     font-weight: 500;
     margin-top: 1em;
     margin-bottom: 1em;
+    margin-right: 1em;
   }
 
   h3 {
@@ -13,6 +14,7 @@
     font-weight: 500;
     margin-top: 1em;
     margin-bottom: 0.5em;
+    margin-right: 1em;
     border-bottom: 1px solid var(--border);
     padding-bottom: 0.25em;
     box-sizing: border-box;
@@ -22,36 +24,133 @@
   h4 {
     font-size: 1.1rem;
     margin-top: 1em;
+    margin-right: 1em;
     margin-bottom: 0.5em;
+    margin-left: 1em;
   }
 
   h5 {
     font-size: 1rem;
-    margin-bottom: 0.5em;
-    margin-top: 0;
+    margin-left: 1em;
+    margin-bottom: 0.25em;
+    margin-top: 0.75em;
+  }
+
+  p {
+    line-height: 1.5;
+  }
+
+  .suboptions {
+    margin-left: 1em;
+  }
+
+  .sidenote {
+    margin-left: 5em;
+    padding: 0.25em 1em;
+    margin-top: 0.25em;
+  }
+
+  .setting-description {
+    margin-top: 0.2em;
+    margin-bottom: 0;
+    font-size: 80%;
+  }
+
+  .setting-item {
+    display: grid;
+    grid-template-areas:
+      "label control"
+      "label desc"
+      ".     draft";
+    grid-template-columns: 4fr 5fr;
+    column-gap: 0.5em;
+    align-items: baseline;
+    padding: 0.5em 0;
+
+    .setting-label {
+      grid-area: label;
+      text-align: right;
+    }
+
+    .ModifiedIndicator,
+    .ProfileSettingIndicator {
+      grid-area: indicator;
+    }
+
+    .setting-control {
+      grid-area: control;
+
+      &.textarea {
+        align-self: baseline;
+        overflow: auto;
+      }
+
+      &.checkbox {
+        display: grid;
+        grid-template-columns: subgrid;
+
+        .label {
+          grid-area: label;
+          text-align: right;
+        }
+
+        .checkbox-indicator {
+          grid-area: control;
+        }
+
+        .-mobile & {
+          .label {
+            text-align: left;
+          }
+        }
+      }
+    }
+
+    .setting-control.setting-label {
+      grid-column: 1 / 3;
+      text-align: left;
+    }
+
+    .setting-description {
+      grid-area: desc;
+    }
+
+    .DraftButtons {
+      grid-area: draft;
+    }
+  }
+
+  .vertical-tab-switcher {
+    height: 100%;
   }
 
   .setting-list,
   .option-list {
     list-style-type: none;
-    padding-left: 2em;
+    padding-left: 0;
     margin: 0;
 
     .btn:not(.dropdown-button) {
       padding: 0 2em;
     }
 
-    li {
-      margin: 1em 0;
-    }
-
-    .suboptions {
-      margin-top: 0.3em;
+    .btn-group {
+      .button-default {
+        flex: 0 1 auto;
+      }
     }
 
     &.two-column {
       display: grid;
       grid-template-columns: 1fr 1fr;
+      margin-left: 2em;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 0.5em;
+      margin-bottom: 1em;
+
+      .setting-item {
+        grid-template-columns: 3fr 1fr;
+      }
 
       > li {
         margin: 0;
@@ -60,12 +159,6 @@
     }
   }
 
-  .setting-description {
-    margin-top: 0.2em;
-    margin-bottom: 2em;
-    font-size: 70%;
-  }
-
   .settings-modal-panel {
     overflow: hidden;
     transition: transform;
@@ -114,20 +207,39 @@
       }
     }
 
+    /* stylelint-disable no-descending-specificity */
+    .setting-item {
+      grid-template-columns: 1fr min-content;
+      column-gap: 0.5em;
+      padding: 1em;
+      align-items: center;
+
+      .setting-label {
+        text-align: left;
+      }
+
+      .checkbox {
+        .label {
+          text-align: left;
+          margin-left: 0;
+        }
+      }
+    }
+
+    ul {
+      padding: 0;
+
+      li:not(:first-child) {
+        .setting-item {
+          border-top: 1px solid var(--border);
+        }
+      }
+    }
+
+
+
     .setting-list:not(.suboptions),
     .option-list {
-      padding-left: 0.25em;
-
-
-      /* stylelint-disable no-descending-specificity */
-      // it makes no sense
-      > li {
-        margin: 1em 0;
-        line-height: 1.5em;
-        vertical-align: middle;
-      }
-      /* stylelint-enable no-descending-specificity */
-
       &.two-column {
         grid-template-columns: 1fr;
       }
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index b4ccba191..d2b4f60ee 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -158,14 +158,14 @@
     </div>
     <teleport to="#modal">
       <ConfirmModal
-        v-if="temporaryChangesTimeoutId"
+        v-if="temporaryChangesCountdown > 0"
         :title="$t('settings.confirm_new_setting')"
         :cancel-text="$t('settings.revert')"
         :confirm-text="$t('settings.confirm')"
         @cancelled="temporaryChangesRevert"
         @accepted="temporaryChangesConfirm"
       >
-        {{ $t('settings.confirm_new_question') }}
+        {{ $t('settings.confirm_new_question_countdown', temporaryChangesCountdown) }}
       </ConfirmModal>
     </teleport>
   </Modal>
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index bc0039118..77a3d6b81 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -1,32 +1,61 @@
 import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
 
 import InstanceTab from './admin_tabs/instance_tab.vue'
+import LinksTab from './admin_tabs/links_tab.vue'
 import LimitsTab from './admin_tabs/limits_tab.vue'
 import FrontendsTab from './admin_tabs/frontends_tab.vue'
+import MediaProxyTab from './admin_tabs/media_proxy_tab.vue'
 import EmojiTab from './admin_tabs/emoji_tab.vue'
+import UploadsTab from './admin_tabs/uploads_tab.vue'
+import MailerTab from './admin_tabs/mailer_tab.vue'
+import MonitoringTab from './admin_tabs/monitoring_tab.vue'
+import RegistrationsTab from './admin_tabs/registrations_tab.vue'
+import AuthTab from './admin_tabs/auth_tab.vue'
+import HTTPTab from './admin_tabs/http_tab.vue'
+import OtherTab from './admin_tabs/other_tab.vue'
+import RatesTab from './admin_tabs/rates_tab.vue'
+import PostsTab from './admin_tabs/posts_tab.vue'
+import FederationTab from './admin_tabs/federation_tab.vue'
+import JobQueuesTab from './admin_tabs/job_queues_tab.vue'
 import { useInterfaceStore } from 'src/stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faWrench,
   faHand,
+  faChain,
+  faGlobe,
   faLaptopCode,
-  faPaintBrush,
-  faBell,
-  faDownload,
-  faEyeSlash,
-  faInfo
+  faTowerBroadcast,
+  faEnvelope,
+  faChartLine,
+  faDoorOpen,
+  faGears,
+  faKey,
+  faCircleNodes,
+  faUpload,
+  faMessage,
+  faEllipsis,
+  faGauge
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faWrench,
   faHand,
+  faChain,
+  faGlobe,
   faLaptopCode,
-  faPaintBrush,
-  faBell,
-  faDownload,
-  faEyeSlash,
-  faInfo
+  faTowerBroadcast,
+  faEnvelope,
+  faChartLine,
+  faDoorOpen,
+  faGears,
+  faKey,
+  faCircleNodes,
+  faUpload,
+  faMessage,
+  faEllipsis,
+  faGauge
 )
 
 const SettingsModalAdminContent = {
@@ -34,9 +63,22 @@ const SettingsModalAdminContent = {
     VerticalTabSwitcher,
 
     InstanceTab,
-    LimitsTab,
+    RegistrationsTab,
+    EmojiTab,
     FrontendsTab,
-    EmojiTab
+    FederationTab,
+    LimitsTab,
+    MailerTab,
+    UploadsTab,
+    MediaProxyTab,
+    LinksTab,
+    JobQueuesTab,
+    AuthTab,
+    HTTPTab,
+    MonitoringTab,
+    RatesTab,
+    OtherTab,
+    PostsTab
   },
   computed: {
     user () {
diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
deleted file mode 100644
index c1a25cf1e..000000000
--- a/src/components/settings_modal/settings_modal_admin_content.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-.settings_tab-switcher {
-  height: 100%;
-
-  .setting-item {
-    border-bottom: 2px solid var(--border);
-    margin: 1em 1em 1.4em;
-    padding-bottom: 1.4em;
-
-    > div,
-    > label {
-      display: block;
-      margin-bottom: 0.5em;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .select-multiple {
-      margin-top: 0.5em;
-      display: flex;
-      flex-direction: column;
-
-      .option-list {
-        margin: 0;
-        margin-top: 0.5em;
-        padding-left: 0.5em;
-      }
-    }
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-      margin-bottom: 1em;
-    }
-
-    textarea {
-      width: 100%;
-      max-width: 100%;
-      height: 100px;
-    }
-
-    .unavailable,
-    .unavailable svg {
-      color: var(--cRed);
-    }
-  }
-}
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index 501a3acf6..94f843871 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -2,7 +2,7 @@
   <vertical-tab-switcher
     v-if="adminDescriptionsLoaded && (noDb || adminDbLoaded)"
     ref="tabSwitcher"
-    class="settings_tab-switcher"
+    class="settings-admin-content settings_tab-switcher"
     :side-tab-bar="true"
     :scrollable-tabs="true"
     :render-only-focused="true"
@@ -15,7 +15,7 @@
       data-tab-name="nodb-notice"
     >
       <div :label="$t('admin_dash.tabs.nodb')">
-        <div class="setting-item">
+        <div class="setting-section">
           <h2>{{ $t('admin_dash.nodb.heading') }}</h2>
           <i18n-t
             scope="global"
@@ -48,6 +48,41 @@
     >
       <InstanceTab />
     </div>
+
+    <div
+      :label="$t('admin_dash.tabs.registrations')"
+      icon="door-open"
+      data-tab-name="registrations"
+    >
+      <RegistrationsTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.auth')"
+      icon="key"
+      data-tab-name="monitoring"
+    >
+      <AuthTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.emoji')"
+      icon="face-smile-beam"
+      data-tab-name="emoji"
+      full-width
+    >
+      <EmojiTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.frontends')"
+      icon="laptop-code"
+      data-tab-name="frontends"
+      full-width
+    >
+      <FrontendsTab />
+    </div>
+
     <div
       v-if="adminDbLoaded"
       :label="$t('admin_dash.tabs.limits')"
@@ -56,24 +91,104 @@
     >
       <LimitsTab />
     </div>
+
     <div
-      :label="$t('admin_dash.tabs.frontends')"
-      icon="laptop-code"
-      data-tab-name="frontends"
+      v-if="adminDbLoaded"
+      :label="$t('admin_dash.tabs.rate_limit')"
+      icon="gauge"
+      data-tab-name="rate_limits"
     >
-      <FrontendsTab />
+      <RatesTab />
     </div>
 
     <div
-      :label="$t('admin_dash.tabs.emoji')"
-      icon="face-smile-beam"
-      data-tab-name="emoji"
+      :label="$t('admin_dash.tabs.uploads')"
+      icon="upload"
+      data-tab-name="uploads"
     >
-      <EmojiTab />
+      <UploadsTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.media_proxy')"
+      icon="tower-broadcast"
+      data-tab-name="media_proxy"
+    >
+      <MediaProxyTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.posts')"
+      icon="message"
+      data-tab-name="other"
+    >
+      <PostsTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.links')"
+      icon="chain"
+      data-tab-name="links"
+    >
+      <LinksTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.mailer')"
+      icon="envelope"
+      data-tab-name="mailer"
+    >
+      <MailerTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.federation')"
+      icon="circle-nodes"
+      data-tab-name="monitoring"
+    >
+      <FederationTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.http')"
+      icon="globe"
+      data-tab-name="http"
+    >
+      <HTTPTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.job_queues')"
+      icon="gears"
+      data-tab-name="job_queues"
+    >
+      <JobQueuesTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.monitoring')"
+      icon="chart-line"
+      data-tab-name="monitoring"
+    >
+      <MonitoringTab />
+    </div>
+
+    <div
+      :label="$t('admin_dash.tabs.other')"
+      icon="ellipsis"
+      data-tab-name="other"
+    >
+      <OtherTab />
     </div>
   </vertical-tab-switcher>
 </template>
 
 <script src="./settings_modal_admin_content.js"></script>
 
-<style src="./settings_modal_admin_content.scss" lang="scss"></style>
+<style lang="scss">
+.settings-admin-content {
+  .setting-item {
+    grid-template-columns: 1fr 3fr;
+  }
+}
+</style>
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
deleted file mode 100644
index 306d8e898..000000000
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-.settings_tab-switcher {
-  height: 100%;
-
-  [full-height="true"] {
-    height: 100%
-  }
-
-  .setting-item {
-    margin: 1em 1em 1.4em;
-    padding-bottom: 1.4em;
-
-    > div,
-    > label {
-      margin-bottom: 0.5em;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    .select-multiple {
-      margin-top: 1em;
-      display: flex;
-      flex-direction: column;
-
-      .option-list {
-        margin: 0;
-        margin-top: 0.5em;
-        padding-left: 0.5em;
-      }
-    }
-
-    &:last-child {
-      border-bottom: none;
-      padding-bottom: 0;
-      margin-bottom: 1em;
-    }
-
-    textarea {
-      width: 100%;
-      max-width: 100%;
-      height: 100px;
-    }
-
-    .unavailable,
-    .unavailable svg {
-      color: var(--cRed);
-    }
-  }
-}
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index b2b291e9b..2bde5b21b 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -49,7 +49,6 @@
       <AppearanceTab />
     </div>
     <div
-      :full-width="true"
       :label="$t('settings.layout')"
       icon="table-columns"
       data-tab-name="layout"
@@ -68,7 +67,6 @@
     </div>
     <div
       :label="$t('settings.filtering')"
-      :full-width="true"
       icon="filter"
       data-tab-name="filtering"
     >
@@ -139,5 +137,3 @@
 </template>
 
 <script src="./settings_modal_user_content.js"></script>
-
-<style src="./settings_modal_user_content.scss" lang="scss"></style>
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index e4c3741a9..db37774aa 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -237,7 +237,6 @@ const AppearanceTab = {
       return !window.IntersectionObserver
     },
     instanceWallpaper () {
-      console.log(this.$store.state.instance.background)
       this.$store.state.instance.background
     },
     instanceWallpaperUsed () {
diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss
index a52bd97d0..eadfa090d 100644
--- a/src/components/settings_modal/tabs/appearance_tab.scss
+++ b/src/components/settings_modal/tabs/appearance_tab.scss
@@ -1,4 +1,6 @@
 .appearance-tab {
+  margin: 1em;
+
   h3 {
     border: none
   }
@@ -67,7 +69,7 @@
         aspect-ratio: 16 / 9;
         width: 16em;
       }
-         
+
       img {
         object-fit: cover;
       }
@@ -138,6 +140,7 @@
     border: 1px solid var(--border);
     margin-bottom: 0.5em;
     margin-top: 0;
+    padding: 0.5em;
   }
 
   .palettes {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index d9303ce7b..75a06388d 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -5,7 +5,7 @@
     icon="table-columns"
   >
     <div
-      class="setting-item"
+      class="setting-section"
       :label="$t('settings.theme')"
       icon="paintbrush"
     >
@@ -161,13 +161,16 @@
             <div class="fun-monitor-neck button-default" />
             <div class="fun-monitor-display-bezel button-default">
               <div class="fun-monitor-display-screen input">
-              <img
-                v-if="backgroundPreview || user.background_image || instanceWallpaper"
-                class="fun-monitor-display-screen-image"
-                :src="backgroundPreview || user.background_image || instanceWallpaper"
-              />
-              <div v-else class="wallpaper" />
-              <div class="fun-monitor-display-screen-overlay input" />
+                <img
+                  v-if="backgroundPreview || user.background_image || instanceWallpaper"
+                  class="fun-monitor-display-screen-image"
+                  :src="backgroundPreview || user.background_image || instanceWallpaper"
+                >
+                <div
+                  v-else
+                  class="wallpaper"
+                />
+                <div class="fun-monitor-display-screen-overlay input" />
                 <div
                   v-if="backgroundUploading"
                   class="fun-monitor-display-uploading"
diff --git a/src/components/settings_modal/tabs/clutter_tab.js b/src/components/settings_modal/tabs/clutter_tab.js
index 8e12104fc..d4edf8f66 100644
--- a/src/components/settings_modal/tabs/clutter_tab.js
+++ b/src/components/settings_modal/tabs/clutter_tab.js
@@ -152,7 +152,6 @@ const ClutterTab = {
     },
     purgeExpiredFilters () {
       this.muteFiltersExpired.forEach(([id]) => {
-        console.log(id)
         delete this.muteFiltersDraftObject[id]
         this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
       })
diff --git a/src/components/settings_modal/tabs/clutter_tab.vue b/src/components/settings_modal/tabs/clutter_tab.vue
index aa3b4cb09..daf098f5a 100644
--- a/src/components/settings_modal/tabs/clutter_tab.vue
+++ b/src/components/settings_modal/tabs/clutter_tab.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="clutter-tab">
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.interface') }}</h3>
       <ul class="setting-list">
         <li>
diff --git a/src/components/settings_modal/tabs/composing_tab.vue b/src/components/settings_modal/tabs/composing_tab.vue
index 60640aab0..f71d64600 100644
--- a/src/components/settings_modal/tabs/composing_tab.vue
+++ b/src/components/settings_modal/tabs/composing_tab.vue
@@ -1,14 +1,19 @@
 <template>
   <div :label="$t('settings.posts')">
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.general') }}</h3>
       <ul class="setting-list">
         <li>
-          <label for="default-vis">
-            {{ $t('settings.default_vis') }}
-            {{ ' ' }}
+          <label
+            class="setting-item "
+            for="default-vis"
+          >
+            <span class="setting-label">
+              <ProfileSettingIndicator :is-profile="true" />
+              {{ $t('settings.default_vis') }}
+            </span>
             <ScopeSelector
-              class="scope-selector"
+              class="scope-selector setting-control"
               :show-all="true"
               :user-default="$store.state.profileConfig.defaultScope"
               :initial-scope="$store.state.profileConfig.defaultScope"
@@ -16,7 +21,6 @@
               :unstyled="false"
               uns
             />
-            <ProfileSettingIndicator :is-profile="true" />
           </label>
         </li>
         <li>
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.vue b/src/components/settings_modal/tabs/data_import_export_tab.vue
index cfd254277..d5e540b8b 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.vue
+++ b/src/components/settings_modal/tabs/data_import_export_tab.vue
@@ -3,7 +3,7 @@
     class="data-import-export-tab"
     :label="$t('settings.data_import_export_tab')"
   >
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.import_export.title') }}</h3>
       <ul class="setting-list">
         <li>
diff --git a/src/components/settings_modal/tabs/developer_tab.scss b/src/components/settings_modal/tabs/developer_tab.scss
index 944cf052f..a94b5c122 100644
--- a/src/components/settings_modal/tabs/developer_tab.scss
+++ b/src/components/settings_modal/tabs/developer_tab.scss
@@ -1,4 +1,24 @@
 .developer-tab {
+  .setting-list {
+    margin-left: 2em;
+  }
+
+  .cache-buttons {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column: 1 / 3;
+    column-gap: 0.5em;
+    margin: 0 5em;
+
+    .-mobile & {
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 0.5em;
+      margin: 0;
+    }
+  }
+
+
   dt {
     font-weight: 900;
   }
diff --git a/src/components/settings_modal/tabs/developer_tab.vue b/src/components/settings_modal/tabs/developer_tab.vue
index aafa4ec17..1544c02a9 100644
--- a/src/components/settings_modal/tabs/developer_tab.vue
+++ b/src/components/settings_modal/tabs/developer_tab.vue
@@ -3,7 +3,7 @@
     :label="$t('settings.developer')"
     class="developer-tab"
   >
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.version.title') }}</h3>
       <dl class="setting-list">
         <dt>{{ $t('settings.version.backend_version') }}</dt>
@@ -32,22 +32,6 @@
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </li>
-        <li>
-          <button
-            class="btn button-default"
-            @click="clearAssetCache"
-          >
-            {{ $t('settings.clear_asset_cache') }}
-          </button>
-        </li>
-        <li>
-          <button
-            class="btn button-default"
-            @click="clearEmojiCache"
-          >
-            {{ $t('settings.clear_emoji_cache') }}
-          </button>
-        </li>
         <li>
           <BooleanSetting
             path="themeDebug"
@@ -64,6 +48,25 @@
             {{ $t('settings.force_theme_recompilation_debug') }}
           </BooleanSetting>
         </li>
+        <h4>{{ $t('settings.cache') }}</h4>
+        <li>
+          <div class="setting-item">
+            <div class="cache-buttons">
+              <button
+                class="btn button-default"
+                @click="clearAssetCache"
+              >
+                {{ $t('settings.clear_asset_cache') }}
+              </button>
+              <button
+                class="btn button-default"
+                @click="clearEmojiCache"
+              >
+                {{ $t('settings.clear_emoji_cache') }}
+              </button>
+            </div>
+          </div>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index ee9142501..594ce3f58 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -217,7 +217,6 @@ const FilteringTab = {
     },
     purgeExpiredFilters () {
       this.muteFiltersExpired.forEach(([id]) => {
-        console.log(id)
         delete this.muteFiltersDraftObject[id]
         this.unsetPreference({ path: 'simple.muteFilters.' + id , value: null })
       })
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index e695a1061..ff7498656 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="filtering-tab">
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.filter.mute_filter') }}</h3>
       <ul class="setting-list">
         <li>
@@ -14,19 +14,23 @@
           </ChoiceSetting>
         </li>
         <li>
-          {{ $t('user_card.default_mute_expiration') }}
-          <Select
-            id="onMuteDefaultActionLv1"
-            v-model="onMuteDefaultActionLv1"
-          >
-            <option
-              v-for="option in muteBlockLv1Options"
-              :key="option.key"
-              :value="option.value"
+          <span class="setting-item">
+            <span class="setting-label">
+              {{ $t('user_card.default_mute_expiration') }}
+            </span>
+            <Select
+              id="onMuteDefaultActionLv1"
+              v-model="onMuteDefaultActionLv1"
             >
-              {{ option.label }}
-            </option>
-          </Select>
+              <option
+                v-for="option in muteBlockLv1Options"
+                :key="option.key"
+                :value="option.value"
+              >
+                {{ option.label }}
+              </option>
+            </Select>
+          </span>
           <ul
             v-if="onMuteDefaultActionLv1 === 'temporarily'"
             class="setting-list suboptions"
@@ -44,19 +48,24 @@
           </ul>
         </li>
         <li v-if="blockExpirationSupported">
-          {{ $t('user_card.default_block_expiration') }}
-          <Select
-            id="onBlockDefaultActionLv1"
-            v-model="onBlockDefaultActionLv1"
-          >
-            <option
-              v-for="option in muteBlockLv1Options"
-              :key="option.key"
-              :value="option.value"
+          <span class="setting-item">
+            <span class="setting-label">
+              {{ $t('user_card.default_block_expiration') }}
+            </span>
+            <Select
+              id="onBlockDefaultActionLv1"
+              v-model="onBlockDefaultActionLv1"
+              class="setting-control"
             >
-              {{ option.label }}
-            </option>
-          </Select>
+              <option
+                v-for="option in muteBlockLv1Options"
+                :key="option.key"
+                :value="option.value"
+              >
+                {{ option.label }}
+              </option>
+            </Select>
+          </span>
           <ul
             v-if="onBlockDefaultActionLv1 === 'temporarily'"
             class="setting-list suboptions"
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 2796c9a95..ceb073a48 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -1,25 +1,25 @@
 <template>
   <div>
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.format_and_language') }}</h3>
       <ul class="setting-list">
-        <li>
-          <interface-language-switcher
-            v-model="language"
-            @update="val => language = val"
-          >
-            {{ $t('settings.interfaceLanguage') }}
-          </interface-language-switcher>
-        </li>
-        <li>
-          <interface-language-switcher
-            v-model="emailLanguage"
-            :profile="true"
-            @update:model-value="updateProfile()"
-          >
-            {{ $t('settings.email_language') }}
-          </interface-language-switcher>
-        </li>
+        <h4>{{ $t('settings.interfaceLanguage') }}</h4>
+        <interface-language-switcher
+          v-model="language"
+          class="lang-selector"
+          @update="val => language = val"
+        />
+        <h4>
+          {{ $t('settings.email_language') }}
+          {{ ' ' }}
+          <ProfileSettingIndicator :is-profile="true" />
+        </h4>
+        <interface-language-switcher
+          v-model="emailLanguage"
+          class="lang-selector"
+          :profile="true"
+          @update:model-value="updateProfile()"
+        />
         <li>
           <BooleanSetting path="useAbsoluteTimeFormat">
             {{ $t('settings.absolute_time_format') }}
@@ -47,26 +47,24 @@
           >
             {{ $t('settings.text_size') }}
           </UnitSetting>
-          <div>
-            <small>
-              <i18n-t
-                scope="global"
-                keypath="settings.text_size_tip"
-                tag="span"
-              >
-                <code>px</code>
-                <code>rem</code>
-              </i18n-t>
-              <br>
-              <i18n-t
-                scope="global"
-                keypath="settings.text_size_tip2"
-                tag="span"
-              >
-                <code>14px</code>
-              </i18n-t>
-            </small>
-          </div>
+          <p class="sidenote">
+            <i18n-t
+              scope="global"
+              keypath="settings.text_size_tip"
+              tag="span"
+            >
+              <code>px</code>
+              <code>rem</code>
+            </i18n-t>
+            <br>
+            <i18n-t
+              scope="global"
+              keypath="settings.text_size_tip2"
+              tag="span"
+            >
+              <code>14px</code>
+            </i18n-t>
+          </p>
         </li>
         <li>
           <FontControl
@@ -144,7 +142,9 @@
         class="setting-list"
       >
         <li class="select-multiple">
-          <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
+          <h4 class="label">
+            {{ $t('settings.confirm_dialogs') }}
+          </h4>
           <ul class="option-list">
             <li>
               <BooleanSetting path="modalOnRepeat">
@@ -156,9 +156,10 @@
                 {{ $t('settings.confirm_dialogs_unfollow') }}
               </BooleanSetting>
             </li>
-            <li>
+            <li
+              v-if="!blockExpirationSupported"
+            >
               <BooleanSetting
-                v-if="!blockExpirationSupported"
                 path="modalOnBlock"
               >
                 {{ $t('settings.confirm_dialogs_block') }}
diff --git a/src/components/settings_modal/tabs/layout_tab.vue b/src/components/settings_modal/tabs/layout_tab.vue
index 68e90d346..2290b0630 100644
--- a/src/components/settings_modal/tabs/layout_tab.vue
+++ b/src/components/settings_modal/tabs/layout_tab.vue
@@ -1,6 +1,6 @@
 <template>
   <div :label="$t('settings.layout')">
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.general') }}</h3>
       <ul class="setting-list">
         <li>
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 351c1dd9c..d08f07b68 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -1,6 +1,6 @@
 <template>
   <div :label="$t('settings.notifications')">
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.notification_setting_annoyance') }}</h3>
       <ul class="setting-list">
         <li>
@@ -12,11 +12,9 @@
           <BooleanSetting path="ignoreInactionableSeen">
             {{ $t('settings.notification_setting_ignore_inactionable_seen') }}
           </BooleanSetting>
-          <div>
-            <small>
-              {{ $t('settings.notification_setting_ignore_inactionable_seen_tip') }}
-            </small>
-          </div>
+          <p class="sidenote">
+            {{ $t('settings.notification_setting_ignore_inactionable_seen_tip') }}
+          </p>
         </li>
         <li>
           <BooleanSetting
@@ -28,7 +26,7 @@
         </li>
       </ul>
     </div>
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.notification_setting_filters') }}</h3>
       <ul class="setting-list">
         <li>
@@ -41,7 +39,10 @@
         </li>
         <li>
           <h4> {{ $t('settings.notification_visibility') }}</h4>
-          <p v-if="expertLevel > 0">
+          <p
+            v-if="expertLevel > 0"
+            class="sidenote"
+          >
             {{ $t('settings.notification_setting_filters_chrome_push') }}
           </p>
           <ul class="setting-list two-column">
@@ -241,7 +242,7 @@
 
     <div
       v-if="expertLevel > 0"
-      class="setting-item"
+      class="setting-section"
     >
       <h3>{{ $t('settings.notification_setting_privacy') }}</h3>
       <ul class="setting-list">
@@ -260,11 +261,12 @@
               >
                 {{ $t('settings.enable_web_push_always_show') }}
               </BooleanSetting>
-              <div :class="{ faint: !mergedConfig.webPushNotifications }">
-                <small>
-                  {{ $t('settings.enable_web_push_always_show_tip') }}
-                </small>
-              </div>
+              <p
+                :class="{ faint: !mergedConfig.webPushNotifications }"
+                class="sidenote"
+              >
+                {{ $t('settings.enable_web_push_always_show_tip') }}
+              </p>
             </li>
           </ul>
         </li>
@@ -279,10 +281,12 @@
         </li>
       </ul>
     </div>
-    <div class="setting-item">
-      <p>{{ $t('settings.notification_mutes') }}</p>
-      <p>{{ $t('settings.notification_blocks') }}</p>
-    </div>
+    <p class="sidenote">
+      <ul>
+        <li>{{ $t('settings.notification_mutes') }}</li>
+        <li>{{ $t('settings.notification_blocks') }}</li>
+      </ul>
+    </p>
   </div>
 </template>
 
diff --git a/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.scss b/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.scss
index 96a1b154f..9ec6b7b2f 100644
--- a/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.scss
+++ b/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.scss
@@ -1,5 +1,6 @@
 .old-theme-tab {
   min-width: var(--themeEditorMinWidth, fit-content);
+  margin: 1em;
 
   .deprecation-warning {
     padding: 0.5em;
diff --git a/src/components/settings_modal/tabs/posts_tab.vue b/src/components/settings_modal/tabs/posts_tab.vue
index 19389600a..0a864d179 100644
--- a/src/components/settings_modal/tabs/posts_tab.vue
+++ b/src/components/settings_modal/tabs/posts_tab.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="posts-tab">
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.posts_appearance') }}</h3>
       <ul class="setting-list">
         <li>
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index ce85188bd..6e8b2b131 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -1,6 +1,6 @@
 .profile-tab {
   // overriding global for better look
-  .setting-item.profile-edit {
+  .setting-section.profile-edit {
     margin: 0;
 
     h2 {
@@ -11,5 +11,28 @@
       padding: 1.2em;
       overflow: hidden;
     }
+
+  }
+
+  .setting-item {
+    .custom-boolean-setting {
+      display: grid;
+      grid-template-columns: subgrid;
+
+      .label {
+        grid-area: label;
+        text-align: right;
+      }
+
+      .-mobile & {
+        .label {
+          text-align: left;
+        }
+      }
+
+      .checkbox-indicator {
+        grid-area: control;
+      }
+    }
   }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index e98551f1c..80064daf8 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -1,20 +1,25 @@
 <template>
   <div class="profile-tab">
-    <div class="setting-item profile-edit">
+    <div class="setting-section profile-edit">
       <UserCard
         :user-id="user.id"
         :editable="true"
         :switcher="false"
       />
     </div>
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.account_privacy') }}</h3>
       <ul class="setting-list">
         <li>
-          <Checkbox v-model="locked">
-            {{ $t('settings.lock_account_description') }}
-          </Checkbox>
-          <ProfileSettingIndicator :is-profile="true" />
+          <div class="setting-item">
+            <Checkbox
+              v-model="locked"
+              class="setting-label setting-control custom-boolean-setting"
+            >
+              <ProfileSettingIndicator :is-profile="true" />
+              {{ $t('settings.lock_account_description') }}
+            </Checkbox>
+          </div>
         </li>
         <li>
           <BooleanSetting
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index 7e825062f..9859e809a 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="readyInit && settings.available"
-    class="setting-item mfa-settings"
+    class="setting-section mfa-settings"
   >
     <div class="mfa-heading">
       <h2>{{ $t('settings.mfa.title') }}</h2>
@@ -10,7 +10,7 @@
     <div>
       <div
         v-if="!setupInProgress"
-        class="setting-item"
+        class="setting-section"
       >
         <!-- Enabled methods -->
         <h3>{{ $t('settings.mfa.authentication_methods') }}</h3>
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..ff1a969d7 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -1,6 +1,6 @@
 <template>
   <div :label="$t('settings.security_tab')">
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.change_email') }}</h3>
       <ul class="setting-list">
         <li>
@@ -41,7 +41,7 @@
       </ul>
     </div>
 
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.change_password') }}</h3>
       <ul class="setting-list">
         <li>
@@ -90,7 +90,7 @@
       </ul>
     </div>
 
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.account_alias') }}</h3>
       <table>
         <thead>
@@ -160,7 +160,7 @@
     </div>
 
 
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.oauth_tokens') }}</h3>
       <table class="oauth-tokens">
         <thead>
@@ -191,7 +191,7 @@
     </div>
     <mfa />
 
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.move_account') }}</h3>
       <p>{{ $t('settings.move_account_notes') }}</p>
       <div>
@@ -234,7 +234,7 @@
       </template>
     </div>
 
-    <div class="setting-item">
+    <div class="setting-section">
       <h3>{{ $t('settings.delete_account') }}</h3>
       <p v-if="!deletingAccount">
         {{ $t('settings.delete_account_description') }}
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.scss b/src/components/settings_modal/tabs/style_tab/style_tab.scss
index 57d81cf70..eb31f9684 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.scss
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.scss
@@ -1,5 +1,6 @@
 .StyleTab {
   min-width: var(--themeEditorMinWidth, fit-content);
+  margin: 1em;
 
   .style-control {
     align-items: baseline;
@@ -45,7 +46,7 @@
     }
   }
 
-  .setting-item.heading {
+  .setting-section.heading {
     padding: 0;
   }
 
@@ -84,8 +85,9 @@
     }
   }
 
-  .setting-item {
+  .setting-section {
     padding-bottom: 0;
+    margin-top: 1em;
 
     .btn {
       padding: 0 0.5em;
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
index 0ced0baf4..eb86026e2 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -3,7 +3,7 @@
 
 <template>
   <div class="StyleTab">
-    <div class="setting-item heading">
+    <div class="setting-section heading">
       <div class="meta-preview">
         <Preview id="edited-style-preview" />
         <teleport
@@ -82,7 +82,7 @@
     <tab-switcher>
       <div
         key="component"
-        class="setting-item component-editor"
+        class="setting-section component-editor"
         :label="$t('settings.style.themes3.editor.component_tab')"
         :full-width="true"
       >
@@ -331,7 +331,7 @@
       <div
         key="palette"
         :label="$t('settings.style.themes3.editor.palette_tab')"
-        class="setting-item list-editor palette-editor"
+        class="setting-section list-editor palette-editor"
         :full-width="true"
       >
         <label
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
index b2b50b3e8..69f974e9f 100644
--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue
@@ -1,7 +1,7 @@
 <script src="./virtual_directives_tab.js"></script>
 
 <template>
-  <div class="setting-item list-editor variables-editor">
+  <div class="setting-section list-editor variables-editor">
     <label
       class="list-select-label"
       for="variables-selector"
diff --git a/src/components/settings_modal/tabs/uploads_tab.vue b/src/components/settings_modal/tabs/uploads_tab.vue
new file mode 100644
index 000000000..375032d6e
--- /dev/null
+++ b/src/components/settings_modal/tabs/uploads_tab.vue
@@ -0,0 +1,26 @@
+<template>
+  <div :label="$t('admin_dash.tabs.uploads')">
+    <div class="setting-section">
+      <h3>{{ $t('admin_dash.uploads.general') }}</h3>
+      <ul class="setting-list">
+        <li>
+          <ChoiceSetting
+            :path="[':pleroma','Pleroma.Upload']"
+            :option-label-map="adaptersLabels"
+          />
+        </li>
+        <h4>{{ $t('admin_dash.mailer.auth') }}</h4>
+        <li>
+          <!-- authentication info -->
+          <StringSetting
+            :path="[':pleroma','Pleroma.Emails.Mailer',':api_key']"
+            :password="true"
+            :subgroup="adapter"
+          />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./uploads_tab.js"></script>
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index bd7359ac9..a821b4af1 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -26,6 +26,10 @@
     height: auto; // override settings default textarea size
   }
 
+  .follow-button {
+    flex: 1 0 auto;
+  }
+
   .user-card-inner {
     padding-bottom: 0;
   }
diff --git a/src/i18n/en.json b/src/i18n/en.json
index e1f5fb23d..05a2d5ae5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -411,6 +411,7 @@
     "appearance": "Appearance",
     "confirm_new_setting": "Confirm new setting?",
     "confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
+    "confirm_new_question_countdown": "Does this look ok? Setting will be reverted in 1 second. | Does this look ok? Setting will be reverted in {count} seconds.",
     "revert": "Revert",
     "confirm": "Confirm",
     "text_size": "Text and interface size",
@@ -1152,7 +1153,80 @@
       "instance": "Instance",
       "limits": "Limits",
       "frontends": "Front-ends",
-      "emoji": "Emoji"
+      "mailer": "EMails",
+      "media_proxy": "Media Proxy",
+      "emoji": "Emoji",
+      "uploads": "Uploads",
+      "monitoring": "Monitoring",
+      "registrations": "Registrations",
+      "links": "Links",
+      "job_queues": "Job Queues",
+      "auth": "Auth",
+      "posts": "Posts",
+      "rate_limit": "Rate Limits",
+      "http": "HTTP",
+      "federation": "Federation",
+      "other": "Other"
+    },
+    "posts": {
+      "global": "Global settings",
+      "local": "Local posts",
+      "remote": "Remote posts"
+    },
+    "other": {
+      "uncategorized": "Uncategorized",
+      "user_backup": "User Backup",
+      "reports": "Reports",
+      "privileges": "Privileges"
+    },
+    "monitoring": {
+      "builtins": "Built-in Tools",
+      "prometheus": "Prometheus Exporter"
+    },
+    "federation": {
+      "global": "Global settings",
+      "restrictions": "Restrictions",
+      "activitypub": "ActivityPub"
+    },
+    "http": {
+      "outbound": "Outbound HTTP requests"
+    },
+    "auth": {
+      "MFA": "Multi-factor Authentication",
+      "LDAP": "LDAP Settings",
+      "OAuth": "Oauth2 settings",
+      "TOTP": "One-time Passwords (TOTP)",
+      "backup_codes": "Backup codes"
+    },
+    "job_queues": {
+      "Gun": {
+        "title": "Gun queues",
+        "connections_pools": "Gun connections pool",
+        "pools": {
+          "title": "Gun worker pools",
+          "default": "Default pool",
+          "federation": "Federation pool",
+          "media": "Media pool",
+          "rich_media": "Rich media pool",
+          "upload": "Upload pool"
+        }
+      },
+      "Hackney": {
+        "title": "Hackney pools",
+        "federation": "Federation",
+        "media": "Media",
+        "rich_media": "Rich media",
+        "upload": "Upload"
+      },
+      "queues": "Queues"
+    },
+    "rate_limit": {
+      "rate_limit": "Rate Limit",
+      "amount": "Amount",
+      "unauthenticated": "Unauthenticated",
+      "authenticated": "Authenticated",
+      "period": "Time period",
+      "separate": "Separate rate limits for authenticated/unauthenticated users"
     },
     "nodb": {
       "heading": "Database config is disabled",
@@ -1164,29 +1238,79 @@
       "native": "Native",
       "kocaptcha": "KoCaptcha"
     },
+    "http": {
+      "outbound": "Outgoing connections",
+      "incoming": "Incoming connections",
+      "security": "HTTP Security",
+      "web_push": "Web Push",
+      "web_push_description": "Web Push VAPID settings. You can use the mix task web_push.gen.keypair to generate it."
+    },
     "instance": {
       "instance": "Instance information",
+      "branding": "Branding",
       "registrations": "User sign-ups",
       "captcha_header": "CAPTCHA",
       "kocaptcha": "KoCaptcha settings",
       "access": "Instance access",
+      "rich_metadata": "Metadata",
       "restrict": {
         "header": "Restrict access for anonymous visitors",
         "description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
         "timelines": "Timelines access",
         "profiles": "User profiles access",
         "activities": "Statuses/activities access"
-      }
+      },
+      ":unauthenticated": "Unauthenticated",
+      ":all": "Everyone"
+    },
+    "registrations": {
+      "welcome": {
+        "title": "Welcome message",
+        "description": "Send new users a message when they sign up",
+        "direct_message": "Via direct message",
+        "chat_message": "Via chat",
+        "email_message": "Via email"
+      },
+      "restrictions": "Restrictions",
+      "autofollow": "Autofollow"
+    },
+    "links": {
+      "no_scheme": "No scheme",
+      "link_previews": "Link previews",
+      "link_formatter": "Link formatter"
+    },
+    "uploads": {
+      "attachments": "Attachments settings",
+      "upload": "Upload",
+      "local_uploader": "Local files",
+      "filenames": "Filenames, Titles and Descriptions",
+      "uploader_settings": "Uploader settings"
+    },
+    "media_proxy": {
+      "basic": "Basic Settings",
+      "invalidation": "Cache Invalidation",
+      "limits": "Limits",
+      "thumbnails": "Thumbnail Generation",
+      "invalidation_settings": "Cache Invalidation"
+    },
+    "mailer": {
+      "styling": "Styling",
+      "assets": "Assets",
+      "colors": "Color palette",
+      "adapter": "Mailing Adapter",
+      "auth": "Authentication"
     },
     "limits": {
       "arbitrary_limits": "Arbitrary limits",
       "posts": "Post limits",
+      "other": "Misc. limits",
       "uploads": "Attachments limits",
       "users": "User profile limits",
       "profile_fields": "Profile fields limits",
       "user_uploads": "Profile media limits"
     },
     "frontend": {
+      "title": "Frontend management",
       "repository": "Repository link",
       "versions": "Available versions",
       "build_url": "Build URL",
@@ -1210,7 +1334,11 @@
     "emoji": {
       "global_actions": "Global actions",
       "reload": "Reload emoji",
+      "reload_short": "Refresh",
+      "advanced": "Advanced",
       "importFS": "Import emoji from filesystem",
+      "import_pack": "Upload emoji pack",
+      "import_pack_short": "Import",
       "error": "Error: {0}",
       "create_pack": "Create pack",
       "delete_pack": "Delete pack",
@@ -1218,10 +1346,12 @@
       "create": "Create",
       "emoji_packs": "Emoji packs",
       "remote_packs": "Remote packs",
+      "remote_packs_short": "Remote",
       "do_list": "List",
       "remote_pack_instance": "Remote pack instance",
       "emoji_pack": "Emoji pack",
       "edit_pack": "Edit pack",
+      "metadata": "Metadata",
       "description": "Description",
       "homepage": "Homepage",
       "fallback_src": "Fallback source",
@@ -1257,8 +1387,96 @@
       "replace_warning": "This will REPLACE the local pack of the same name",
       "copied_successfully": "Successfully copied emoji \"{0}\" to pack \"{1}\""
     },
+    "generic_enforcement": {
+      "if_available": "If available",
+      "always": "Always",
+      "never": "Never"
+    },
+    "instance": {
+      "instance": "Instance information",
+      "pwa": {
+        "manifest": "PWA Manifest",
+        "optional": "(optional)",
+        "no_icons": "No icons defined",
+        "icon": {
+          "purpose": "Icon purpose",
+          "any": "Any",
+          "monochrome": "Monochrome",
+          "maskable": "Maskable"
+        }
+      },
+      "misc_brand": "Miscellaneous elements",
+      "branding": "Branding",
+      "access": "Instance access",
+      "rich_metadata": "Metadata",
+      "restrict": {
+        "header": "Restrict access for anonymous visitors",
+        "description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
+        "timelines": "Timelines access",
+        "profiles": "User profiles access",
+        "activities": "Statuses/activities access"
+      },
+      ":unauthenticated": "Unauthenticated",
+      ":all": "Everyone"
+    },
     "temp_overrides": {
       ":pleroma": {
+        ":connections_pool": {
+          ":max_idle_time": {
+            "label": "Maximum idle time",
+            "description": "Maximum idle time before CONFIRM"
+          },
+          ":retry": {
+            "label": "Retry",
+            "description": "Number of retries for making a connection CONFIRM"
+          }
+        },
+        ":pools": {
+          ":rich_media": {
+            "label": "Rich media",
+            "description": "idk"
+          }
+        },
+        ":rate_limit": {
+          ":oauth_app_creation": {
+            "label": "OAuth app creation",
+            "description": "For registering new OAuth App ID"
+          },
+          ":ap_routes": {
+            "label": "ActivityPub",
+            "description": "Federation endpoints"
+          },
+          ":account_confirmation_resend": {
+            "label": "Account confirmation resend",
+            "description": "How often user can resend confirmation mail"
+          }
+        },
+        "Pleroma_DOT_Formatter": {
+          ":attribute_toggle": {
+            "label": "Set {attr} attribute"
+          },
+          ":truncate_toggle": {
+            "label": "Truncate"
+          },
+          ":class": {
+            "label": "Value"
+          },
+          ":rel": {
+            "label": "Value"
+          }
+        },
+        "Pleroma_DOT_Uploaders_DOT_Uploader": {
+          ":timeout": {
+            "label": "Timeout",
+            "description": "Amount of milliseconds before dropping connection"
+          }
+        },
+        "Pleroma_DOT_Upload": {
+          ":default_description": {
+            "label": "Default description",
+            "description": "Default description to give to a file. Setting it to ':filename' will use file's filename as description."
+          }
+        },
         ":instance": {
           ":public": {
             "label": "Instance is public",
@@ -1276,6 +1494,16 @@
             "label": "Background image",
             "description": "Background image (primarily used by PleromaFE)"
           }
+        },
+        ":http_security": {
+          ":allow_unsafe_eval": {
+            "label": "Allow unsafe-eval",
+            "description": "Allow unsafe evaluation of scripts (required for Flash support)"
+          },
+          ":report_url": {
+            "label": "Report URL",
+            "description": "URL to report security violations to"
+          }
         }
       }
     }
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index 38fb5305a..b4ce6a60a 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -87,6 +87,7 @@ const adminSettingsStorage = {
     setInstanceAdminSettings ({ state, commit }, { backendDbConfig }) {
       const config = state.config || {}
       const modifiedPaths = new Set()
+
       backendDbConfig.configs.forEach(c => {
         const path = [c.group, c.key]
         if (c.db) {
@@ -94,17 +95,43 @@ const adminSettingsStorage = {
           // Using strings for modified paths for easier searching
           c.db.forEach(x => modifiedPaths.add([...path, x].join(' -> ')))
         }
-        const convert = (value) => {
+
+        // we need to preserve tuples on second level only, possibly third
+        // but it's not a case right now.
+        const convert = (value, preserveTuples, preserveTuplesLv2) => {
           if (Array.isArray(value) && value.length > 0 && value[0].tuple) {
-            return value.reduce((acc, c) => {
-              return { ...acc, [c.tuple[0]]: convert(c.tuple[1]) }
-            }, {})
+            if (!preserveTuples) {
+              return value.reduce((acc, c) => {
+                return { ...acc, [c.tuple[0]]: convert(c.tuple[1], preserveTuplesLv2) }
+              }, {})
+            } else {
+              return value.map(x => x.tuple)
+            }
           } else {
-            return value
+            if (!preserveTuples) {
+              return value
+            } else {
+              return value.tuple
+            }
           }
         }
-        set(config, path, convert(c.value))
+        // for most stuff we want maps since those are more convenient
+        // however this doesn't allow for multiple values per same key
+        // so for those cases we want to preserve tuples as-is
+        // right now it's made exclusively for :pleroma.:rate_limit
+        // so it might not work properly elsewhere
+        const preserveTuples = path.find(x => x === ':rate_limit')
+        set(config, path, convert(c.value, false, preserveTuples))
       })
+      // patching http adapter config to be easier to handle
+      const adapter = config[':pleroma'][':http'][':adapter']
+      if (Array.isArray(adapter)) {
+        config[':pleroma'][':http'][':adapter'] = {
+          [':ssl_options']: {
+            [':versions']: []
+          }
+        }
+      }
       commit('updateAdminSettings', { config, modifiedPaths })
       commit('resetAdminDraft')
     },
@@ -121,6 +148,7 @@ const adminSettingsStorage = {
       }
 
       const descriptions = {}
+
       backendDescriptions.forEach(d => convert(d, '', descriptions))
       commit('updateAdminDescriptions', { descriptions })
     },
@@ -206,7 +234,7 @@ const adminSettingsStorage = {
         .then(backendDbConfig => dispatch('setInstanceAdminSettings', { backendDbConfig }))
     },
     resetAdminSetting ({ rootState, state, dispatch }, { path }) {
-      const [group, key, subkey] = path.split(/\./g)
+      const [group, key, subkey] = Array.isArray(path) ? path : path.split(/\./g)
 
       state.modifiedPaths.delete(path)
 
diff --git a/src/modules/config.js b/src/modules/config.js
index 7b54225ef..8b4691341 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -116,7 +116,6 @@ const config = {
       }
 
       useInterfaceStore().setTemporaryChanges({
-        timeoutId: setTimeout(revert, 10000),
         confirm,
         revert
       })
diff --git a/src/stores/interface.js b/src/stores/interface.js
index 56999217f..5148daa4c 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -18,9 +18,10 @@ export const useInterfaceStore = defineStore('interface', {
     paletteDataUsed: null,
     themeNameUsed: null,
     themeDataUsed: null,
-    temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
+    temporaryChangesTimeoutId: null,
+    temporaryChangesCountdown: -1,     // used for temporary options that revert after a timeout
     temporaryChangesConfirm: () => {}, // used for applying temporary options
-    temporaryChangesRevert: () => {}, // used for reverting temporary options
+    temporaryChangesRevert: () => {},  // used for reverting temporary options
     settingsModalState: 'hidden',
     settingsModalLoadedUser: false,
     settingsModalLoadedAdmin: false,
@@ -44,14 +45,25 @@ export const useInterfaceStore = defineStore('interface', {
     lastTimeline: null
   }),
   actions: {
-    setTemporaryChanges ({ timeoutId, confirm, revert }) {
-      this.temporaryChangesTimeoutId = timeoutId
+    setTemporaryChanges ({ confirm, revert }) {
+      this.temporaryChangesCountdown = 10
       this.temporaryChangesConfirm = confirm
       this.temporaryChangesRevert = revert
+      const countdownFunc = () => {
+        if (this.temporaryChangesCountdown === 1) {
+          this.temporaryChangesRevert()
+          this.clearTemporaryChanges()
+        } else {
+          this.temporaryChangesCountdown--
+          this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
+        }
+      }
+      this.temporaryChangesTimeoutId = setTimeout(countdownFunc, 1000)
     },
     clearTemporaryChanges () {
-      clearTimeout(this.temporaryChangesTimeoutId)
+      this.temporaryChangesTimeoutId ?? clearTimeout(this.temporaryChangesTimeoutId)
       this.temporaryChangesTimeoutId = null
+      this.temporaryChangesCountdown = -1
       this.temporaryChangesConfirm = () => {}
       this.temporaryChangesRevert = () => {}
     },
@@ -515,7 +527,6 @@ export const useInterfaceStore = defineStore('interface', {
     async applyTheme (
       { recompile = false } = {}
     ) {
-      console.log('Apply')
       const {
         forceThemeRecompilation,
         themeDebug,
diff --git a/test/unit/specs/components/draft.spec.js b/test/unit/specs/components/draft.spec.js
index b00f447cd..276fe6fbe 100644
--- a/test/unit/specs/components/draft.spec.js
+++ b/test/unit/specs/components/draft.spec.js
@@ -145,7 +145,7 @@ describe('Draft saving', () => {
     const saveButton = wrapper.findByText('button', $t('post_status.close_confirm_save_button'))
     expect(saveButton).to.be.ok
     await saveButton.trigger('click')
-    console.log('clicked')
+    console.info('clicked')
     expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
     await flushPromises()
     await waitForEvent(wrapper, 'can-close')
diff --git a/test/unit/specs/lib/persisted_state.spec.js b/test/unit/specs/lib/persisted_state.spec.js
index 95bbbc4b7..79956a698 100644
--- a/test/unit/specs/lib/persisted_state.spec.js
+++ b/test/unit/specs/lib/persisted_state.spec.js
@@ -10,11 +10,11 @@ const getMockStorage = () => {
 
   return {
     getItem: vi.fn(async key => {
-      console.log('get:', key, state[key])
+      console.info('get:', key, state[key])
       return state[key]
     }),
     setItem: vi.fn(async (key, value) => {
-      console.log('set:', key, value)
+      console.info('set:', key, value)
       state[key] = value
     }),
     _clear: () => {