diff --git a/build/emojis_plugin.js b/build/emojis_plugin.js
index 7979086dd..9872f5331 100644
--- a/build/emojis_plugin.js
+++ b/build/emojis_plugin.js
@@ -25,7 +25,11 @@ const getAllAccessibleAnnotations = async (projectRoot) => {
           await access(importFile)
           return `'${lang}': () => import('${importModule}')`
         } catch (e) {
-          console.error(e)
+          if (e.message.match(/ENOENT/)) {
+            console.warn(`Missing emoji annotations locale: ${destLang}`)
+          } else {
+            console.error('test', e.message)
+          }
           return
         }
       }),
diff --git a/src/App.js b/src/App.js
index a0bf0aaa4..487090565 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,6 @@
 import { throttle } from 'lodash'
 import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
-import { mapGetters } from 'vuex'
 
 import DesktopNav from './components/desktop_nav/desktop_nav.vue'
 import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
@@ -22,11 +21,20 @@ import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_pan
 import { getOrCreateServiceWorker } from './services/sw/sw'
 import { windowHeight, windowWidth } from './services/window_utils/window_utils'
 
+import { useEmojiStore } from 'src/stores/emoji.js'
+import { useI18nStore } from 'src/stores/i18n.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useShoutStore } from 'src/stores/shout.js'
 
+import messages from 'src/i18n/messages'
+import localeService from 'src/services/locale/locale.service.js'
+
+// Helper to unwrap reactive proxies
+window.toValue = (x) => JSON.parse(JSON.stringify(x))
+
 export default {
   name: 'app',
   components: {
@@ -72,8 +80,10 @@ export default {
   },
   created() {
     // Load the locale from the storage
-    const val = this.$store.getters.mergedConfig.interfaceLanguage
-    this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+    const value = useMergedConfigStore().mergedConfig.interfaceLanguage
+    useI18nStore().setLanguage(value)
+    useEmojiStore().loadUnicodeEmojiData(value)
+
     document.getElementById('modal').classList = ['-' + this.layoutType]
 
     // Create bound handlers
@@ -122,7 +132,7 @@ export default {
       ]
     },
     navClasses() {
-      const { navbarColumnStretch } = this.$store.getters.mergedConfig
+      const { navbarColumnStretch } = useMergedConfigStore().mergedConfig
       return [
         '-' + this.layoutType,
         ...(navbarColumnStretch ? ['-column-stretch'] : []),
@@ -135,7 +145,9 @@ export default {
       return this.currentUser.background_image
     },
     instanceBackground() {
-      return this.mergedConfig.hideInstanceWallpaper ? null : this.background
+      return useMergedConfigStore().mergedConfig.hideInstanceWallpaper
+        ? null
+        : this.instanceBackgroundUrl
     },
     background() {
       return this.userBackground || this.instanceBackground
@@ -160,19 +172,21 @@ export default {
       if (this.isChats) return false
       if (this.isListEdit) return false
       return (
-        this.$store.getters.mergedConfig.alwaysShowNewPostButton ||
+        useMergedConfigStore().mergedConfig.alwaysShowNewPostButton ||
         this.layoutType === 'mobile'
       )
     },
     shoutboxPosition() {
-      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
+      return (
+        useMergedConfigStore().mergedConfig.alwaysShowNewPostButton || false
+      )
     },
     hideShoutbox() {
-      return this.$store.getters.mergedConfig.hideShoutbox
+      return useMergedConfigStore().mergedConfig.hideShoutbox
     },
     reverseLayout() {
       const { thirdColumnMode, sidebarRight: reverseSetting } =
-        this.$store.getters.mergedConfig
+        useMergedConfigStore().mergedConfig
       if (this.layoutType !== 'wide') {
         return reverseSetting
       } else {
@@ -182,10 +196,10 @@ export default {
       }
     },
     noSticky() {
-      return this.$store.getters.mergedConfig.disableStickyHeaders
+      return useMergedConfigStore().mergedConfig.disableStickyHeaders
     },
     showScrollbars() {
-      return this.$store.getters.mergedConfig.showScrollbars
+      return useMergedConfigStore().mergedConfig.showScrollbars
     },
     scrollParent() {
       return window /* this.$refs.appContentRef */
@@ -193,10 +207,10 @@ export default {
     showInstanceSpecificPanel() {
       return (
         this.instanceSpecificPanelPresent &&
-        !this.$store.getters.mergedConfig.hideISP
+        !useMergedConfigStore().mergedConfig.hideISP
       )
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
     ...mapState(useInterfaceStore, [
       'themeApplied',
       'styleDataUsed',
@@ -208,7 +222,7 @@ export default {
       'editingAvailable',
     ]),
     ...mapState(useInstanceStore, {
-      background: (store) => store.instanceIdentity.background,
+      instanceBackgroundUrl: (store) => store.instanceIdentity.background,
       showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
       instanceSpecificPanelPresent: (store) =>
         store.instanceIdentity.showInstanceSpecificPanel &&
diff --git a/src/App.scss b/src/App.scss
index 1eee63a7e..b36e702d5 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -797,14 +797,17 @@ option {
 }
 
 .notice-dismissible {
-  padding-right: 4rem;
-  position: relative;
+  display: flex;
+  padding: 0.75em 1em;
+  align-items: baseline;
+  line-height: 1.5;
+
+  span {
+    display: block;
+    flex: 1 1 auto;
+  }
 
   .dismiss {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0.5em;
     color: inherit;
   }
 }
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 97f9b8a42..d16852bf8 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -32,12 +32,17 @@ import { useI18nStore } from 'src/stores/i18n'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useLocalConfigStore } from 'src/stores/local_config.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useOAuthStore } from 'src/stores/oauth'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 import VBodyScrollLock from 'src/directives/body_scroll_lock'
 import {
-  instanceDefaultConfig,
-  staticOrApiConfigDefault,
+  INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
+  INSTANCE_IDENTITY_DEFAULT_DEFINITIONS,
+  INSTANCE_IDENTIY_EXTERNAL,
 } from 'src/modules/default_config_state.js'
 
 let staticInitialResults = null
@@ -80,7 +85,7 @@ const getInstanceConfig = async ({ store }) => {
     const res = await preloadFetch('/api/v1/instance')
     if (res.ok) {
       const data = await res.json()
-      const textlimit = data.max_toot_chars
+      const textLimit = data.max_toot_chars
       const vapidPublicKey = data.pleroma.vapid_public_key
 
       useInstanceCapabilitiesStore().set(
@@ -88,8 +93,8 @@ const getInstanceConfig = async ({ store }) => {
         data.pleroma,
       )
       useInstanceStore().set({
-        path: 'textlimit',
-        value: textlimit,
+        path: 'limits.textLimit',
+        value: textLimit,
       })
       useInstanceStore().set({
         path: 'accountApprovalRequired',
@@ -166,18 +171,21 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
     config = Object.assign({}, staticConfig, apiConfig)
   }
 
-  const copyInstanceOption = ({ source, destination }) => {
-    if (typeof config[source] !== 'undefined') {
-      useInstanceStore().set({ path: destination, value: config[source] })
-    }
-  }
+  Object.keys(INSTANCE_IDENTITY_DEFAULT_DEFINITIONS).forEach((source) => {
+    if (source === 'name') return
+    if (INSTANCE_IDENTIY_EXTERNAL.has(source)) return
+    useInstanceStore().set({
+      value: config[source],
+      path: `instanceIdentity.${source}`,
+    })
+  })
 
-  Object.keys(staticOrApiConfigDefault)
-    .map((k) => ({ source: k, destination: `instanceIdentity.${k}` }))
-    .forEach(copyInstanceOption)
-  Object.keys(instanceDefaultConfig)
-    .map((k) => ({ source: k, destination: `prefsStorage.${k}` }))
-    .forEach(copyInstanceOption)
+  Object.keys(INSTANCE_DEFAULT_CONFIG_DEFINITIONS).forEach((source) =>
+    useInstanceStore().set({
+      value: config[source],
+      path: `prefsStorage.${source}`,
+    }),
+  )
 
   useAuthFlowStore().setInitialStrategy(config.loginMethod)
 }
@@ -187,7 +195,7 @@ const getTOS = async ({ store }) => {
     const res = await window.fetch('/static/terms-of-service.html')
     if (res.ok) {
       const html = await res.text()
-      useInstanceStore().set({ name: 'instanceIdentity.tos', value: html })
+      useInstanceStore().set({ path: 'instanceIdentity.tos', value: html })
     } else {
       throw res
     }
@@ -272,7 +280,7 @@ const getNodeInfo = async ({ store }) => {
       const metadata = data.metadata
       const features = metadata.features
       useInstanceStore().set({
-        path: 'name',
+        path: 'instanceIdentity.name',
         value: metadata.nodeName,
       })
       useInstanceStore().set({
@@ -523,6 +531,11 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   useInterfaceStore().setLayoutWidth(windowWidth())
   useInterfaceStore().setLayoutHeight(windowHeight())
 
+  window.syncConfig = useSyncConfigStore()
+  window.mergedConfig = useMergedConfigStore()
+  window.localConfig = useLocalConfigStore()
+  window.highlightConfig = useUserHighlightStore()
+
   FaviconService.initFaviconService()
   initServiceWorker(store)
 
@@ -533,7 +546,7 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
     typeof overrides.target !== 'undefined'
       ? overrides.target
       : window.location.origin
-  useInstanceStore().set({ name: 'server', value: server })
+  useInstanceStore().set({ path: 'server', value: server })
 
   await setConfig({ store })
   try {
@@ -547,7 +560,7 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
     return Promise.reject(e)
   }
 
-  applyStyleConfig(store.state.config, i18n.global)
+  applyStyleConfig(useMergedConfigStore().mergedConfig, i18n.global)
 
   // Now we can try getting the server settings and logging in
   // Most of these are preloaded into the index.html so blocking is minimized
diff --git a/src/components/about/about.js b/src/components/about/about.js
index f52d5c797..404843e8b 100644
--- a/src/components/about/about.js
+++ b/src/components/about/about.js
@@ -5,6 +5,7 @@ import StaffPanel from '../staff_panel/staff_panel.vue'
 import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 const About = {
   components: {
@@ -21,7 +22,7 @@ const About = {
     showInstanceSpecificPanel() {
       return (
         useInstanceStore().instanceIdentity.showInstanceSpecificPanel &&
-        !this.$store.getters.mergedConfig.hideISP &&
+        !useMergedConfigStore().mergedConfig.hideISP &&
         useInstanceStore().instanceIdentity.instanceSpecificPanelContent
       )
     },
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index 8fce4b5af..f204adbde 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -7,6 +7,7 @@ import Popover from '../popover/popover.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useReportsStore } from 'src/stores/reports'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -89,10 +90,10 @@ const AccountActions = {
   },
   computed: {
     shouldConfirmBlock() {
-      return this.$store.getters.mergedConfig.modalOnBlock
+      return useMergedConfigStore().mergedConfig.modalOnBlock
     },
     shouldConfirmRemoveUserFromFollowers() {
-      return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
+      return useMergedConfigStore().mergedConfig.modalOnRemoveUserFromFollowers
     },
     ...mapState(useInstanceCapabilitiesStore, [
       'blockExpiration',
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index b1a3d82b8..fbe77a687 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -1,4 +1,4 @@
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import nsfwImage from '../../assets/nsfw.png'
 import Flash from '../flash/flash.vue'
@@ -8,6 +8,7 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMediaViewerStore } from 'src/stores/media_viewer'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -57,8 +58,8 @@ const Attachment = {
       localDescription: this.description || this.attachment.description,
       nsfwImage:
         useInstanceStore().instanceIdentity.nsfwCensorImage || nsfwImage,
-      hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
-      preloadImage: this.$store.getters.mergedConfig.preloadImage,
+      hideNsfwLocal: useMergedConfigStore().mergedConfig.hideNsfw,
+      preloadImage: useMergedConfigStore().mergedConfig.preloadImage,
       loading: false,
       img: this.attachment.type === 'image' && document.createElement('img'),
       modalOpen: false,
@@ -90,7 +91,7 @@ const Attachment = {
       return this.size === 'hide'
     },
     useContainFit() {
-      return this.$store.getters.mergedConfig.useContainFit
+      return this.mergedConfig.useContainFit
     },
     placeholderName() {
       if (this.attachment.description === '' || !this.attachment.description) {
@@ -133,7 +134,7 @@ const Attachment = {
     videoTag() {
       return this.useModal ? 'button' : 'span'
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
   },
   watch: {
     'attachment.description'(newVal) {
@@ -186,7 +187,8 @@ const Attachment = {
       if (
         this.mergedConfig.useOneClickNsfw &&
         !this.showHidden &&
-        (this.attachment.type !== 'video' || this.mergedConfig.playVideosInModal)
+        (this.attachment.type !== 'video' ||
+          this.mergedConfig.playVideosInModal)
       ) {
         this.openModal(event)
         return
diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js
index 202455c53..74df26c1f 100644
--- a/src/components/chat_list_item/chat_list_item.js
+++ b/src/components/chat_list_item/chat_list_item.js
@@ -25,9 +25,7 @@ const ChatListItem = {
         return
       }
 
-      const types = this.chat.lastMessage.attachments.map((file) =>
-        file.type,
-      )
+      const types = this.chat.lastMessage.attachments.map((file) => file.type)
       if (types.includes('video')) {
         return this.$t('file_type.video')
       } else if (types.includes('audio')) {
diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index af3701ebf..1675f9ddd 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -12,6 +12,7 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faEllipsisH, faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -85,7 +86,7 @@ const ChatMessage = {
         return { left: 50 }
       }
     },
-    ...mapGetters(['mergedConfig', 'findUser']),
+    ...mapPiniaState(useMergedConfigStore, ['mergedConfig', 'findUser']),
   },
   data() {
     return {
diff --git a/src/components/confirm_modal/mute_confirm.js b/src/components/confirm_modal/mute_confirm.js
index c486ad7e4..ffd3a3076 100644
--- a/src/components/confirm_modal/mute_confirm.js
+++ b/src/components/confirm_modal/mute_confirm.js
@@ -1,8 +1,10 @@
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import Select from 'src/components/select/select.vue'
 import ConfirmModal from './confirm_modal.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 export default {
   props: ['type', 'user', 'status'],
   emits: ['hide', 'show', 'muted'],
@@ -43,7 +45,7 @@ export default {
         }
       }
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
   },
   methods: {
     optionallyPrompt() {
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index cb7cf4782..b0d3a304c 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -1,6 +1,6 @@
 import { clone, filter, findIndex, get, reduce } from 'lodash'
 import { mapState as mapPiniaState } from 'pinia'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'vuex'
 
 import { WSConnectionStatus } from '../../services/api/api.service.js'
 import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
@@ -9,6 +9,7 @@ import Status from '../status/status.vue'
 import ThreadTree from '../thread_tree/thread_tree.vue'
 
 import { useInterfaceStore } from 'src/stores/interface'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -81,7 +82,7 @@ const conversation = {
       // maxDepthInThread = max number of depths that is *visible*
       // since our depth starts with 0 and "showing" means "showing children"
       // there is a -2 here
-      const maxDepth = this.$store.getters.mergedConfig.maxDepthInThread - 2
+      const maxDepth = this.mergedConfig.maxDepthInThread - 2
       return maxDepth >= 1 ? maxDepth : 1
     },
     streamingEnabled() {
@@ -91,22 +92,22 @@ const conversation = {
       )
     },
     displayStyle() {
-      return this.$store.getters.mergedConfig.conversationDisplay
+      return this.mergedConfig.conversationDisplay
     },
     isTreeView() {
       return !this.isLinearView
     },
     treeViewIsSimple() {
-      return !this.$store.getters.mergedConfig.conversationTreeAdvanced
+      return !this.mergedConfig.conversationTreeAdvanced
     },
     isLinearView() {
       return this.displayStyle === 'linear'
     },
     shouldFadeAncestors() {
-      return this.$store.getters.mergedConfig.conversationTreeFadeAncestors
+      return this.mergedConfig.conversationTreeFadeAncestors
     },
     otherRepliesButtonPosition() {
-      return this.$store.getters.mergedConfig.conversationOtherRepliesButton
+      return this.mergedConfig.conversationOtherRepliesButton
     },
     showOtherRepliesButtonBelowStatus() {
       return this.otherRepliesButtonPosition === 'below'
@@ -392,7 +393,7 @@ const conversation = {
     maybeHighlight() {
       return this.isExpanded ? this.highlight : null
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
     ...mapState({
       mastoUserSocketStatus: (state) => state.api.mastoUserSocketStatus,
     }),
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 2f3de3a86..8d4734083 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -88,38 +88,34 @@
             class="thread-ancestor"
             :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
           >
-            <status
+            <Status
               ref="statusComponent"
-              :inline-expanded="collapsable && isExpanded"
-              :statusoid="status"
-              :expandable="!isExpanded"
-              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-              :focused="isFocused(status.id)"
-              :in-conversation="isExpanded"
-              :highlight="getHighlight()"
-              :replies="getReplies(status.id)"
-              :in-profile="inProfile"
-              :profile-user-id="profileUserId"
               class="conversation-status status-fadein panel-body"
 
+              :statusoid="status"
+              :replies="getReplies(status.id)"
+
+              :expandable="!isExpanded"
+              :focused="isFocused(status.id)"
+              :highlight="getHighlight()"
+              :inline-expanded="collapsable && isExpanded"
+              :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+              :in-profile="inProfile"
+              :in-conversation="isExpanded"
+              :profile-user-id="profileUserId"
               :simple-tree="treeViewIsSimple"
-              :toggle-thread-display="toggleThreadDisplay"
-              :thread-display-status="threadDisplayStatus"
-              :show-thread-recursively="showThreadRecursively"
-              :total-reply-count="totalReplyCount"
-              :total-reply-depth="totalReplyDepth"
               :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
               :dive="() => diveIntoStatus(status.id)"
 
               :controlled-showing-tall="statusContentProperties[status.id].showingTall"
-              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
-              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
-              :controlled-replying="statusContentProperties[status.id].replying"
-              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
               :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
+              :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
               :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
+              :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
               :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
+              :controlled-replying="statusContentProperties[status.id].replying"
               :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
+              :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
               :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
 
               @goto="setHighlight"
@@ -195,26 +191,18 @@
             v-for="status in conversation"
             :key="status.id"
             ref="statusComponent"
-            :inline-expanded="collapsable && isExpanded"
-            :statusoid="status"
-            :expandable="!isExpanded"
-            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-            :focused="isFocused(status.id)"
-            :in-conversation="isExpanded"
-            :highlight="getHighlight()"
-            :replies="getReplies(status.id)"
-            :in-profile="inProfile"
-            :profile-user-id="profileUserId"
             class="conversation-status status-fadein panel-body"
+            :statusoid="status"
+            :replies="getReplies(status.id)"
 
-            :toggle-thread-display="toggleThreadDisplay"
-            :thread-display-status="threadDisplayStatus"
-            :show-thread-recursively="showThreadRecursively"
-            :total-reply-count="totalReplyCount"
-            :total-reply-depth="totalReplyDepth"
-            :status-content-properties="statusContentProperties"
-            :set-status-content-property="setStatusContentProperty"
-            :toggle-status-content-property="toggleStatusContentProperty"
+            :expandable="!isExpanded"
+            :focused="isFocused(status.id)"
+            :highlight="getHighlight()"
+            :inline-expanded="collapsable && isExpanded"
+            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+            :in-profile="inProfile"
+            :in-conversation="isExpanded"
+            :profile-user-id="profileUserId"
 
             @goto="setHighlight"
             @toggle-expanded="toggleExpanded"
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 943c66d1e..3382413a0 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -5,6 +5,7 @@ import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -96,7 +97,7 @@ export default {
       return this.$store.state.users.currentUser
     },
     shouldConfirmLogout() {
-      return this.$store.getters.mergedConfig.modalOnLogout
+      return useMergedConfigStore().mergedConfig.modalOnLogout
     },
   },
   methods: {
diff --git a/src/components/dialog_modal/dialog_modal.js b/src/components/dialog_modal/dialog_modal.js
index 8070d3429..083f7a21d 100644
--- a/src/components/dialog_modal/dialog_modal.js
+++ b/src/components/dialog_modal/dialog_modal.js
@@ -1,3 +1,5 @@
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 const DialogModal = {
   props: {
     darkOverlay: {
@@ -13,7 +15,7 @@ const DialogModal = {
   },
   computed: {
     mobileCenter() {
-      return this.$store.getters.mergedConfig.modalMobileCenter
+      return useMergedConfigStore().mergedConfig.modalMobileCenter
     },
   },
 }
diff --git a/src/components/draft/draft.js b/src/components/draft/draft.js
index 4f0d8cbee..45786614e 100644
--- a/src/components/draft/draft.js
+++ b/src/components/draft/draft.js
@@ -6,6 +6,8 @@ import Gallery from 'src/components/gallery/gallery.vue'
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import StatusContent from 'src/components/status_content/status_content.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPollH } from '@fortawesome/free-solid-svg-icons'
 
@@ -62,7 +64,7 @@ const Draft = {
         : undefined
     },
     localCollapseSubjectDefault() {
-      return this.$store.getters.mergedConfig.collapseMessageWithSubject
+      return useMergedConfigStore().mergedConfig.collapseMessageWithSubject
     },
     nsfwClickthrough() {
       if (!this.draft.nsfw) {
diff --git a/src/components/draft_closer/draft_closer.js b/src/components/draft_closer/draft_closer.js
index d724ab4ac..2648b40c5 100644
--- a/src/components/draft_closer/draft_closer.js
+++ b/src/components/draft_closer/draft_closer.js
@@ -1,5 +1,7 @@
 import DialogModal from 'src/components/dialog_modal/dialog_modal.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 const DraftCloser = {
   data() {
     return {
@@ -12,10 +14,10 @@ const DraftCloser = {
   emits: ['save', 'discard'],
   computed: {
     action() {
-      if (this.$store.getters.mergedConfig.autoSaveDraft) {
+      if (useMergedConfigStore().mergedConfig.autoSaveDraft) {
         return 'save'
       } else {
-        return this.$store.getters.mergedConfig.unsavedPostAction
+        return useMergedConfigStore().mergedConfig.unsavedPostAction
       }
     },
     shouldConfirm() {
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 24794640e..0146a3de8 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -9,6 +9,8 @@ import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
 
@@ -131,10 +133,10 @@ const EmojiInput = {
   },
   computed: {
     padEmoji() {
-      return this.$store.getters.mergedConfig.padEmoji
+      return useMergedConfigStore().mergedConfig.padEmoji
     },
     defaultCandidateIndex() {
-      return this.$store.getters.mergedConfig.autocompleteSelect ? 0 : -1
+      return useMergedConfigStore().mergedConfig.autocompleteSelect ? 0 : -1
     },
     preText() {
       return this.modelValue.slice(0, this.caret)
@@ -163,7 +165,7 @@ const EmojiInput = {
     },
     languages() {
       return ensureFinalFallback(
-        this.$store.getters.mergedConfig.interfaceLanguage,
+        useMergedConfigStore().mergedConfig.interfaceLanguage,
       )
     },
     maybeLocalizedEmojiNamesAndKeywords() {
diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index c478fea67..c0d8f7ca1 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -1,3 +1,5 @@
+import { useEmojiStore } from 'src/stores/emoji.js'
+
 /**
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 79c0ab47e..1d19987ac 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -8,6 +8,7 @@ import StillImage from '../still-image/still-image.vue'
 
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -340,7 +341,7 @@ const EmojiPicker = {
       this.$nextTick(() => {
         this.updateEmojiSize()
       })
-      return this.$store.getters.mergedConfig.fontSize
+      return useMergedConfigStore().mergedConfig.fontSize
     },
     emojiHeight() {
       return this.emojiSize
@@ -405,7 +406,7 @@ const EmojiPicker = {
     },
     languages() {
       return ensureFinalFallback(
-        this.$store.getters.mergedConfig.interfaceLanguage,
+        useMergedConfigStore().mergedConfig.interfaceLanguage,
       )
     },
     maybeLocalizedEmojiName() {
diff --git a/src/components/emoji_reactions/emoji_reactions.js b/src/components/emoji_reactions/emoji_reactions.js
index 8a121befc..e1a28a8f1 100644
--- a/src/components/emoji_reactions/emoji_reactions.js
+++ b/src/components/emoji_reactions/emoji_reactions.js
@@ -2,6 +2,8 @@ import StillImage from 'src/components/still-image/still-image.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCheck, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons'
 
@@ -42,7 +44,7 @@ const EmojiReactions = {
       return !!this.$store.state.users.currentUser
     },
     remoteInteractionLink() {
-      return this.$store.getters.remoteInteractionLink({
+      return useInstanceStore().getRemoteInteractionLink({
         statusId: this.status.id,
       })
     },
diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index 85f4f72bd..31ca57aaa 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -3,6 +3,8 @@ import { mapGetters } from 'vuex'
 
 import { useAnnouncementsStore } from 'src/stores/announcements.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -51,18 +53,19 @@ const ExtraNotifications = {
     currentUser() {
       return this.$store.state.users.currentUser
     },
-    ...mapGetters(['unreadChatCount', 'followRequestCount', 'mergedConfig']),
+    ...mapGetters(['unreadChatCount', 'followRequestCount']),
     ...mapPiniaState(useAnnouncementsStore, {
       unreadAnnouncementCount: 'unreadAnnouncementCount',
     }),
+    ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
   },
   methods: {
     openNotificationSettings() {
       return useInterfaceStore().openSettingsModalTab('notifications')
     },
     dismissConfigurationTip() {
-      return this.$store.dispatch('setOption', {
-        name: 'showExtraNotificationsTip',
+      return useSyncConfigStore().setSimplePrefAndSave({
+        path: 'showExtraNotificationsTip',
         value: false,
       })
     },
diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js
index 106da1487..10deda250 100644
--- a/src/components/features_panel/features_panel.js
+++ b/src/components/features_panel/features_panel.js
@@ -15,7 +15,7 @@ const FeaturesPanel = {
       'mediaProxyAvailable',
     ]),
     ...mapState(useInstanceStore, {
-      textlimit: (store) => store.limits.textlimit,
+      textLimit: (store) => store.limits.textLimit,
       uploadlimit: (store) =>
         fileSizeFormatService.fileSizeFormat(store.limits.uploadlimit),
     }),
diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue
index 4270436fa..f15ad0edb 100644
--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@@ -24,7 +24,7 @@
             {{ $t('features_panel.media_proxy') }}
           </li>
           <li>{{ $t('features_panel.scope_options') }}</li>
-          <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li>
+          <li>{{ $t('features_panel.text_limit') }} = {{ textLimit }}</li>
           <li>{{ $t('features_panel.upload_limit') }} = {{ uploadlimit.num }} {{ $t('upload.file_size_units.' + uploadlimit.unit) }}</li>
         </ul>
       </div>
diff --git a/src/components/follow_button/follow_button.js b/src/components/follow_button/follow_button.js
index eb545b28d..644f95f85 100644
--- a/src/components/follow_button/follow_button.js
+++ b/src/components/follow_button/follow_button.js
@@ -3,6 +3,8 @@ import {
   requestUnfollow,
 } from '../../services/follow_manipulate/follow_manipulate'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 export default {
   props: ['relationship', 'user', 'labelFollowing', 'buttonClass'],
   components: {
@@ -16,7 +18,7 @@ export default {
   },
   computed: {
     shouldConfirmUnfollow() {
-      return this.$store.getters.mergedConfig.modalOnUnfollow
+      return useMergedConfigStore().mergedConfig.modalOnUnfollow
     },
     isPressed() {
       return this.inProgress || this.relationship.following
diff --git a/src/components/follow_request_card/follow_request_card.js b/src/components/follow_request_card/follow_request_card.js
index c037ddf42..a6ffcd28b 100644
--- a/src/components/follow_request_card/follow_request_card.js
+++ b/src/components/follow_request_card/follow_request_card.js
@@ -2,6 +2,8 @@ import { notificationsFromStore } from '../../services/notification_utils/notifi
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 const FollowRequestCard = {
   props: ['user'],
   components: {
@@ -76,7 +78,7 @@ const FollowRequestCard = {
   },
   computed: {
     mergedConfig() {
-      return this.$store.getters.mergedConfig
+      return useMergedConfigStore().mergedConfig
     },
     shouldConfirmApprove() {
       return this.mergedConfig.modalOnApproveFollow
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 45e5fde81..81c46ec89 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,5 +1,6 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
+import LocalSettingIndicator from 'src/components/settings_modal/helpers/local_setting_indicator.vue'
 import Select from '../select/select.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
@@ -18,6 +19,7 @@ export default {
     Select,
     Checkbox,
     Popover,
+    LocalSettingIndicator,
   },
   props: ['name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'],
   mounted() {
@@ -43,7 +45,7 @@ export default {
   },
   computed: {
     present() {
-      return typeof this.modelValue !== 'undefined'
+      return this.modelValue != null
     },
     localFontsList() {
       return useInterfaceStore().localFonts
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index 5124fd53a..62f8d052d 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -6,8 +6,10 @@
         :id="name + '-o'"
         class="font-checkbox setting-control setting-label"
         :model-value="present"
-        @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+        @change="$emit('update:modelValue', modelValue == null ? fallback : null)"
       >
+        <LocalSettingIndicator />
+        {{ ' ' }}
         <i18n-t
           scope="global"
           keypath="settings.style.fonts.override"
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 42cc6cfd6..fafb66dbd 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -4,7 +4,7 @@ import Attachment from '../attachment/attachment.vue'
 
 import { useMediaViewerStore } from 'src/stores/media_viewer.js'
 
-const displayTypes = new Set(["image", "video", "flash"])
+const displayTypes = new Set(['image', 'video', 'flash'])
 
 const Gallery = {
   props: [
diff --git a/src/components/interface_language_switcher/interface_language_switcher.js b/src/components/interface_language_switcher/interface_language_switcher.js
index 1cdedadd3..becf5677f 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.js
+++ b/src/components/interface_language_switcher/interface_language_switcher.js
@@ -1,13 +1,11 @@
 import { v4 as uuidv4 } from 'uuid'
 
-import ProfileSettingIndicator from 'src/components/settings_modal/helpers/profile_setting_indicator.vue'
 import localeService from '../../services/locale/locale.service.js'
 import Select from '../select/select.vue'
 
 export default {
   components: {
     Select,
-    ProfileSettingIndicator,
   },
   props: {
     // List of languages (or just one language)
diff --git a/src/components/link-preview/link-preview.js b/src/components/link-preview/link-preview.js
index ac91f916d..808030fbb 100644
--- a/src/components/link-preview/link-preview.js
+++ b/src/components/link-preview/link-preview.js
@@ -1,4 +1,6 @@
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
+
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 const LinkPreview = {
   name: 'LinkPreview',
@@ -24,7 +26,7 @@ const LinkPreview = {
     hideNsfwConfig() {
       return this.mergedConfig.hideNsfw
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
   },
   created() {
     if (this.useImage) {
diff --git a/src/components/lists_edit/lists_edit.js b/src/components/lists_edit/lists_edit.js
index bdadd4fca..483a9c02a 100644
--- a/src/components/lists_edit/lists_edit.js
+++ b/src/components/lists_edit/lists_edit.js
@@ -124,11 +124,10 @@ const ListsNew = {
       useListsStore()
         .createList({ title: this.titleDraft })
         .then((list) => {
-          useListsStore()
-            .setListAccounts({
-              listId: list.id,
-              accountIds: [...this.addedUserIds],
-            })
+          useListsStore().setListAccounts({
+            listId: list.id,
+            accountIds: [...this.addedUserIds],
+          })
           return list.id
         })
         .then((listId) => {
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index ee61fa369..2cb6a96e6 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -2,6 +2,7 @@ import fileSizeFormatService from '../../services/file_size_format/file_size_for
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faUpload } from '@fortawesome/free-solid-svg-icons'
@@ -33,7 +34,7 @@ const mediaUpload = {
       }
 
       // Skip if image compression is disabled
-      if (!this.$store.getters.mergedConfig.imageCompression) {
+      if (!useMergedConfigStore().mergedConfig.imageCompression) {
         return file
       }
 
@@ -78,7 +79,7 @@ const mediaUpload = {
 
           // Convert to WebP if supported and alwaysUseJpeg is false, otherwise JPEG
           const type =
-            !this.$store.getters.mergedConfig.alwaysUseJpeg && supportsWebP
+            !useMergedConfigStore().mergedConfig.alwaysUseJpeg && supportsWebP
               ? 'image/webp'
               : 'image/jpeg'
           const extension = type === 'image/webp' ? '.webp' : '.jpg'
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 37c30355c..5edc89516 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -1,3 +1,4 @@
+import { mapState as mapPiniaState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 import { mapGetters, mapState } from 'vuex'
 
@@ -8,6 +9,9 @@ import {
 import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
+
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -97,23 +101,23 @@ const MentionLink = {
     userNameFullUi() {
       return this.user && this.user.screen_name_ui
     },
-    highlight() {
-      return this.user && this.mergedConfig.highlight[this.user.screen_name]
+    highlightData() {
+      return this.highlight[this.user?.screen_name]
     },
     highlightType() {
-      return this.highlight && '-' + this.highlight.type
+      return this.highlightData && '-' + this.highlightData.type
     },
     highlightClass() {
-      if (this.highlight) return highlightClass(this.user)
+      return this.highlightData && highlightClass(this.user)
     },
     style() {
-      if (this.highlight) {
+      if (this.highlightData) {
         const {
           backgroundColor,
           backgroundPosition,
           backgroundImage,
           ...rest
-        } = highlightStyle(this.highlight)
+        } = highlightStyle(this.highlightData)
         return rest
       }
     },
@@ -121,7 +125,7 @@ const MentionLink = {
       return [
         {
           '-you': this.isYou && this.shouldBoldenYou,
-          '-highlighted': this.highlight,
+          '-highlighted': !!this.highlightData,
           '-has-selection': this.hasSelection,
         },
         this.highlightType,
@@ -156,7 +160,8 @@ const MentionLink = {
     shouldFadeDomain() {
       return this.mergedConfig.mentionLinkFadeDomain
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
+    ...mapPiniaState(useUserHighlightStore, ['highlight']),
     ...mapState({
       currentUser: (state) => state.users.currentUser,
     }),
diff --git a/src/components/mentions_line/mentions_line.js b/src/components/mentions_line/mentions_line.js
index e6aa392a0..88d2b3257 100644
--- a/src/components/mentions_line/mentions_line.js
+++ b/src/components/mentions_line/mentions_line.js
@@ -1,7 +1,9 @@
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import MentionLink from 'src/components/mention_link/mention_link.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 export const MENTIONS_LIMIT = 5
 
 const MentionsLine = {
@@ -26,7 +28,7 @@ const MentionsLine = {
     manyMentions() {
       return this.extraMentions.length > 0
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
   },
   methods: {
     toggleShowMore() {
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index c5b1d66f6..f47cef893 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -13,7 +13,7 @@ import SideDrawer from '../side_drawer/side_drawer.vue'
 
 import { useAnnouncementsStore } from 'src/stores/announcements.js'
 import { useInstanceStore } from 'src/stores/instance.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -52,11 +52,19 @@ const MobileNav = {
       return this.$store.state.users.currentUser
     },
     unseenNotifications() {
-      return unseenNotificationsFromStore(this.$store)
+      return unseenNotificationsFromStore(
+        this.$store,
+        useMergedConfigStore().mergedConfig.notificationVisibility,
+        useMergedConfigStore().mergedConfig.ignoreInactionableSeen,
+      )
     },
     unseenNotificationsCount() {
       return (
-        this.unseenNotifications.length + countExtraNotifications(this.$store)
+        this.unseenNotifications.length +
+        countExtraNotifications(
+          this.$store,
+          useMergedConfigStore().mergedConfig,
+        )
       )
     },
     unseenCount() {
@@ -75,15 +83,15 @@ const MobileNav = {
       return this.$route.name === 'chat'
     },
     ...mapState(useAnnouncementsStore, ['unreadAnnouncementCount']),
-    ...mapState(useServerSideStorageStore, {
+    ...mapState(useMergedConfigStore, {
       pinnedItems: (store) =>
         new Set(store.prefsStorage.collections.pinnedNavItems).has('chats'),
     }),
     shouldConfirmLogout() {
-      return this.$store.getters.mergedConfig.modalOnLogout
+      return useMergedConfigStore().mergedConfig.modalOnLogout
     },
     closingDrawerMarksAsSeen() {
-      return this.$store.getters.mergedConfig.closingDrawerMarksAsSeen
+      return useMergedConfigStore().mergedConfig.closingDrawerMarksAsSeen
     },
     ...mapGetters(['unreadChatCount']),
   },
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index 83103c827..4969352f6 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -1,5 +1,6 @@
 import { debounce } from 'lodash'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { usePostStatusStore } from 'src/stores/post_status.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -45,10 +46,10 @@ const MobilePostStatusButton = {
       )
     },
     isPersistent() {
-      return !!this.$store.getters.mergedConfig.alwaysShowNewPostButton
+      return !!useMergedConfigStore().mergedConfig.alwaysShowNewPostButton
     },
     autohideFloatingPostButton() {
-      return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
+      return !!useMergedConfigStore().mergedConfig.autohideFloatingPostButton
     },
   },
   watch: {
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.js b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
index 2bd82f486..d77a0a839 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.js
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.js
@@ -1,5 +1,6 @@
 import { get } from 'lodash'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { useInstanceStore } from 'src/stores/instance.js'
 
 /**
  * This is for backwards compatibility. We originally didn't recieve
@@ -18,64 +19,64 @@ const toInstanceReasonObject = (instances, info, key) => {
 
 const MRFTransparencyPanel = {
   computed: {
-    ...mapState({
-      federationPolicy: (state) => get(state, 'instance.federationPolicy'),
+    ...mapState(useInstanceStore, {
+      federationPolicy: (state) => state.federationPolicy,
       mrfPolicies: (state) =>
-        get(state, 'instance.federationPolicy.mrf_policies', []),
+        get(state, 'federationPolicy.mrf_policies', []),
       quarantineInstances: (state) =>
         toInstanceReasonObject(
-          get(state, 'instance.federationPolicy.quarantined_instances', []),
+          get(state, 'federationPolicy.quarantined_instances', []),
           get(
             state,
-            'instance.federationPolicy.quarantined_instances_info',
+            'federationPolicy.quarantined_instances_info',
             [],
           ),
           'quarantined_instances',
         ),
       acceptInstances: (state) =>
         toInstanceReasonObject(
-          get(state, 'instance.federationPolicy.mrf_simple.accept', []),
-          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          get(state, 'federationPolicy.mrf_simple.accept', []),
+          get(state, 'federationPolicy.mrf_simple_info', []),
           'accept',
         ),
       rejectInstances: (state) =>
         toInstanceReasonObject(
-          get(state, 'instance.federationPolicy.mrf_simple.reject', []),
-          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          get(state, 'federationPolicy.mrf_simple.reject', []),
+          get(state, 'federationPolicy.mrf_simple_info', []),
           'reject',
         ),
       ftlRemovalInstances: (state) =>
         toInstanceReasonObject(
           get(
             state,
-            'instance.federationPolicy.mrf_simple.federated_timeline_removal',
+            'federationPolicy.mrf_simple.federated_timeline_removal',
             [],
           ),
-          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          get(state, 'federationPolicy.mrf_simple_info', []),
           'federated_timeline_removal',
         ),
       mediaNsfwInstances: (state) =>
         toInstanceReasonObject(
-          get(state, 'instance.federationPolicy.mrf_simple.media_nsfw', []),
-          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          get(state, 'federationPolicy.mrf_simple.media_nsfw', []),
+          get(state, 'federationPolicy.mrf_simple_info', []),
           'media_nsfw',
         ),
       mediaRemovalInstances: (state) =>
         toInstanceReasonObject(
-          get(state, 'instance.federationPolicy.mrf_simple.media_removal', []),
-          get(state, 'instance.federationPolicy.mrf_simple_info', []),
+          get(state, 'federationPolicy.mrf_simple.media_removal', []),
+          get(state, 'federationPolicy.mrf_simple_info', []),
           'media_removal',
         ),
       keywordsFtlRemoval: (state) =>
         get(
           state,
-          'instance.federationPolicy.mrf_keyword.federated_timeline_removal',
+          'federationPolicy.mrf_keyword.federated_timeline_removal',
           [],
         ),
       keywordsReject: (state) =>
-        get(state, 'instance.federationPolicy.mrf_keyword.reject', []),
+        get(state, 'federationPolicy.mrf_keyword.reject', []),
       keywordsReplace: (state) =>
-        get(state, 'instance.federationPolicy.mrf_keyword.replace', []),
+        get(state, 'federationPolicy.mrf_keyword.replace', []),
     }),
     hasInstanceSpecificPolicies() {
       return (
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 8aff31f02..ae6264217 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -12,7 +12,7 @@ import NavigationPins from 'src/components/navigation/navigation_pins.vue'
 import { useAnnouncementsStore } from 'src/stores/announcements'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -84,28 +84,28 @@ const NavPanel = {
       this.editMode = !this.editMode
     },
     toggleCollapse() {
-      useServerSideStorageStore().setPreference({
-        path: 'simple.collapseNav',
+      useSyncConfigStore().setSimplePrefAndSave({
+        path: 'collapseNav',
         value: !this.collapsed,
       })
-      useServerSideStorageStore().pushServerSideStorage()
+      useSyncConfigStore().pushSyncConfig()
     },
     isPinned(item) {
       return this.pinnedItems.has(item)
     },
     togglePin(item) {
       if (this.isPinned(item)) {
-        useServerSideStorageStore().removeCollectionPreference({
+        useSyncConfigStore().removeCollectionPreference({
           path: 'collections.pinnedNavItems',
           value: item,
         })
       } else {
-        useServerSideStorageStore().addCollectionPreference({
+        useSyncConfigStore().addCollectionPreference({
           path: 'collections.pinnedNavItems',
           value: item,
         })
       }
-      useServerSideStorageStore().pushServerSideStorage()
+      useSyncConfigStore().pushSyncConfig()
     },
   },
   computed: {
@@ -122,7 +122,7 @@ const NavPanel = {
     ...mapPiniaState(useInstanceStore, {
       privateMode: (store) => store.private,
     }),
-    ...mapPiniaState(useServerSideStorageStore, {
+    ...mapPiniaState(useSyncConfigStore, {
       collapsed: (store) => store.prefsStorage.simple.collapseNav,
       pinnedItems: (store) =>
         new Set(store.prefsStorage.collections.pinnedNavItems),
diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
index 3384534be..7a43000ce 100644
--- a/src/components/navigation/navigation_entry.js
+++ b/src/components/navigation/navigation_entry.js
@@ -5,7 +5,7 @@ import { routeTo } from 'src/components/navigation/navigation.js'
 import OptionalRouterLink from 'src/components/optional_router_link/optional_router_link.vue'
 
 import { useAnnouncementsStore } from 'src/stores/announcements.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
@@ -23,17 +23,17 @@ const NavigationEntry = {
     },
     togglePin(value) {
       if (this.isPinned(value)) {
-        useServerSideStorageStore().removeCollectionPreference({
+        useSyncConfigStore().removeCollectionPreference({
           path: 'collections.pinnedNavItems',
           value,
         })
       } else {
-        useServerSideStorageStore().addCollectionPreference({
+        useSyncConfigStore().addCollectionPreference({
           path: 'collections.pinnedNavItems',
           value,
         })
       }
-      useServerSideStorageStore().pushServerSideStorage()
+      useSyncConfigStore().pushSyncConfig()
     },
   },
   computed: {
@@ -47,7 +47,7 @@ const NavigationEntry = {
     ...mapState({
       currentUser: (state) => state.users.currentUser,
     }),
-    ...mapPiniaState(useServerSideStorageStore, {
+    ...mapPiniaState(useSyncConfigStore, {
       pinnedItems: (store) =>
         new Set(store.prefsStorage.collections.pinnedNavItems),
     }),
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index 698bf5d59..85f6fafee 100644
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@@ -18,7 +18,7 @@ import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useListsStore } from 'src/stores/lists'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -70,7 +70,7 @@ const NavPanel = {
     ...mapPiniaState(useBookmarkFoldersStore, {
       bookmarks: getBookmarkFolderEntries,
     }),
-    ...mapPiniaState(useServerSideStorageStore, {
+    ...mapPiniaState(useSyncConfigStore, {
       pinnedItems: (store) =>
         new Set(store.prefsStorage.collections.pinnedNavItems),
     }),
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 16084dee4..5f612cb9c 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -17,6 +17,8 @@ import UserLink from '../user_link/user_link.vue'
 import UserPopover from '../user_popover/user_popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -181,9 +183,8 @@ const Notification = {
       return highlightClass(this.notification.from_profile)
     },
     userStyle() {
-      const highlight = this.$store.getters.mergedConfig.highlight
-      const user = this.notification.from_profile
-      return highlightStyle(highlight[user.screen_name])
+      const user = this.notification.from_profile.screen_name
+      return highlightStyle(useUserHighlightStore().get(user))
     },
     expandable() {
       return new Set(['like', 'pleroma:emoji_reaction', 'repeat', 'poll']).has(
@@ -209,7 +210,7 @@ const Notification = {
       return isStatusNotification(this.notification.type)
     },
     mergedConfig() {
-      return this.$store.getters.mergedConfig
+      return useMergedConfigStore().mergedConfig
     },
     shouldConfirmApprove() {
       return this.mergedConfig.modalOnApproveFollow
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 7be8eb76b..9232930df 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -108,6 +108,9 @@
 <script>
 import Popover from '../popover/popover.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter } from '@fortawesome/free-solid-svg-icons'
 
@@ -117,13 +120,13 @@ export default {
   components: { Popover },
   computed: {
     filters() {
-      return this.$store.getters.mergedConfig.notificationVisibility
+      return useMergedConfigStore().mergedConfig.notificationVisibility
     },
   },
   methods: {
     toggleNotificationFilter(type) {
-      this.$store.dispatch('setOption', {
-        name: 'notificationVisibility',
+      useSyncConfigStore().setSimplePrefAndSave({
+        path: 'notificationVisibility',
         value: {
           ...this.filters,
           [type]: !this.filters[type],
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 6483a256e..564fae7f2 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -17,6 +17,7 @@ import NotificationFilters from './notification_filters.vue'
 
 import { useAnnouncementsStore } from 'src/stores/announcements.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -75,20 +76,29 @@ const Notifications = {
       return this.$store.state.notifications.error
     },
     unseenNotifications() {
-      return unseenNotificationsFromStore(this.$store)
+      return unseenNotificationsFromStore(
+        this.$store,
+        useMergedConfigStore().mergedConfig.notificationVisibility,
+      )
     },
     filteredNotifications() {
       if (this.unseenAtTop) {
         return [
-          ...filteredNotificationsFromStore(this.$store).filter((n) =>
-            this.shouldShowUnseen(n),
-          ),
-          ...filteredNotificationsFromStore(this.$store).filter(
-            (n) => !this.shouldShowUnseen(n),
-          ),
+          ...filteredNotificationsFromStore(
+            this.$store,
+            useMergedConfigStore().mergedConfig.notificationVisibility,
+          ).filter((n) => this.shouldShowUnseen(n)),
+          ...filteredNotificationsFromStore(
+            this.$store,
+            useMergedConfigStore().mergedConfig.notificationVisibility,
+          ).filter((n) => !this.shouldShowUnseen(n)),
         ]
       } else {
-        return filteredNotificationsFromStore(this.$store, this.filterMode)
+        return filteredNotificationsFromStore(
+          this.$store,
+          useMergedConfigStore().mergedConfig.notificationVisibility,
+          this.filterMode,
+        )
       }
     },
     unseenCountBadgeText() {
@@ -98,10 +108,13 @@ const Notifications = {
       return this.unseenNotifications.length
     },
     ignoreInactionableSeen() {
-      return this.$store.getters.mergedConfig.ignoreInactionableSeen
+      return useMergedConfigStore().mergedConfig.ignoreInactionableSeen
     },
     extraNotificationsCount() {
-      return countExtraNotifications(this.$store)
+      return countExtraNotifications(
+        this.$store,
+        useMergedConfigStore().mergedConfig,
+      )
     },
     unseenCountTitle() {
       return (
@@ -136,10 +149,10 @@ const Notifications = {
       )
     },
     noSticky() {
-      return this.$store.getters.mergedConfig.disableStickyHeaders
+      return useMergedConfigStore().mergedConfig.disableStickyHeaders
     },
     unseenAtTop() {
-      return this.$store.getters.mergedConfig.unseenAtTop
+      return useMergedConfigStore().mergedConfig.unseenAtTop
     },
     showExtraNotifications() {
       return !this.noExtra
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 5392f487b..ea86fb517 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -61,15 +61,16 @@
           </div>
           <p
             v-if="error"
-            class="alert error notice-dismissible"
+            class="alert error"
           >
             <span>{{ error }}</span>
-            <a
+            <button
               class="fa-scale-110 fa-old-padding dismiss"
+              type="button"
               @click.prevent="dismissError()"
             >
               <FAIcon icon="times" />
-            </a>
+            </button>
           </p>
         </div>
       </form>
@@ -117,10 +118,6 @@
     margin: 0.3em 0 1em;
   }
 
-  .notice-dismissible {
-    padding-right: 2rem;
-  }
-
   .dismiss {
     cursor: pointer;
   }
diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index f8887e53f..945b8b372 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -4,6 +4,7 @@ import Timeago from 'components/timeago/timeago.vue'
 
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { usePollsStore } from 'src/stores/polls.js'
 
 export default {
@@ -48,7 +49,7 @@ export default {
       return (this.poll && this.poll.expired) || false
     },
     expirationLabel() {
-      if (this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
+      if (useMergedConfigStore().mergedConfig.useAbsoluteTimeFormat) {
         return this.expired ? 'polls.expired_at' : 'polls.expires_at'
       } else {
         return this.expired ? 'polls.expired' : 'polls.expires_in'
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 049183575..d08a8b9c2 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -25,6 +25,8 @@ import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
 import { useMediaViewerStore } from 'src/stores/media_viewer.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { pollFormToMasto } from 'src/services/poll/poll.service.js'
 
@@ -170,7 +172,7 @@ const PostStatusForm = {
     const preset = this.$route.query.message
     let statusText = preset || ''
 
-    const { scopeCopy } = this.$store.getters.mergedConfig
+    const { scopeCopy } = useMergedConfigStore().mergedConfig
 
     const [statusType, refId] = typeAndRefId({
       replyTo: this.replyTo,
@@ -200,7 +202,7 @@ const PostStatusForm = {
           : this.$store.state.users.currentUser.default_scope
 
       const { postContentType: contentType, sensitiveByDefault } =
-        this.$store.getters.mergedConfig
+        useMergedConfigStore().mergedConfig
 
       statusParams = {
         type: statusType,
@@ -301,7 +303,7 @@ const PostStatusForm = {
       return this.newStatus.spoilerText.length
     },
     statusLengthLimit() {
-      return useInstanceStore().textlimit
+      return useInstanceStore().limits.textLimit
     },
     hasStatusLengthLimit() {
       return this.statusLengthLimit > 0
@@ -335,7 +337,8 @@ const PostStatusForm = {
     },
     hideScopeNotice() {
       return (
-        this.disableNotice || this.$store.getters.mergedConfig.hideScopeNotice
+        this.disableNotice ||
+        useMergedConfigStore().mergedConfig.hideScopeNotice
       )
     },
     pollContentError() {
@@ -420,7 +423,7 @@ const PostStatusForm = {
       return this.newStatus.hasQuote && !this.newStatus.quote.thread
     },
     shouldAutoSaveDraft() {
-      return this.$store.getters.mergedConfig.autoSaveDraft
+      return useMergedConfigStore().mergedConfig.autoSaveDraft
     },
     autoSaveState() {
       if (this.saveable) {
@@ -453,7 +456,7 @@ const PostStatusForm = {
         )
       )
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
     ...mapState(useInterfaceStore, {
       mobileLayout: (store) => store.mobileLayout,
     }),
@@ -879,8 +882,8 @@ const PostStatusForm = {
       this.newStatus.hasQuote = !this.newStatus.hasQuote
     },
     dismissScopeNotice() {
-      this.$store.dispatch('setOption', {
-        name: 'hideScopeNotice',
+      useSyncConfigStore().setSimplePrefAndSave({
+        path: 'hideScopeNotice',
         value: true,
       })
     },
diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
index 976a23f0a..684a92267 100644
--- a/src/components/post_status_form/post_status_form.scss
+++ b/src/components/post_status_form/post_status_form.scss
@@ -111,7 +111,6 @@
   .visibility-notice {
     border: 1px solid var(--border);
     border-radius: var(--roundness);
-    padding: 0.5em 1em
   }
 
   .visibility-notice.edit-warning {
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 0eedea360..5fdde4784 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -9,20 +9,24 @@
       @dragover.prevent="fileDrag"
     >
       <div class="form-group">
-        <i18n-t
+        <div
           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
-          keypath="post_status.account_not_locked_warning"
-          tag="p"
-          class="visibility-notice"
-          scope="global"
+          class="visibility-notice notice-dismissible"
         >
-          <button
-            class="button-unstyled -link"
-            @click="openProfileTab"
+          <i18n-t
+            keypath="post_status.account_not_locked_warning"
+            tag="p"
+            class=""
+            scope="global"
           >
-            {{ $t('post_status.account_not_locked_warning_link') }}
-          </button>
-        </i18n-t>
+            <button
+              class="button-unstyled -link"
+              @click="openProfileTab"
+            >
+              {{ $t('post_status.account_not_locked_warning_link') }}
+            </button>
+          </i18n-t>
+        </div>
         <p
           v-if="!hideScopeNotice && newStatus.visibility === 'public'"
           class="visibility-notice notice-dismissible"
@@ -70,7 +74,7 @@
         </p>
         <p
           v-else-if="newStatus.visibility === 'direct'"
-          class="visibility-notice"
+          class="visibility-notice notice-dismissible"
         >
           <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
           <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
diff --git a/src/components/quick_filter_settings/quick_filter_settings.js b/src/components/quick_filter_settings/quick_filter_settings.js
index 84abeec72..4127f3f30 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.js
+++ b/src/components/quick_filter_settings/quick_filter_settings.js
@@ -1,9 +1,11 @@
 import { mapState } from 'pinia'
-import { mapGetters } from 'vuex'
 
 import Popover from '../popover/popover.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useLocalConfigStore } from 'src/stores/local_config.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
@@ -20,8 +22,8 @@ const QuickFilterSettings = {
   },
   methods: {
     setReplyVisibility(visibility) {
-      this.$store.dispatch('setOption', {
-        name: 'replyVisibility',
+      useSyncConfigStore().setSimplePrefAndSave({
+        path: 'replyVisibility',
         value: visibility,
       })
       this.$store.dispatch('queueFlushAll')
@@ -31,7 +33,7 @@ const QuickFilterSettings = {
     },
   },
   computed: {
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
     ...mapState(useInterfaceStore, {
       mobileLayout: (state) => state.layoutType === 'mobile',
     }),
@@ -85,11 +87,13 @@ const QuickFilterSettings = {
           this.mergedConfig.hideAttachmentsInConv
         )
       },
-      set() {
-        const value = !this.hideMedia
-        this.$store.dispatch('setOption', { name: 'hideAttachments', value })
-        this.$store.dispatch('setOption', {
-          name: 'hideAttachmentsInConv',
+      set(value) {
+        useLocalConfigStore().set({
+          path: 'hideAttachments',
+          value,
+        })
+        useLocalConfigStore().set({
+          path: 'hideAttachmentsInConv',
           value,
         })
       },
@@ -98,10 +102,9 @@ const QuickFilterSettings = {
       get() {
         return this.mergedConfig.hideFilteredStatuses
       },
-      set() {
-        const value = !this.hideMutedPosts
-        this.$store.dispatch('setOption', {
-          name: 'hideFilteredStatuses',
+      set(value) {
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'hideFilteredStatuses',
           value,
         })
       },
@@ -110,19 +113,20 @@ const QuickFilterSettings = {
       get() {
         return this.mergedConfig.muteBotStatuses
       },
-      set() {
-        const value = !this.muteBotStatuses
-        this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
+      set(value) {
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'muteBotStatuses',
+          value,
+        })
       },
     },
     muteSensitiveStatuses: {
       get() {
         return this.mergedConfig.muteSensitiveStatuses
       },
-      set() {
-        const value = !this.muteSensitiveStatuses
-        this.$store.dispatch('setOption', {
-          name: 'muteSensitiveStatuses',
+      set(value) {
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'muteSensitiveStatuses',
           value,
         })
       },
diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
index 438d1405b..f809d241c 100644
--- a/src/components/quick_view_settings/quick_view_settings.js
+++ b/src/components/quick_view_settings/quick_view_settings.js
@@ -1,10 +1,11 @@
 import { mapState } from 'pinia'
-import { mapGetters } from 'vuex'
 
 import Popover from 'src/components/popover/popover.vue'
 import QuickFilterSettings from 'src/components/quick_filter_settings/quick_filter_settings.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -25,18 +26,12 @@ const QuickViewSettings = {
     QuickFilterSettings,
   },
   methods: {
-    setConversationDisplay(visibility) {
-      this.$store.dispatch('setOption', {
-        name: 'conversationDisplay',
-        value: visibility,
-      })
-    },
     openTab(tab) {
       useInterfaceStore().openSettingsModalTab(tab)
     },
   },
   computed: {
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
     ...mapState(useInterfaceStore, {
       mobileLayout: (state) => state.layoutType === 'mobile',
     }),
@@ -47,8 +42,11 @@ const QuickViewSettings = {
       get() {
         return this.mergedConfig.conversationDisplay
       },
-      set(newVal) {
-        this.setConversationDisplay(newVal)
+      set(value) {
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'conversationDisplay',
+          value,
+        })
       },
     },
     autoUpdate: {
@@ -57,7 +55,7 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.autoUpdate
-        this.$store.dispatch('setOption', { name: 'streaming', value })
+        useSyncConfigStore().setSimplePrefAndSave({ path: 'streaming', value })
       },
     },
     collapseWithSubjects: {
@@ -66,8 +64,8 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.collapseWithSubjects
-        this.$store.dispatch('setOption', {
-          name: 'collapseMessageWithSubject',
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'collapseMessageWithSubject',
           value,
         })
       },
@@ -78,8 +76,8 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.showUserAvatars
-        this.$store.dispatch('setOption', {
-          name: 'mentionLinkShowAvatar',
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'mentionLinkShowAvatar',
           value,
         })
       },
@@ -90,7 +88,10 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.muteBotStatuses
-        this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'muteBotStatuses',
+          value,
+        })
       },
     },
     muteSensitiveStatuses: {
@@ -99,8 +100,8 @@ const QuickViewSettings = {
       },
       set() {
         const value = !this.muteSensitiveStatuses
-        this.$store.dispatch('setOption', {
-          name: 'muteSensitiveStatuses',
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'muteSensitiveStatuses',
           value,
         })
       },
diff --git a/src/components/remove_follower_button/remove_follower_button.js b/src/components/remove_follower_button/remove_follower_button.js
index b8f195815..bd5aa6d5b 100644
--- a/src/components/remove_follower_button/remove_follower_button.js
+++ b/src/components/remove_follower_button/remove_follower_button.js
@@ -1,5 +1,7 @@
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 export default {
   props: ['user', 'relationship'],
   data() {
@@ -20,7 +22,7 @@ export default {
       }
     },
     shouldConfirmRemoveUserFromFollowers() {
-      return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
+      return useMergedConfigStore().mergedConfig.modalOnRemoveUserFromFollowers
     },
   },
   methods: {
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index a7804d78f..c8e0e4ea0 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -40,7 +40,7 @@
           :changed="isChanged"
           :onclick="reset"
         />
-        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+        <LocalSettingIndicator :is-local="isLocalSetting" />
       </div>
       <div v-if="!compact">{{ $t('settings.preview') }}</div>
       <Attachment
diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
index 2134ad7ce..4fb37fab7 100644
--- a/src/components/settings_modal/helpers/boolean_setting.vue
+++ b/src/components/settings_modal/helpers/boolean_setting.vue
@@ -18,7 +18,7 @@
           :changed="isChanged"
           :onclick="reset"
         />
-        <ProfileSettingIndicator :is-profile="isProfileSetting" />
+        <LocalSettingIndicator :is-local="isLocalSetting" />
         {{ ' ' }}
         <template v-if="backendDescriptionLabel">
           {{ backendDescriptionLabel }}
diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
index 318951026..a162177ce 100644
--- a/src/components/settings_modal/helpers/choice_setting.vue
+++ b/src/components/settings_modal/helpers/choice_setting.vue
@@ -9,7 +9,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel }}
diff --git a/src/components/settings_modal/helpers/color_setting.vue b/src/components/settings_modal/helpers/color_setting.vue
index c996dc02f..f8f3b9427 100644
--- a/src/components/settings_modal/helpers/color_setting.vue
+++ b/src/components/settings_modal/helpers/color_setting.vue
@@ -33,7 +33,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
     <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"
diff --git a/src/components/settings_modal/helpers/group_setting.vue b/src/components/settings_modal/helpers/group_setting.vue
index 68e571f7d..7040c6214 100644
--- a/src/components/settings_modal/helpers/group_setting.vue
+++ b/src/components/settings_modal/helpers/group_setting.vue
@@ -7,7 +7,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
     <DraftButtons />
   </span>
 </template>
diff --git a/src/components/settings_modal/helpers/list_setting.js b/src/components/settings_modal/helpers/list_setting.js
index c1d504cd5..ecbdb3669 100644
--- a/src/components/settings_modal/helpers/list_setting.js
+++ b/src/components/settings_modal/helpers/list_setting.js
@@ -1,6 +1,8 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Setting from './setting.js'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 export default {
   ...Setting,
   data() {
@@ -43,7 +45,7 @@ export default {
       if (this.forceNew) return true
       if (!this.allowNew) return false
 
-      const isExpert = this.$store.state.config.expertLevel > 0
+      const isExpert = useMergedConfigStore().mergedConfig.expertLevel > 0
       const hasBuiltins = this.builtinEntries.length > 0
 
       if (hasBuiltins) {
diff --git a/src/components/settings_modal/helpers/list_setting.vue b/src/components/settings_modal/helpers/list_setting.vue
index 1dacba410..4b62be306 100644
--- a/src/components/settings_modal/helpers/list_setting.vue
+++ b/src/components/settings_modal/helpers/list_setting.vue
@@ -75,7 +75,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
     <DraftButtons />
   </div>
 </template>
diff --git a/src/components/settings_modal/helpers/list_tuple_setting.vue b/src/components/settings_modal/helpers/list_tuple_setting.vue
index eb2f6e16e..6719c213e 100644
--- a/src/components/settings_modal/helpers/list_tuple_setting.vue
+++ b/src/components/settings_modal/helpers/list_tuple_setting.vue
@@ -77,7 +77,6 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons />
   </div>
 </template>
diff --git a/src/components/settings_modal/helpers/profile_setting_indicator.vue b/src/components/settings_modal/helpers/local_setting_indicator.vue
similarity index 66%
rename from src/components/settings_modal/helpers/profile_setting_indicator.vue
rename to src/components/settings_modal/helpers/local_setting_indicator.vue
index 3b45b125d..e22e36fb2 100644
--- a/src/components/settings_modal/helpers/profile_setting_indicator.vue
+++ b/src/components/settings_modal/helpers/local_setting_indicator.vue
@@ -1,7 +1,7 @@
 <template>
   <span
-    v-if="isProfile"
-    class="ProfileSettingIndicator"
+    v-if="isLocal"
+    class="LocalSettingIndicator"
   >
     <Popover
       trigger="hover"
@@ -9,13 +9,13 @@
       <template #trigger>
         &nbsp;
         <FAIcon
-          icon="server"
-          :aria-label="$t('settings.setting_server_side')"
+          icon="desktop"
+          :aria-label="$t('settings.setting_local_side')"
         />
       </template>
       <template #content>
         <div class="profilesetting-tooltip">
-          {{ $t('settings.setting_server_side') }}
+          {{ $t('settings.setting_local_side') }}
         </div>
       </template>
     </Popover>
@@ -26,18 +26,18 @@
 import Popover from 'src/components/popover/popover.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faServer } from '@fortawesome/free-solid-svg-icons'
+import { faDesktop } from '@fortawesome/free-solid-svg-icons'
 
-library.add(faServer)
+library.add(faDesktop)
 
 export default {
   components: { Popover },
-  props: ['isProfile'],
+  props: ['isLocal'],
 }
 </script>
 
 <style lang="scss">
-.ProfileSettingIndicator {
+.LocalSettingIndicator {
   display: inline-block;
   position: relative;
 }
diff --git a/src/components/settings_modal/helpers/map_setting.vue b/src/components/settings_modal/helpers/map_setting.vue
index 95adcb314..011003a51 100644
--- a/src/components/settings_modal/helpers/map_setting.vue
+++ b/src/components/settings_modal/helpers/map_setting.vue
@@ -77,7 +77,7 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
     <DraftButtons />
   </div>
 </template>
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 26c18f928..3a6434e9e 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -9,6 +9,13 @@
       class="setting-label"
       :class="{ 'faint': shouldBeDisabled }"
     >
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+    <LocalSettingIndicator :is-local="isLocalSetting" />
+    {{ ' ' }}
+    <DraftButtons v-if="!hideDraftButtons" />
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
       </template>
@@ -29,13 +36,6 @@
       :value="realDraftMode ? draft :state"
       @change="update"
     >
-    {{ ' ' }}
-    <ModifiedIndicator
-      :changed="isChanged"
-      :onclick="reset"
-    />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
-    <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"
       class="setting-description"
diff --git a/src/components/settings_modal/helpers/proxy_setting.vue b/src/components/settings_modal/helpers/proxy_setting.vue
index 869cbcdcc..00552f511 100644
--- a/src/components/settings_modal/helpers/proxy_setting.vue
+++ b/src/components/settings_modal/helpers/proxy_setting.vue
@@ -44,7 +44,6 @@
       :changed="isChanged"
       :onclick="reset"
     />
-    <ProfileSettingIndicator :is-profile="isProfileSetting" />
     <DraftButtons v-if="!hideDraftButtons" />
     <p
       v-if="backendDescriptionDescription"
diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
index 6dc8ac327..a55b5d793 100644
--- a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.vue
@@ -11,7 +11,6 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
diff --git a/src/components/settings_modal/helpers/rate_setting.vue b/src/components/settings_modal/helpers/rate_setting.vue
index 49e09e046..bb361dfb9 100644
--- a/src/components/settings_modal/helpers/rate_setting.vue
+++ b/src/components/settings_modal/helpers/rate_setting.vue
@@ -11,7 +11,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index 2884d92b4..af8ebecbd 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -1,14 +1,20 @@
 import { cloneDeep, get, isEqual, set } from 'lodash'
 
 import DraftButtons from './draft_buttons.vue'
+import LocalSettingIndicator from './local_setting_indicator.vue'
 import ModifiedIndicator from './modified_indicator.vue'
-import ProfileSettingIndicator from './profile_setting_indicator.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+import { useLocalConfigStore } from 'src/stores/local_config.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 export default {
   components: {
     ModifiedIndicator,
     DraftButtons,
-    ProfileSettingIndicator,
+    LocalSettingIndicator,
   },
   props: {
     modelValue: {
@@ -43,6 +49,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    local: {
+      type: Boolean,
+      default: false,
+    },
     parentPath: {
       type: [String, Array],
     },
@@ -235,13 +245,14 @@ export default {
         case 'admin':
           return this.$store.state.adminSettings.config
         default:
-          return this.$store.getters.mergedConfig
+          return useMergedConfigStore().mergedConfig
       }
     },
     configSink() {
       if (this.path == null) {
         return (k, v) => this.$emit('update:modelValue', v)
       }
+
       switch (this.realSource) {
         case 'profile':
           return (k, v) =>
@@ -250,15 +261,61 @@ export default {
           return (k, v) =>
             this.$store.dispatch('pushAdminSetting', { path: k, value: v })
         default:
-          if (this.timedApplyMode) {
-            return (k, v) =>
-              this.$store.dispatch('setOptionTemporarily', {
-                name: k,
-                value: v,
-              })
-          } else {
-            return (k, v) =>
-              this.$store.dispatch('setOption', { name: k, value: v })
+          return (readPath, value) => {
+            const writePath = `${readPath}`
+
+            if (!this.timedApplyMode) {
+              if (this.local) {
+                useLocalConfigStore().set({
+                  path: writePath,
+                  value,
+                })
+              } else {
+                useSyncConfigStore().setSimplePrefAndSave({
+                  path: writePath,
+                  value,
+                })
+              }
+            } else {
+              if (useInterfaceStore().temporaryChangesTimeoutId !== null) {
+                console.error("Can't track more than one temporary change")
+                return
+              }
+
+              const oldValue = get(this.configSource, readPath)
+
+              if (this.local) {
+                useLocalConfigStore().setTemporarily({ path: writePath, value })
+              } else {
+                useSyncConfigStore().setPreference({ path: writePath, value })
+              }
+
+              const confirm = () => {
+                if (this.local) {
+                  useLocalConfigStore().set({ path: writePath, value })
+                } else {
+                  useSyncConfigStore().pushSyncConfig()
+                }
+                useInterfaceStore().clearTemporaryChanges()
+              }
+
+              const revert = () => {
+                if (this.local) {
+                  useLocalConfigStore().unsetTemporarily({
+                    path: writePath,
+                    value,
+                  })
+                } else {
+                  useSyncConfigStore().setPreference({
+                    path: writePath,
+                    value: oldValue,
+                  })
+                }
+                useInterfaceStore().clearTemporaryChanges()
+              }
+
+              useInterfaceStore().setTemporaryChanges({ confirm, revert })
+            }
           }
       }
     },
@@ -266,13 +323,17 @@ export default {
       switch (this.realSource) {
         case 'profile':
           return {}
-        default:
-          return get(this.$store.getters.defaultConfig, this.path)
+        default: {
+          return get(useMergedConfigStore().mergedConfigDefault, this.path)
+        }
       }
     },
     isProfileSetting() {
       return this.realSource === 'profile'
     },
+    isLocalSetting() {
+      return this.local
+    },
     isChanged() {
       if (this.path == null) return false
       switch (this.realSource) {
@@ -318,7 +379,8 @@ export default {
     },
     matchesExpertLevel() {
       const settingExpertLevel = this.expert || 0
-      const userToggleExpert = this.$store.state.config.expertLevel || 0
+      const userToggleExpert =
+        useMergedConfigStore().mergedConfig.expertLevel || 0
 
       return settingExpertLevel <= userToggleExpert
     },
@@ -344,7 +406,7 @@ export default {
         this.draft = cloneDeep(this.state)
       } else {
         set(
-          this.$store.getters.mergedConfig,
+          useMergedConfigStore().mergedConfig,
           this.path,
           cloneDeep(this.defaultState),
         )
diff --git a/src/components/settings_modal/helpers/shared_computed_object.js b/src/components/settings_modal/helpers/shared_computed_object.js
index b8197b639..39e0b5b9c 100644
--- a/src/components/settings_modal/helpers/shared_computed_object.js
+++ b/src/components/settings_modal/helpers/shared_computed_object.js
@@ -1,19 +1,18 @@
+import { mapState as mapPiniaState } from 'pinia'
+import { mapState } from 'vuex'
+
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 const SharedComputedObject = () => ({
-  user() {
-    return this.$store.state.users.currentUser
-  },
-  expertLevel() {
-    return this.$store.getters.mergedConfig.expertLevel > 0
-  },
-  mergedConfig() {
-    return this.$store.getters.mergedConfig
-  },
-  adminConfig() {
-    return this.$store.state.adminSettings.config
-  },
-  adminDraft() {
-    return this.$store.state.adminSettings.draft
-  },
+  ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
+  ...mapPiniaState(useMergedConfigStore, {
+    expertLevel: (store) => store.mergedConfig.expertLevel,
+  }),
+  ...mapState({
+    adminConfig: (state) => state.adminSettings.config,
+    adminDraft: (state) => state.adminSettings.draft,
+    user: (state) => state.users.currentUser,
+  }),
 })
 
 export default SharedComputedObject
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 2ab205db1..af84590b2 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -13,7 +13,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
diff --git a/src/components/settings_modal/helpers/tuple_setting.vue b/src/components/settings_modal/helpers/tuple_setting.vue
index e39e23344..7835b9218 100644
--- a/src/components/settings_modal/helpers/tuple_setting.vue
+++ b/src/components/settings_modal/helpers/tuple_setting.vue
@@ -13,7 +13,7 @@
         :changed="isChanged"
         :onclick="reset"
       />
-      <ProfileSettingIndicator :is-profile="isProfileSetting" />
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       {{ ' ' }}
       <template v-if="backendDescriptionLabel">
         {{ backendDescriptionLabel + ' ' }}
diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
index d23745fa4..54fb84111 100644
--- a/src/components/settings_modal/helpers/unit_setting.vue
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -7,6 +7,7 @@
       :for="path"
       class="setting-label size-label"
     >
+      <LocalSettingIndicator :is-local="isLocalSetting" />
       <ModifiedIndicator
         :changed="isChanged"
         :onclick="reset"
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index f2c071045..5c157e068 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -9,7 +9,16 @@ import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import Popover from '../popover/popover.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useLocalConfigStore } from 'src/stores/local_config.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
+import {
+  LOCAL_ONLY_KEYS,
+  ROOT_CONFIG,
+  ROOT_CONFIG_DEFINITIONS,
+  validateSetting,
+} from 'src/modules/default_config_state.js'
 import {
   newExporter,
   newImporter,
@@ -134,10 +143,52 @@ const SettingsModal = {
         })
       }
     },
-    onImport(data) {
-      if (data) {
-        this.$store.dispatch('loadSettings', data)
-      }
+    onImport(input) {
+      if (!input) return
+      const { _pleroma_settings_version, ...data } = input
+
+      Object.entries(data).forEach(([path, value]) => {
+        const definition = ROOT_CONFIG_DEFINITIONS[path]
+
+        const finalValue = validateSetting({
+          path,
+          value,
+          definition,
+          throwError: false,
+          defaultState: ROOT_CONFIG,
+        })
+
+        if (finalValue === undefined) return
+
+        if (LOCAL_ONLY_KEYS.has(path)) {
+          useLocalConfigStore().set({ path, value: finalValue })
+        } else {
+          if (path.startsWith('muteFilters')) {
+            Object.keys(
+              useMergedConfigStore().mergedConfig.muteFilters,
+            ).forEach((key) => {
+              useSyncConfigStore().unsetPreference({
+                path: `simple.${path}.${key}`,
+              })
+            })
+
+            Object.entries(value).forEach(([key, filter]) => {
+              useSyncConfigStore().setPreference({
+                path: `simple.${path}.${key}`,
+                value: filter,
+              })
+            })
+          } else {
+            if (finalValue !== undefined) {
+              useSyncConfigStore().setPreference({
+                path: `simple.${path}`,
+                value: finalValue,
+              })
+            }
+          }
+        }
+      })
+      useSyncConfigStore().pushSyncConfig()
     },
     restore() {
       this.dataImporter.importData()
@@ -149,16 +200,25 @@ const SettingsModal = {
       this.dataThemeExporter.exportData()
     },
     generateExport(theme = false) {
-      const { config } = this.$store.state
+      const config = useMergedConfigStore().mergedConfigWithoutDefaults
       let sample = config
       if (!theme) {
         const ignoreList = new Set([
+          'theme',
           'customTheme',
           'customThemeSource',
           'colors',
+          'style',
+          'styleCustomData',
+          'palette',
+          'paletteCustomData',
+          'themeChecksum',
         ])
+
         sample = Object.fromEntries(
-          Object.entries(sample).filter(([key]) => !ignoreList.has(key)),
+          Object.entries(sample).filter(
+            ([key, value]) => !ignoreList.has(key) && value !== undefined,
+          ),
         )
       }
       const clone = cloneDeep(sample)
@@ -191,11 +251,11 @@ const SettingsModal = {
     }),
     expertLevel: {
       get() {
-        return this.$store.state.config.expertLevel > 0
+        return useMergedConfigStore().mergedConfig.expertLevel > 0
       },
       set(value) {
-        this.$store.dispatch('setOption', {
-          name: 'expertLevel',
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'expertLevel',
           value: value ? 1 : 0,
         })
       },
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 032b603fa..371498a96 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -73,7 +73,7 @@
     }
 
     .ModifiedIndicator,
-    .ProfileSettingIndicator {
+    .LocalSettingIndicator {
       grid-area: indicator;
     }
 
diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
index ddee812ca..6e5d2addc 100644
--- a/src/components/settings_modal/settings_modal_user_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -16,6 +16,7 @@ import SecurityTab from './tabs/security_tab/security_tab.vue'
 import StyleTab from './tabs/style_tab/style_tab.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -83,7 +84,7 @@ const SettingsModalContent = {
       return useInterfaceStore().settingsModalState === 'visible'
     },
     expertLevel() {
-      return this.$store.state.config.expertLevel
+      return useMergedConfigStore().mergedConfig.expertLevel
     },
   },
   data() {
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 0a217a216..99e267d8b 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -6,7 +6,6 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 import Preview from './old_theme_tab/theme_preview.vue'
@@ -77,7 +76,6 @@ const AppearanceTab = {
     IntegerSetting,
     FloatSetting,
     UnitSetting,
-    ProfileSettingIndicator,
     Preview,
     PaletteEditor,
   },
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 75a06388d..a0439ed4a 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -54,7 +54,7 @@
           :key="style.key"
           :data-theme-key="style.key"
           class="button-default theme-preview"
-          :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
+          :class="{ toggled: isStyleActive(style.key), disabled: switchInProgress }"
           :disabled="switchInProgress"
           @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
         >
@@ -235,7 +235,7 @@
         <li>
           <ChoiceSetting
             id="underlayOverride"
-            path="theme3hacks.underlay"
+            path="underlay"
             :options="underlayOverrideModes"
           >
             {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
diff --git a/src/components/settings_modal/tabs/clutter_tab.js b/src/components/settings_modal/tabs/clutter_tab.js
index 23e069d21..85749ab3f 100644
--- a/src/components/settings_modal/tabs/clutter_tab.js
+++ b/src/components/settings_modal/tabs/clutter_tab.js
@@ -12,7 +12,7 @@ import UnitSetting from '../helpers/unit_setting.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 const ClutterTab = {
   components: {
@@ -33,66 +33,17 @@ const ClutterTab = {
         store.instanceIdentity.showInstanceSpecificPanel &&
         store.instanceIdentity.instanceSpecificPanelContent,
     }),
-    ...mapState(useServerSideStorageStore, {
+    ...mapState(useSyncConfigStore, {
       muteFilters: (store) =>
         Object.entries(store.prefsStorage.simple.muteFilters),
       muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
     }),
-    onMuteDefaultActionLv1: {
-      get() {
-        const value = this.$store.state.config.onMuteDefaultAction
-        if (value === 'ask' || value === 'forever') {
-          return value
-        } else {
-          return 'temporarily'
-        }
-      },
-      set(value) {
-        let realValue = value
-        if (value !== 'ask' && value !== 'forever') {
-          realValue = '14d'
-        }
-        this.$store.dispatch('setOption', {
-          name: 'onMuteDefaultAction',
-          value: realValue,
-        })
-      },
-    },
-    onBlockDefaultActionLv1: {
-      get() {
-        const value = this.$store.state.config.onBlockDefaultAction
-        if (value === 'ask' || value === 'forever') {
-          return value
-        } else {
-          return 'temporarily'
-        }
-      },
-      set(value) {
-        let realValue = value
-        if (value !== 'ask' && value !== 'forever') {
-          realValue = '14d'
-        }
-        this.$store.dispatch('setOption', {
-          name: 'onBlockDefaultAction',
-          value: realValue,
-        })
-      },
-    },
-    muteFiltersDraft() {
-      return Object.entries(this.muteFiltersDraftObject)
-    },
-    muteFiltersExpired() {
-      const now = Date.now()
-      return Object.entries(this.muteFiltersDraftObject).filter(
-        ([, { expires }]) => expires != null && expires <= now,
-      )
-    },
   },
   methods: {
-    ...mapActions(useServerSideStorageStore, [
-      'setPreference',
-      'unsetPreference',
-      'pushServerSideStorage',
+    ...mapActions(useSyncConfigStore, [
+      'setSimplePrefAndSave',
+      'unsetSimplePrefAndSave',
+      'pushSyncConfig',
     ]),
     getDatetimeLocal(timestamp) {
       const date = new Date(timestamp)
@@ -138,8 +89,8 @@ const ClutterTab = {
 
       filter.order = this.muteFilters.length + 2
       this.muteFiltersDraftObject[newId] = filter
-      this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
-      this.pushServerSideStorage()
+      this.setSimplePrefAndSave({ path: 'muteFilters.' + newId, value: filter })
+      this.pushSyncConfig()
     },
     exportFilter(id) {
       this.exportedFilter = { ...this.muteFiltersDraftObject[id] }
@@ -154,20 +105,20 @@ const ClutterTab = {
       const newId = uuidv4()
 
       this.muteFiltersDraftObject[newId] = filter
-      this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
-      this.pushServerSideStorage()
+      this.setSimplePrefAndSave({ path: 'muteFilters.' + newId, value: filter })
+      this.pushSyncConfig()
     },
     deleteFilter(id) {
       delete this.muteFiltersDraftObject[id]
-      this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
-      this.pushServerSideStorage()
+      this.unsetSimplePrefAndSave({ path: 'muteFilters.' + id, value: null })
+      this.pushSyncConfig()
     },
     purgeExpiredFilters() {
       this.muteFiltersExpired.forEach(([id]) => {
         delete this.muteFiltersDraftObject[id]
-        this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
+        this.unsetSimplePrefAndSave({ path: 'muteFilters.' + id, value: null })
       })
-      this.pushServerSideStorage()
+      this.pushSyncConfig()
     },
     updateFilter(id, field, value) {
       const filter = { ...this.muteFiltersDraftObject[id] }
@@ -189,11 +140,11 @@ const ClutterTab = {
       this.muteFiltersDraftDirty[id] = true
     },
     saveFilter(id) {
-      this.setPreference({
-        path: 'simple.muteFilters.' + id,
+      this.setSimplePrefAndSave({
+        path: 'muteFilters.' + id,
         value: this.muteFiltersDraftObject[id],
       })
-      this.pushServerSideStorage()
+      this.pushSyncConfig()
       this.muteFiltersDraftDirty[id] = false
     },
   },
diff --git a/src/components/settings_modal/tabs/clutter_tab.vue b/src/components/settings_modal/tabs/clutter_tab.vue
index d14d94818..533cd85c6 100644
--- a/src/components/settings_modal/tabs/clutter_tab.vue
+++ b/src/components/settings_modal/tabs/clutter_tab.vue
@@ -19,9 +19,7 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting
-            path="hideUserStats"
-          >
+          <BooleanSetting path="hideUserStats">
             {{ $t('settings.hide_user_stats') }}
           </BooleanSetting>
         </li>
@@ -64,12 +62,18 @@
           </IntegerSetting>
         </li>
         <li>
-          <BooleanSetting path="hideAttachments">
+          <BooleanSetting
+            :local="true"
+            path="hideAttachments"
+          >
             {{ $t('settings.hide_attachments_in_tl') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="hideAttachmentsInConv">
+          <BooleanSetting
+            :local="true"
+            path="hideAttachmentsInConv"
+          >
             {{ $t('settings.hide_attachments_in_convo') }}
           </BooleanSetting>
         </li>
@@ -79,9 +83,7 @@
           </BooleanSetting>
         </li>
         <li v-if="shoutAvailable">
-          <BooleanSetting
-            path="hideShoutbox"
-          >
+          <BooleanSetting path="hideShoutbox">
             {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
         </li>
diff --git a/src/components/settings_modal/tabs/composing_tab.js b/src/components/settings_modal/tabs/composing_tab.js
index 9d55d1f4f..ab8d0101d 100644
--- a/src/components/settings_modal/tabs/composing_tab.js
+++ b/src/components/settings_modal/tabs/composing_tab.js
@@ -8,11 +8,13 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import localeService from 'src/services/locale/locale.service.js'
 import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
@@ -98,14 +100,13 @@ const ComposingTab = {
     FloatSetting,
     UnitSetting,
     InterfaceLanguageSwitcher,
-    ProfileSettingIndicator,
     ScopeSelector,
     Select,
     FontControl,
   },
   computed: {
     postFormats() {
-      return useInstanceStore().postFormats || []
+      return useInstanceCapabilitiesStore().postFormats
     },
     postContentOptions() {
       return this.postFormats.map((format) => ({
@@ -116,11 +117,11 @@ const ComposingTab = {
     },
     language: {
       get: function () {
-        return this.$store.getters.mergedConfig.interfaceLanguage
+        return useMergedConfigStore().mergedConfig.interfaceLanguage
       },
       set: function (val) {
-        this.$store.dispatch('setOption', {
-          name: 'interfaceLanguage',
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'interfaceLanguage',
           value: val,
         })
       },
@@ -171,8 +172,8 @@ const ComposingTab = {
         })
     },
     updateFont(key, value) {
-      this.$store.dispatch('setOption', {
-        name: 'theme3hacks',
+      useSyncConfigStore().setSimplePrefAndSave({
+        path: 'theme3hacks',
         value: {
           ...this.mergedConfig.theme3hacks,
           fonts: {
diff --git a/src/components/settings_modal/tabs/composing_tab.vue b/src/components/settings_modal/tabs/composing_tab.vue
index f71d64600..755539096 100644
--- a/src/components/settings_modal/tabs/composing_tab.vue
+++ b/src/components/settings_modal/tabs/composing_tab.vue
@@ -8,10 +8,6 @@
             class="setting-item "
             for="default-vis"
           >
-            <span class="setting-label">
-              <ProfileSettingIndicator :is-profile="true" />
-              {{ $t('settings.default_vis') }}
-            </span>
             <ScopeSelector
               class="scope-selector setting-control"
               :show-all="true"
@@ -19,7 +15,6 @@
               :initial-scope="$store.state.profileConfig.defaultScope"
               :on-scope-change="changeDefaultScope"
               :unstyled="false"
-              uns
             />
           </label>
         </li>
@@ -34,6 +29,7 @@
             id="postContentType"
             path="postContentType"
             :options="postContentOptions"
+            :local="true"
           >
             {{ $t('settings.default_post_status_content_type') }}
           </ChoiceSetting>
@@ -95,6 +91,7 @@
         <li>
           <BooleanSetting
             path="imageCompression"
+            :local="true"
             expert="1"
           >
             {{ $t('settings.image_compression') }}
@@ -103,6 +100,7 @@
             <li>
               <BooleanSetting
                 path="alwaysUseJpeg"
+                :local="true"
                 expert="1"
                 parent-path="imageCompression"
               >
diff --git a/src/components/settings_modal/tabs/developer_tab.vue b/src/components/settings_modal/tabs/developer_tab.vue
index 1544c02a9..3e0fe71cb 100644
--- a/src/components/settings_modal/tabs/developer_tab.vue
+++ b/src/components/settings_modal/tabs/developer_tab.vue
@@ -28,13 +28,17 @@
       <h3>{{ $t('settings.debug') }}</h3>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="virtualScrolling">
+          <BooleanSetting
+            :local="true"
+            path="virtualScrolling"
+          >
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </li>
         <li>
           <BooleanSetting
             path="themeDebug"
+            :local="true"
             :expert="1"
           >
             {{ $t('settings.theme_debug') }}
@@ -43,6 +47,7 @@
         <li>
           <BooleanSetting
             path="forceThemeRecompilation"
+            :local="true"
             :expert="1"
           >
             {{ $t('settings.force_theme_recompilation_debug') }}
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 68efbe762..ef3d8835b 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -13,7 +13,8 @@ import UnitSetting from '../helpers/unit_setting.vue'
 
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import {
   newExporter,
@@ -36,11 +37,11 @@ const FilteringTab = {
         label: this.$t(`user_card.mute_block_${mode}`),
       })),
       muteFiltersDraftObject: cloneDeep(
-        useServerSideStorageStore().prefsStorage.simple.muteFilters,
+        useSyncConfigStore().prefsStorage.simple.muteFilters,
       ),
       muteFiltersDraftDirty: Object.fromEntries(
         Object.entries(
-          useServerSideStorageStore().prefsStorage.simple.muteFilters,
+          useSyncConfigStore().prefsStorage.simple.muteFilters,
         ).map(([k]) => [k, false]),
       ),
       exportedFilter: null,
@@ -92,7 +93,7 @@ const FilteringTab = {
   },
   computed: {
     ...SharedComputedObject(),
-    ...mapState(useServerSideStorageStore, {
+    ...mapState(useSyncConfigStore, {
       muteFilters: (store) =>
         Object.entries(store.prefsStorage.simple.muteFilters),
       muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
@@ -100,7 +101,7 @@ const FilteringTab = {
     ...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
     onMuteDefaultActionLv1: {
       get() {
-        const value = this.$store.state.config.onMuteDefaultAction
+        const value = useMergedConfigStore().mergedConfig.onMuteDefaultAction
         if (value === 'ask' || value === 'forever') {
           return value
         } else {
@@ -112,15 +113,15 @@ const FilteringTab = {
         if (value !== 'ask' && value !== 'forever') {
           realValue = '14d'
         }
-        this.$store.dispatch('setOption', {
-          name: 'onMuteDefaultAction',
+        this.setPreference({
+          path: 'simple.onMuteDefaultAction',
           value: realValue,
         })
       },
     },
     onBlockDefaultActionLv1: {
       get() {
-        const value = this.$store.state.config.onBlockDefaultAction
+        const value = useMergedConfigStore().mergedConfig.onBlockDefaultAction
         if (value === 'ask' || value === 'forever') {
           return value
         } else {
@@ -132,8 +133,8 @@ const FilteringTab = {
         if (value !== 'ask' && value !== 'forever') {
           realValue = '14d'
         }
-        this.$store.dispatch('setOption', {
-          name: 'onBlockDefaultAction',
+        this.setPreference({
+          path: 'simple.onBlockDefaultAction',
           value: realValue,
         })
       },
@@ -149,10 +150,13 @@ const FilteringTab = {
     },
   },
   methods: {
-    ...mapActions(useServerSideStorageStore, [
+    ...mapActions(useSyncConfigStore, [
       'setPreference',
+      'setSimplePrefAndSave',
+      'unsetSimplePrefAndSave',
       'unsetPreference',
-      'pushServerSideStorage',
+      'unsetPrefAndSave',
+      'pushSyncConfig',
     ]),
     getDatetimeLocal(timestamp) {
       const date = new Date(timestamp)
@@ -198,8 +202,7 @@ const FilteringTab = {
 
       filter.order = this.muteFilters.length + 2
       this.muteFiltersDraftObject[newId] = filter
-      this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
-      this.pushServerSideStorage()
+      this.setSimplePrefAndSave({ path: 'muteFilters.' + newId, value: filter })
     },
     exportFilter(id) {
       this.exportedFilter = { ...this.muteFiltersDraftObject[id] }
@@ -214,20 +217,18 @@ const FilteringTab = {
       const newId = uuidv4()
 
       this.muteFiltersDraftObject[newId] = filter
-      this.setPreference({ path: 'simple.muteFilters.' + newId, value: filter })
-      this.pushServerSideStorage()
+      this.setSimplePrefAndSave({ path: 'muteFilters.' + newId, value: filter })
     },
     deleteFilter(id) {
       delete this.muteFiltersDraftObject[id]
-      this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
-      this.pushServerSideStorage()
+      this.unsetSimplePrefAndSave({ path: 'muteFilters.' + id, value: null })
     },
     purgeExpiredFilters() {
       this.muteFiltersExpired.forEach(([id]) => {
         delete this.muteFiltersDraftObject[id]
         this.unsetPreference({ path: 'simple.muteFilters.' + id, value: null })
       })
-      this.pushServerSideStorage()
+      this.pushSyncConfig()
     },
     updateFilter(id, field, value) {
       const filter = { ...this.muteFiltersDraftObject[id] }
@@ -249,11 +250,10 @@ const FilteringTab = {
       this.muteFiltersDraftDirty[id] = true
     },
     saveFilter(id) {
-      this.setPreference({
-        path: 'simple.muteFilters.' + id,
+      this.setSimplePrefAndSave({
+        path: 'muteFilters.' + id,
         value: this.muteFiltersDraftObject[id],
       })
-      this.pushServerSideStorage()
       this.muteFiltersDraftDirty[id] = false
     },
   },
@@ -262,6 +262,11 @@ const FilteringTab = {
     replyVisibility() {
       this.$store.dispatch('queueFlushAll')
     },
+    muteFiltersObject() {
+      this.muteFiltersDraftObject = cloneDeep(
+        useMergedConfigStore().mergedConfig.muteFilters,
+      )
+    },
   },
 }
 
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 0d8f9a786..db1177cb2 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -5,12 +5,14 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useLocalConfigStore } from 'src/stores/local_config.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import localeService from 'src/services/locale/locale.service.js'
 
@@ -32,16 +34,15 @@ const GeneralTab = {
     FloatSetting,
     FontControl,
     InterfaceLanguageSwitcher,
-    ProfileSettingIndicator,
   },
   computed: {
     language: {
       get: function () {
-        return this.$store.getters.mergedConfig.interfaceLanguage
+        return useMergedConfigStore().mergedConfig.interfaceLanguage
       },
       set: function (val) {
-        this.$store.dispatch('setOption', {
-          name: 'interfaceLanguage',
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'interfaceLanguage',
           value: val,
         })
       },
@@ -64,17 +65,8 @@ const GeneralTab = {
           this.$store.commit('setCurrentUser', user)
         })
     },
-    updateFont(key, value) {
-      this.$store.dispatch('setOption', {
-        name: 'theme3hacks',
-        value: {
-          ...this.mergedConfig.theme3hacks,
-          fonts: {
-            ...this.mergedConfig.theme3hacks.fonts,
-            [key]: value,
-          },
-        },
-      })
+    updateFont(path, value) {
+      useLocalConfigStore().set({ path, value })
     },
   },
 }
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index c44e558b5..19800e0dd 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -9,11 +9,6 @@
           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"
@@ -44,6 +39,7 @@
             :units="['px', 'rem']"
             :reset-default="{ 'px': 14, 'rem': 1 }"
             timed-apply-mode
+            :local="true"
           >
             {{ $t('settings.text_size') }}
           </UnitSetting>
@@ -68,27 +64,28 @@
         </li>
         <li>
           <FontControl
-            :model-value="mergedConfig.theme3hacks.fonts.interface"
+            :model-value="mergedConfig.fontInterface"
             name="ui"
             :label="$t('settings.style.fonts.components_inline.interface')"
             :fallback="{ family: 'sans-serif' }"
             no-inherit="1"
-            @update:model-value="v => updateFont('interface', v)"
+            @update:model-value="v => updateFont('fontInterface', v)"
           />
         </li>
         <li>
           <FontControl
-            :model-value="mergedConfig.theme3hacks.fonts.input"
+            :model-value="mergedConfig.fontInput"
             name="input"
             :fallback="{ family: 'inherit' }"
             :label="$t('settings.style.fonts.components_inline.input')"
-            @update:model-value="v => updateFont('input', v)"
+            @update:model-value="v => updateFont('fontInput', v)"
           />
         </li>
         <li>
           <UnitSetting
             path="emojiSize"
             :step="0.1"
+            :local="true"
             :units="['px', 'rem']"
             :reset-default="{ 'px': 32, 'rem': 2.2 }"
           >
@@ -101,6 +98,7 @@
               <FloatSetting
                 v-if="user"
                 path="emojiReactionsScale"
+                :local="true"
               >
                 {{ $t('settings.emoji_reactions_scale') }}
               </FloatSetting>
@@ -128,6 +126,7 @@
         <li>
           <BooleanSetting
             path="useStreamingApi"
+            :local="true"
             expert="1"
           >
             {{ $t('settings.useStreamingApi') }}
diff --git a/src/components/settings_modal/tabs/layout_tab.js b/src/components/settings_modal/tabs/layout_tab.js
index 8259820fc..fc56e1392 100644
--- a/src/components/settings_modal/tabs/layout_tab.js
+++ b/src/components/settings_modal/tabs/layout_tab.js
@@ -2,11 +2,11 @@ import { mapState } from 'pinia'
 
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import UnitSetting from '../helpers/unit_setting.vue'
 
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 const GeneralTab = {
   data() {
@@ -24,7 +24,6 @@ const GeneralTab = {
     BooleanSetting,
     ChoiceSetting,
     UnitSetting,
-    ProfileSettingIndicator,
   },
   computed: {
     ...mapState(useInstanceCapabilitiesStore, [
@@ -32,12 +31,12 @@ const GeneralTab = {
       'suggestionsEnabled',
     ]),
     columns() {
-      const mode = this.$store.getters.mergedConfig.thirdColumnMode
+      const mode = useMergedConfigStore().mergedConfig.thirdColumnMode
 
       const notif = mode === 'none' ? [] : ['notifs']
 
       if (
-        this.$store.getters.mergedConfig.sidebarRight ||
+        useMergedConfigStore().mergedConfig.sidebarRight ||
         mode === 'postform'
       ) {
         return [...notif, 'content', 'sidebar']
diff --git a/src/components/settings_modal/tabs/layout_tab.vue b/src/components/settings_modal/tabs/layout_tab.vue
index b52c106b9..ca514e0cb 100644
--- a/src/components/settings_modal/tabs/layout_tab.vue
+++ b/src/components/settings_modal/tabs/layout_tab.vue
@@ -40,6 +40,7 @@
         <li>
           <UnitSetting
             path="themeEditorMinWidth"
+            :local="true"
             :units="['px', 'rem']"
             expert="1"
           >
@@ -50,6 +51,7 @@
           <UnitSetting
             path="navbarSize"
             :step="0.1"
+            :local="true"
             :units="['px', 'rem']"
             :reset-default="{ 'px': 55, 'rem': 3.5 }"
           >
@@ -72,6 +74,7 @@
         <li>
           <UnitSetting
             path="panelHeaderSize"
+            :local="true"
             :step="0.1"
             :units="['px', 'rem']"
             :reset-default="{ 'px': 52, 'rem': 3.2 }"
@@ -81,12 +84,18 @@
           </UnitSetting>
         </li>
         <li>
-          <BooleanSetting path="sidebarRight">
+          <BooleanSetting
+            :local="true"
+            path="sidebarRight"
+          >
             {{ $t('settings.right_sidebar') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="navbarColumnStretch">
+          <BooleanSetting
+            :local="true"
+            path="navbarColumnStretch"
+          >
             {{ $t('settings.navbar_column_stretch') }}
           </BooleanSetting>
         </li>
@@ -106,6 +115,7 @@
             <UnitSetting
               v-for="column in columns"
               :key="column"
+              :local="true"
               :path="column + 'ColumnWidth'"
               :units="horizontalUnits"
               expert="1"
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index d08f07b68..ba50f5b21 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -249,6 +249,7 @@
         <li>
           <BooleanSetting
             path="webPushNotifications"
+            :local="true"
             expert="1"
           >
             {{ $t('settings.enable_web_push_notifications') }}
@@ -257,6 +258,7 @@
             <li>
               <BooleanSetting
                 path="webPushAlwaysShowNotifications"
+                :local="true"
                 :disabled="!mergedConfig.webPushNotifications"
               >
                 {{ $t('settings.enable_web_push_always_show') }}
@@ -273,6 +275,7 @@
         <li>
           <BooleanSetting
             source="profile"
+            :local="true"
             path="webPushHideContents"
             expert="1"
           >
diff --git a/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js b/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js
index 549803265..d46ddcb52 100644
--- a/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js
+++ b/src/components/settings_modal/tabs/old_theme_tab/old_theme_tab.js
@@ -11,6 +11,7 @@ import Preview from './theme_preview.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import {
   getContrastRatioLayers,
@@ -81,7 +82,7 @@ export default {
       }),
       availableStyles: [],
       selected: '',
-      selectedTheme: this.$store.getters.mergedConfig.theme,
+      selectedTheme: useMergedConfigStore().mergedConfig.theme,
       themeWarning: undefined,
       tempImportFile: undefined,
       engineVersion: 0,
diff --git a/src/components/settings_modal/tabs/posts_tab.js b/src/components/settings_modal/tabs/posts_tab.js
index 268a0a56f..ab00e52e7 100644
--- a/src/components/settings_modal/tabs/posts_tab.js
+++ b/src/components/settings_modal/tabs/posts_tab.js
@@ -2,10 +2,12 @@ import FontControl from 'src/components/font_control/font_control.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
-const GeneralTab = {
+import { useLocalConfigStore } from 'src/stores/local_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
+const PostsTab = {
   data() {
     return {
       conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({
@@ -60,25 +62,15 @@ const GeneralTab = {
     ChoiceSetting,
     IntegerSetting,
     FontControl,
-    ProfileSettingIndicator,
   },
   computed: {
     ...SharedComputedObject(),
   },
   methods: {
-    updateFont(key, value) {
-      this.$store.dispatch('setOption', {
-        name: 'theme3hacks',
-        value: {
-          ...this.mergedConfig.theme3hacks,
-          fonts: {
-            ...this.mergedConfig.theme3hacks.fonts,
-            [key]: value,
-          },
-        },
-      })
+    updateFont(path, value) {
+      useLocalConfigStore().set({ path, value })
     },
   },
 }
 
-export default GeneralTab
+export default PostsTab
diff --git a/src/components/settings_modal/tabs/posts_tab.vue b/src/components/settings_modal/tabs/posts_tab.vue
index 0a864d179..1e684246d 100644
--- a/src/components/settings_modal/tabs/posts_tab.vue
+++ b/src/components/settings_modal/tabs/posts_tab.vue
@@ -56,20 +56,20 @@
         </li>
         <li>
           <FontControl
-            :model-value="mergedConfig.theme3hacks.fonts.post"
+            :model-value="mergedConfig.fontPosts"
             name="post"
             :fallback="{ family: 'inherit' }"
             :label="$t('settings.style.fonts.components.post')"
-            @update:model-value="v => updateFont('post', v)"
+            @update:model-value="v => updateFont('fontPosts', v)"
           />
         </li>
         <li>
           <FontControl
-            :model-value="mergedConfig.theme3hacks.fonts.monospace"
+            :model-value="mergedConfig.fontMonospace"
             name="postCode"
             :fallback="{ family: 'monospace' }"
             :label="$t('settings.style.fonts.components.monospace')"
-            @update:model-value="v => updateFont('monospace', v)"
+            @update:model-value="v => updateFont('fontMonospace', v)"
           />
         </li>
         <li>
@@ -99,6 +99,7 @@
           <ChoiceSetting
             id="mentionLinkDisplay"
             path="mentionLinkDisplay"
+            :local="true"
             :options="mentionLinkDisplayOptions"
           >
             {{ $t('settings.mention_link_display') }}
@@ -169,7 +170,10 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="hideNsfw">
+          <BooleanSetting
+            :local="true"
+            path="hideNsfw"
+          >
             {{ $t('settings.nsfw_clickthrough') }}
           </BooleanSetting>
           <ul class="setting-list suboptions">
@@ -177,6 +181,7 @@
               <BooleanSetting
                 path="preloadImage"
                 expert="1"
+                :local="true"
                 parent-path="hideNsfw"
               >
                 {{ $t('settings.preload_images') }}
@@ -186,6 +191,7 @@
               <BooleanSetting
                 path="useOneClickNsfw"
                 expert="1"
+                :local="true"
                 parent-path="hideNsfw"
               >
                 {{ $t('settings.use_one_click_nsfw') }}
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index acfc0c674..3e12f265f 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -1,7 +1,6 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import UserCard from 'src/components/user_card/user_card.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
-import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -24,7 +23,6 @@ const ProfileTab = {
     UserCard,
     Checkbox,
     BooleanSetting,
-    ProfileSettingIndicator,
   },
   computed: {
     user() {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 80064daf8..2bdf1e8fe 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -16,7 +16,6 @@
               v-model="locked"
               class="setting-label setting-control custom-boolean-setting"
             >
-              <ProfileSettingIndicator :is-profile="true" />
               {{ $t('settings.lock_account_description') }}
             </Checkbox>
           </div>
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index 05d8e92f5..fd2157e29 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -10,6 +10,7 @@ import { useAnnouncementsStore } from 'src/stores/announcements'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useShoutStore } from 'src/stores/shout'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -72,7 +73,10 @@ const SideDrawer = {
       return useShoutStore().joined
     },
     unseenNotifications() {
-      return unseenNotificationsFromStore(this.$store)
+      return unseenNotificationsFromStore(
+        this.$store,
+        useMergedConfigStore().mergedConfig.notificationVisibility,
+      )
     },
     unseenNotificationsCount() {
       return this.unseenNotifications.length
diff --git a/src/components/status/status.js b/src/components/status/status.js
index ddc49b851..7b4a31561 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -23,7 +23,9 @@ import UserPopover from '../user_popover/user_popover.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
@@ -133,25 +135,26 @@ const Status = {
   },
   props: [
     'statusoid',
+    'replies',
+
     'expandable',
-    'inConversation',
     'focused',
     'highlight',
     'compact',
-    'replies',
     'isPreview',
     'noHeading',
     'inlineExpanded',
     'showPinned',
     'inProfile',
-    'profileUserId',
+    'inConversation',
     'inQuote',
-
+    'profileUserId',
     'simpleTree',
+    'showOtherRepliesAsButton',
+    'dive',
+
     'controlledThreadDisplayStatus',
     'controlledToggleThreadDisplay',
-    'showOtherRepliesAsButton',
-
     'controlledShowingTall',
     'controlledToggleShowingTall',
     'controlledExpandingSubject',
@@ -162,9 +165,8 @@ const Status = {
     'controlledToggleReplying',
     'controlledMediaPlaying',
     'controlledSetMediaPlaying',
-    'dive',
   ],
-  emits: ['interacted'],
+  emits: ['interacted', 'goto', 'toggleExpanded'],
   data() {
     return {
       uncontrolledReplying: false,
@@ -200,16 +202,14 @@ const Status = {
     },
     repeaterStyle() {
       const user = this.statusoid.user
-      const highlight = this.mergedConfig.highlight
-      return highlightStyle(highlight[user.screen_name])
+      return highlightStyle(useUserHighlightStore().get(user.screen_name))
     },
     userStyle() {
       if (this.noHeading) return
       const user = this.retweet
         ? this.statusoid.retweeted_status.user
         : this.statusoid.user
-      const highlight = this.mergedConfig.highlight
-      return highlightStyle(highlight[user.screen_name])
+      return highlightStyle(useUserHighlightStore().get(user.screen_name))
     },
     userProfileLink() {
       return this.generateUserProfileLink(
@@ -260,9 +260,7 @@ const Status = {
     },
     muteFilterHits() {
       return muteFilterHits(
-        Object.values(
-          useServerSideStorageStore().prefsStorage.simple.muteFilters,
-        ),
+        Object.values(useSyncConfigStore().prefsStorage.simple.muteFilters),
         this.status,
       )
     },
@@ -481,7 +479,7 @@ const Status = {
       return this.$store.state.users.currentUser
     },
     mergedConfig() {
-      return this.$store.getters.mergedConfig
+      return useMergedConfigStore().mergedConfig
     },
     isSuspendable() {
       return !this.replying && this.mediaPlaying.length === 0
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1b65b453a..015a7017c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -10,12 +10,13 @@
       class="alert error"
     >
       {{ error }}
-      <span
+      <button
         class="fa-scale-110 fa-old-padding"
+        type="button"
         @click="clearError"
       >
         <FAIcon icon="times" />
-      </span>
+      </button>
     </div>
     <template v-if="muted && !isPreview">
       <div class="status-container muted">
diff --git a/src/components/status_action_buttons/action_button.vue b/src/components/status_action_buttons/action_button.vue
index a9aedb9e3..cab055e64 100644
--- a/src/components/status_action_buttons/action_button.vue
+++ b/src/components/status_action_buttons/action_button.vue
@@ -88,7 +88,7 @@
         <StatusBookmarkFolderMenu
           v-if="button.name === 'bookmark'"
           :status="status"
-          :close="() => { close(); outerClose() }"
+          @close="() => { close(); outerClose?.() }"
         />
       </template>
     </Popover>
diff --git a/src/components/status_action_buttons/buttons_definitions.js b/src/components/status_action_buttons/buttons_definitions.js
index bf03a9ab9..294293a40 100644
--- a/src/components/status_action_buttons/buttons_definitions.js
+++ b/src/components/status_action_buttons/buttons_definitions.js
@@ -1,6 +1,7 @@
 import { useEditStatusStore } from 'src/stores/editStatus.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useReportsStore } from 'src/stores/reports.js'
 import { useStatusHistoryStore } from 'src/stores/statusHistory.js'
 
@@ -52,7 +53,7 @@ export const BUTTONS = [
         !PRIVATE_SCOPES.has(status.visibility)),
     toggleable: true,
     confirm: ({ status, getters }) =>
-      !status.repeated && getters.mergedConfig.modalOnRepeat,
+      !status.repeated && useMergedConfigStore().mergedConfig.modalOnRepeat,
     confirmStrings: {
       title: 'status.repeat_confirm_title',
       body: 'status.repeat_confirm',
@@ -228,7 +229,7 @@ export const BUTTONS = [
           currentUser.privileges.includes('messages_delete'))
       )
     },
-    confirm: ({ getters }) => getters.mergedConfig.modalOnDelete,
+    confirm: ({ getters }) => useMergedConfigStore().mergedConfig.modalOnDelete,
     confirmStrings: {
       title: 'status.delete_confirm_title',
       body: 'status.delete_confirm',
diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
index 2e08797c8..9938e6382 100644
--- a/src/components/status_action_buttons/status_action_buttons.js
+++ b/src/components/status_action_buttons/status_action_buttons.js
@@ -5,7 +5,7 @@ import Popover from 'src/components/popover/popover.vue'
 import ActionButtonContainer from './action_button_container.vue'
 import { BUTTONS } from './buttons_definitions.js'
 
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
 
@@ -36,7 +36,7 @@ const StatusActionButtons = {
     ActionButtonContainer,
   },
   computed: {
-    ...mapState(useServerSideStorageStore, {
+    ...mapState(useSyncConfigStore, {
       pinnedItems: (store) =>
         new Set(store.prefsStorage.collections.pinnedStatusActions),
     }),
@@ -111,18 +111,18 @@ const StatusActionButtons = {
       return this.pinnedItems.has(button.name)
     },
     unpin(button) {
-      useServerSideStorageStore().removeCollectionPreference({
+      useSyncConfigStore().removeCollectionPreference({
         path: 'collections.pinnedStatusActions',
         value: button.name,
       })
-      useServerSideStorageStore().pushServerSideStorage()
+      useSyncConfigStore().pushSyncConfig()
     },
     pin(button) {
-      useServerSideStorageStore().addCollectionPreference({
+      useSyncConfigStore().addCollectionPreference({
         path: 'collections.pinnedStatusActions',
         value: button.name,
       })
-      useServerSideStorageStore().pushServerSideStorage()
+      useSyncConfigStore().pushSyncConfig()
     },
     getComponent(button) {
       if (!this.$store.state.users.currentUser && button.anonLink) {
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 731fcc390..5250acb9f 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -1,7 +1,9 @@
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faFile,
@@ -101,14 +103,12 @@ const StatusBody = {
       )
     },
     attachmentTypes() {
-      return this.status.attachments.map((file) =>
-        file.type,
-      )
+      return this.status.attachments.map((file) => file.type)
     },
     collapsedStatus() {
       return this.status.raw_html.replace(/(\n|<br\s?\/?>)/g, ' ')
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
   },
   components: {
     RichContent,
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
index a3c97ffe6..7e92a0287 100644
--- a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.js
@@ -11,7 +11,8 @@ import { faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons'
 library.add(faChevronRight, faFolder)
 
 const StatusBookmarkFolderMenu = {
-  props: ['status', 'close'],
+  props: ['status'],
+  emits: ['success', 'error', 'close'],
   data() {
     return {}
   },
@@ -33,8 +34,8 @@ const StatusBookmarkFolderMenu = {
 
       this.$store
         .dispatch('bookmark', { id: this.status.id, bookmark_folder_id: value })
-        .then(() => this.$emit('onSuccess'))
-        .catch((err) => this.$emit('onError', err.error.error))
+        .then(() => this.$emit('success'))
+        .catch((err) => this.$emit('error', err.error.error))
     },
   },
 }
diff --git a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
index 006edbb80..818de095e 100644
--- a/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
+++ b/src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue
@@ -8,7 +8,7 @@
       <button
         class="main-button"
         @click="toggleFolder(folder.id)"
-        @click.stop="close"
+        @click.stop="$emit('close')"
       >
         <span
           class="input menu-checkbox -radio"
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index a00792826..a72db5b96 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -1,3 +1,4 @@
+import { mapState as mapPiniaState } from 'pinia'
 import { mapGetters, mapState } from 'vuex'
 
 import StatusBody from 'src/components/status_body/status_body.vue'
@@ -7,6 +8,7 @@ import LinkPreview from '../link-preview/link-preview.vue'
 import Poll from '../poll/poll.vue'
 
 import { useMediaViewerStore } from 'src/stores/media_viewer.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -74,7 +76,7 @@ const StatusContent = {
       uncontrolledShowingLongSubject: false,
       // not as computed because it sets the initial state which will be changed later
       uncontrolledExpandingSubject:
-        !this.$store.getters.mergedConfig.collapseMessageWithSubject,
+        !useMergedConfigStore().mergedConfig.collapseMessageWithSubject,
     }
   },
   computed: {
@@ -122,7 +124,7 @@ const StatusContent = {
     maxThumbnails() {
       return this.mergedConfig.maxThumbnails
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapPiniaState(useMergedConfigStore, ['mergedConfig']),
     ...mapState({
       currentUser: (state) => state.users.currentUser,
     }),
diff --git a/src/components/still-image/still-image.js b/src/components/still-image/still-image.js
index e61aa572f..29a4ed1de 100644
--- a/src/components/still-image/still-image.js
+++ b/src/components/still-image/still-image.js
@@ -1,3 +1,5 @@
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 const StillImage = {
   props: [
     'src',
@@ -15,7 +17,7 @@ const StillImage = {
     return {
       // for lazy loading, see loadLazy()
       realSrc: this.src,
-      stopGifs: this.$store.getters.mergedConfig.stopGifs,
+      stopGifs: useMergedConfigStore().mergedConfig.stopGifs,
     }
   },
   computed: {
diff --git a/src/components/timeago/timeago.js b/src/components/timeago/timeago.js
index efb92d4cd..c09cf9619 100644
--- a/src/components/timeago/timeago.js
+++ b/src/components/timeago/timeago.js
@@ -1,3 +1,5 @@
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import localeService from 'src/services/locale/locale.service.js'
 
@@ -13,17 +15,17 @@ export default {
   },
   computed: {
     shouldUseAbsoluteTimeFormat() {
-      if (!this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
+      if (!useMergedConfigStore().mergedConfig.useAbsoluteTimeFormat) {
         return false
       }
       return (
         DateUtils.durationStrToMs(
-          this.$store.getters.mergedConfig.absoluteTimeFormatMinAge,
+          useMergedConfigStore().mergedConfig.absoluteTimeFormatMinAge,
         ) <= this.relativeTimeMs
       )
     },
     time12hFormat() {
-      return this.$store.getters.mergedConfig.absoluteTimeFormat12h === '12h'
+      return useMergedConfigStore().mergedConfig.absoluteTimeFormat12h === '12h'
     },
     browserLocale() {
       return localeService.internalToBrowserLocale(this.$i18n.locale)
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 4616a4111..2153afc44 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -9,6 +9,7 @@ import Status from '../status/status.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'
 
@@ -125,7 +126,7 @@ const Timeline = {
       return this.timeline.visibleStatuses.slice(min, max).map((_) => _.id)
     },
     virtualScrollingEnabled() {
-      return this.$store.getters.mergedConfig.virtualScrolling
+      return useMergedConfigStore().mergedConfig.virtualScrolling
     },
     ...mapState(useInterfaceStore, {
       mobileLayout: (store) => store.layoutType === 'mobile',
@@ -313,7 +314,7 @@ const Timeline = {
   },
   watch: {
     newStatusCount(count) {
-      if (!this.$store.getters.mergedConfig.streaming) {
+      if (!useMergedConfigStore().mergedConfig.streaming) {
         return
       }
       if (count > 0) {
@@ -323,7 +324,10 @@ const Timeline = {
         if (
           top < 15 &&
           !this.paused &&
-          !(this.unfocused && this.$store.getters.mergedConfig.pauseOnUnfocused)
+          !(
+            this.unfocused &&
+            useMergedConfigStore().mergedConfig.pauseOnUnfocused
+          )
         ) {
           this.showNewStatuses()
         } else {
diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index a8bc60676..2a9fb7f60 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -1,7 +1,8 @@
 import Modal from 'src/components/modal/modal.vue'
 
 import { useInstanceStore } from 'src/stores/instance.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
 import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'
@@ -11,7 +12,7 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
 library.add(faTimes)
 
-export const CURRENT_UPDATE_COUNTER = 1
+export const CURRENT_UPDATE_COUNTER = 2
 
 const pleromaTan = '/static/pleromatan_apology.png'
 const pleromaTanFox = '/static/pleromatan_apology_fox.png'
@@ -41,9 +42,9 @@ const UpdateNotification = {
       return (
         !useInstanceStore().disableUpdateNotification &&
         this.$store.state.users.currentUser &&
-        useServerSideStorageStore().flagStorage.updateCounter <
+        useSyncConfigStore().flagStorage.updateCounter <
           CURRENT_UPDATE_COUNTER &&
-        !useServerSideStorageStore().prefsStorage.simple.dontShowUpdateNotifs
+        !useMergedConfigStore().mergedConfig.dontShowUpdateNotifs
       )
     },
   },
@@ -53,22 +54,22 @@ const UpdateNotification = {
     },
     neverShowAgain() {
       this.toggleShow()
-      useServerSideStorageStore().setFlag({
+      useSyncConfigStore().setFlag({
         flag: 'updateCounter',
         value: CURRENT_UPDATE_COUNTER,
       })
-      useServerSideStorageStore().setPreference({
-        path: 'simple.dontShowUpdateNotifs',
+      useSyncConfigStore().setSimplePrefAndSave({
+        path: 'dontShowUpdateNotifs',
         value: true,
       })
-      useServerSideStorageStore().pushServerSideStorage()
+      useSyncConfigStore().pushSyncConfig()
     },
     dismiss() {
-      useServerSideStorageStore().setFlag({
+      useSyncConfigStore().setFlag({
         flag: 'updateCounter',
         value: CURRENT_UPDATE_COUNTER,
       })
-      useServerSideStorageStore().pushServerSideStorage()
+      useSyncConfigStore().pushSyncConfig()
     },
   },
   mounted() {
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index 23ca3ba2e..3c154eb33 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -6,6 +6,7 @@
   --__top-fringe: 15em; // how much pleroma-tan should stick her head above
   --__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant
   --__right-fringe: 8em;
+  --__panel-background: rgb(0,255,255 / 80%);
 
   font-size: 15px;
   position: relative;
@@ -18,6 +19,29 @@
     padding-left: 1em;
   }
 
+  .footer-buttons {
+    --panel-heading-height-padding: calc(var(--panel-header-height) * 0.2);
+    --__panel-heading-gap: calc(var(--panel-header-height) * 0.1565);
+    --__panel-heading-height: var(--panel-header-height);
+    --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
+
+    box-sizing: border-box;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    display: grid;
+    z-index: 20;
+    grid-auto-flow: column;
+    grid-template-columns: auto;
+    grid-auto-columns: auto;
+    grid-column-gap: var(--__panel-heading-gap);
+    padding: var(--panel-heading-height-padding);
+    height: var(--__panel-heading-height);
+    line-height: var(--__panel-heading-height-inner);
+    font-size: calc(var(--panelHeaderSize) / 3.2);
+  }
+
   @media all and (width <= 800px) {
     /* For mobile, the modal takes 100% of the available screen.
        This ensures the minimized modal is always 50px above the browser
@@ -50,10 +74,13 @@
   }
 
   .panel-footer {
-    z-index: 22;
+    z-index: 10;
     position: relative;
     border-width: 0;
-    grid-template-columns: auto;
+
+    .button-default {
+      z-index: 2;
+    }
   }
 
   .pleroma-tan {
@@ -76,7 +103,7 @@
   }
 
   .spacer-bottom {
-    min-height: var(--__bottom-fringe);
+    min-height: calc(var(--__bottom-fringe) + var(--panel-header-height));
   }
 
   .extra-info-group {
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index a35c70f86..56976f016 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/src/components/update_notification/update_notification.vue
@@ -27,7 +27,7 @@
           <div class="spacer-top" />
           <div class="text">
             <p>
-              {{ $t('update.big_update_content') }}
+              {{ $t('update.big_update_content2') }}
             </p>
             <div
               ref="animatedText"
@@ -35,14 +35,14 @@
             >
               <i18n-t
                 scope="global"
-                keypath="update.update_bugs"
+                keypath="update.update_bugs2"
                 tag="p"
               >
-                <template #pleromaGitlab>
+                <template #pleromaForgejo>
                   <a
                     target="_blank"
                     href="https://git.pleroma.social/"
-                  >{{ $t('update.update_bugs_gitlab') }}</a>
+                  >{{ $t('update.update_bugs_forgejo') }}</a>
                 </template>
               </i18n-t>
               <i18n-t
@@ -73,30 +73,30 @@
               </p>
             </div>
           </div>
+          <div class="footer-buttons">
+            <button
+              class="button-default"
+              @click.prevent="neverShowAgain"
+            >
+              {{ $t("general.never_show_again") }}
+            </button>
+            <button
+              v-if="!showingMore"
+              class="button-default"
+              @click.prevent="toggleShow"
+            >
+              {{ $t("general.show_more") }}
+            </button>
+            <button
+              class="button-default"
+              @click.prevent="dismiss"
+            >
+              {{ $t("general.dismiss") }}
+            </button>
+          </div>
           <div class="spacer-bottom" />
         </div>
       </div>
-      <div class="panel-footer">
-        <button
-          class="button-default"
-          @click.prevent="neverShowAgain"
-        >
-          {{ $t("general.never_show_again") }}
-        </button>
-        <button
-          v-if="!showingMore"
-          class="button-default"
-          @click.prevent="toggleShow"
-        >
-          {{ $t("general.show_more") }}
-        </button>
-        <button
-          class="button-default"
-          @click.prevent="dismiss"
-        >
-          {{ $t("general.dismiss") }}
-        </button>
-      </div>
     </div>
   </Modal>
 </template>
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index fdf766f58..d484303c1 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -37,7 +37,7 @@ const UserAvatar = {
   data() {
     return {
       showPlaceholder: false,
-      defaultAvatar: `${useInstanceStore().server + useInstanceStore().defaultAvatar}`,
+      defaultAvatar: `${useInstanceStore().server + useInstanceStore().instanceIdentity.defaultAvatar}`,
       betterShadow: useInterfaceStore().browserSupport.cssFilter,
     }
   },
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 8e3b4b9b7..b8bb69010 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -2,7 +2,7 @@ import ldEscape from 'lodash/escape'
 import isEqual from 'lodash/isEqual'
 import merge from 'lodash/merge'
 import ldUnescape from 'lodash/unescape'
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ColorInput from 'src/components/color_input/color_input.vue'
@@ -12,8 +12,6 @@ import suggestor from 'src/components/emoji_input/suggestor.js'
 import ImageCropper from 'src/components/image_cropper/image_cropper.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
-import { useInterfaceStore } from '../../stores/interface'
-import { useMediaViewerStore } from '../../stores/media_viewer'
 import AccountActions from '../account_actions/account_actions.vue'
 import FollowButton from '../follow_button/follow_button.vue'
 import ModerationTools from '../moderation_tools/moderation_tools.vue'
@@ -27,7 +25,11 @@ import UserNote from '../user_note/user_note.vue'
 import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface'
+import { useMediaViewerStore } from 'src/stores/media_viewer'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { usePostStatusStore } from 'src/stores/post_status'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
 import localeService from 'src/services/locale/locale.service.js'
@@ -226,38 +228,27 @@ export default {
     },
     userHighlightType: {
       get() {
-        const data =
-          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
-        return (data && data.type) || 'disabled'
+        return useUserHighlightStore().get(this.user.screen_name).type
       },
       set(type) {
-        const data =
-          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
         if (type !== 'disabled') {
-          this.$store.dispatch('setHighlight', {
+          useUserHighlightStore().setAndSave({
             user: this.user.screen_name,
-            color: (data && data.color) || '#FFFFFF',
-            type,
+            value: { type },
           })
         } else {
-          this.$store.dispatch('setHighlight', {
-            user: this.user.screen_name,
-            color: undefined,
-          })
+          useUserHighlightStore().unsetAndSave({ user: this.user.screen_name })
         }
       },
-      ...mapGetters(['mergedConfig']),
     },
     userHighlightColor: {
       get() {
-        const data =
-          this.$store.getters.mergedConfig.highlight[this.user.screen_name]
-        return data && data.color
+        return useUserHighlightStore().get(this.user.screen_name).color
       },
       set(color) {
-        this.$store.dispatch('setHighlight', {
+        useUserHighlightStore().setAndSave({
           user: this.user.screen_name,
-          color,
+          value: { color },
         })
       },
     },
@@ -394,7 +385,7 @@ export default {
         ],
       })
     },
-    ...mapGetters(['mergedConfig']),
+    ...mapState(useMergedConfigStore, ['mergedConfig']),
   },
   methods: {
     muteUser() {
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index f5ddf9a8c..1c3a91282 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -293,7 +293,7 @@
       </div>
     </div>
     <div
-      v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !mergedConfig.userCardHidePersonalMarks"
+      v-if="!editable && loggedIn && isOtherUser && (hasNote || !hideBio) && !userCardHidePersonalMarks"
       class="personal-marks"
     >
       <UserNote
@@ -505,11 +505,11 @@
       class="user-extras"
     >
       <span
-        v-if="!editable && !mergedConfig.hideUserStats"
+        v-if="!editable && !hideUserStats"
         class="user-stats"
       >
         <dl
-          v-if="!mergedConfig.hideUserStats && !hideBio"
+          v-if="!hideUserStats && !hideBio"
           class="user-count"
         >
           <dd>{{ user.statuses_count }}</dd>
diff --git a/src/components/user_popover/user_popover.js b/src/components/user_popover/user_popover.js
index 6d83aaa21..8c5f63f25 100644
--- a/src/components/user_popover/user_popover.js
+++ b/src/components/user_popover/user_popover.js
@@ -1,7 +1,10 @@
+import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 
 import UserCard from '../user_card/user_card.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 const UserPopover = {
   name: 'UserPopover',
   props: ['userId', 'overlayCenters', 'disabled', 'overlayCentersSelector'],
@@ -9,14 +12,11 @@ const UserPopover = {
     UserCard,
     Popover: defineAsyncComponent(() => import('../popover/popover.vue')),
   },
-  computed: {
-    userPopoverAvatarAction() {
-      return this.$store.getters.mergedConfig.userPopoverAvatarAction
-    },
-    userPopoverOverlay() {
-      return this.$store.getters.mergedConfig.userPopoverOverlay
-    },
-  },
+  computed: mapState(useMergedConfigStore, {
+    userPopoverAvatarAction: (state) =>
+      state.mergedConfig.userPopoverAvatarAction,
+    userPopoverOverlay: (state) => state.mergedConfig.userPopoverOverlay,
+  }),
 }
 
 export default UserPopover
diff --git a/src/components/user_timed_filter_modal/user_timed_filter_modal.js b/src/components/user_timed_filter_modal/user_timed_filter_modal.js
index 6c005ab4b..528f92ddf 100644
--- a/src/components/user_timed_filter_modal/user_timed_filter_modal.js
+++ b/src/components/user_timed_filter_modal/user_timed_filter_modal.js
@@ -2,13 +2,16 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Select from 'src/components/select/select.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
 import { durationStrToMs } from 'src/services/date_utils/date_utils.js'
 
 const UserTimedFilterModal = {
   data() {
     const action = this.isMute
-      ? this.$store.getters.mergedConfig.onMuteDefaultAction
-      : this.$store.getters.mergedConfig.onBlockDefaultAction
+      ? useMergedConfigStore().mergedConfig.onMuteDefaultAction
+      : useMergedConfigStore().mergedConfig.onBlockDefaultAction
     const doAsk = action === 'ask'
     const defaultValues = {}
 
@@ -44,9 +47,11 @@ const UserTimedFilterModal = {
   computed: {
     shouldConfirm() {
       if (this.isMute) {
-        return this.$store.getters.mergedConfig.onMuteDefaultAction === 'ask'
+        return useMergedConfigStore().mergedConfig.onMuteDefaultAction === 'ask'
       } else {
-        return this.$store.getters.mergedConfig.onBlockDefaultAction === 'ask'
+        return (
+          useMergedConfigStore().mergedConfig.onBlockDefaultAction === 'ask'
+        )
       }
     },
     expiryString() {
@@ -82,16 +87,16 @@ const UserTimedFilterModal = {
       if (this.isMute) {
         this.$store.dispatch('muteUser', this.requestBody)
         if (this.dontAskAgain) {
-          this.$store.dispatch('setOption', {
-            name: 'onMuteDefaultAction',
+          useSyncConfigStore().setSimplePrefAndSave({
+            path: 'onMuteDefaultAction',
             value: this.expiryString,
           })
         }
       } else {
         this.$store.dispatch('blockUser', this.requestBody)
         if (this.dontAskAgain) {
-          this.$store.dispatch('setOption', {
-            name: 'onBlockDefaultAction',
+          useSyncConfigStore().setSimplePrefAndSave({
+            path: 'onBlockDefaultAction',
             value: this.expiryString,
           })
         }
diff --git a/src/components/video_attachment/video_attachment.js b/src/components/video_attachment/video_attachment.js
index 92e915da8..690409169 100644
--- a/src/components/video_attachment/video_attachment.js
+++ b/src/components/video_attachment/video_attachment.js
@@ -1,3 +1,5 @@
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 const VideoAttachment = {
   props: ['attachment', 'controls'],
   data() {
@@ -9,10 +11,10 @@ const VideoAttachment = {
   },
   computed: {
     loopVideo() {
-      if (this.$store.getters.mergedConfig.loopVideoSilentOnly) {
+      if (useMergedConfigStore().mergedConfig.loopVideoSilentOnly) {
         return !this.hasAudio
       }
-      return this.$store.getters.mergedConfig.loopVideo
+      return useMergedConfigStore().mergedConfig.loopVideo
     },
   },
   methods: {
diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js
index d90d626eb..720b15041 100644
--- a/src/components/who_to_follow/who_to_follow.js
+++ b/src/components/who_to_follow/who_to_follow.js
@@ -1,6 +1,8 @@
 import apiService from '../../services/api/api.service.js'
 import FollowCard from '../follow_card/follow_card.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
 const WhoToFollow = {
   components: {
     FollowCard,
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3302df88b..7851c297c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -382,6 +382,7 @@
     "select_all": "Select all"
   },
   "settings": {
+    "invalid_settings_imported": "Error importing settings",
     "add_language": "Add fallback language",
     "remove_language": "Remove",
     "primary_language": "Primary language:",
@@ -403,6 +404,7 @@
     "change_avatar": "Change avatar",
     "setting_changed": "Setting is different from default",
     "setting_server_side": "This setting is tied to your profile and affects all sessions and clients",
+    "setting_local_side": "This setting is tied to current session and doesn't affects other devices and browsers",
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
     "post_look_feel": "Posts Look & Feel",
     "posts": "Posts",
@@ -1858,8 +1860,11 @@
   "update": {
     "big_update_title": "Please bear with us",
     "big_update_content": "We haven't had a release in a while, so things might look and feel different than what you're used to.",
-    "update_bugs": "Please report any issues and bugs on {pleromaGitlab}, as we have changed a lot, and although we test thoroughly and use development versions ourselves, we may have missed some things. We welcome your feedback and suggestions on issues you might encounter, or how to improve Pleroma and Pleroma-FE.",
+    "big_update_content2": "We implemented synchronized settings! This means (nearly) all your settings are now properly synchronized between devices and sessions. We try to migrate settings from old config but migration is performed only once, so some settings might be incorrect.",
+    "update_bugs": "Please report any issues and bugs on {pleromaForgejo}, as we have changed a lot, and although we test thoroughly and use development versions ourselves, we may have missed some things. We welcome your feedback and suggestions on issues you might encounter, or how to improve Pleroma and Pleroma-FE.",
+    "update_bugs2": "Let us know if you don't want certain setting synchronized on {pleromaForgejo}.",
     "update_bugs_gitlab": "Pleroma GitLab",
+    "update_bugs_forgejo": "Pleroma Forgejo",
     "update_changelog": "For more details on what's changed, see {theFullChangelog}.",
     "update_changelog_here": "the full changelog",
     "art_by": "Art by {linkToArtist}"
diff --git a/src/lib/language.js b/src/lib/language.js
new file mode 100644
index 000000000..af53eeffd
--- /dev/null
+++ b/src/lib/language.js
@@ -0,0 +1,18 @@
+import Cookies from 'js-cookie'
+
+import { useEmojiStore } from 'src/stores/emoji.js'
+import { useI18nStore } from 'src/stores/i18n.js'
+
+export const piniaLanguagePlugin = ({ store, options }) => {
+  if (store.$id === 'sync_config') {
+    store.$onAction(({ name, args }) => {
+      if (name === 'setPreference') {
+        const { path, value } = args[0]
+        if (path === 'simple.interfaceLanguage') {
+          useI18nStore().setLanguage(value)
+          useEmojiStore().loadUnicodeEmojiData(value)
+        }
+      }
+    })
+  }
+}
diff --git a/src/lib/push_notifications_plugin.js b/src/lib/push_notifications_plugin.js
index 9732a82c9..f4dcb1dbc 100644
--- a/src/lib/push_notifications_plugin.js
+++ b/src/lib/push_notifications_plugin.js
@@ -1,37 +1,91 @@
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
-export default (store) => {
+export const piniaPushNotificationsPlugin = ({ store }) => {
+  if (
+    store.$id !== 'sync_config' &&
+    store.$id !== 'instance' &&
+    store.$id !== 'interface'
+  )
+    return
+
+  store.$onAction(({ name: actionName, args }) => {
+    if (
+      store.$id === 'interface' &&
+      actionName !== 'setNotificationPermission' &&
+      actionName !== 'setLoginStatus'
+    )
+      return
+
+    // Initial state
+    let vapidPublicKey = useInstanceStore().vapidPublicKey
+    let enabled = useMergedConfigStore().mergedConfig.webPushNotifications
+    let permissionGranted =
+      useInterfaceStore().notificationPermission === 'granted'
+    let permissionPresent =
+      useInterfaceStore().notificationPermission !== undefined
+    let user = !!window.vuex.state.users.currentUser
+
+    if (store.$id === 'instance') {
+      if (actionName === 'set' && args[0].path === 'vapidPublicKey') {
+        const { value } = args[0]
+        vapidPublicKey = value
+      }
+    }
+
+    if (!vapidPublicKey || !permissionPresent) {
+      return
+    }
+
+    if (store.$id === 'interface') {
+      if (actionName === 'setNotificationPermission') {
+        permissionGranted = args[0] === 'granted'
+      } else if (actionName === 'setLoginStatus') {
+        user = args[0]
+      } else {
+        return
+      }
+    } else if (store.$id === 'sync_config') {
+      if (
+        actionName === 'setPreference' &&
+        args[0].path === 'simple.webPushNotifications'
+      ) {
+        const { value } = args[0]
+        enabled = value
+      } else {
+        return
+      }
+    }
+
+    if (permissionGranted && enabled && user) {
+      return window.vuex.dispatch('registerPushNotifications')
+    } else {
+      return window.vuex.dispatch('unregisterPushNotifications')
+    }
+  })
+}
+
+export const vuexPushNotificationsPlugin = (store) => {
   store.subscribe((mutation, state) => {
+    // Initial state
     const vapidPublicKey = useInstanceStore().vapidPublicKey
-    const webPushNotification = state.config.webPushNotifications
-    const permission = useInterfaceStore().notificationPermission === 'granted'
+    const enabled = useMergedConfigStore().mergedConfig.webPushNotifications
+    const permissionGranted =
+      useInterfaceStore().notificationPermission === 'granted'
+    const permissionPresent =
+      useInterfaceStore().notificationPermission !== undefined
     const user = state.users.currentUser
 
-    const isUserMutation = mutation.type === 'setCurrentUser'
-    const isVapidMutation =
-      mutation.type === 'setInstanceOption' &&
-      mutation.payload.name === 'vapidPublicKey'
-    const isPermMutation =
-      mutation.type === 'setNotificationPermission' &&
-      mutation.payload === 'granted'
-    const isUserConfigMutation =
-      mutation.type === 'setOption' &&
-      mutation.payload.name === 'webPushNotifications'
-    const isVisibilityMutation =
-      mutation.type === 'setOption' &&
-      mutation.payload.name === 'notificationVisibility'
+    if (!permissionPresent || !vapidPublicKey) return
 
     if (
-      isUserMutation ||
-      isVapidMutation ||
-      isPermMutation ||
-      isUserConfigMutation ||
-      isVisibilityMutation
+      mutation.type === 'setCurrentUser' ||
+      mutation.type === 'clearCurrentUser'
     ) {
-      if (user && vapidPublicKey && permission && webPushNotification) {
+      if (user && permissionGranted && enabled) {
         return store.dispatch('registerPushNotifications')
-      } else if (isUserConfigMutation && !webPushNotification) {
+      } else {
         return store.dispatch('unregisterPushNotifications')
       }
     }
diff --git a/src/lib/style.js b/src/lib/style.js
new file mode 100644
index 000000000..534d120e3
--- /dev/null
+++ b/src/lib/style.js
@@ -0,0 +1,50 @@
+import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
+import { applyStyleConfig } from 'src/services/style_setter/style_setter.js'
+
+const ACTIONS = new Set([
+  'setPreference',
+  'unsetPreference',
+  'set',
+  'unset',
+  'setTemporarily',
+  'unsetTemporarily',
+])
+
+const APPEARANCE_SETTINGS_KEYS = [
+  'sidebarColumnWidth',
+  'contentColumnWidth',
+  'notifsColumnWidth',
+  'themeEditorMinWidth',
+  'textSize',
+  'navbarSize',
+  'panelHeaderSize',
+  'forcedRoundness',
+  'emojiSize',
+  'emojiReactionsScale',
+  'fontInterface',
+  'fontPosts',
+  'fontInput',
+  'fontMonospace',
+  'underlay',
+]
+
+const MIXED_KEYS = new Set([
+  ...APPEARANCE_SETTINGS_KEYS,
+  ...APPEARANCE_SETTINGS_KEYS.map((x) => 'simple.' + x),
+])
+
+export const piniaStylePlugin = ({ store, options }) => {
+  if (store.$id === 'sync_config' || store.$id === 'local_config') {
+    store.$onAction(({ name, args, after }) => {
+      if (ACTIONS.has(name)) {
+        const { path } = args[0]
+        if (MIXED_KEYS.has(path)) {
+          after(() => applyStyleConfig(useMergedConfigStore().mergedConfig))
+          after(() => useInterfaceStore().applyTheme({ recompile: true }))
+        }
+      }
+    })
+  }
+}
diff --git a/src/main.js b/src/main.js
index 91653973d..44b01aabb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -20,9 +20,15 @@ import messages from './i18n/messages.js'
 import createPersistedState, {
   piniaPersistPlugin,
 } from './lib/persisted_state.js'
-import pushNotifications from './lib/push_notifications_plugin.js'
+import {
+  piniaPushNotificationsPlugin,
+  vuexPushNotificationsPlugin,
+} from './lib/push_notifications_plugin.js'
 import vuexModules from './modules/index.js'
 
+import { piniaLanguagePlugin } from 'src/lib/language.js'
+import { piniaStylePlugin } from 'src/lib/style.js'
+
 const currentLocale = (window.navigator.language || 'en').split('-')[0]
 
 const i18n = createI18n({
@@ -35,7 +41,7 @@ const i18n = createI18n({
 messages.setLanguage(i18n.global, currentLocale)
 
 const persistedStateOptions = {
-  paths: ['serverSideStorage.cache', 'config', 'users.lastLoginName', 'oauth'],
+  paths: ['users.lastLoginName', 'oauth', 'config'],
 }
 
 ;(async () => {
@@ -66,9 +72,12 @@ const persistedStateOptions = {
 
   try {
     let storageError
-    const plugins = [pushNotifications]
+    const plugins = [vuexPushNotificationsPlugin]
     const pinia = createPinia()
     pinia.use(piniaPersistPlugin())
+    pinia.use(piniaLanguagePlugin)
+    pinia.use(piniaStylePlugin)
+    pinia.use(piniaPushNotificationsPlugin)
 
     try {
       const persistedState = await createPersistedState(persistedStateOptions)
diff --git a/src/modules/config.js b/src/modules/config.js
deleted file mode 100644
index b68d547df..000000000
--- a/src/modules/config.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import Cookies from 'js-cookie'
-import { set } from 'lodash'
-
-import messages from '../i18n/messages'
-import localeService from '../services/locale/locale.service.js'
-import { applyStyleConfig } from '../services/style_setter/style_setter.js'
-import { defaultState, instanceDefaultConfig } from './default_config_state.js'
-
-import { useEmojiStore } from 'src/stores/emoji.js'
-import { useI18nStore } from 'src/stores/i18n.js'
-import { useInstanceStore } from 'src/stores/instance.js'
-import { useInterfaceStore } from 'src/stores/interface.js'
-
-const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
-const APPEARANCE_SETTINGS_KEYS = new Set([
-  'sidebarColumnWidth',
-  'contentColumnWidth',
-  'notifsColumnWidth',
-  'themeEditorMinWidth',
-  'textSize',
-  'navbarSize',
-  'panelHeaderSize',
-  'forcedRoundness',
-  'emojiSize',
-  'emojiReactionsScale',
-])
-
-/* TODO this is a bit messy.
- * We need to declare settings with their types and also deal with
- * instance-default settings in some way, hopefully try to avoid copy-pasta
- * in general.
- */
-export const multiChoiceProperties = [
-  'postContentType',
-  'subjectLineBehavior',
-  'conversationDisplay', // tree | linear
-  'conversationOtherRepliesButton', // below | inside
-  'mentionLinkDisplay', // short | full_for_remote | full
-  'userPopoverAvatarAction', // close | zoom | open
-  'unsavedPostAction', // save | discard | confirm
-]
-
-// caching the instance default properties
-export const instanceDefaultProperties = Object.keys(instanceDefaultConfig)
-
-const config = {
-  state: { ...defaultState },
-  getters: {
-    defaultConfig() {
-      return {
-        ...defaultState,
-        ...Object.fromEntries(
-          instanceDefaultProperties.map((key) => [
-            key,
-            useInstanceStore().prefsStorage[key],
-          ]),
-        ),
-      }
-    },
-    mergedConfig(state) {
-      const instancePrefs = useInstanceStore().prefsStorage
-      const result = Object.fromEntries(
-        Object.keys(defaultState).map((key) => [
-          key,
-          state[key] ?? instancePrefs[key],
-        ]),
-      )
-      return result
-    },
-  },
-  mutations: {
-    setOptionTemporarily(state, { name, value }) {
-      set(state, name, value)
-      applyStyleConfig(state)
-    },
-    setOption(state, { name, value }) {
-      set(state, name, value)
-    },
-    setHighlight(state, { user, color, type }) {
-      const data = this.state.config.highlight[user]
-      if (color || type) {
-        state.highlight[user] = {
-          color: color || data.color,
-          type: type || data.type,
-        }
-      } else {
-        delete state.highlight[user]
-      }
-    },
-  },
-  actions: {
-    loadSettings({ dispatch }, data) {
-      const knownKeys = new Set(Object.keys(defaultState))
-      const presentKeys = new Set(Object.keys(data))
-      const intersection = new Set()
-      for (const elem of presentKeys) {
-        if (knownKeys.has(elem)) {
-          intersection.add(elem)
-        }
-      }
-
-      intersection.forEach((name) =>
-        dispatch('setOption', { name, value: data[name] }),
-      )
-    },
-    setHighlight({ commit }, { user, color, type }) {
-      commit('setHighlight', { user, color, type })
-    },
-    setOptionTemporarily({ commit, dispatch, state }, { name, value }) {
-      if (useInterfaceStore().temporaryChangesTimeoutId !== null) {
-        console.warn("Can't track more than one temporary change")
-        return
-      }
-      const oldValue = state[name]
-
-      commit('setOptionTemporarily', { name, value })
-
-      const confirm = () => {
-        dispatch('setOption', { name, value })
-        useInterfaceStore().clearTemporaryChanges()
-      }
-
-      const revert = () => {
-        commit('setOptionTemporarily', { name, value: oldValue })
-        useInterfaceStore().clearTemporaryChanges()
-      }
-
-      useInterfaceStore().setTemporaryChanges({
-        confirm,
-        revert,
-      })
-    },
-    setThemeV2({ commit, dispatch }, { customTheme, customThemeSource }) {
-      commit('setOption', { name: 'theme', value: 'custom' })
-      commit('setOption', { name: 'customTheme', value: customTheme })
-      commit('setOption', {
-        name: 'customThemeSource',
-        value: customThemeSource,
-      })
-      dispatch('setTheme', { themeData: customThemeSource, recompile: true })
-    },
-    setOption({ commit, dispatch, state }, { name, value }) {
-      const exceptions = new Set(['useStreamingApi'])
-
-      if (exceptions.has(name)) {
-        switch (name) {
-          case 'useStreamingApi': {
-            const action = value ? 'enableMastoSockets' : 'disableMastoSockets'
-
-            dispatch(action)
-              .then(() => {
-                commit('setOption', { name: 'useStreamingApi', value })
-              })
-              .catch((e) => {
-                console.error('Failed starting MastoAPI Streaming socket', e)
-                dispatch('disableMastoSockets')
-                dispatch('setOption', { name: 'useStreamingApi', value: false })
-              })
-            break
-          }
-        }
-      } else {
-        commit('setOption', { name, value })
-        if (APPEARANCE_SETTINGS_KEYS.has(name)) {
-          applyStyleConfig(state)
-        }
-        if (name.startsWith('theme3hacks')) {
-          dispatch('applyTheme', { recompile: true })
-        }
-        switch (name) {
-          case 'theme':
-            if (value === 'custom') break
-            dispatch('setTheme', {
-              themeName: value,
-              recompile: true,
-              saveData: true,
-            })
-            break
-          case 'themeDebug': {
-            dispatch('setTheme', { recompile: true })
-            break
-          }
-          case 'interfaceLanguage':
-            messages.setLanguage(useI18nStore().i18n, value)
-            useEmojiStore().loadUnicodeEmojiData(value)
-            Cookies.set(
-              BACKEND_LANGUAGE_COOKIE_NAME,
-              localeService.internalToBackendLocaleMulti(value),
-            )
-            break
-          case 'thirdColumnMode':
-            useInterfaceStore().setLayoutWidth(undefined)
-            break
-        }
-      }
-    },
-  },
-}
-
-export default config
diff --git a/src/modules/config_declaration.js b/src/modules/config_declaration.js
deleted file mode 100644
index 5c0d7ac0e..000000000
--- a/src/modules/config_declaration.js
+++ /dev/null
@@ -1,43 +0,0 @@
-export const CONFIG_MIGRATION = 1
-
-import { v4 as uuidv4 } from 'uuid'
-
-// for future use
-/*
-const simpleDeclaration = {
-  store: 'server-side',
-  migrationFlag: 'configMigration',
-  migration(serverside, rootState) {
-    serverside.setPreference({ path: 'simple.' + field, value: rootState.config[oldField ?? field] })
-  }
-}
-*/
-
-export const declarations = [
-  {
-    field: 'muteFilters',
-    store: 'server-side',
-    migrationFlag: 'configMigration',
-    migrationNum: 1,
-    description: 'Mute filters, wordfilter/regexp/etc',
-    valueType: 'complex',
-    migration(serverside, rootState) {
-      rootState.config.muteWords.forEach((word, order) => {
-        const uniqueId = uuidv4()
-
-        serverside.setPreference({
-          path: 'simple.muteFilters.' + uniqueId,
-          value: {
-            type: 'word',
-            value: word,
-            name: word,
-            enabled: true,
-            expires: null,
-            hide: false,
-            order,
-          },
-        })
-      })
-    },
-  },
-]
diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
index 2f18fe9a5..5f797126d 100644
--- a/src/modules/default_config_state.js
+++ b/src/modules/default_config_state.js
@@ -1,229 +1,815 @@
+import { get, set } from 'lodash'
+
 const browserLocale = (navigator.language || 'en').split('-')[0]
 
+export const convertDefinitions = (definitions) =>
+  Object.fromEntries(
+    Object.entries(definitions).map(([k, v]) => {
+      const defaultValue = v.default ?? null
+      return [k, defaultValue]
+    }),
+  )
+
 /// Instance config entries provided by static config or pleroma api
 /// Put settings here only if it does not make sense for a normal user
 /// to override it.
-export const staticOrApiConfigDefault = {
-  name: 'PleromaFE',
-  theme: 'pleroma-dark',
-  palette: null,
-  style: null,
-  defaultAvatar: '/images/avi.png',
-  defaultBanner: '/images/banner.png',
-  background: '/static/aurora_borealis.jpg',
-  embeddedToS: true,
-  logo: '/static/logo.svg',
-  logoMargin: '.2em',
-  logoMask: true,
-  logoLeft: false,
-  redirectRootLogin: '/main/friends',
-  redirectRootNoLogin: '/main/all',
-  hideSitename: false,
-  nsfwCensorImage: null,
-  showFeaturesPanel: true,
-  showInstanceSpecificPanel: false,
+export const INSTANCE_IDENTITY_DEFAULT_DEFINITIONS = {
+  style: {
+    description: 'Instance default style name',
+    type: 'string',
+    required: false,
+  },
+  palette: {
+    description: 'Instance default palette name',
+    type: 'string',
+    required: false,
+  },
+  theme: {
+    description: 'Instance default theme name',
+    type: 'string',
+    required: false,
+  },
+  defaultAvatar: {
+    description: "Default avatar image to use when user doesn't have one set",
+    type: 'string',
+    default: '/images/avi.png',
+  },
+  defaultBanner: {
+    description: "Default banner image to use when user doesn't have one set",
+    type: 'string',
+    default: '/images/banner.png',
+  },
+  background: {
+    description: 'Instance background/wallpaper',
+    type: 'string',
+    default: '/static/aurora_borealis.jpg',
+  },
+  embeddedToS: {
+    description: 'Whether to show Terms of Service title bar',
+    type: 'boolean',
+    default: true,
+  },
+  logo: {
+    description: 'Instance logo',
+    type: 'string',
+    default: '/static/logo.svg',
+  },
+  logoMargin: {
+    description: 'Margin for logo (spacing above/below)',
+    type: 'string',
+    default: '.2em',
+  },
+  logoMask: {
+    description:
+      'Use logo as a mask (works well for monochrome/transparent logos)',
+    type: 'boolean',
+    default: true,
+  },
+  logoLeft: {
+    description: 'Show logo on the left side of navbar',
+    type: 'boolean',
+    default: false,
+  },
+  redirectRootLogin: {
+    description: 'Where to redirect user after login',
+    type: 'string',
+    default: '/main/friends',
+  },
+  redirectRootNoLogin: {
+    description: 'Where to redirect anonymous visitors',
+    type: 'string',
+    default: '/main/all',
+  },
+  hideSitename: {
+    description: 'Hide the instance name in navbar',
+    type: 'boolean',
+    default: false,
+  },
+  nsfwCensorImage: {
+    description: 'Default NSFW censor image',
+    type: 'string',
+    required: false,
+  },
+  showFeaturesPanel: {
+    description: 'Show features panel to anonymous visitors',
+    type: 'boolean',
+    default: true,
+  },
+  showInstanceSpecificPanel: {
+    description: 'Show instance-specific panel',
+    type: 'boolean',
+    default: false,
+  },
 
   // Html stuff
-  instanceSpecificPanelContent: '',
-  tos: '',
+  instanceSpecificPanelContent: {
+    description: 'HTML of Instance-specific panel',
+    type: 'string',
+    required: false,
+  },
+  tos: {
+    description: 'HTML of Terms of Service panel',
+    type: 'string',
+    required: false,
+  },
+  name: {
+    description: 'Instance Name',
+    type: 'string',
+    required: false,
+  },
 }
+export const INSTANCE_IDENTITY_DEFAULT = convertDefinitions(
+  INSTANCE_IDENTITY_DEFAULT_DEFINITIONS,
+)
+export const INSTANCE_IDENTIY_EXTERNAL = new Set([
+  'tos',
+  'instanceSpecificPanelContent',
+])
 
 /// This object contains setting entries that makes sense
 /// at the user level. The defaults can also be overriden by
 /// instance admins in the frontend_configuration endpoint or static config.
-export const instanceDefaultConfig = {
-  expertLevel: 0, // used to track which settings to show and hide
-  hideISP: false,
-  hideInstanceWallpaper: false,
-  hideShoutbox: false,
-  // bad name: actually hides posts of muted USERS
-  hideMutedPosts: false,
-  hideMutedThreads: true,
-  hideWordFilteredPosts: false,
-  muteBotStatuses: false,
-  muteSensitiveStatuses: false,
-  collapseMessageWithSubject: false,
-  padEmoji: true,
-  hideAttachments: false,
-  hideAttachmentsInConv: false,
-  hideScrobbles: false,
-  hideScrobblesAfter: '2d',
-  maxThumbnails: 16,
-  hideNsfw: true,
-  preloadImage: true,
-  loopVideo: true,
-  loopVideoSilentOnly: true,
+export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
+  expertLevel: {
+    description:
+      'Used to track which settings to show and hide in settings modal',
+    type: 'number', // not a boolean so we could potentially make multiple levels of expert-ness
+    default: 0,
+  },
+  hideISP: {
+    description: 'Hide Instance-specific panel',
+    default: false,
+  },
+  hideInstanceWallpaper: {
+    description: 'Hide Instance default background',
+    default: false,
+  },
+  hideShoutbox: {
+    description: 'Hide shoutbox if present',
+    default: false,
+  },
+  hideMutedPosts: {
+    // bad name
+    description: 'Hide posts of muted users entirely',
+    default: false,
+  },
+  hideMutedThreads: {
+    description: 'Hide muted threads entirely',
+    default: true,
+  },
+  hideWordFilteredPosts: {
+    description: 'Hide wordfiltered posts entirely',
+    default: false,
+  },
+  muteBotStatuses: {
+    description: 'Mute posts made by bots',
+    default: false,
+  },
+  muteSensitiveStatuses: {
+    description: 'Mute posts marked as NSFW',
+    default: false,
+  },
+  collapseMessageWithSubject: {
+    description: 'Collapse posts with subject',
+    default: false,
+  },
+  padEmoji: {
+    description: 'Pad emoji with spaces when using emoji picker',
+    default: true,
+  },
+  hideAttachmentsInConv: {
+    description: 'Hide attachments',
+    default: false,
+  },
+  hideScrobbles: {
+    description: 'Hide scrobbles',
+    default: false,
+  },
+  hideScrobblesAfter: {
+    description: 'Hide scrobbles older than',
+    default: '2d',
+  },
+  maxThumbnails: {
+    description: 'Maximum attachments to show',
+    default: 16,
+  },
+  loopVideo: {
+    description: 'Loop videos',
+    default: true,
+  },
+  loopVideoSilentOnly: {
+    description: 'Loop only videos without sound',
+    default: true,
+  },
   /// This is not the streaming API configuration, but rather an option
   /// for automatically loading new posts into the timeline without
   /// the user clicking the Show New button.
-  streaming: false,
-  emojiReactionsOnTimeline: true,
-  alwaysShowNewPostButton: false,
-  autohideFloatingPostButton: false,
-  pauseOnUnfocused: true,
-  stopGifs: true,
-  replyVisibility: 'all',
-  thirdColumnMode: 'notifications',
+  streaming: {
+    description: 'Automatically show new posts',
+    default: false,
+  },
+  pauseOnUnfocused: {
+    description: 'Pause showing new posts when tab is unfocused',
+    default: true,
+  },
+  emojiReactionsOnTimeline: {
+    description: 'Show emoji reactions on timeline',
+    default: true,
+  },
+  alwaysShowNewPostButton: {
+    description: 'Always show mobile "new post" button, even in desktop mode',
+    default: false,
+  },
+  autohideFloatingPostButton: {
+    description:
+      'Automatically hide mobile "new post" button when scrolling down',
+    default: false,
+  },
+  stopGifs: {
+    description: 'Play animated gifs on hover only',
+    default: true,
+  },
+  replyVisibility: {
+    description: 'Type of replies to show',
+    default: 'all',
+  },
+  thirdColumnMode: {
+    description: 'What to display in third column',
+    default: 'notifications',
+  },
   notificationVisibility: {
-    follows: true,
-    mentions: true,
-    statuses: true,
-    likes: true,
-    repeats: true,
-    moves: true,
-    emojiReactions: true,
-    followRequest: true,
-    reports: true,
-    chatMention: true,
-    polls: true,
+    description: 'What types of notifications to show',
+    default: {
+      follows: true,
+      mentions: true,
+      statuses: true,
+      likes: true,
+      repeats: true,
+      moves: true,
+      emojiReactions: true,
+      followRequest: true,
+      reports: true,
+      chatMention: true,
+      polls: true,
+    },
   },
   notificationNative: {
-    follows: true,
-    mentions: true,
-    statuses: true,
-    likes: false,
-    repeats: false,
-    moves: false,
-    emojiReactions: false,
-    followRequest: true,
-    reports: true,
-    chatMention: true,
-    polls: true,
+    description: 'What type of notifications to show desktop notification for',
+    default: {
+      follows: true,
+      mentions: true,
+      statuses: true,
+      likes: false,
+      repeats: false,
+      moves: false,
+      emojiReactions: false,
+      followRequest: true,
+      reports: true,
+      chatMention: true,
+      polls: true,
+    },
+  },
+  webPushNotifications: {
+    description: 'Use WebPush',
+    default: false,
+  },
+  webPushAlwaysShowNotifications: {
+    description: 'Ignore filter when using WebPush',
+    default: false,
+  },
+  interfaceLanguage: {
+    description: 'UI language',
+    default: [browserLocale],
+  },
+  hideScopeNotice: {
+    description: 'Hide scope notification',
+    default: false,
+  },
+  scopeCopy: {
+    description: 'Copy scope like mastodon does',
+    default: true,
+  },
+  subjectLineBehavior: {
+    description: 'How to treat subject line',
+    default: 'email',
+  },
+  alwaysShowSubjectInput: {
+    description: 'Always show subject line field',
+    default: true,
+  },
+  minimalScopesMode: {
+    description: 'Minimize amount of options shown in scope selector',
+    default: false,
   },
-  webPushNotifications: false,
-  webPushAlwaysShowNotifications: false,
-  interfaceLanguage: browserLocale,
-  hideScopeNotice: false,
-  useStreamingApi: false,
-  sidebarRight: false,
-  scopeCopy: true,
-  subjectLineBehavior: 'email',
-  alwaysShowSubjectInput: true,
-  postContentType: 'text/plain',
-  minimalScopesMode: false,
 
   // This hides statuses filtered via a word filter
-  hideFilteredStatuses: false,
+  hideFilteredStatuses: {
+    description: 'Hide wordfiltered entirely',
+    default: false,
+  },
 
   // Confirmations
-  modalOnRepeat: false,
-  modalOnUnfollow: false,
-  modalOnBlock: true,
-  modalOnMute: false,
-  modalOnMuteConversation: false,
-  modalOnMuteDomain: true,
-  modalOnDelete: true,
-  modalOnLogout: true,
-  modalOnApproveFollow: false,
-  modalOnDenyFollow: false,
-  modalOnRemoveUserFromFollowers: false,
+  modalOnRepeat: {
+    description: 'Show confirmation modal for repeat',
+    default: false,
+  },
+  modalOnUnfollow: {
+    description: 'Show confirmation modal for unfollow',
+    default: false,
+  },
+  modalOnBlock: {
+    description: 'Show confirmation modal for block',
+    default: true,
+  },
+  modalOnMute: {
+    description: 'Show confirmation modal for mute',
+    default: false,
+  },
+  modalOnMuteConversation: {
+    description: 'Show confirmation modal for mute conversation',
+    default: false,
+  },
+  modalOnMuteDomain: {
+    description: 'Show confirmation modal for mute domain',
+    default: true,
+  },
+  modalOnDelete: {
+    description: 'Show confirmation modal for delete',
+    default: true,
+  },
+  modalOnLogout: {
+    description: 'Show confirmation modal for logout',
+    default: true,
+  },
+  modalOnApproveFollow: {
+    description: 'Show confirmation modal for approve follow',
+    default: false,
+  },
+  modalOnDenyFollow: {
+    description: 'Show confirmation modal for deny follow',
+    default: false,
+  },
+  modalOnRemoveUserFromFollowers: {
+    description: 'Show confirmation modal for follower removal',
+    default: false,
+  },
 
   // Expiry confirmations/default actions
-  onMuteDefaultAction: 'ask',
-  onBlockDefaultAction: 'ask',
+  onMuteDefaultAction: {
+    description: 'Default action when muting user',
+    default: 'ask',
+  },
+  onBlockDefaultAction: {
+    description: 'Default action when blocking user',
+    default: 'ask',
+  },
 
-  modalMobileCenter: false,
-  playVideosInModal: false,
-  useOneClickNsfw: false,
-  useContainFit: true,
-  disableStickyHeaders: false,
-  showScrollbars: false,
-  userPopoverAvatarAction: 'open',
-  userPopoverOverlay: false,
-  userCardLeftJustify: false,
-  userCardHidePersonalMarks: false,
-  sidebarColumnWidth: '25rem',
-  contentColumnWidth: '45rem',
-  notifsColumnWidth: '25rem',
-  themeEditorMinWidth: '0rem',
-  emojiReactionsScale: 0.5,
-  textSize: '1rem',
-  emojiSize: '2.2rem',
-  navbarSize: '3.5rem',
-  panelHeaderSize: '3.2rem',
-  forcedRoundness: -1,
-  navbarColumnStretch: false,
-  greentext: false,
-  mentionLinkDisplay: 'short',
-  mentionLinkShowTooltip: true,
-  mentionLinkShowAvatar: false,
-  mentionLinkFadeDomain: true,
-  mentionLinkShowYous: false,
-  mentionLinkBoldenYou: true,
-  hidePostStats: false,
-  hideBotIndication: false,
-  hideUserStats: false,
-  virtualScrolling: true,
-  sensitiveByDefault: false,
-  conversationDisplay: 'linear',
-  conversationTreeAdvanced: false,
-  conversationOtherRepliesButton: 'below',
-  conversationTreeFadeAncestors: false,
-  showExtraNotifications: true,
-  showExtraNotificationsTip: true,
-  showChatsInExtraNotifications: true,
-  showAnnouncementsInExtraNotifications: true,
-  showFollowRequestsInExtraNotifications: true,
-  maxDepthInThread: 6,
-  autocompleteSelect: false,
-  closingDrawerMarksAsSeen: true,
-  unseenAtTop: false,
-  ignoreInactionableSeen: false,
-  unsavedPostAction: 'confirm',
-  autoSaveDraft: false,
-  useAbsoluteTimeFormat: false,
-  absoluteTimeFormatMinAge: '0d',
-  absoluteTime12h: '24h',
-  imageCompression: true,
-  alwaysUseJpeg: false,
+  modalMobileCenter: {
+    description: 'Center mobile dialogs vertically',
+    default: false,
+  },
+  playVideosInModal: {
+    description: 'Play videos in gallery view',
+    default: false,
+  },
+  useContainFit: {
+    description: 'Use object-fit: contain for attachments',
+    default: true,
+  },
+  disableStickyHeaders: {
+    description: 'Disable sticky headers',
+    default: false,
+  },
+  showScrollbars: {
+    description: 'Always show scrollbars',
+    default: false,
+  },
+  userPopoverAvatarAction: {
+    description: 'What to do when clicking popover avatar',
+    default: 'open',
+  },
+  userPopoverOverlay: {
+    description: 'Overlay user popover with centering on avatar',
+    default: false,
+  },
+  userCardLeftJustify: {
+    description: 'Justify user bio to the left',
+    default: false,
+  },
+  userCardHidePersonalMarks: {
+    description: 'Hide highlight/personal note in user view',
+    default: false,
+  },
+  forcedRoundness: {
+    description: 'Force roundness of the theme',
+    default: -1,
+  },
+  greentext: {
+    description: 'Highlight plaintext >quotes',
+    default: false,
+  },
+  mentionLinkShowTooltip: {
+    description: 'Show tooltips for mention links',
+    default: true,
+  },
+  mentionLinkShowAvatar: {
+    description: 'Show avatar next to mention link',
+    default: false,
+  },
+  mentionLinkFadeDomain: {
+    description:
+      'Mute (fade) domain name in mention links if configured to show it',
+    default: true,
+  },
+  mentionLinkShowYous: {
+    description: 'Show (you)s when you are mentioned',
+    default: false,
+  },
+  mentionLinkBoldenYou: {
+    description: 'Boldern mentionlink of you',
+    default: true,
+  },
+  hidePostStats: {
+    description: 'Hide post stats (rt, favs)',
+    default: false,
+  },
+  hideBotIndication: {
+    description: 'Hide bot indicator',
+    default: false,
+  },
+  hideUserStats: {
+    description: 'Hide user stats (followers etc)',
+    default: false,
+  },
+  virtualScrolling: {
+    description: 'Timeline virtual scrolling',
+    default: true,
+  },
+  sensitiveByDefault: {
+    description: 'Assume attachments are NSFW by default',
+    default: false,
+  },
+  conversationDisplay: {
+    description: 'Style of conversation display',
+    default: 'linear',
+  },
+  conversationTreeAdvanced: {
+    description: 'Advanced features of tree view conversation',
+    default: false,
+  },
+  conversationOtherRepliesButton: {
+    description: 'Where to show "other replies" in tree conversation view',
+    default: 'below',
+  },
+  conversationTreeFadeAncestors: {
+    description: 'Fade ancestors in tree conversation view',
+    default: false,
+  },
+  showExtraNotifications: {
+    description:
+      'Show extra notifications (chats, announcements etc) in notification panel',
+    default: true,
+  },
+  showExtraNotificationsTip: {
+    description: 'Show tip for extra notifications (that user can remove them)',
+    default: true,
+  },
+  showChatsInExtraNotifications: {
+    description: 'Show chat messages in notifications',
+    default: true,
+  },
+  showAnnouncementsInExtraNotifications: {
+    description: 'Show announcements in notifications',
+    default: true,
+  },
+  showFollowRequestsInExtraNotifications: {
+    description: 'Show follow requests in notifications',
+    default: true,
+  },
+  maxDepthInThread: {
+    description: 'Maximum depth in tree conversation view',
+    default: 6,
+  },
+  autocompleteSelect: {
+    description: '',
+    default: false,
+  },
+  closingDrawerMarksAsSeen: {
+    description: 'Closing mobile notification pane marks everything as seen',
+    default: true,
+  },
+  unseenAtTop: {
+    description: 'Show unseen notifications above others',
+    default: false,
+  },
+  ignoreInactionableSeen: {
+    description: 'Treat inactionable (fav, rt etc) notifications as "seen"',
+    default: false,
+  },
+  unsavedPostAction: {
+    description: 'What to do if post is aborted',
+    default: 'confirm',
+  },
+  autoSaveDraft: {
+    description: 'Save drafts automatically',
+    default: false,
+  },
+  useAbsoluteTimeFormat: {
+    description: 'Use absolute time format',
+    default: false,
+  },
+  absoluteTimeFormatMinAge: {
+    description: 'Show absolute time format only after this post age',
+    default: '0d',
+  },
+  absoluteTime12h: {
+    description: 'Use 24h time format',
+    default: '24h',
+  },
+  themeChecksum: {
+    description: 'Checksum of theme used',
+    type: 'string',
+    required: false,
+  },
+  highlights: {
+    description: 'User highlights',
+    type: 'object',
+    required: false,
+    default: {},
+  },
+  underlay: {
+    description: 'Underlay override',
+    required: true,
+    default: 'none',
+  },
 }
+export const INSTANCE_DEFAULT_CONFIG = convertDefinitions(
+  INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
+)
+
+export const LOCAL_DEFAULT_CONFIG_DEFINITIONS = {
+  // TODO these two used to be separate but since separation feature got broken it doesn't matter
+  hideAttachments: {
+    description: 'Hide attachments in timeline',
+    default: false,
+  },
+  hideAttachmentsInConv: {
+    description: 'Hide attachments in coversation',
+    default: false,
+  },
+  hideNsfw: {
+    description: 'Hide nsfw posts',
+    default: true,
+  },
+  useOneClickNsfw: {
+    description: 'Open NSFW images directly in media modal',
+    default: false,
+  },
+  preloadImage: {
+    description: 'Preload images for NSFW',
+    default: true,
+  },
+  postContentType: {
+    description: 'Default post content type',
+    default: 'text/plain',
+  },
+  sidebarRight: {
+    description: 'Reverse order of columns',
+    default: false,
+  },
+  sidebarColumnWidth: {
+    description: 'Sidebar column width',
+    default: '25rem',
+  },
+  contentColumnWidth: {
+    description: 'Middle column width',
+    default: '45rem',
+  },
+  notifsColumnWidth: {
+    description: 'Notifications column width',
+    default: '25rem',
+  },
+  themeEditorMinWidth: {
+    description: 'Hack for theme editor on mobile',
+    default: '0rem',
+  },
+  emojiReactionsScale: {
+    description: 'Emoji reactions scale factor',
+    default: 0.5,
+  },
+  textSize: {
+    description: 'Font size',
+    default: '1rem',
+  },
+  emojiSize: {
+    description: 'Emoji size',
+    default: '2.2rem',
+  },
+  navbarSize: {
+    description: 'Navbar size',
+    default: '3.5rem',
+  },
+  panelHeaderSize: {
+    description: 'Panel header size',
+    default: '3.2rem',
+  },
+  navbarColumnStretch: {
+    description: 'Stretch navbar to match columns width',
+    default: false,
+  },
+  mentionLinkDisplay: {
+    description: 'How to display mention links',
+    default: 'short',
+  },
+  imageCompression: {
+    description: 'Image compression (WebP/JPEG)',
+    default: true,
+  },
+  alwaysUseJpeg: {
+    description: 'Compress images using JPEG only',
+    default: false,
+  },
+  useStreamingApi: {
+    description: 'Streaming API (WebSocket)',
+    default: false,
+  },
+  fontInterface: {
+    description: 'Interface font override',
+    type: 'object',
+    default: null,
+  },
+  fontInput: {
+    description: 'Input font override',
+    type: 'object',
+    default: null,
+  },
+  fontPosts: {
+    description: 'Post font override',
+    type: 'object',
+    default: null,
+  },
+  fontMonospace: {
+    description: 'Monospace font override',
+    type: 'object',
+    default: null,
+  },
+  themeDebug: {
+    description:
+      'Debug mode that uses computed backgrounds instead of real ones to debug contrast functions',
+    default: false,
+  },
+  forceThemeRecompilation: {
+    description: 'Flag that forces recompilation on boot even if cache exists',
+    default: false,
+  },
+}
+export const LOCAL_DEFAULT_CONFIG = convertDefinitions(
+  LOCAL_DEFAULT_CONFIG_DEFINITIONS,
+)
+
+export const LOCAL_ONLY_KEYS = new Set(Object.keys(LOCAL_DEFAULT_CONFIG))
+
+export const SYNC_DEFAULT_CONFIG_DEFINITIONS = {
+  dontShowUpdateNotifs: {
+    description: 'Never show update notification (pleroma-tan)',
+    default: false,
+  },
+  collapseNav: {
+    description: 'Collapse navigation panel to header only',
+    default: false,
+  },
+  muteFilters: {
+    description: 'Object containing mute filters',
+    type: 'object',
+    default: {},
+  },
+}
+export const SYNC_DEFAULT_CONFIG = convertDefinitions(
+  SYNC_DEFAULT_CONFIG_DEFINITIONS,
+)
+export const SYNC_ONLY_KEYS = new Set(Object.keys(SYNC_DEFAULT_CONFIG))
+
+export const THEME_CONFIG_DEFINITIONS = {
+  theme: {
+    description: 'Very old theme store, stores preset name, still in use',
+    default: null,
+  },
+  colors: {
+    description:
+      'VERY old theme store, just colors of V1, probably not even used anymore',
+    default: {},
+  },
+  // V2
+  customTheme: {
+    description:
+      '"Snapshot", previously was used as actual theme store for V2 so it\'s still used in case of PleromaFE downgrade event.',
+    default: null,
+  },
+  customThemeSource: {
+    description: '"Source", stores original theme data',
+    default: null,
+  },
+  // V3
+  style: {
+    description: 'Style name for builtins',
+    default: null,
+  },
+  styleCustomData: {
+    description: 'Custom style data (i.e. not builtin)',
+    default: null,
+  },
+  palette: {
+    description: 'Palette name for builtins',
+    default: null,
+  },
+  paletteCustomData: {
+    description: 'Custom palette data (i.e. not builtin)',
+    default: null,
+  },
+}
+export const THEME_CONFIG = convertDefinitions(THEME_CONFIG_DEFINITIONS)
 
 export const makeUndefined = (c) =>
   Object.fromEntries(Object.keys(c).map((key) => [key, undefined]))
 
 /// For properties with special processing or properties that does not
 /// make sense to be overriden on a instance-wide level.
-export const defaultState = {
+export const ROOT_CONFIG = {
   // Set these to undefined so it does not interfere with default settings check
-  ...makeUndefined(instanceDefaultConfig),
-
-  // Special processing
-  // Theme  stuff
-  theme: undefined, // Very old theme store, stores preset name, still in use
-
-  // V1
-  colors: {}, // VERY old theme store, just colors of V1, probably not even used anymore
-
-  // V2
-  customTheme: undefined, // "snapshot", previously was used as actual theme store for V2 so it's still used in case of PleromaFE downgrade event.
-  customThemeSource: undefined, // "source", stores original theme data
-
-  // V3
-  style: null,
-  styleCustomData: null,
-  palette: null,
-  paletteCustomData: null,
-  themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
-  forceThemeRecompilation: false, //  flag that forces recompilation on boot even if cache exists
-  theme3hacks: {
-    // Hacks, user overrides that are independent of theme used
-    underlay: 'none',
-    fonts: {
-      interface: undefined,
-      input: undefined,
-      post: undefined,
-      monospace: undefined,
-    },
-  },
-
-  // Special handling: These fields are not of a primitive type, and
-  // might cause problems with current code because it specifically checks
-  // them in state.config (not getters.mergedConfig).
-
-  // Specifically, muteWords is now deprecated in favour of a server-side configuration.
-  muteWords: [],
-  highlight: {},
-
-  // If there are any configurations that does not make sense to
-  // have instance-wide default, put it here and explain why.
+  ...INSTANCE_DEFAULT_CONFIG,
+  ...LOCAL_DEFAULT_CONFIG,
+  ...SYNC_DEFAULT_CONFIG,
+  ...THEME_CONFIG,
+}
+
+export const ROOT_CONFIG_DEFINITIONS = {
+  ...INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
+  ...LOCAL_DEFAULT_CONFIG_DEFINITIONS,
+  ...SYNC_DEFAULT_CONFIG_DEFINITIONS,
+  ...THEME_CONFIG_DEFINITIONS,
+}
+
+export const validateSetting = ({
+  value,
+  path: fullPath,
+  definition,
+  throwError,
+  defaultState,
+  validateObjects = true,
+}) => {
+  if (value === undefined) return undefined // only null is allowed as missing value
+  if (definition === undefined) return undefined // invalid definition
+  const path = fullPath.replace(/^simple./, '')
+  const depth = path.split('.')
+  if (
+    validateObjects &&
+    definition.type === 'object' &&
+    path.split('.').length <= 1
+  ) {
+    console.error(
+      `attempt to set object ${fullPath} instead of its children. ignoring.`,
+    )
+    return undefined
+  }
+
+  if (get(defaultState, path.split('.')[0]) === undefined) {
+    const string = `Unknown option ${fullPath}, value: ${value}`
+
+    if (throwError) {
+      throw new Error(string)
+    } else {
+      console.error(string)
+      return undefined
+    }
+  }
+
+  let { required, type, default: defaultValue } = definition
+
+  if (type == null && defaultValue != null) {
+    type = typeof defaultValue
+  }
+
+  if (required && value == null) {
+    const string = `Value required for setting ${path} but was provided nullish; defaulting`
+
+    if (throwError) {
+      throw new Error(string)
+    } else {
+      console.error(string)
+      return defaultValue
+    }
+  }
+
+  if (depth > 2 && value !== null && type != null && typeof value !== type) {
+    const string = `Invalid type for setting ${path}: expected type ${type}, got ${typeof value}, value ${value}; defaulting`
+
+    if (throwError) {
+      throw new Error(string)
+    } else {
+      console.error(string)
+      return defaultValue
+    }
+  }
+
+  return value
 }
diff --git a/src/modules/index.js b/src/modules/index.js
index 15e57f716..76bdbf7f3 100644
--- a/src/modules/index.js
+++ b/src/modules/index.js
@@ -1,7 +1,6 @@
 import adminSettings from './adminSettings.js'
 import api from './api.js'
 import chats from './chats.js'
-import config from './config.js'
 import drafts from './drafts.js'
 import notifications from './notifications.js'
 import profileConfig from './profileConfig.js'
@@ -13,7 +12,6 @@ export default {
   notifications,
   users,
   api,
-  config,
   profileConfig,
   adminSettings,
   drafts,
diff --git a/src/modules/notifications.js b/src/modules/notifications.js
index cb3d430db..bf1e4b9c0 100644
--- a/src/modules/notifications.js
+++ b/src/modules/notifications.js
@@ -9,8 +9,9 @@ import {
   maybeShowNotification,
 } from '../services/notification_utils/notification_utils.js'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useReportsStore } from 'src/stores/reports.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 const emptyNotifications = () => ({
   desktopNotificationSilence: true,
@@ -119,9 +120,8 @@ export const notifications = {
 
           maybeShowNotification(
             store,
-            Object.values(
-              useServerSideStorageStore().prefsStorage.simple.muteFilters,
-            ),
+            useMergedConfigStore().mergedConfig.notificationVisibility,
+            Object.values(useSyncConfigStore().prefsStorage.simple.muteFilters),
             notification,
           )
         } else if (notification.seen) {
diff --git a/src/modules/old_default_config_state.js b/src/modules/old_default_config_state.js
new file mode 100644
index 000000000..935239d16
--- /dev/null
+++ b/src/modules/old_default_config_state.js
@@ -0,0 +1,185 @@
+// this is a snapshot of config keys used prior to sync config.
+// used to migrate from old config.
+
+// commented entries are unsynced stuff
+export const oldDefaultConfigSync = {
+  expertLevel: 0, // used to track which settings to show and hide
+  hideISP: false,
+  hideInstanceWallpaper: false,
+  hideShoutbox: false,
+  // bad name: actually hides posts of muted USERS
+  hideMutedPosts: false,
+  hideMutedThreads: true,
+  hideWordFilteredPosts: false,
+  muteBotStatuses: false,
+  muteSensitiveStatuses: false,
+  collapseMessageWithSubject: false,
+  padEmoji: true,
+  hideScrobbles: false,
+  hideScrobblesAfter: '2d',
+  maxThumbnails: 16,
+  loopVideo: true,
+  loopVideoSilentOnly: true,
+  /// This is not the streaming API configuration, but rather an option
+  /// for automatically loading new posts into the timeline without
+  /// the user clicking the Show New button.
+  streaming: false,
+  emojiReactionsOnTimeline: true,
+  alwaysShowNewPostButton: false,
+  autohideFloatingPostButton: false,
+  pauseOnUnfocused: true,
+  stopGifs: true,
+  replyVisibility: 'all',
+  thirdColumnMode: 'notifications',
+  notificationVisibility: {
+    follows: true,
+    mentions: true,
+    statuses: true,
+    likes: true,
+    repeats: true,
+    moves: true,
+    emojiReactions: true,
+    followRequest: true,
+    reports: true,
+    chatMention: true,
+    polls: true,
+  },
+  notificationNative: {
+    follows: true,
+    mentions: true,
+    statuses: true,
+    likes: false,
+    repeats: false,
+    moves: false,
+    emojiReactions: false,
+    followRequest: true,
+    reports: true,
+    chatMention: true,
+    polls: true,
+  },
+  webPushNotifications: false,
+  webPushAlwaysShowNotifications: false,
+  //interfaceLanguage: '',
+  hideScopeNotice: false,
+  useStreamingApi: false,
+  sidebarRight: false,
+  scopeCopy: true,
+  subjectLineBehavior: 'email',
+  alwaysShowSubjectInput: true,
+  postContentType: 'text/plain',
+  minimalScopesMode: false,
+
+  // This hides statuses filtered via a word filter
+  hideFilteredStatuses: false,
+
+  // Confirmations
+  modalOnRepeat: false,
+  modalOnUnfollow: false,
+  modalOnBlock: true,
+  modalOnMute: false,
+  modalOnMuteConversation: false,
+  modalOnMuteDomain: true,
+  modalOnDelete: true,
+  modalOnLogout: true,
+  modalOnApproveFollow: false,
+  modalOnDenyFollow: false,
+  modalOnRemoveUserFromFollowers: false,
+
+  // Expiry confirmations/default actions
+  onMuteDefaultAction: 'ask',
+  onBlockDefaultAction: 'ask',
+
+  modalMobileCenter: false,
+  playVideosInModal: false,
+  useContainFit: true,
+  disableStickyHeaders: false,
+  showScrollbars: false,
+  userPopoverAvatarAction: 'open',
+  userPopoverOverlay: false,
+  userCardLeftJustify: false,
+  userCardHidePersonalMarks: false,
+  forcedRoundness: -1,
+  greentext: false,
+  mentionLinkShowTooltip: true,
+  mentionLinkShowAvatar: false,
+  mentionLinkFadeDomain: true,
+  mentionLinkShowYous: false,
+  mentionLinkBoldenYou: true,
+  hidePostStats: false,
+  hideBotIndication: false,
+  hideUserStats: false,
+  virtualScrolling: true,
+  sensitiveByDefault: false,
+  conversationDisplay: 'linear',
+  conversationTreeAdvanced: false,
+  conversationOtherRepliesButton: 'below',
+  conversationTreeFadeAncestors: false,
+  showExtraNotifications: true,
+  showExtraNotificationsTip: true,
+  showChatsInExtraNotifications: true,
+  showAnnouncementsInExtraNotifications: true,
+  showFollowRequestsInExtraNotifications: true,
+  maxDepthInThread: 6,
+  autocompleteSelect: false,
+  closingDrawerMarksAsSeen: true,
+  unseenAtTop: false,
+  ignoreInactionableSeen: false,
+  unsavedPostAction: 'confirm',
+  autoSaveDraft: false,
+  useAbsoluteTimeFormat: false,
+  absoluteTimeFormatMinAge: '0d',
+  absoluteTime12h: '24h',
+  theme3hacks: {
+    // Hacks, user overrides that are independent of theme used
+    underlay: 'none',
+    fonts: {
+      interface: undefined,
+      input: undefined,
+      post: undefined,
+      monospace: undefined,
+    },
+  },
+  // Special processing
+  // Theme  stuff
+  theme: undefined, // Very old theme store, stores preset name, still in use
+
+  // V1
+  colors: {}, // VERY old theme store, just colors of V1, probably not even used anymore
+
+  // V2
+  customTheme: undefined, // "snapshot", previously was used as actual theme store for V2 so it's still used in case of PleromaFE downgrade event.
+  customThemeSource: undefined, // "source", stores original theme data
+
+  // V3
+  style: null,
+  styleCustomData: null,
+  palette: null,
+  paletteCustomData: null,
+  themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
+  forceThemeRecompilation: false, //  flag that forces recompilation on boot even if cache exists
+
+  // Those are handled outside config now
+  // muteWords: [],
+  // highlight: {},
+}
+
+export const defaultConfigLocal = {
+  hideAttachments: false,
+  hideAttachmentsInConv: false,
+  hideNsfw: true,
+  useOneClickNsfw: false,
+  preloadImage: true,
+  sidebarColumnWidth: '25rem',
+  contentColumnWidth: '45rem',
+  notifsColumnWidth: '25rem',
+  themeEditorMinWidth: '0rem',
+  emojiReactionsScale: 0.5,
+  textSize: '1rem',
+  emojiSize: '2.2rem',
+  navbarSize: '3.5rem',
+  panelHeaderSize: '3.2rem',
+  navbarColumnStretch: false,
+  mentionLinkDisplay: 'short',
+  imageCompression: true,
+  alwaysUseJpeg: false,
+}
diff --git a/src/modules/users.js b/src/modules/users.js
index b0febcd3a..db5b16ccc 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -25,10 +25,10 @@ import { useEmojiStore } from 'src/stores/emoji.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
-
-import { declarations } from 'src/modules/config_declaration'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+import { useUserHighlightStore } from 'src/stores/user_highlight.js'
 
 // TODO: Unify with mergeOrAdd in statuses.js
 export const mergeOrAdd = (arr, obj, item) => {
@@ -553,9 +553,9 @@ const users = {
     registerPushNotifications(store) {
       const token = store.state.currentUser.credentials
       const vapidPublicKey = useInstanceStore().vapidPublicKey
-      const isEnabled = store.rootState.config.webPushNotifications
+      const isEnabled = useMergedConfigStore().mergedConfig.webPushNotifications
       const notificationVisibility =
-        store.rootState.config.notificationVisibility
+        useMergedConfigStore().mergedConfig.notificationVisibility
 
       registerPushNotifications(
         isEnabled,
@@ -682,7 +682,6 @@ const users = {
           useInterfaceStore().setLastTimeline('public-timeline')
           useInterfaceStore().setLayoutWidth(windowWidth())
           useInterfaceStore().setLayoutHeight(windowHeight())
-          store.commit('clearServerSideStorage')
         })
     },
     loginUser(store, accessToken) {
@@ -702,7 +701,16 @@ const users = {
               user.domainMutes = []
               commit('setCurrentUser', user)
 
-              useServerSideStorageStore().setServerSideStorage(user)
+              useSyncConfigStore()
+                .initSyncConfig(user)
+                .then(() => {
+                  useInterfaceStore()
+                    .applyTheme()
+                    .catch((e) => {
+                      console.error('Error setting theme', e)
+                    })
+                })
+              useUserHighlightStore().initUserHighlight(user)
               commit('addNewUsers', [user])
 
               useEmojiStore().fetchEmoji()
@@ -723,35 +731,15 @@ const users = {
               /*
               // Reset wordfilter
               Object.keys(
-                useServerSideStorageStore().prefsStorage.simple.muteFilters
+                useSyncConfigStore().prefsStorage.simple.muteFilters
               ).forEach(key => {
-                useServerSideStorageStore().unsetPreference({ path: 'simple.muteFilters.' + key, value: null })
+                useSyncConfigStore().unsetSimplePrefAndSave({ path: 'muteFilters.' + key, value: null })
               })
 
               // Reset flag to 0 to re-run migrations
-              useServerSideStorageStore().setFlag({ flag: 'configMigration', value: 0 })
+              useSyncConfigStore().setFlag({ flag: 'configMigration', value: 0 })
               /**/
 
-              const { configMigration } =
-                useServerSideStorageStore().flagStorage
-              declarations
-                .filter((x) => {
-                  return (
-                    x.store === 'server-side' &&
-                    x.migrationNum > 0 &&
-                    x.migrationNum > configMigration
-                  )
-                })
-                .toSorted((a, b) => a.configMigration - b.configMigration)
-                .forEach((value) => {
-                  value.migration(useServerSideStorageStore(), store.rootState)
-                  useServerSideStorageStore().setFlag({
-                    flag: 'configMigration',
-                    value: value.migrationNum,
-                  })
-                  useServerSideStorageStore().pushServerSideStorage()
-                })
-
               if (user.token) {
                 dispatch('setWsToken', user.token)
 
@@ -781,7 +769,7 @@ const users = {
                 dispatch('startFetchingFollowRequests')
               }
 
-              if (store.getters.mergedConfig.useStreamingApi) {
+              if (useMergedConfigStore().mergedConfig.useStreamingApi) {
                 dispatch('fetchTimeline', { timeline: 'friends', since: null })
                 dispatch('fetchNotifications', { since: null })
                 dispatch('enableMastoSockets', true)
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 909a014ce..8fb98bc9b 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -1,8 +1,8 @@
 import { parseLinkHeader } from '@web3-storage/parse-link-header'
 import escapeHtml from 'escape-html'
-import fileTypeService from '../file_type/file_type.service.js'
 import punycode from 'punycode.js'
 
+import fileTypeService from '../file_type/file_type.service.js'
 import { isStatusNotification } from '../notification_utils/notification_utils.js'
 
 /** NOTICE! **
@@ -117,6 +117,7 @@ export const parseUser = (data) => {
     if (data.pleroma) {
       if (data.pleroma.settings_store) {
         output.storage = data.pleroma.settings_store['pleroma-fe']
+        output.user_highlight = data.pleroma.settings_store['user_highlight']
       }
       const relationship = data.pleroma.relationship
 
@@ -371,8 +372,8 @@ export const parseStatus = (data) => {
     const quoteData = quoteRaw ? parseStatus(quoteRaw) : undefined
     output.quote = quoteData
     output.quote_id =
-      data.quote?.id ?? data.quote_id ?? quoteData?.id ?? pleroma.quote_id
-    output.quote_url = data.quote?.url ?? quoteData?.url ?? pleroma.quote_url
+      data.quote?.id ?? data.quote_id ?? quoteData?.id ?? pleroma?.quote_id
+    output.quote_url = data.quote?.url ?? quoteData?.url ?? pleroma?.quote_url
 
     output.in_reply_to_status_id = data.in_reply_to_id
     output.in_reply_to_user_id = data.in_reply_to_account_id
diff --git a/src/services/html_converter/utility.service.js b/src/services/html_converter/utility.service.js
index 4c36eda2f..684f96ca1 100644
--- a/src/services/html_converter/utility.service.js
+++ b/src/services/html_converter/utility.service.js
@@ -23,7 +23,9 @@ export const getAttrs = (tag, filter) => {
     .replace(/\/?$/, '')
     .trim()
   const attrs = Array.from(
-    innertag.matchAll(/([a-z]+[a-z0-9-]*)(?:=((?:"(?:\\.|[^"\\])*")|(?:'(?:\\.|[^'\\])*')))?/gi),
+    innertag.matchAll(
+      /([a-z]+[a-z0-9-]*)(?:=((?:"(?:\\.|[^"\\])*")|(?:'(?:\\.|[^'\\])*')))?/gi,
+    ),
   )
     .map(([, key, value]) => [key, value])
     .map(([k, v]) => {
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index ead2153a6..b803e2146 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -20,10 +20,8 @@ export const getJsonOrError = async (response) => {
 }
 
 export const createApp = (instance) => {
-  console.log('NAP', instance)
   const url = `${instance}/api/v1/apps`
   const form = new window.FormData()
-  console.log(url)
 
   form.append('client_name', 'PleromaFE')
   form.append('website', 'https://pleroma.social')
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 14785a685..1fbaf2a2c 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -1,7 +1,7 @@
 import { showDesktopNotification } from '../desktop_notification_utils/desktop_notification_utils.js'
 import { muteFilterHits } from '../status_parser/status_parser.js'
 
-import { useAnnouncementsStore } from 'src/stores/announcements'
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
 import { useI18nStore } from 'src/stores/i18n.js'
 
 import FaviconService from 'src/services/favicon_service/favicon_service.js'
@@ -16,12 +16,7 @@ let cachedBadgeUrl = null
 
 export const notificationsFromStore = (store) => store.state.notifications.data
 
-export const visibleTypes = (store) => {
-  // When called from within a module we need rootGetters to access wider scope
-  // however when called from a component (i.e. this.$store) we already have wider scope
-  const rootGetters = store.rootGetters || store.getters
-  const { notificationVisibility } = rootGetters.mergedConfig
-
+const visibleTypes = (notificationVisibility) => {
   return [
     notificationVisibility.likes && 'like',
     notificationVisibility.mentions && 'mention',
@@ -70,18 +65,23 @@ const sortById = (a, b) => {
   }
 }
 
-const isMutedNotification = (notification) => {
+const isMutedNotification = (muteFilters, notification) => {
   if (!notification.status) return false
   if (notification.status.muted) return true
-  return muteFilterHits(notification.status).length > 0
+  return muteFilterHits(muteFilters, notification.status).length > 0
 }
 
-export const maybeShowNotification = (store, notification) => {
+export const maybeShowNotification = (
+  store,
+  notificationVisibility,
+  muteFilters,
+  notification,
+) => {
   const rootState = store.rootState || store.state
 
   if (notification.seen) return
-  if (!visibleTypes(store).includes(notification.type)) return
-  if (notification.type === 'mention' && isMutedNotification(notification))
+  if (!visibleTypes(notificationVisibility).includes(notification.type)) return
+  if (notification.type === 'mention' && isMutedNotification(muteFilters, notification))
     return
 
   const notificationObject = prepareNotificationObject(
@@ -91,26 +91,33 @@ export const maybeShowNotification = (store, notification) => {
   showDesktopNotification(rootState, notificationObject)
 }
 
-export const filteredNotificationsFromStore = (store, types) => {
+export const filteredNotificationsFromStore = (
+  store,
+  notificationVisibility,
+  types,
+) => {
   // map is just to clone the array since sort mutates it and it causes some issues
   const sortedNotifications = notificationsFromStore(store)
     .map((_) => _)
     .sort(sortById)
   // TODO implement sorting elsewhere and make it optional
   return sortedNotifications.filter((notification) =>
-    (types || visibleTypes(store)).includes(notification.type),
+    (types || visibleTypes(notificationVisibility)).includes(notification.type),
   )
 }
 
-export const unseenNotificationsFromStore = (store) => {
-  const rootGetters = store.rootGetters || store.getters
-  const ignoreInactionableSeen = rootGetters.mergedConfig.ignoreInactionableSeen
-
-  return filteredNotificationsFromStore(store).filter(({ seen, type }) => {
-    if (!ignoreInactionableSeen) return !seen
-    if (seen) return false
-    return ACTIONABLE_NOTIFICATION_TYPES.has(type)
-  })
+export const unseenNotificationsFromStore = (
+  store,
+  notificationVisibility,
+  ignoreInactionableSeen,
+) => {
+  return filteredNotificationsFromStore(store, notificationVisibility).filter(
+    ({ seen, type }) => {
+      if (!ignoreInactionableSeen) return !seen
+      if (seen) return false
+      return ACTIONABLE_NOTIFICATION_TYPES.has(type)
+    },
+  )
 }
 
 export const prepareNotificationObject = (notification, i18n) => {
@@ -183,9 +190,8 @@ export const prepareNotificationObject = (notification, i18n) => {
   return notifObj
 }
 
-export const countExtraNotifications = (store) => {
+export const countExtraNotifications = (store, mergedConfig) => {
   const rootGetters = store.rootGetters || store.getters
-  const mergedConfig = rootGetters.mergedConfig
 
   if (!mergedConfig.showExtraNotifications) {
     return 0
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 73411b6a5..c1a9e1a2f 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -4,6 +4,7 @@ import { promiseInterval } from '../promise_interval/promise_interval.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 const update = ({ store, notifications, older }) => {
   store.dispatch('addNewNotifications', { notifications, older })
@@ -26,10 +27,9 @@ const mastoApiNotificationTypes = new Set([
 
 const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
   const args = { credentials }
-  const { getters } = store
   const rootState = store.rootState || store.state
   const timelineData = rootState.notifications
-  const hideMutedPosts = getters.mergedConfig.hideMutedPosts
+  const hideMutedPosts = useMergedConfigStore().mergedConfig.hideMutedPosts
 
   if (useInstanceCapabilitiesStore().pleromaChatMessagesAvailable) {
     mastoApiNotificationTypes.add('pleroma:chat_mention')
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 495070b0d..c8e90c0a6 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,10 +1,14 @@
+import sum from 'hash-sum'
 import localforage from 'localforage'
 import { chunk, throttle } from 'lodash'
 
 import { getCssRules } from '../theme_data/css_utils.js'
 import { getEngineChecksum, init } from '../theme_data/theme_data_3.service.js'
 
-import { defaultState } from 'src/modules/default_config_state.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
+import { ROOT_CONFIG } from 'src/modules/default_config_state.js'
 
 // On platforms where this is not supported, it will return undefined
 // Otherwise it will return an array
@@ -77,7 +81,7 @@ export const adoptStyleSheets = throttle(() => {
 const EAGER_STYLE_ID = 'pleroma-eager-styles'
 const LAZY_STYLE_ID = 'pleroma-lazy-styles'
 
-export const generateTheme = (inputRuleset, callbacks, debug) => {
+const generateTheme = (inputRuleset, callbacks, debug) => {
   const {
     onNewRule = () => {
       /* no-op */
@@ -136,7 +140,11 @@ export const tryLoadCache = async () => {
   const cache = await localforage.getItem('pleromafe-theme-cache')
   if (!cache) return null
   try {
-    if (cache.engineChecksum === getEngineChecksum()) {
+    if (
+      cache.engineChecksum === getEngineChecksum() &&
+      cache.checksum !== undefined &&
+      cache.checksum === useMergedConfigStore().mergedConfig.themeChecksum
+    ) {
       const eagerStyles = createStyleSheet(EAGER_STYLE_ID, 10)
       const lazyStyles = createStyleSheet(LAZY_STYLE_ID, 20)
 
@@ -149,7 +157,7 @@ export const tryLoadCache = async () => {
       console.info(`Loaded theme from cache`)
       return true
     } else {
-      console.warn("Engine checksum doesn't match, cache not usable, clearing")
+      console.warn("Checksums don't match, cache not usable, clearing")
       localStorage.removeItem('pleroma-fe-theme-cache')
     }
   } catch (e) {
@@ -195,10 +203,17 @@ export const applyTheme = (
       onLazyFinished() {
         lazyStyles.ready = true
         adoptStyleSheets()
+        const data = [eagerStyles.rules, lazyStyles.rules]
+        const checksum = sum(data)
         const cache = {
+          checksum,
           engineChecksum: getEngineChecksum(),
-          data: [eagerStyles.rules, lazyStyles.rules],
+          data,
         }
+        useSyncConfigStore().setSimplePrefAndSave({
+          path: 'themeChecksum',
+          value: checksum,
+        })
         onFinish(cache)
         localforage.setItem('pleromafe-theme-cache', cache)
         console.info('Theme cache stored')
@@ -253,7 +268,7 @@ const extractStyleConfig = ({
   return result
 }
 
-const defaultStyleConfig = extractStyleConfig(defaultState)
+const defaultStyleConfig = extractStyleConfig(ROOT_CONFIG)
 
 export const applyStyleConfig = (input) => {
   const config = extractStyleConfig(input)
diff --git a/src/services/sw/sw.js b/src/services/sw/sw.js
index 72d78384c..e744e37aa 100644
--- a/src/services/sw/sw.js
+++ b/src/services/sw/sw.js
@@ -41,7 +41,7 @@ function subscribePush(registration, isEnabled, vapidPublicKey) {
 function unsubscribePush(registration) {
   return registration.pushManager.getSubscription().then((subscription) => {
     if (subscription === null) {
-      return
+      return Promise.resolve('No subscription')
     }
     return subscription.unsubscribe()
   })
@@ -158,23 +158,23 @@ export function registerPushNotifications(
 
 export function unregisterPushNotifications(token) {
   if (isPushSupported()) {
-    Promise.all([
-      deleteSubscriptionFromBackEnd(token),
-      getOrCreateServiceWorker()
-        .then((registration) => {
-          return unsubscribePush(registration).then((result) => [
-            registration,
-            result,
-          ])
-        })
-        .then(([, unsubResult]) => {
-          if (!unsubResult) {
-            console.warn("Push subscription cancellation wasn't successful")
-          }
-        }),
-    ]).catch((e) =>
-      console.warn(`Failed to disable Web Push Notifications: ${e.message}`),
-    )
+    getOrCreateServiceWorker()
+      .then((registration) => {
+        return unsubscribePush(registration).then((result) => [
+          registration,
+          result,
+        ])
+      })
+      .then(([, unsubResult]) => {
+        if (unsubResult === 'No subscription') return
+        if (!unsubResult) {
+          console.warn("Push subscription cancellation wasn't successful")
+        }
+        return deleteSubscriptionFromBackEnd(token)
+      })
+      .catch((e) => {
+        console.warn(`Failed to disable Web Push Notifications: ${e.message}`)
+      })
   }
 }
 
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index da62f8b37..68991addf 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -6,6 +6,7 @@ import { promiseInterval } from '../promise_interval/promise_interval.js'
 import { useInstanceStore } from 'src/stores/instance.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useInterfaceStore } from 'src/stores/interface.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 const update = ({
   store,
@@ -44,9 +45,9 @@ const fetchAndUpdate = ({
 }) => {
   const args = { timeline, credentials }
   const rootState = store.rootState || store.state
-  const { getters } = store
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
-  const { hideMutedPosts, replyVisibility } = getters.mergedConfig
+  const { hideMutedPosts, replyVisibility } =
+    useMergedConfigStore().mergedConfig
   const loggedIn = !!rootState.users.currentUser
 
   if (older) {
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index 45fbffec2..697496c91 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -2,7 +2,7 @@ import { hex2rgb } from '../color_convert/color_convert.js'
 
 const highlightStyle = (prefs) => {
   if (prefs === undefined) return
-  const { color, type } = prefs
+  const { color = '#FFFFFF', type } = prefs
   if (typeof color !== 'string') return
   const rgb = hex2rgb(color)
   if (rgb == null) return
diff --git a/src/stores/i18n.js b/src/stores/i18n.js
index 4e7c7c5d3..78706af17 100644
--- a/src/stores/i18n.js
+++ b/src/stores/i18n.js
@@ -1,5 +1,11 @@
+import Cookies from 'js-cookie'
 import { defineStore } from 'pinia'
 
+import messages from 'src/i18n/messages'
+import localeService from 'src/services/locale/locale.service.js'
+
+const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
+
 export const useI18nStore = defineStore('i18n', {
   state: () => ({
     i18n: null,
@@ -10,5 +16,12 @@ export const useI18nStore = defineStore('i18n', {
         i18n: newI18n.global,
       })
     },
+    setLanguage(value) {
+      messages.setLanguage(this.i18n, value)
+      Cookies.set(
+        BACKEND_LANGUAGE_COOKIE_NAME,
+        localeService.internalToBackendLocaleMulti(value),
+      )
+    },
   },
 })
diff --git a/src/stores/instance.js b/src/stores/instance.js
index 76ad22fb5..54b3cf43c 100644
--- a/src/stores/instance.js
+++ b/src/stores/instance.js
@@ -1,41 +1,146 @@
 import { get, set } from 'lodash'
 import { defineStore } from 'pinia'
 
-import { instanceDefaultProperties } from '../modules/config.js'
 import {
-  instanceDefaultConfig,
-  staticOrApiConfigDefault,
+  convertDefinitions,
+  INSTANCE_DEFAULT_CONFIG,
+  INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
+  INSTANCE_IDENTITY_DEFAULT,
+  INSTANCE_IDENTITY_DEFAULT_DEFINITIONS,
+  LOCAL_DEFAULT_CONFIG,
+  LOCAL_DEFAULT_CONFIG_DEFINITIONS,
+  validateSetting,
 } from '../modules/default_config_state.js'
 import apiService from '../services/api/api.service.js'
 
 import { useInterfaceStore } from 'src/stores/interface.js'
 
-import { ensureFinalFallback } from 'src/i18n/languages.js'
-
 const REMOTE_INTERACTION_URL = '/main/ostatus'
 
-const defaultState = {
-  // Stuff from apiConfig
-  name: 'Pleroma FE',
-  registrationOpen: true,
-  server: 'http://localhost:4040/',
-  textlimit: 5000,
-  privateMode: false,
-  federating: true,
-  federationPolicy: null,
-  themesIndex: null,
-  stylesIndex: null,
-  palettesIndex: null,
-  themeData: null, // used for theme editor v2
-  vapidPublicKey: null,
+const ROOT_STATE_DEFINITIONS = {
+  name: {
+    type: 'string',
+    default: 'PleromaFE',
+  },
+  registrationOpen: {
+    required: true,
+    type: 'boolean',
+  },
+  server: {
+    description: 'Server URL',
+    required: true,
+    type: 'string',
+  },
+  privateMode: {
+    description: 'Private instance?',
+    required: true,
+    type: 'boolean',
+  },
+  federating: {
+    description: 'Is federation enabled?',
+    required: true,
+    type: 'boolean',
+  },
+  federationPolicy: {
+    description: '????',
+    required: true,
+    type: 'object',
+  },
+
+  // Indexes of themes/styles/palettes
+  themesIndex: {
+    required: true,
+    type: 'object',
+  },
+  stylesIndex: {
+    required: true,
+    type: 'object',
+  },
+  palettesIndex: {
+    required: true,
+    type: 'object',
+  },
+
+  themeData: {
+    description: 'Used for theme v2 editor',
+    required: true,
+    type: 'object',
+  },
+  vapidPublicKey: {
+    description: 'Used for WebPush',
+    required: true,
+    type: 'string',
+  },
 
   // Stuff from static/config.json
-  loginMethod: 'password',
-  disableUpdateNotification: false,
+  loginMethod: {
+    description: 'Login method (token/password)',
+    default: 'password',
+  },
+  disableUpdateNotification: {
+    description: 'Disable update notification (pleroma-tan one)',
+    default: false,
+  },
+  knownDomains: {
+    description: 'List of known domains; used for domain list for domain mutes',
+    default: [],
+  },
 
+  // Moderation stuff
+  staffAccounts: {
+    description: 'List of staff accounts',
+    default: [],
+  },
+  accountActivationRequired: {
+    description:
+      'Account activation (by email or admin) required after registration',
+    required: true,
+    type: 'boolean',
+  },
+  accountApprovalRequired: {
+    description: 'Admin approval required after registration',
+    required: true,
+    type: 'boolean',
+  },
+  birthdayRequired: {
+    description: 'Require birthday entry when registering',
+    required: true,
+    type: 'boolean',
+  },
+  birthdayMinAge: {
+    description: 'Minimum age required for registration',
+    default: 0,
+  },
+  restrictedNicknames: {
+    description: 'List of nicknames that are not allowed',
+    default: [],
+  },
+  localBubbleInstances: {
+    description: "Akkoma's bubble feature, list of instances",
+    default: [],
+  }, // Akkoma
+
+  // Version Information
+  backendVersion: {
+    required: true,
+    type: 'string',
+  },
+  backendRepository: {
+    required: true,
+    type: 'string',
+  },
+  frontendVersion: {
+    required: true,
+    type: 'string',
+  },
+}
+const ROOT_STATE = convertDefinitions(ROOT_STATE_DEFINITIONS)
+
+const DEFAULT_STATE = {
+  ...ROOT_STATE,
   // Instance-wide configurations that should not be changed by individual users
   instanceIdentity: {
-    ...staticOrApiConfigDefault,
+    ...INSTANCE_IDENTITY_DEFAULT,
   },
 
   limits: {
@@ -44,6 +149,7 @@ const defaultState = {
     backgroundlimit: null,
     uploadlimit: null,
     fieldsLimits: null,
+    textLimit: null,
     pollLimits: {
       max_options: 4,
       max_option_chars: 255,
@@ -54,49 +160,53 @@ const defaultState = {
 
   // Instance admins can override default settings for the whole instance
   prefsStorage: {
-    ...instanceDefaultConfig,
+    ...INSTANCE_DEFAULT_CONFIG,
+    ...LOCAL_DEFAULT_CONFIG,
   },
-
-  // Known domains list for user's domain-muting
-  knownDomains: [],
-
-  // Moderation stuff
-  staffAccounts: [],
-  accountActivationRequired: null,
-  accountApprovalRequired: null,
-  birthdayRequired: false,
-  birthdayMinAge: 0,
-  restrictedNicknames: [],
-  localBubbleInstances: [], // Akkoma
-
-  // Version Information
-  backendVersion: '',
-  backendRepository: '',
-  frontendVersion: '',
 }
 
 export const useInstanceStore = defineStore('instance', {
-  state: () => ({ ...defaultState }),
+  state: () => ({ ...DEFAULT_STATE }),
   getters: {
-    instanceDefaultConfig(state) {
-      return instanceDefaultProperties
-        .map((key) => [key, state[key]])
-        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
-    },
     instanceDomain(state) {
       return new URL(this.server).hostname
     },
   },
   actions: {
-    set({ path, name, value }) {
-      if (get(defaultState, path ?? name) === undefined)
-        console.error(
-          `Unknown instance option ${path ?? name}, value: ${value}`,
-        )
+    set({ path, value }) {
+      let definition
+      const pathArray = path.split('.')
+      const subpath = pathArray[1] ?? pathArray[0]
 
-      set(this, path ?? name, value)
+      if (path.startsWith('instanceIdentity.')) {
+        definition = INSTANCE_IDENTITY_DEFAULT_DEFINITIONS[subpath]
+      } else if (path.startsWith('prefsStorage.')) {
+        definition = {
+          ...LOCAL_DEFAULT_CONFIG_DEFINITIONS,
+          ...INSTANCE_DEFAULT_CONFIG_DEFINITIONS,
+        }[subpath]
+      } else if (path.startsWith('limits.')) {
+        definition =
+          path === 'limits.pollLimits' || path === 'limits.fieldsLimits'
+            ? { required: true, type: 'object' }
+            : { required: true, type: 'number' }
+      } else {
+        const definitions = ROOT_STATE_DEFINITIONS
+        definition = definitions[subpath]
+      }
 
-      if ((path ?? name) === 'name') useInterfaceStore().setPageTitle()
+      const finalValue = validateSetting({
+        path,
+        value,
+        definition,
+        throwError: true,
+        defaultState: DEFAULT_STATE,
+        validateObjects: false,
+      })
+
+      set(this, path, finalValue)
+
+      if (path === 'name') useInterfaceStore().setPageTitle()
     },
     async getKnownDomains() {
       try {
diff --git a/src/stores/interface.js b/src/stores/interface.js
index 8d05ce44b..3da844a3b 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -8,6 +8,8 @@ import {
 import { deserialize } from '../services/theme_data/iss_deserializer.js'
 
 import { useInstanceStore } from 'src/stores/instance.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 import {
   CURRENT_VERSION,
@@ -65,7 +67,7 @@ export const useInterfaceStore = defineStore('interface', {
       this.temporaryChangesConfirm = confirm
       this.temporaryChangesRevert = revert
       const countdownFunc = () => {
-        if (this.temporaryChangesCountdown === 1) {
+        if (this.temporaryChangesCountdown <= 1) {
           this.temporaryChangesRevert()
           this.clearTemporaryChanges()
         } else {
@@ -89,7 +91,7 @@ export const useInterfaceStore = defineStore('interface', {
     },
     setPageTitle(option = '') {
       try {
-        document.title = `${option} ${useInstanceStore().name}`
+        document.title = `${option} ${useInstanceStore().instanceIdentity.name}`
       } catch (error) {
         console.error(`${error}`)
       }
@@ -185,7 +187,7 @@ export const useInterfaceStore = defineStore('interface', {
 
       const mobileLayout = width <= 800
       const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
-      const { thirdColumnMode } = window.vuex.getters.mergedConfig
+      const { thirdColumnMode } = useMergedConfigStore().mergedConfig
       if (thirdColumnMode === 'none' || !window.vuex.state.users.currentUser) {
         this.layoutType = normalOrMobile
       } else {
@@ -225,14 +227,14 @@ export const useInterfaceStore = defineStore('interface', {
       try {
         const value = await getResourcesIndex('/static/palettes/index.json')
         useInstanceStore().set({
-          name: 'palettesIndex',
+          path: 'palettesIndex',
           value,
         })
         return value
       } catch (e) {
         console.error('Could not fetch palettes index', e)
         useInstanceStore().set({
-          name: 'palettesIndex',
+          path: 'palettesIndex',
           value: { _error: e },
         })
         return Promise.resolve({})
@@ -242,7 +244,8 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV3Palette()
       this.resetThemeV2()
 
-      window.vuex.commit('setOption', { name: 'palette', value })
+      useSyncConfigStore().setPreference({ path: 'simple.palette', value })
+      useSyncConfigStore().pushSyncConfig()
 
       this.applyTheme({ recompile: true })
     },
@@ -250,7 +253,11 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV3Palette()
       this.resetThemeV2()
 
-      window.vuex.commit('setOption', { name: 'paletteCustomData', value })
+      useSyncConfigStore().setPreference({
+        path: 'simple.paletteCustomData',
+        value,
+      })
+      useSyncConfigStore().pushSyncConfig()
 
       this.applyTheme({ recompile: true })
     },
@@ -260,12 +267,12 @@ export const useInterfaceStore = defineStore('interface', {
           '/static/styles/index.json',
           deserialize,
         )
-        useInstanceStore().set({ name: 'stylesIndex', value })
+        useInstanceStore().set({ path: 'stylesIndex', value })
         return value
       } catch (e) {
         console.error('Could not fetch styles index', e)
         useInstanceStore().set({
-          name: 'stylesIndex',
+          path: 'simple.stylesIndex',
           value: { _error: e },
         })
         return Promise.resolve({})
@@ -276,7 +283,8 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV2()
       this.resetThemeV3Palette()
 
-      window.vuex.commit('setOption', { name: 'style', value })
+      useSyncConfigStore().setPreference({ path: 'simple.style', value })
+      useSyncConfigStore().pushSyncConfig()
       this.useStylePalette = true
 
       this.applyTheme({ recompile: true }).then(() => {
@@ -288,7 +296,11 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV2()
       this.resetThemeV3Palette()
 
-      window.vuex.commit('setOption', { name: 'styleCustomData', value })
+      useSyncConfigStore().setPreference({
+        path: 'simple.styleCustomData',
+        value,
+      })
+      useSyncConfigStore().pushSyncConfig()
 
       this.useStylePalette = true
       this.applyTheme({ recompile: true }).then(() => {
@@ -298,12 +310,12 @@ export const useInterfaceStore = defineStore('interface', {
     async fetchThemesIndex() {
       try {
         const value = await getResourcesIndex('/static/styles.json')
-        useInstanceStore().set({ name: 'themesIndex', value })
+        useInstanceStore().set({ path: 'themesIndex', value })
         return value
       } catch (e) {
         console.error('Could not fetch themes index', e)
         useInstanceStore().set({
-          name: 'themesIndex',
+          path: 'themesIndex',
           value: { _error: e },
         })
         return Promise.resolve({})
@@ -314,7 +326,8 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV3Palette()
       this.resetThemeV2()
 
-      window.vuex.commit('setOption', { name: 'theme', value })
+      useSyncConfigStore().setPreference({ path: 'simple.theme', value })
+      useSyncConfigStore().pushSyncConfig()
 
       this.applyTheme({ recompile: true })
     },
@@ -323,27 +336,40 @@ export const useInterfaceStore = defineStore('interface', {
       this.resetThemeV3Palette()
       this.resetThemeV2()
 
-      window.vuex.commit('setOption', { name: 'customTheme', value })
-      window.vuex.commit('setOption', { name: 'customThemeSource', value })
+      useSyncConfigStore().setPreference({ path: 'simple.customTheme', value })
+      useSyncConfigStore().setPreference({
+        path: 'simple.customThemeSource',
+        value,
+      })
+      useSyncConfigStore().pushSyncConfig()
 
       this.applyTheme({ recompile: true })
     },
     resetThemeV3() {
-      window.vuex.commit('setOption', { name: 'style', value: null })
-      window.vuex.commit('setOption', { name: 'styleCustomData', value: null })
+      useSyncConfigStore().setPreference({ path: 'simple.style', value: null })
+      useSyncConfigStore().setPreference({
+        path: 'simple.styleCustomData',
+        value: null,
+      })
     },
     resetThemeV3Palette() {
-      window.vuex.commit('setOption', { name: 'palette', value: null })
-      window.vuex.commit('setOption', {
-        name: 'paletteCustomData',
+      useSyncConfigStore().setPreference({
+        path: 'simple.palette',
+        value: null,
+      })
+      useSyncConfigStore().setPreference({
+        path: 'simple.paletteCustomData',
         value: null,
       })
     },
     resetThemeV2() {
-      window.vuex.commit('setOption', { name: 'theme', value: null })
-      window.vuex.commit('setOption', { name: 'customTheme', value: null })
-      window.vuex.commit('setOption', {
-        name: 'customThemeSource',
+      useSyncConfigStore().setPreference({ path: 'simple.theme', value: null })
+      useSyncConfigStore().setPreference({
+        path: 'simple.customTheme',
+        value: null,
+      })
+      useSyncConfigStore().setPreference({
+        path: 'simple.customThemeSource',
         value: null,
       })
     },
@@ -387,28 +413,26 @@ export const useInterfaceStore = defineStore('interface', {
         return result
       }
 
-      const { style: instanceStyleName, palette: instancePaletteName } =
-        useInstanceStore()
-
       let {
-        theme: instanceThemeV2Name,
-        themesIndex,
-        stylesIndex,
-        palettesIndex,
-      } = useInstanceStore()
+        theme: instanceThemeName,
+        style: instanceStyleName,
+        palette: instancePaletteName,
+      } = useInstanceStore().instanceIdentity
+
+      let { themesIndex, stylesIndex, palettesIndex } = useInstanceStore()
 
       const {
         style: userStyleName,
         styleCustomData: userStyleCustomData,
         palette: userPaletteName,
         paletteCustomData: userPaletteCustomData,
-      } = window.vuex.state.config
+      } = useMergedConfigStore().mergedConfig
 
       let {
         theme: userThemeV2Name,
         customTheme: userThemeV2Snapshot,
         customThemeSource: userThemeV2Source,
-      } = window.vuex.state.config
+      } = useMergedConfigStore().mergedConfig
 
       let majorVersionUsed
 
@@ -422,7 +446,7 @@ export const useInterfaceStore = defineStore('interface', {
       console.debug(
         `Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`,
       )
-      console.debug('Instance V2 theme: ' + instanceThemeV2Name)
+      console.debug('Instance V2 theme: ' + instanceThemeName)
 
       if (
         userPaletteName ||
@@ -431,11 +455,11 @@ export const useInterfaceStore = defineStore('interface', {
         userStyleCustomData ||
         // User V2 overrides instance V3
         ((instancePaletteName || instanceStyleName) &&
-          instanceThemeV2Name == null &&
+          instanceThemeName == null &&
           userThemeV2Name == null)
       ) {
         // Palette and/or style overrides V2 themes
-        instanceThemeV2Name = null
+        instanceThemeName = null
         userThemeV2Name = null
         userThemeV2Source = null
         userThemeV2Snapshot = null
@@ -445,7 +469,7 @@ export const useInterfaceStore = defineStore('interface', {
         userThemeV2Name ||
         userThemeV2Snapshot ||
         userThemeV2Source ||
-        instanceThemeV2Name
+        instanceThemeName
       ) {
         majorVersionUsed = 'v2'
       } else {
@@ -511,10 +535,11 @@ export const useInterfaceStore = defineStore('interface', {
         )
 
         if (this.useStylePalette) {
-          window.vuex.commit('setOption', {
-            name: 'palette',
+          useSyncConfigStore().setPreference({
+            path: 'simple.palette',
             value: firstStylePaletteName,
           })
+          useSyncConfigStore().pushSyncConfig()
         }
 
         this.paletteNameUsed = palette.nameUsed
@@ -562,7 +587,7 @@ export const useInterfaceStore = defineStore('interface', {
           'theme',
           themesIndex,
           userThemeV2Source || userThemeV2Snapshot,
-          userThemeV2Name || instanceThemeV2Name,
+          userThemeV2Name || instanceThemeName,
         )
         this.themeNameUsed = theme.nameUsed
         this.themeDataUsed = theme.dataUsed
@@ -572,8 +597,9 @@ export const useInterfaceStore = defineStore('interface', {
       this.themeApplied = true
     },
     async applyTheme({ recompile = false } = {}) {
-      const { forceThemeRecompilation, themeDebug, theme3hacks } =
-        window.vuex.state.config
+      const { mergedConfig } = useMergedConfigStore()
+      const { forceThemeRecompilation, themeDebug } = mergedConfig
+
       this.themeChangeInProgress = true
       // If we're not forced to recompile try using
       // cache (tryLoadCache return true if load successful)
@@ -620,68 +646,41 @@ export const useInterfaceStore = defineStore('interface', {
           convertTheme2To3(normalizeThemeData(this.themeDataUsed))
         const hacks = []
 
-        Object.entries(theme3hacks).forEach(([key, value]) => {
-          switch (key) {
-            case 'fonts': {
-              Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
-                if (!font?.family) return
-                switch (fontKey) {
-                  case 'interface':
-                    hacks.push({
-                      component: 'Root',
-                      directives: {
-                        '--font': 'generic | ' + font.family,
-                      },
-                    })
-                    break
-                  case 'input':
-                    hacks.push({
-                      component: 'Input',
-                      directives: {
-                        '--font': 'generic | ' + font.family,
-                      },
-                    })
-                    break
-                  case 'post':
-                    hacks.push({
-                      component: 'RichContent',
-                      directives: {
-                        '--font': 'generic | ' + font.family,
-                      },
-                    })
-                    break
-                  case 'monospace':
-                    hacks.push({
-                      component: 'Root',
-                      directives: {
-                        '--monoFont': 'generic | ' + font.family,
-                      },
-                    })
-                    break
-                }
-              })
-              break
-            }
-            case 'underlay': {
-              if (value !== 'none') {
-                const newRule = {
-                  component: 'Underlay',
-                  directives: {},
-                }
-                if (value === 'opaque') {
-                  newRule.directives.opacity = 1
-                  newRule.directives.background = '--wallpaper'
-                }
-                if (value === 'transparent') {
-                  newRule.directives.opacity = 0
-                }
-                hacks.push(newRule)
-              }
-              break
-            }
+        const fontMap = {
+          Interface: 'Root',
+          Input: 'Input',
+          Posts: 'Post',
+          Monospace: 'Root',
+        }
+
+        Object.entries(fontMap).forEach(([font, component]) => {
+          const family = mergedConfig[`font${font}`]?.family
+          const variable = font === 'Monospace' ? '--monoFont' : '--font'
+          if (family) {
+            hacks.push({
+              component,
+              directives: {
+                [variable]: `generic | "${family}"`,
+              },
+            })
           }
         })
 
+        if (mergedConfig.underlay !== 'none') {
+          const newRule = {
+            component: 'Underlay',
+            directives: {},
+          }
+          if (mergedConfig.underlay === 'opaque') {
+            newRule.directives.opacity = 1
+            newRule.directives.background = '--wallpaper'
+          }
+          if (mergedConfig.underlay === 'transparent') {
+            newRule.directives.opacity = 0
+          }
+          hacks.push(newRule)
+        }
+
         const rulesetArray = [
           theme2ruleset,
           this.styleDataUsed,
@@ -698,6 +697,7 @@ export const useInterfaceStore = defineStore('interface', {
           themeDebug,
         )
       } catch (e) {
+        console.error(e)
         window.splashError(e)
       }
     },
diff --git a/src/stores/local_config.js b/src/stores/local_config.js
new file mode 100644
index 000000000..5b15c6ff1
--- /dev/null
+++ b/src/stores/local_config.js
@@ -0,0 +1,67 @@
+import { cloneDeep, set } from 'lodash'
+import { defineStore } from 'pinia'
+import { toRaw } from 'vue'
+
+import { useInstanceStore } from 'src/stores/instance'
+
+import {
+  LOCAL_DEFAULT_CONFIG,
+  LOCAL_DEFAULT_CONFIG_DEFINITIONS,
+  makeUndefined,
+  validateSetting,
+} from 'src/modules/default_config_state'
+
+export const defaultState = {
+  prefsStorage: {
+    ...makeUndefined(LOCAL_DEFAULT_CONFIG),
+  },
+  tempStorage: {
+    ...makeUndefined(LOCAL_DEFAULT_CONFIG),
+  },
+}
+
+export const useLocalConfigStore = defineStore('local_config', {
+  state() {
+    return cloneDeep(defaultState)
+  },
+  actions: {
+    set({ path, value }) {
+      const definition = LOCAL_DEFAULT_CONFIG_DEFINITIONS[path]
+
+      const finalValue = validateSetting({
+        path,
+        value,
+        definition,
+        throwError: false,
+        defaultState: LOCAL_DEFAULT_CONFIG,
+      })
+
+      set(this.prefsStorage, path, finalValue)
+    },
+    setTemporarily({ path, value }) {
+      set(this.tempStorage, path, value)
+    },
+    unsetTemporarily({ path, value }) {
+      set(this.tempStorage, path, undefined)
+    },
+    unset({ path, value }) {
+      set(this.prefsStorage, path, undefined)
+    },
+    clearLocalConfig() {
+      Object.keys(this).forEach((k) => {
+        this.prefsStorage[k] = undefined
+        this.tempStorage[k] = undefined
+      })
+    },
+  },
+  persist: {
+    afterLoad(state) {
+      return {
+        prefsStorage: state.prefsStorage ?? {
+          ...makeUndefined(LOCAL_DEFAULT_CONFIG),
+        },
+        tempStorage: { ...makeUndefined(LOCAL_DEFAULT_CONFIG) },
+      }
+    },
+  },
+})
diff --git a/src/stores/merged_config.js b/src/stores/merged_config.js
new file mode 100644
index 000000000..334db6c4f
--- /dev/null
+++ b/src/stores/merged_config.js
@@ -0,0 +1,58 @@
+import { defineStore } from 'pinia'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useLocalConfigStore } from 'src/stores/local_config.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
+import {
+  LOCAL_ONLY_KEYS,
+  ROOT_CONFIG,
+} from 'src/modules/default_config_state.js'
+
+export const useMergedConfigStore = defineStore('merged_config', {
+  getters: {
+    mergedConfig: () => {
+      const instancePrefs = useInstanceStore().prefsStorage
+      const tempPrefs = useLocalConfigStore().tempStorage
+      const localPrefs = useLocalConfigStore().prefsStorage
+      const syncPrefs = useSyncConfigStore().prefsStorage
+
+      const getValue = (k) => {
+        if (LOCAL_ONLY_KEYS.has(k)) {
+          return tempPrefs[k] ?? localPrefs[k] ?? syncPrefs.simple[k]
+        } else {
+          return tempPrefs[k] ?? syncPrefs.simple[k]
+        }
+      }
+      const getDefault = (k) => instancePrefs[k] ?? ROOT_CONFIG[k]
+
+      const result = Object.fromEntries(
+        Object.keys(ROOT_CONFIG).map((k) => [k, getValue(k) ?? getDefault(k)]),
+      )
+      return result
+    },
+    mergedConfigDefault: () => {
+      const instancePrefs = useInstanceStore().prefsStorage
+
+      const getDefault = (k) => instancePrefs[k] ?? ROOT_CONFIG[k]
+
+      const result = Object.fromEntries(
+        Object.keys(ROOT_CONFIG).map((k) => [k, getDefault(k)]),
+      )
+      return result
+    },
+    mergedConfigWithoutDefaults: () => {
+      const tempPrefs = useLocalConfigStore().tempStorage
+      const localPrefs = useLocalConfigStore().prefsStorage
+      const syncPrefs = useSyncConfigStore().prefsStorage
+
+      const getValue = (k) =>
+        tempPrefs[k] ?? localPrefs[k] ?? syncPrefs.simple[k]
+
+      const result = Object.fromEntries(
+        Object.keys(ROOT_CONFIG).map((k) => [k, getValue(k)]),
+      )
+      return result
+    },
+  },
+})
diff --git a/src/stores/oauth.js b/src/stores/oauth.js
index ef0f5ba35..2a79c2fa9 100644
--- a/src/stores/oauth.js
+++ b/src/stores/oauth.js
@@ -83,7 +83,6 @@ export const useOAuthStore = defineStore('oauth', {
     },
     async getAppToken() {
       const instance = useInstanceStore().server
-      console.log(this.clientId)
       const res = await getClientToken({
         clientId: this.clientId,
         clientSecret: this.clientSecret,
diff --git a/src/stores/serverSideStorage.js b/src/stores/sync_config.js
similarity index 57%
rename from src/stores/serverSideStorage.js
rename to src/stores/sync_config.js
index 99f5045f7..722dd7f16 100644
--- a/src/stores/serverSideStorage.js
+++ b/src/stores/sync_config.js
@@ -1,3 +1,4 @@
+import sum from 'hash-sum'
 import {
   merge as _merge,
   clamp,
@@ -8,20 +9,36 @@ import {
   groupBy,
   isEqual,
   set,
+  take,
   takeRight,
   uniqWith,
   unset,
 } from 'lodash'
+import { v4 as uuidv4 } from 'uuid'
 import { defineStore } from 'pinia'
 import { toRaw } from 'vue'
 
 import { CURRENT_UPDATE_COUNTER } from 'src/components/update_notification/update_notification.js'
 
-export const VERSION = 1
-export const NEW_USER_DATE = new Date('2022-08-04') // date of writing this, basically
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useLocalConfigStore } from 'src/stores/local_config.js'
+
+import { storage } from 'src/lib/storage.js'
+import {
+  makeUndefined,
+  ROOT_CONFIG,
+  ROOT_CONFIG_DEFINITIONS,
+  validateSetting,
+} from 'src/modules/default_config_state.js'
+import { oldDefaultConfigSync } from 'src/modules/old_default_config_state.js'
+
+export const VERSION = 2
+export const NEW_USER_DATE = new Date('2026-03-16') // date of writing this, basically
 
 export const COMMAND_TRIM_FLAGS = 1000
 export const COMMAND_TRIM_FLAGS_AND_RESET = 1001
+export const COMMAND_WIPE_JOURNAL = 1010
+export const COMMAND_WIPE_JOURNAL_AND_STORAGE = 1011
 
 export const defaultState = {
   // do we need to update data on server?
@@ -29,8 +46,7 @@ export const defaultState = {
   // storage of flags - stuff that can only be set and incremented
   flagStorage: {
     updateCounter: 0, // Counter for most recent update notification seen
-    configMigration: 0, // Counter for config -> server-side migrations
-    reset: 0, // special flag that can be used to force-reset all flags, debug purposes only
+    reset: 0, // special flag that can be used to force-reset all data, debug purposes only
     // special reset codes:
     // 1000: trim keys to those known by currently running FE
     // 1001: same as above + reset everything to 0
@@ -38,9 +54,9 @@ export const defaultState = {
   prefsStorage: {
     _journal: [],
     simple: {
-      dontShowUpdateNotifs: false,
-      collapseNav: false,
       muteFilters: {},
+
+      ...makeUndefined({ ...ROOT_CONFIG }),
     },
     collections: {
       pinnedStatusActions: ['reply', 'retweet', 'favorite', 'emoji'],
@@ -69,12 +85,14 @@ export const _moveItemInArray = (array, value, movement) => {
   return newArray
 }
 
-const _wrapData = (data, userName) => ({
-  ...data,
-  _user: userName,
-  _timestamp: Date.now(),
-  _version: VERSION,
-})
+const _wrapData = (data, userName) => {
+  return {
+    ...data,
+    _user: userName,
+    _timestamp: Date.now(),
+    _version: VERSION,
+  }
+}
 
 const _checkValidity = (data) => data._timestamp > 0 && data._version > 0
 
@@ -86,16 +104,21 @@ const _verifyPrefs = (state) => {
 
   // Simple
   Object.entries(defaultState.prefsStorage.simple).forEach(([k, v]) => {
+    if (typeof v === 'undefined') return
     if (typeof v === 'number' || typeof v === 'boolean') return
-    if (typeof v === 'object' && v != null) return
-    console.warn(`Preference simple.${k} as invalid type, reinitializing`)
+    if (typeof v === 'object') return
+    console.warn(
+      `Preference simple.${k} as invalid type ${typeof v}, reinitializing`,
+    )
     set(state.prefsStorage.simple, k, defaultState.prefsStorage.simple[k])
   })
 
   // Collections
   Object.entries(defaultState.prefsStorage.collections).forEach(([k, v]) => {
     if (Array.isArray(v)) return
-    console.warn(`Preference collections.${k} as invalid type, reinitializing`)
+    console.warn(
+      `Preference collections.${k} as invalid type ${typeof v}, reinitializing`,
+    )
     set(
       state.prefsStorage.collections,
       k,
@@ -128,13 +151,13 @@ export const _getRecentData = (cache, live, isTest) => {
       live._version === cache._version
     ) {
       console.debug(
-        'Same version/timestamp on both source, source of truth irrelevant',
+        'Same version/timestamp on both sources, source of truth irrelevant',
       )
       result.recent = cache
       result.stale = live
     } else {
       console.debug(
-        'Different timestamp, figuring out which one is more recent',
+        'Different timestamp or version, figuring out which one is more recent',
       )
       if (live._timestamp < cache._timestamp) {
         result.recent = cache
@@ -149,17 +172,21 @@ export const _getRecentData = (cache, live, isTest) => {
     result.needUpload = true
   }
 
-  const merge = (a, b) => ({
-    _user: a._user ?? b._user,
-    _version: a._version ?? b._version,
-    _timestamp: a._timestamp ?? b._timestamp,
-    needUpload: b.needUpload ?? a.needUpload,
-    prefsStorage: _merge(a.prefsStorage, b.prefsStorage),
-    flagStorage: _merge(a.flagStorage, b.flagStorage),
-  })
+  const merge = (a, b) => {
+    return {
+      _user: a._user ?? b._user,
+      _version: a._version ?? b._version,
+      _timestamp: a._timestamp ?? b._timestamp,
+      needUpload: b.needUpload ?? a.needUpload,
+      prefsStorage: _merge(cloneDeep(a.prefsStorage), b.prefsStorage),
+      flagStorage: _merge(a.flagStorage, b.flagStorage),
+    }
+  }
+
   result.recent = isTest
     ? result.recent
     : result.recent && merge(defaultState, result.recent)
+
   result.stale = isTest
     ? result.stale
     : result.stale && merge(defaultState, result.stale)
@@ -192,7 +219,7 @@ export const _mergeFlags = (recent, stale, allFlagKeys) => {
   )
 }
 
-const _mergeJournal = (...journals) => {
+export const _mergeJournal = (...journals) => {
   // Ignore invalid journal entries
   const allJournals = flatten(
     journals.map((j) => (Array.isArray(j) ? j : [])),
@@ -240,9 +267,11 @@ const _mergeJournal = (...journals) => {
       return journal
     }
   })
-  return flatten(trimmedGrouped).sort((a, b) =>
+
+  const flat = flatten(trimmedGrouped).sort((a, b) =>
     a.timestamp > b.timestamp ? 1 : -1,
   )
+  return take(flat, 500)
 }
 
 export const _mergePrefs = (recent, stale) => {
@@ -262,69 +291,95 @@ export const _mergePrefs = (recent, stale) => {
    */
   const resultOutput = { ...recentData }
   const totalJournal = _mergeJournal(staleJournal, recentJournal)
-  totalJournal.forEach(({ path, operation, args }) => {
-    if (path.startsWith('_')) {
-      throw new Error(
-        `journal contains entry to edit internal (starts with _) field '${path}', something is incorrect here, ignoring.`,
-      )
-    }
-    switch (operation) {
-      case 'set':
-        if (
-          path.startsWith('collections') ||
-          path.startsWith('objectCollections')
-        ) {
-          throw new Error('Illegal operation "set" on a collection')
-        }
-        if (path.split(/\./g).length <= 1) {
-          throw new Error(
-            `Calling set on depth <= 1 (path: ${path}) is not allowed`,
-          )
-        }
-        set(resultOutput, path, args[0])
-        break
-      case 'unset':
-        if (
-          path.startsWith('collections') ||
-          path.startsWith('objectCollections')
-        ) {
-          throw new Error('Illegal operation "unset" on a collection')
-        }
-        if (path.split(/\./g).length <= 2) {
-          throw new Error(
-            `Calling unset on depth <= 2 (path: ${path})  is not allowed`,
-          )
-        }
-        unset(resultOutput, path)
-        break
-      case 'addToCollection':
-        set(
-          resultOutput,
-          path,
-          Array.from(new Set(get(resultOutput, path)).add(args[0])),
-        )
-        break
-      case 'removeFromCollection': {
-        const newSet = new Set(get(resultOutput, path))
-        newSet.delete(args[0])
-        set(resultOutput, path, Array.from(newSet))
-        break
-      }
-      case 'reorderCollection': {
-        const [value, movement] = args
-        set(
-          resultOutput,
-          path,
-          _moveItemInArray(get(resultOutput, path), value, movement),
-        )
-        break
-      }
-      default:
+  totalJournal
+    .filter(({ path, operation, args }) => {
+      const entry = path.split('.')[1]
+      if (operation === 'unset') return ROOT_CONFIG[entry] !== undefined
+
+      if (operation !== 'set') return true
+
+      const definition = path.startsWith('simple.muteFilters')
+        ? { default: {} }
+        : ROOT_CONFIG_DEFINITIONS[entry]
+
+      const finalValue = validateSetting({
+        path,
+        value: args[0],
+        definition,
+        throwError: false,
+        defaultState: ROOT_CONFIG,
+      })
+
+      return finalValue !== undefined
+    })
+    .forEach(({ path, operation, args }) => {
+      if (path.startsWith('_')) {
         throw new Error(
-          `Unknown journal operation: '${operation}', did we forget to run reverse migrations beforehand?`,
+          `journal contains entry to edit internal (starts with _) field '${path}', something is incorrect here, ignoring.`,
         )
-    }
-  })
+      }
+      switch (operation) {
+        case 'set': {
+          if (path.startsWith('collections')) {
+            return console.error('Illegal operation "set" on a collection')
+          }
+          if (path.split(/\./g).length <= 1) {
+            return console.error(
+              `Calling set on depth <= 1 (path: ${path}) is not allowed`,
+            )
+          }
+          set(resultOutput, path, args[0])
+          break
+        }
+        case 'unset':
+          if (path.startsWith('collections')) {
+            return console.error('Illegal operation "unset" on a collection')
+          }
+          if (path.split(/\./g).length <= 2) {
+            return console.error(
+              `Calling unset on depth <= 2 (path: ${path})  is not allowed`,
+            )
+          }
+          unset(resultOutput, path)
+          break
+        case 'addToCollection':
+          if (!path.startsWith('collections')) {
+            return console.error(
+              'Illegal operation "addToCollection" on a non-collection',
+            )
+          }
+          set(
+            resultOutput,
+            path,
+            Array.from(new Set(get(resultOutput, path)).add(args[0])),
+          )
+          break
+        case 'removeFromCollection': {
+          if (!path.startsWith('collections')) {
+            return console.error(
+              'Illegal operation "removeFromCollection" on a non-collection',
+            )
+          }
+          const newSet = new Set(get(resultOutput, path))
+          newSet.delete(args[0])
+          set(resultOutput, path, Array.from(newSet))
+          break
+        }
+        case 'reorderCollection': {
+          const [value, movement] = args
+          set(
+            resultOutput,
+            path,
+            _moveItemInArray(get(resultOutput, path), value, movement),
+          )
+          break
+        }
+        default:
+          return console.error(
+            `Unknown journal operation: '${operation}', did we forget to run reverse migrations beforehand?`,
+          )
+      }
+    })
   return { ...resultOutput, _journal: totalJournal }
 }
 
@@ -358,31 +413,45 @@ export const _resetFlags = (
         result[flag] = 0
       })
     }
-  } else if (totalFlags.reset > 0 && totalFlags.reset < 9000) {
-    console.debug('Received command to reset the flags')
-    allFlagKeys.forEach((flag) => {
-      result[flag] = 0
-    })
   }
   result.reset = 0
   return result
 }
 
-export const _doMigrations = (cache) => {
-  if (!cache) return cache
+const _resetPrefs = (
+  totalPrefs,
+  totalFlags,
+  knownKeys = defaultState.flagStorage,
+) => {
+  // prefs reset functionality
+  if (
+    totalFlags.reset >= COMMAND_WIPE_JOURNAL &&
+    totalFlags.reset <= COMMAND_WIPE_JOURNAL_AND_STORAGE
+  ) {
+    console.debug('Received command to reset journals')
+    this.flagStorage.reset = COMMAND_WIPE_JOURNAL
+    this.prefsStorage._journal = []
+    this.cache.prefsStorage._journal = []
+    this.raw.prefsStorage._journal = []
+    this.pushSyncConfig()
+    if (totalFlags.reset === COMMAND_WIPE_JOURNAL_AND_STORAGE) {
+      console.debug('Received command to reset storage')
+      return cloneDeep(defaultState)
+    }
+  }
+  return totalPrefs
+}
 
-  if (cache._version < VERSION) {
+const _doMigrations = async (data, setPreference) => {
+  if (data._version < VERSION) {
     console.debug(
-      'Local cached data has older version, seeing if there any migrations that can be applied',
+      'Data has older version, seeing if there any migrations that can be applied',
     )
-
-    // no migrations right now since we only have one version
-    console.debug('No migrations found')
   }
 
-  if (cache._version > VERSION) {
+  if (data._version > VERSION) {
     console.debug(
-      'Local cached data has newer version, seeing if there any reverse migrations that can be applied',
+      'Data has newer version, seeing if there any reverse migrations that can be applied',
     )
 
     // no reverse migrations right now but we leave a possibility of loading a hotpatch if need be
@@ -391,18 +460,18 @@ export const _doMigrations = (cache) => {
         console.debug('Found hotpatch migration, applying')
         return window._PLEROMA_HOTPATCH.reverseMigrations.call(
           {},
-          'serverSideStorage',
-          { from: cache._version, to: VERSION },
-          cache,
+          'syncConfigStore',
+          { from: data._version, to: VERSION },
+          data,
         )
       }
     }
   }
 
-  return cache
+  return data
 }
 
-export const useServerSideStorageStore = defineStore('serverSideStorage', {
+export const useSyncConfigStore = defineStore('sync_config', {
   state() {
     return cloneDeep(defaultState)
   },
@@ -411,16 +480,21 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
       this.flagStorage[flag] = value
       this.dirty = true
     },
+    setSimplePrefAndSave({ path, value }) {
+      this.setPreference({ path: `simple.${path}`, value })
+      this.pushSyncConfig()
+    },
+    unsetSimplePrefAndSave({ path }) {
+      this.unsetPreference({ path: `simple.${path}` })
+      this.pushSyncConfig()
+    },
     setPreference({ path, value }) {
       if (path.startsWith('_')) {
         throw new Error(
           `Tried to edit internal (starts with _) field '${path}', ignoring.`,
         )
       }
-      if (
-        path.startsWith('collections') ||
-        path.startsWith('objectCollections')
-      ) {
+      if (path.startsWith('collections')) {
         throw new Error(
           `Invalid operation 'set' for collection field '${path}', ignoring.`,
         )
@@ -435,7 +509,23 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
           `Calling set on depth > 3 (path: ${path})  is not allowed`,
         )
       }
-      set(this.prefsStorage, path, value)
+
+      if (path.startsWith('collections.')) return value
+
+      const definition = path.startsWith('simple.muteFilters')
+        ? { default: {} }
+        : ROOT_CONFIG_DEFINITIONS[path.split('.')[1]]
+
+      const finalValue = validateSetting({
+        path,
+        value,
+        definition,
+        throwError: false,
+        defaultState: ROOT_CONFIG,
+      })
+
+      if (finalValue !== undefined) set(this.prefsStorage, path, finalValue)
+
       this.prefsStorage._journal = [
         ...this.prefsStorage._journal,
         { operation: 'set', path, args: [value], timestamp: Date.now() },
@@ -448,10 +538,7 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
           `Tried to edit internal (starts with _) field '${path}', ignoring.`,
         )
       }
-      if (
-        path.startsWith('collections') ||
-        path.startsWith('objectCollections')
-      ) {
+      if (path.startsWith('collections')) {
         throw new Error(
           `Invalid operation 'unset' for collection field '${path}', ignoring.`,
         )
@@ -466,7 +553,7 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
           `Calling unset on depth > 3 (path: ${path})  is not allowed`,
         )
       }
-      unset(this.prefsStorage, path, value)
+      unset(this.prefsStorage, path)
       this.prefsStorage._journal = [
         ...this.prefsStorage._journal,
         { operation: 'unset', path, args: [], timestamp: Date.now() },
@@ -483,15 +570,6 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
         const collection = new Set(get(this.prefsStorage, path))
         collection.add(value)
         set(this.prefsStorage, path, [...collection])
-      } else if (path.startsWith('objectCollections')) {
-        const { _key } = value
-        if (!_key && typeof _key !== 'string') {
-          throw new Error('Object for storage is missing _key field!')
-        }
-        const collection = new Set(get(this.prefsStorage, path + '.index'))
-        collection.add(_key)
-        set(this.prefsStorage, path + '.index', [...collection])
-        set(this.prefsStorage, path + '.data.' + _key, value)
       }
       this.prefsStorage._journal = [
         ...this.prefsStorage._journal,
@@ -510,19 +588,24 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
           `tried to edit internal (starts with _) field '${path}', ignoring.`,
         )
       }
-      const collection = new Set(get(this.prefsStorage, path))
-      collection.delete(value)
-      set(this.prefsStorage, path, [...collection])
-      this.prefsStorage._journal = [
-        ...this.prefsStorage._journal,
-        {
-          operation: 'removeFromCollection',
-          path,
-          args: [value],
-          timestamp: Date.now(),
-        },
-      ]
-      this.dirty = true
+
+      const { _key } = value
+      if (path.startsWith('collection')) {
+        const collection = new Set(get(this.prefsStorage, path))
+        collection.delete(value)
+        set(this.prefsStorage, path, [...collection])
+
+        this.prefsStorage._journal = [
+          ...this.prefsStorage._journal,
+          {
+            operation: 'removeFromCollection',
+            path,
+            args: [value],
+            timestamp: Date.now(),
+          },
+        ]
+        this.dirty = true
+      }
     },
     reorderCollectionPreference({ path, value, movement }) {
       if (path.startsWith('_')) {
@@ -554,25 +637,24 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
         username,
       )
     },
-    clearServerSideStorage() {
+    clearSyncConfig() {
       const blankState = { ...cloneDeep(defaultState) }
       Object.keys(this).forEach((k) => {
         this[k] = blankState[k]
       })
+      this.flagStorage.reset = COMMAND_WIPE_JOURNAL_AND_STORAGE
     },
-    setServerSideStorage(userData) {
+    async initSyncConfig(userData) {
       const live = userData.storage
       this.raw = live
       let cache = this.cache
-      if (cache && cache._user !== userData.fqn) {
+      if (cache?._user !== userData.fqn) {
         console.warn(
           'Cache belongs to another user! reinitializing local cache!',
         )
         cache = null
       }
 
-      cache = _doMigrations(cache)
-
       let { recent, stale, needUpload } = _getRecentData(cache, live)
 
       const userNew = userData.created_at > NEW_USER_DATE
@@ -589,12 +671,87 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
         })
       }
 
+      recent = recent && (await _doMigrations(recent, this.setPreference))
+      stale = stale && (await _doMigrations(stale, this.setPreference))
+
+      // Various migrations
+      console.debug('Migrating from old config')
+      const vuexState = (await storage.getItem('vuex-lz')) ?? {}
+      const config = vuexState.config ?? {}
+
+      const migratedEntries = new Set(config._syncMigration ?? [])
+      console.debug(
+        `Already migrated Values: ${[...migratedEntries].join() || '[none]'}`,
+      )
+
+      const { configMigration } = useSyncConfigStore().flagStorage
+
+      Object.entries(oldDefaultConfigSync).forEach(([key, value]) => {
+        const oldValue = config[key]
+        const defaultValue = value
+
+        const present = oldValue !== undefined
+        const migrated = migratedEntries.has(key)
+        const different = !isEqual(oldValue, defaultValue)
+
+        if (present && !migrated && different) {
+          console.debug(`Migrating config ${key}: ${oldValue}`)
+          if (key === 'theme3hacks') {
+            useLocalConfigStore().set({
+              path: 'fontInterface',
+              value: oldValue.fonts.interface,
+            })
+            useLocalConfigStore().set({
+              path: 'fontInput',
+              value: oldValue.fonts.input,
+            })
+            useLocalConfigStore().set({
+              path: 'fontPost',
+              value: oldValue.fonts.post,
+            })
+            useLocalConfigStore().set({
+              path: 'fontMonospace',
+              value: oldValue.fonts.monospace,
+            })
+            useSyncConfigStore().setSimplePrefAndSave({
+              path: 'underlay',
+              value: oldValue.underlay,
+            })
+          } else if (key == 'muteWords') {
+            oldValue.forEach((word, order) => {
+              const uniqueId = uuidv4()
+
+              useSyncConfigStore().setPreference({
+                path: 'simple.muteFilters.' + uniqueId,
+                value: {
+                  type: 'word',
+                  value: word,
+                  name: word,
+                  enabled: true,
+                  expires: null,
+                  hide: false,
+                  order,
+                },
+              })
+            })
+          } else {
+            this.setPreference({ path: `simple.${key}`, value: oldValue })
+          }
+          migratedEntries.add(key)
+          needUpload = true
+        }
+      })
+
+      config._syncMigration = [...migratedEntries]
+      vuexState.config = config
+      storage.setItem('vuex-lz', vuexState)
+
       if (!needUpload && recent && stale) {
         console.debug('Checking if data needs merging...')
         // discarding timestamps and versions
         const { _timestamp: _0, _version: _1, ...recentData } = recent
         const { _timestamp: _2, _version: _3, ...staleData } = stale
-        dirty = !isEqual(recentData, staleData)
+        dirty = sum(recentData) !== sum(staleData)
         console.debug(`Data ${dirty ? 'needs' : "doesn't need"} merging`)
       }
 
@@ -613,6 +770,7 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
         totalPrefs = recent.prefsStorage
       }
 
+      totalPrefs = _resetPrefs(totalPrefs, totalFlags)
       totalFlags = _resetFlags(totalFlags)
 
       recent.flagStorage = { ...flagsTemplate, ...totalFlags }
@@ -626,18 +784,39 @@ export const useServerSideStorageStore = defineStore('serverSideStorage', {
       }
       this.flagStorage = this.cache.flagStorage
       this.prefsStorage = this.cache.prefsStorage
+      this.pushSyncConfig()
     },
-    pushServerSideStorage({ force = false } = {}) {
+    pushSyncConfig({ force = false } = {}) {
       const needPush = this.dirty || force
       if (!needPush) return
       this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
       const params = { pleroma_settings_store: { 'pleroma-fe': this.cache } }
-      window.vuex.state.api.backendInteractor
-        .updateProfileJSON({ params })
-        .then((user) => {
-          this.setServerSideStorage(user)
-          this.dirty = false
+      window.vuex.state.api.backendInteractor.updateProfileJSON({ params })
+    },
+  },
+  persist: {
+    afterLoad(state) {
+      console.debug('Validating persisted state of SyncConfig')
+      const newState = { ...state }
+      const newEntries = Object.entries(ROOT_CONFIG).map(([path, value]) => {
+        const definition = ROOT_CONFIG_DEFINITIONS[path]
+        const finalValue = validateSetting({
+          path,
+          value: newState.prefsStorage.simple[path],
+          definition,
+          throwError: false,
+          validateObjects: false,
+          defaultState: ROOT_CONFIG,
         })
+
+        return finalValue === undefined
+          ? [path, definition.default]
+          : [path, finalValue]
+      })
+      newState.prefsStorage.simple = Object.fromEntries(
+        newEntries.filter((_) => _),
+      )
+      return newState
     },
   },
 })
diff --git a/src/stores/user_highlight.js b/src/stores/user_highlight.js
new file mode 100644
index 000000000..5ca13b6a9
--- /dev/null
+++ b/src/stores/user_highlight.js
@@ -0,0 +1,357 @@
+import {
+  merge as _merge,
+  clamp,
+  clone,
+  cloneDeep,
+  findLastIndex,
+  flatten,
+  get,
+  groupBy,
+  isEqual,
+  takeRight,
+  uniqWith,
+} from 'lodash'
+import { defineStore } from 'pinia'
+import { toRaw } from 'vue'
+
+import { storage } from 'src/lib/storage.js'
+
+export const NEW_USER_DATE = new Date('2022-08-04') // date of writing this, basically
+
+export const defaultState = {
+  // do we need to update data on server?
+  dirty: false,
+  highlight: {
+    _journal: [],
+  },
+  // raw data
+  raw: null,
+  // local cache
+  cache: null,
+}
+
+export const _moveItemInArray = (array, value, movement) => {
+  const oldIndex = array.indexOf(value)
+  const newIndex = oldIndex + movement
+  const newArray = [...array]
+  // remove old
+  newArray.splice(oldIndex, 1)
+  // add new
+  newArray.splice(clamp(newIndex, 0, newArray.length + 1), 0, value)
+  return newArray
+}
+
+const _wrapData = (data, userName) => {
+  return {
+    ...data,
+    _user: userName,
+    _timestamp: Date.now(),
+  }
+}
+
+const _checkValidity = (data) => data._timestamp > 0
+
+const _verifyHighlights = (state) => {
+  state.highlight = state.highlight || {}
+
+  // Simple
+  Object.entries(defaultState.highlight).forEach(([k, v]) => {
+    if (typeof v === 'undefined') return
+    if (typeof v === 'object') return
+    console.warn(`User highlight ${k} is invalid type ${typeof v}, unsetting`)
+    delete state.highlight[k]
+  })
+}
+
+export const _getRecentData = (cache, live, isTest) => {
+  const result = { recent: null, stale: null, needUpload: false }
+  const cacheValid = _checkValidity(cache || {})
+  const liveValid = _checkValidity(live || {})
+  if (!liveValid && cacheValid) {
+    result.needUpload = true
+    console.debug(
+      '[HIGHLIGHT] Nothing valid stored on server, assuming cache to be source of truth',
+    )
+    result.recent = cache
+    result.stale = live
+  } else if (!cacheValid && liveValid) {
+    console.debug(
+      '[HIGHLIGHT] Valid storage on server found, no local cache found, using live as source of truth',
+    )
+    result.recent = live
+    result.stale = cache
+  } else if (cacheValid && liveValid) {
+    console.debug(
+      '[HIGHLIGHT] Both sources have valid data, figuring things out...',
+    )
+    if (live._timestamp === cache._timestamp) {
+      console.debug(
+        '[HIGHLIGHT] Same timestamp on both sources, source of truth irrelevant',
+      )
+      result.recent = cache
+      result.stale = live
+    } else {
+      console.debug(
+        '[HIGHLIGHT] Different timestamp, figuring out which one is more recent',
+      )
+      if (live._timestamp < cache._timestamp) {
+        result.recent = cache
+        result.stale = live
+      } else {
+        result.recent = live
+        result.stale = cache
+      }
+    }
+  } else {
+    console.debug('[HIGHLIGHT] Both sources are invalid, start from scratch')
+    result.needUpload = true
+  }
+
+  const merge = (a, b) => {
+    return {
+      _user: a._user ?? b._user,
+      _timestamp: a._timestamp ?? b._timestamp,
+      needUpload: b.needUpload ?? a.needUpload,
+      highlight: _merge(cloneDeep(a.highlight), b.highlight),
+    }
+  }
+
+  result.recent = isTest
+    ? result.recent
+    : result.recent && merge(defaultState, result.recent)
+
+  result.stale = isTest
+    ? result.stale
+    : result.stale && merge(defaultState, result.stale)
+
+  return result
+}
+
+const _mergeJournal = (...journals) => {
+  // Ignore invalid journal entries
+  const allJournals = flatten(
+    journals.map((j) => (Array.isArray(j) ? j : [])),
+  ).filter(
+    (entry) =>
+      Object.hasOwn(entry, 'user') &&
+      Object.hasOwn(entry, 'operation') &&
+      Object.hasOwn(entry, 'args') &&
+      Object.hasOwn(entry, 'timestamp'),
+  )
+  const grouped = groupBy(allJournals, 'user')
+  const trimmedGrouped = Object.entries(grouped).map(([user, journal]) => {
+    // side effect
+    journal.sort((a, b) => (a.timestamp > b.timestamp ? 1 : -1))
+
+    return takeRight(journal)
+  })
+  return flatten(trimmedGrouped).sort((a, b) =>
+    a.timestamp > b.timestamp ? 1 : -1,
+  )
+}
+
+export const _mergeHighlights = (recent, stale) => {
+  if (!stale) return recent
+  if (!recent) return stale
+  const { _journal: recentJournal, ...recentHighlight } = recent
+  const { _journal: staleJournal } = stale
+  /** Journal entry format:
+   * user: user to entry in highlight storage
+   * timestamp: timestamp of the change
+   * operation: operation type
+   * arguments: array of arguments, depends on operation type
+   *
+   * currently only supported operation type is "set" which just sets the value
+   * to requested one. Intended only to be used with simple preferences (boolean, number)
+   */
+  const resultHighlight = { ...recentHighlight }
+  const Journal = _mergeJournal(staleJournal, recentJournal)
+  Journal.forEach(({ user, operation, args }) => {
+    if (user.startsWith('_')) {
+      throw new Error(
+        `journal contains entry to edit internal (starts with _) field '${user}', something is incorrect here, ignoring.`,
+      )
+    }
+    switch (operation) {
+      case 'set':
+        resultHighlight[user] = args[0]
+        break
+      case 'unset':
+        delete resultHighlight[user]
+        break
+      default:
+        return console.error(`Unknown journal operation: '${operation}'`)
+    }
+  })
+  return { ...resultHighlight, _journal: Journal }
+}
+
+export const useUserHighlightStore = defineStore('user_highlight', {
+  state() {
+    return cloneDeep(defaultState)
+  },
+  actions: {
+    setAndSave({ user, value }) {
+      this.set({ user, value })
+      this.pushHighlight()
+    },
+    unsetAndSave({ user }) {
+      this.unset({ user })
+      this.pushHighlight()
+    },
+    get(user) {
+      const present = this.highlight[user] || {}
+      return {
+        user,
+        type: 'disabled',
+        color: '#FFFFFF',
+        ...present,
+      }
+    },
+    set({ user, value }) {
+      if (user.startsWith('_')) {
+        throw new Error(
+          `Tried to edit internal (starts with _) field '${user}', ignoring.`,
+        )
+      }
+      const oldValue = this.highlight[user]
+      const newValue = {
+        user,
+        ...oldValue,
+        ...value,
+      }
+      this.highlight[user] = newValue
+      this.highlight._journal = [
+        ...this.highlight._journal,
+        { operation: 'set', user, args: [newValue], timestamp: Date.now() },
+      ]
+      this.dirty = true
+    },
+    unset({ user, value }) {
+      if (user.startsWith('_')) {
+        throw new Error(
+          `Tried to edit internal (starts with _) field '${user}', ignoring.`,
+        )
+      }
+      delete this.highlight[user]
+      this.highlight._journal = [
+        ...this.highlight._journal,
+        { operation: 'unset', user, args: [], timestamp: Date.now() },
+      ]
+      this.dirty = true
+    },
+    updateCache({ username }) {
+      this.highlight._journal = _mergeJournal(this.highlight._journal)
+      this.cache = _wrapData(
+        {
+          highlight: toRaw(this.highlight),
+        },
+        username,
+      )
+    },
+    clearSyncConfig() {
+      const blankState = { ...cloneDeep(defaultState) }
+      Object.keys(this).forEach((k) => {
+        this[k] = blankState[k]
+      })
+    },
+    clearJournals() {
+      this.highlight._journal = []
+      this.cache.highlight._journal = []
+      this.raw.highlight._journal = []
+      this.pushSyncConfig()
+    },
+    async initUserHighlight(userData) {
+      const live = userData.user_highlight
+      this.raw = live
+      let cache = this.cache
+      if (cache?._user !== userData.fqn) {
+        console.warn(
+          'Cache belongs to another user! reinitializing local cache!',
+        )
+        cache = null
+      }
+
+      let { recent, stale, needUpload } = _getRecentData(cache, live)
+
+      const userNew = userData.created_at > NEW_USER_DATE
+      let dirty = false
+
+      const vuexState = (await storage.getItem('vuex-lz')) ?? {}
+      const config = vuexState.config ?? {}
+      const highlight = config.highlight ?? {}
+
+      Object.entries(highlight).forEach(([user, value]) => {
+        if ((highlight[user]._migrated || 0) < 1) {
+          dirty = true
+          needUpload = true
+          this.set({ user, value: clone(value) })
+          highlight[user]._migrated = 1
+          console.debug(
+            `[HIGHLIGHT] Migrating user ${user}: ${JSON.stringify(value)}`,
+          )
+        }
+      })
+      storage.setItem('vuex-lz', { ...vuexState, config: { ...config, highlight } })
+
+      if (recent === null) {
+        console.debug(
+          `[HIGHLIGHT] Data is empty, initializing for ${userNew ? 'new' : 'existing'} user`,
+        )
+        recent = _wrapData({
+          highlight: { ...defaultState.highlight },
+        })
+      }
+
+      if (!needUpload && recent && stale) {
+        console.debug('[HIGHLIGHT] Checking if data needs merging...')
+        // discarding timestamps
+        const { _timestamp: _0, ...recentData } = recent
+        const { _timestamp: _2, ...staleData } = stale
+        dirty = !isEqual(recentData, staleData)
+        console.debug(
+          `[HIGHLIGHT] Data ${dirty ? 'needs' : "doesn't need"} merging`,
+        )
+      }
+
+      let highlights
+      if (dirty) {
+        console.debug('[HIGHLIGHT] Merging the data...')
+        _verifyHighlights(recent)
+        _verifyHighlights(stale)
+        highlights = _mergeHighlights(recent.highlight, stale.highlight)
+      } else {
+        highlights = recent.highlight
+      }
+
+      recent.highlight = { ...defaultState.highlight, ...highlights }
+
+      this.dirty = dirty || needUpload
+      this.cache = recent
+      // set local timestamp to smaller one if we don't have any changes
+      if (stale && recent && !this.dirty) {
+        this.cache._timestamp = Math.min(stale._timestamp, recent._timestamp)
+      }
+      this.highlight = this.cache.highlight
+    },
+    pushHighlight({ force = false } = {}) {
+      const needPush = this.dirty || force
+      if (!needPush) return
+      this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
+      const params = {
+        pleroma_settings_store: { user_highlight: this.cache },
+      }
+      window.vuex.state.api.backendInteractor
+        .updateProfileJSON({ params })
+        .then((user) => {
+          this.initUserHighlight(user)
+          this.dirty = false
+        })
+    },
+  },
+  persist: {
+    afterLoad(state) {
+      return state
+    },
+  },
+})
diff --git a/src/sw.js b/src/sw.js
index 38a2fe7b2..1e7abd3de 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -4,11 +4,11 @@ import 'virtual:pleroma-fe/service_worker_env'
 
 import { createI18n } from 'vue-i18n'
 
-import { parseNotification } from './services/entity_normalizer/entity_normalizer.service.js'
-import { prepareNotificationObject } from './services/notification_utils/notification_utils.js'
-import { cacheKey, emojiCacheKey, shouldCache } from './services/sw/sw.js'
-
 import { storage } from 'src/lib/storage.js'
+import { INSTANCE_DEFAULT_CONFIG } from 'src/modules/default_config_state.js'
+import { parseNotification } from 'src/services/entity_normalizer/entity_normalizer.service.js'
+import { prepareNotificationObject } from 'src/services/notification_utils/notification_utils.js'
+import { cacheKey, emojiCacheKey, shouldCache } from 'src/services/sw/sw.js'
 
 // Collects all messages for service workers
 // Needed because service workers cannot use dynamic imports
@@ -35,14 +35,15 @@ function getWindowClients() {
 }
 
 const setSettings = async () => {
-  const vuexState = await storage.getItem('vuex-lz')
-  const locale = vuexState.config.interfaceLanguage || 'en'
+  const piniaState = await storage.getItem('pinia-local-sync_config')
+  const locale = piniaState.prefsStorage.simple.interfaceLanguage || 'en'
   i18n.locale = locale
   const notificationsNativeArray = Object.entries(
-    vuexState.config.notificationNative,
+    piniaState.prefsStorage.simple.notificationNative ||
+      INSTANCE_DEFAULT_CONFIG.notificationNative,
   )
   state.webPushAlwaysShowNotifications =
-    vuexState.config.webPushAlwaysShowNotifications
+    piniaState.prefsStorage.simple.webPushAlwaysShowNotifications
 
   state.allowedNotificationTypes = new Set(
     notificationsNativeArray
diff --git a/test/unit/specs/components/draft.spec.js b/test/unit/specs/components/draft.spec.js
index 7bc053f52..6abf2d75b 100644
--- a/test/unit/specs/components/draft.spec.js
+++ b/test/unit/specs/components/draft.spec.js
@@ -1,10 +1,13 @@
 import { createTestingPinia } from '@pinia/testing'
 import { flushPromises, mount } from '@vue/test-utils'
+import { setActivePinia } from 'pinia'
 import { nextTick } from 'vue'
 
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import { $t, mountOpts, waitForEvent } from '../../../fixtures/setup_test'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 const autoSaveOrNot = (caseFn, caseTitle, runFn) => {
   caseFn(`${caseTitle} with auto-save`, function () {
     return runFn.bind(this)(true)
@@ -36,17 +39,19 @@ afterEach(() => {
 })
 
 describe('Draft saving', () => {
-  createTestingPinia()
+  beforeEach(() => {
+    setActivePinia(createTestingPinia())
+  })
 
   autoSaveOrNot(
     it,
     'should save when the button is clicked',
     async (autoSave) => {
       const wrapper = mount(PostStatusForm, mountOpts())
-      await wrapper.vm.$store.dispatch('setOption', {
-        name: 'autoSaveDraft',
-        value: autoSave,
-      })
+      const store = useMergedConfigStore()
+      store.mergedConfig = {
+        autoSaveDraft: autoSave,
+      }
       expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
 
       const textarea = wrapper.get('textarea')
@@ -63,10 +68,10 @@ describe('Draft saving', () => {
   it('should auto-save if it is enabled', async function () {
     vi.useFakeTimers()
     const wrapper = mount(PostStatusForm, mountOpts())
-    await wrapper.vm.$store.dispatch('setOption', {
-      name: 'autoSaveDraft',
-      value: true,
-    })
+    const store = useMergedConfigStore()
+    store.mergedConfig = {
+      autoSaveDraft: true,
+    }
     expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
     const textarea = wrapper.get('textarea')
     await textarea.setValue('mew mew')
@@ -86,10 +91,10 @@ describe('Draft saving', () => {
         },
       }),
     )
-    await wrapper.vm.$store.dispatch('setOption', {
-      name: 'autoSaveDraft',
-      value: true,
-    })
+    const store = useMergedConfigStore()
+    store.mergedConfig = {
+      autoSaveDraft: true,
+    }
     expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
     const textarea = wrapper.get('textarea')
     await textarea.setValue('mew mew')
@@ -107,14 +112,11 @@ describe('Draft saving', () => {
         },
       }),
     )
-    await wrapper.vm.$store.dispatch('setOption', {
-      name: 'autoSaveDraft',
-      value: false,
-    })
-    await wrapper.vm.$store.dispatch('setOption', {
-      name: 'unsavedPostAction',
-      value: 'save',
-    })
+    const store = useMergedConfigStore()
+    store.mergedConfig = {
+      autoSaveDraft: false,
+      unsavedPostAction: 'save',
+    }
     expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
     const textarea = wrapper.get('textarea')
     await textarea.setValue('mew mew')
@@ -132,14 +134,11 @@ describe('Draft saving', () => {
         },
       }),
     )
-    await wrapper.vm.$store.dispatch('setOption', {
-      name: 'autoSaveDraft',
-      value: false,
-    })
-    await wrapper.vm.$store.dispatch('setOption', {
-      name: 'unsavedPostAction',
-      value: 'discard',
-    })
+    const store = useMergedConfigStore()
+    store.mergedConfig = {
+      autoSaveDraft: false,
+      unsavedPostAction: 'discard',
+    }
     expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
     const textarea = wrapper.get('textarea')
     await textarea.setValue('mew mew')
@@ -157,14 +156,11 @@ describe('Draft saving', () => {
         },
       }),
     )
-    await wrapper.vm.$store.dispatch('setOption', {
-      name: 'autoSaveDraft',
-      value: false,
-    })
-    await wrapper.vm.$store.dispatch('setOption', {
-      name: 'unsavedPostAction',
-      value: 'confirm',
-    })
+    const store = useMergedConfigStore(createTestingPinia())
+    store.mergedConfig = {
+      autoSaveDraft: false,
+      unsavedPostAction: 'confirm',
+    }
     expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
     const textarea = wrapper.get('textarea')
     await textarea.setValue('mew mew')
diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js
index 032e7e9b6..6a7c67fdb 100644
--- a/test/unit/specs/components/emoji_input.spec.js
+++ b/test/unit/specs/components/emoji_input.spec.js
@@ -7,18 +7,13 @@ createTestingPinia()
 
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
+
 const generateInput = (value, padEmoji = true) => {
   const wrapper = shallowMount(EmojiInput, {
     global: {
       renderStubDefaultSlot: true,
       mocks: {
-        $store: {
-          getters: {
-            mergedConfig: {
-              padEmoji,
-            },
-          },
-        },
         $t: (msg) => msg,
       },
       stubs: {
@@ -49,6 +44,12 @@ const generateInput = (value, padEmoji = true) => {
 }
 
 describe('EmojiInput', () => {
+  beforeEach(() => {
+    const store = useMergedConfigStore(createTestingPinia())
+    store.mergedConfig = {
+      padEmoji: true,
+    }
+  })
   describe('insertion mechanism', () => {
     it('inserts string at the end with trailing space', () => {
       const initialString = 'Testing'
@@ -112,6 +113,10 @@ describe('EmojiInput', () => {
     it('inserts string without any padding if padEmoji setting is set to false', () => {
       const initialString = 'Eat some spam!'
       const wrapper = generateInput(initialString, false)
+      const store = useMergedConfigStore(createTestingPinia())
+      store.mergedConfig = {
+        padEmoji: false,
+      }
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length, keepOpen: false })
@@ -147,6 +152,10 @@ describe('EmojiInput', () => {
     it('correctly sets caret after insertion if padEmoji setting is set to false', async () => {
       const initialString = '1234'
       const wrapper = generateInput(initialString, false)
+      const store = useMergedConfigStore(createTestingPinia())
+      store.mergedConfig = {
+        padEmoji: false,
+      }
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
diff --git a/test/unit/specs/components/gallery.spec.js b/test/unit/specs/components/gallery.spec.js
index 941110e78..367bab0b4 100644
--- a/test/unit/specs/components/gallery.spec.js
+++ b/test/unit/specs/components/gallery.spec.js
@@ -21,57 +21,57 @@ describe('Gallery', () => {
 
   it('one audio attachment', () => {
     local = {
-      attachments: [{ mimetype: 'audio/mpeg' }],
+      attachments: [{ type: 'audio' }],
     }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { audio: true, items: [{ type: 'audio' }] },
     ])
   })
 
   it('one image attachment', () => {
     local = {
-      attachments: [{ mimetype: 'image/png' }],
+      attachments: [{ type: 'image' }],
     }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { items: [{ mimetype: 'image/png' }] },
+      { items: [{ type: 'image' }] },
     ])
   })
 
   it('one audio attachment and one image attachment', () => {
     local = {
-      attachments: [{ mimetype: 'audio/mpeg' }, { mimetype: 'image/png' }],
+      attachments: [{ type: 'audio' }, { type: 'image' }],
     }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
-      { items: [{ mimetype: 'image/png' }] },
+      { audio: true, items: [{ type: 'audio' }] },
+      { items: [{ type: 'image' }] },
     ])
   })
 
   it('has "size" key set to "hide"', () => {
     let local
     local = {
-      attachments: [{ mimetype: 'audio/mpeg' }],
+      attachments: [{ type: 'audio' }],
       size: 'hide',
     }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { minimal: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { minimal: true, items: [{ type: 'audio' }] },
     ])
 
     local = {
       attachments: [
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'audio/mpeg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'audio/mpeg' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/jpg' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'audio' },
+        { type: 'image' },
+        { type: 'audio' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
       ],
       size: 'hide',
     }
@@ -79,186 +79,166 @@ describe('Gallery', () => {
     // When defining `size: hide`, the `items` aren't
     // grouped and `audio` isn't set
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
-      { minimal: true, items: [{ mimetype: 'image/png' }] },
-      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
-      { minimal: true, items: [{ mimetype: 'audio/mpeg' }] },
-      { minimal: true, items: [{ mimetype: 'image/png' }] },
-      { minimal: true, items: [{ mimetype: 'audio/mpeg' }] },
-      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
-      { minimal: true, items: [{ mimetype: 'image/png' }] },
-      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
+      { minimal: true, items: [{ type: 'image' }] },
+      { minimal: true, items: [{ type: 'image' }] },
+      { minimal: true, items: [{ type: 'image' }] },
+      { minimal: true, items: [{ type: 'audio' }] },
+      { minimal: true, items: [{ type: 'image' }] },
+      { minimal: true, items: [{ type: 'audio' }] },
+      { minimal: true, items: [{ type: 'image' }] },
+      { minimal: true, items: [{ type: 'image' }] },
+      { minimal: true, items: [{ type: 'image' }] },
     ])
   })
 
   // types other than image or audio should be `minimal`
-  it('non-image/audio', () => {
+  it('non-image', () => {
     let local
     local = {
-      attachments: [{ mimetype: 'plain/text' }],
+      attachments: [{ type: 'plain' }],
     }
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { minimal: true, items: [{ mimetype: 'plain/text' }] },
+      { minimal: true, items: [{ type: 'plain' }] },
     ])
 
-    // No grouping of non-image/audio items
+    // No grouping of non-image items
     local = {
-      attachments: [
-        { mimetype: 'plain/text' },
-        { mimetype: 'plain/text' },
-        { mimetype: 'plain/text' },
-      ],
+      attachments: [{ type: 'plain' }, { type: 'plain' }, { type: 'plain' }],
     }
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { minimal: true, items: [{ mimetype: 'plain/text' }] },
-      { minimal: true, items: [{ mimetype: 'plain/text' }] },
-      { minimal: true, items: [{ mimetype: 'plain/text' }] },
+      { minimal: true, items: [{ type: 'plain' }] },
+      { minimal: true, items: [{ type: 'plain' }] },
+      { minimal: true, items: [{ type: 'plain' }] },
     ])
 
     local = {
       attachments: [
-        { mimetype: 'image/png' },
-        { mimetype: 'plain/text' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'audio/mpeg' },
+        { type: 'image' },
+        { type: 'plain' },
+        { type: 'image' },
+        { type: 'audio' },
       ],
     }
     // NOTE / TODO: When defining `size: hide`, the `items` aren't
     // grouped and `audio` isn't set
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { items: [{ mimetype: 'image/png' }] },
-      { minimal: true, items: [{ mimetype: 'plain/text' }] },
-      { items: [{ mimetype: 'image/jpg' }] },
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ type: 'image' }] },
+      { minimal: true, items: [{ type: 'plain' }] },
+      { items: [{ type: 'image' }] },
+      { audio: true, items: [{ type: 'audio' }] },
     ])
   })
 
   it('mixed attachments', () => {
     local = {
       attachments: [
-        { mimetype: 'audio/mpeg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'audio/mpeg' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/jpg' },
+        { type: 'audio' },
+        { type: 'image' },
+        { type: 'audio' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
       ],
     }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
-      { items: [{ mimetype: 'image/png' }] },
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { audio: true, items: [{ type: 'audio' }] },
+      { items: [{ type: 'image' }] },
+      { audio: true, items: [{ type: 'audio' }] },
       {
         items: [
-          { mimetype: 'image/jpg' },
-          { mimetype: 'image/png' },
-          { mimetype: 'image/jpg' },
-          { mimetype: 'image/jpg' },
+          { type: 'image' },
+          { type: 'image' },
+          { type: 'image' },
+          { type: 'image' },
         ],
       },
     ])
 
     local = {
       attachments: [
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'audio/mpeg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'audio/mpeg' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'audio' },
+        { type: 'image' },
+        { type: 'audio' },
       ],
     }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
       {
-        items: [
-          { mimetype: 'image/jpg' },
-          { mimetype: 'image/png' },
-          { mimetype: 'image/jpg' },
-        ],
+        items: [{ type: 'image' }, { type: 'image' }, { type: 'image' }],
       },
-      { items: [{ mimetype: 'image/jpg' }] },
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
-      { items: [{ mimetype: 'image/png' }] },
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ type: 'image' }] },
+      { audio: true, items: [{ type: 'audio' }] },
+      { items: [{ type: 'image' }] },
+      { audio: true, items: [{ type: 'audio' }] },
     ])
 
     local = {
       attachments: [
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/jpg' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
       ],
     }
 
     // Group by three-per-row, unless there's one dangling, then stick it on the end of the last row
-    // https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1785#note_98514
+    // https:/.pleroma.social-fe/-_requests#note_98514
     expect(Gallery.computed.rows.call(local)).to.eql([
       {
-        items: [
-          { mimetype: 'image/jpg' },
-          { mimetype: 'image/png' },
-          { mimetype: 'image/jpg' },
-        ],
+        items: [{ type: 'image' }, { type: 'image' }, { type: 'image' }],
       },
       {
         items: [
-          { mimetype: 'image/jpg' },
-          { mimetype: 'image/png' },
-          { mimetype: 'image/png' },
-          { mimetype: 'image/jpg' },
+          { type: 'image' },
+          { type: 'image' },
+          { type: 'image' },
+          { type: 'image' },
         ],
       },
     ])
 
     local = {
       attachments: [
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/png' },
-        { mimetype: 'image/jpg' },
-        { mimetype: 'image/png' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
+        { type: 'image' },
       ],
     }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
       {
-        items: [
-          { mimetype: 'image/jpg' },
-          { mimetype: 'image/png' },
-          { mimetype: 'image/jpg' },
-        ],
+        items: [{ type: 'image' }, { type: 'image' }, { type: 'image' }],
       },
       {
-        items: [
-          { mimetype: 'image/jpg' },
-          { mimetype: 'image/png' },
-          { mimetype: 'image/png' },
-        ],
+        items: [{ type: 'image' }, { type: 'image' }, { type: 'image' }],
       },
-      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }] },
+      { items: [{ type: 'image' }, { type: 'image' }] },
     ])
   })
 
   it('does not do grouping when grid is set', () => {
     const attachments = [
-      { mimetype: 'audio/mpeg' },
-      { mimetype: 'image/png' },
-      { mimetype: 'audio/mpeg' },
-      { mimetype: 'image/jpg' },
-      { mimetype: 'image/png' },
-      { mimetype: 'image/jpg' },
-      { mimetype: 'image/jpg' },
+      { type: 'audio' },
+      { type: 'image' },
+      { type: 'audio' },
+      { type: 'image' },
+      { type: 'image' },
+      { type: 'image' },
+      { type: 'image' },
     ]
 
     local = { grid: true, attachments }
@@ -270,34 +250,34 @@ describe('Gallery', () => {
 
   it('limit is set', () => {
     const attachments = [
-      { mimetype: 'audio/mpeg' },
-      { mimetype: 'image/png' },
-      { mimetype: 'image/jpg' },
-      { mimetype: 'audio/mpeg' },
-      { mimetype: 'image/jpg' },
+      { type: 'audio' },
+      { type: 'image' },
+      { type: 'image' },
+      { type: 'audio' },
+      { type: 'image' },
     ]
 
     let local
     local = { attachments, limit: 2 }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
-      { items: [{ mimetype: 'image/png' }] },
+      { audio: true, items: [{ type: 'audio' }] },
+      { items: [{ type: 'image' }] },
     ])
 
     local = { attachments, limit: 3 }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
-      { items: [{ mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
+      { audio: true, items: [{ type: 'audio' }] },
+      { items: [{ type: 'image' }, { type: 'image' }] },
     ])
 
     local = { attachments, limit: 4 }
 
     expect(Gallery.computed.rows.call(local)).to.eql([
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
-      { items: [{ mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
-      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { audio: true, items: [{ type: 'audio' }] },
+      { items: [{ type: 'image' }, { type: 'image' }] },
+      { audio: true, items: [{ type: 'audio' }] },
     ])
   })
 })
diff --git a/test/unit/specs/services/notification_utils/notification_utils.spec.js b/test/unit/specs/services/notification_utils/notification_utils.spec.js
index baafd8961..20c9379c6 100644
--- a/test/unit/specs/services/notification_utils/notification_utils.spec.js
+++ b/test/unit/specs/services/notification_utils/notification_utils.spec.js
@@ -1,6 +1,21 @@
+import { createTestingPinia } from '@pinia/testing'
+
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
 import * as NotificationUtils from 'src/services/notification_utils/notification_utils.js'
 
 describe('NotificationUtils', () => {
+  beforeEach(() => {
+    const store = useSyncConfigStore(createTestingPinia())
+    store.mergedConfig = {
+      notificationVisibility: {
+        likes: true,
+        repeats: true,
+        mentions: false,
+      },
+    }
+  })
+
   describe('filteredNotificationsFromStore', () => {
     it('should return sorted notifications with configured types', () => {
       const store = {
@@ -25,15 +40,6 @@ describe('NotificationUtils', () => {
             ],
           },
         },
-        getters: {
-          mergedConfig: {
-            notificationVisibility: {
-              likes: true,
-              repeats: true,
-              mentions: false,
-            },
-          },
-        },
       }
       const expected = [
         {
@@ -47,9 +53,13 @@ describe('NotificationUtils', () => {
           type: 'like',
         },
       ]
-      expect(NotificationUtils.filteredNotificationsFromStore(store)).to.eql(
-        expected,
-      )
+      expect(
+        NotificationUtils.filteredNotificationsFromStore(store, {
+          mentions: false,
+          likes: true,
+          repeats: true,
+        }),
+      ).to.eql(expected)
     })
   })
 
@@ -72,15 +82,6 @@ describe('NotificationUtils', () => {
             ],
           },
         },
-        getters: {
-          mergedConfig: {
-            notificationVisibility: {
-              likes: true,
-              repeats: true,
-              mentions: false,
-            },
-          },
-        },
       }
       const expected = [
         {
@@ -89,9 +90,13 @@ describe('NotificationUtils', () => {
           seen: false,
         },
       ]
-      expect(NotificationUtils.unseenNotificationsFromStore(store)).to.eql(
-        expected,
-      )
+      expect(
+        NotificationUtils.unseenNotificationsFromStore(store, {
+          likes: true,
+          repeats: true,
+          mentions: false,
+        }),
+      ).to.eql(expected)
     })
   })
 })
diff --git a/test/unit/specs/modules/serverSideStorage.spec.js b/test/unit/specs/stores/sync_config.spec.js
similarity index 58%
rename from test/unit/specs/modules/serverSideStorage.spec.js
rename to test/unit/specs/stores/sync_config.spec.js
index bd2028ea3..83324f62b 100644
--- a/test/unit/specs/modules/serverSideStorage.spec.js
+++ b/test/unit/specs/stores/sync_config.spec.js
@@ -12,49 +12,61 @@ import {
   COMMAND_TRIM_FLAGS_AND_RESET,
   defaultState,
   newUserFlags,
-  useServerSideStorageStore,
+  useSyncConfigStore,
   VERSION,
-} from 'src/stores/serverSideStorage.js'
+} from 'src/stores/sync_config.js'
 
-describe('The serverSideStorage module', () => {
+describe('The SyncConfig store', () => {
   beforeEach(() => {
     setActivePinia(createPinia())
   })
 
   describe('mutations', () => {
-    describe('setServerSideStorage', () => {
+    describe('initSyncConfig', () => {
       const user = {
         created_at: new Date('1999-02-09'),
         storage: {},
       }
 
-      it('should initialize storage if none present', () => {
-        const store = useServerSideStorageStore()
-        store.setServerSideStorage(store, user)
+      it('should initialize storage if none present', async () => {
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
+        await store.initSyncConfig({ ...user })
         expect(store.cache._version).to.eql(VERSION)
         expect(store.cache._timestamp).to.be.a('number')
         expect(store.cache.flagStorage).to.eql(defaultState.flagStorage)
         expect(store.cache.prefsStorage).to.eql(defaultState.prefsStorage)
       })
 
-      it('should initialize storage with proper flags for new users if none present', () => {
-        const store = useServerSideStorageStore()
-        store.setServerSideStorage({ ...user, created_at: new Date() })
+      it('should initialize storage with proper flags for new users if none present', async () => {
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
+        await store.initSyncConfig({ ...user, created_at: new Date() })
         expect(store.cache._version).to.eql(VERSION)
         expect(store.cache._timestamp).to.be.a('number')
         expect(store.cache.flagStorage).to.eql(newUserFlags)
         expect(store.cache.prefsStorage).to.eql(defaultState.prefsStorage)
       })
 
-      it('should merge flags even if remote timestamp is older', () => {
-        const store = useServerSideStorageStore()
+      it('should merge flags even if remote timestamp is older', async () => {
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
         store.cache = {
           _timestamp: Date.now(),
           _version: VERSION,
           ...cloneDeep(defaultState),
         }
 
-        store.setServerSideStorage({
+        await store.initSyncConfig({
           ...user,
           storage: {
             _timestamp: 123,
@@ -69,17 +81,62 @@ describe('The serverSideStorage module', () => {
           },
         })
 
-        expect(store.cache.flagStorage).to.eql({
+        expect(store.flagStorage).to.eql({
           ...defaultState.flagStorage,
           updateCounter: 1,
         })
       })
 
-      it('should reset local timestamp to remote if contents are the same', () => {
-        const store = useServerSideStorageStore()
-        store.cache = null
+      it('should trim journal to 500 entries', async () => {
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
+        store.cache = {
+          _timestamp: Date.now(),
+          _version: VERSION,
+          ...cloneDeep(defaultState),
+        }
+        const largeJournal = []
+        for (let value = 0; value < 1000; value++) {
+          largeJournal.push({
+            path: 'simple.palette' + value,
+            operation: 'set',
+            args: [value],
+            // should have A timestamp, we don't really care what it is
+            timestamp: 123456,
+          })
+        }
 
-        store.setServerSideStorage({
+        await store.initSyncConfig({
+          ...user,
+          storage: {
+            _timestamp: 123,
+            _version: VERSION,
+            flagStorage: {
+              ...defaultState.flagStorage,
+              updateCounter: 1,
+            },
+            prefsStorage: {
+              ...defaultState.prefsStorage,
+              _journal: largeJournal,
+            },
+          },
+        })
+
+        expect(store.prefsStorage._journal.length).to.eql(500)
+      })
+
+      it('should reset local timestamp to remote if contents are the same', async () => {
+        const store = useSyncConfigStore()
+        store.cache = null
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
+
+        await store.initSyncConfig({
           ...user,
           storage: {
             _timestamp: 123,
@@ -95,9 +152,13 @@ describe('The serverSideStorage module', () => {
         expect(store.cache.flagStorage.updateCounter).to.eql(999)
       })
 
-      it('should remote version if local missing', () => {
-        const store = useServerSideStorageStore()
-        store.setServerSideStorage(store, user)
+      it('should use remote version if local missing', async () => {
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
+        await store.initSyncConfig(store, user)
         expect(store.cache._version).to.eql(VERSION)
         expect(store.cache._timestamp).to.be.a('number')
         expect(store.cache.flagStorage).to.eql(defaultState.flagStorage)
@@ -105,41 +166,49 @@ describe('The serverSideStorage module', () => {
     })
     describe('setPreference', () => {
       it('should set preference and update journal log accordingly', () => {
-        const store = useServerSideStorageStore()
-        store.setPreference({ path: 'simple.testing', value: 1 })
-        expect(store.prefsStorage.simple.testing).to.eql(1)
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
+        store.setPreference({ path: 'simple.palette', value: '1' })
+        expect(store.prefsStorage.simple.palette).to.eql('1')
         expect(store.prefsStorage._journal.length).to.eql(1)
         expect(store.prefsStorage._journal[0]).to.eql({
-          path: 'simple.testing',
+          path: 'simple.palette',
           operation: 'set',
-          args: [1],
+          args: ['1'],
           // should have A timestamp, we don't really care what it is
           timestamp: store.prefsStorage._journal[0].timestamp,
         })
       })
 
       it('should keep journal to a minimum', () => {
-        const store = useServerSideStorageStore()
-        store.setPreference({ path: 'simple.testing', value: 1 })
-        store.setPreference({ path: 'simple.testing', value: 2 })
-        store.addCollectionPreference({ path: 'collections.testing', value: 2 })
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
+        store.setPreference({ path: 'simple.palette', value: 1 })
+        store.setPreference({ path: 'simple.palette', value: 2 })
+        store.addCollectionPreference({ path: 'collections.palette', value: 2 })
         store.removeCollectionPreference({
-          path: 'collections.testing',
+          path: 'collections.palette',
           value: 2,
         })
         store.updateCache({ username: 'test' })
-        expect(store.prefsStorage.simple.testing).to.eql(2)
-        expect(store.prefsStorage.collections.testing).to.eql([])
+        expect(store.prefsStorage.simple.palette).to.eql(2)
+        expect(store.prefsStorage.collections.palette).to.eql([])
         expect(store.prefsStorage._journal.length).to.eql(2)
         expect(store.prefsStorage._journal[0]).to.eql({
-          path: 'simple.testing',
+          path: 'simple.palette',
           operation: 'set',
           args: [2],
           // should have A timestamp, we don't really care what it is
           timestamp: store.prefsStorage._journal[0].timestamp,
         })
         expect(store.prefsStorage._journal[1]).to.eql({
-          path: 'collections.testing',
+          path: 'collections.palette',
           operation: 'removeFromCollection',
           args: [2],
           // should have A timestamp, we don't really care what it is
@@ -148,28 +217,42 @@ describe('The serverSideStorage module', () => {
       })
 
       it('should remove duplicate entries from journal', () => {
-        const store = useServerSideStorageStore()
-        store.setPreference({ path: 'simple.testing', value: 1 })
-        store.setPreference({ path: 'simple.testing', value: 1 })
-        store.addCollectionPreference({ path: 'collections.testing', value: 2 })
-        store.addCollectionPreference({ path: 'collections.testing', value: 2 })
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
+        store.setPreference({ path: 'simple.palette', value: 1 })
+        store.setPreference({ path: 'simple.palette', value: 1 })
+        store.addCollectionPreference({ path: 'collections.palette', value: 2 })
+        store.addCollectionPreference({ path: 'collections.palette', value: 2 })
         store.updateCache({ username: 'test' })
-        expect(store.prefsStorage.simple.testing).to.eql(1)
-        expect(store.prefsStorage.collections.testing).to.eql([2])
+        expect(store.prefsStorage.simple.palette).to.eql(1)
+        expect(store.prefsStorage.collections.palette).to.eql([2])
         expect(store.prefsStorage._journal.length).to.eql(2)
       })
 
       it('should remove depth = 3 set/unset entries from journal', () => {
-        const store = useServerSideStorageStore()
-        store.setPreference({ path: 'simple.object.foo', value: 1 })
-        store.unsetPreference({ path: 'simple.object.foo' })
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
+        store.setPreference({ path: 'simple.fontInput.family', value: 'test' })
+        store.unsetPreference({ path: 'simple.fontInput.family' })
         store.updateCache(store, { username: 'test' })
-        expect(store.prefsStorage.simple.object).to.not.have.property('foo')
+        expect(store.prefsStorage.simple.fontInput).to.not.have.property(
+          'family',
+        )
         expect(store.prefsStorage._journal.length).to.eql(1)
       })
 
       it('should not allow unsetting depth <= 2', () => {
-        const store = useServerSideStorageStore()
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
         store.setPreference({ path: 'simple.object.foo', value: 1 })
         expect(() => store.unsetPreference({ path: 'simple' })).to.throw()
         expect(() =>
@@ -178,7 +261,11 @@ describe('The serverSideStorage module', () => {
       })
 
       it('should not allow (un)setting depth > 3', () => {
-        const store = useServerSideStorageStore()
+        const store = useSyncConfigStore()
+        // PushSyncConfig is very simple but uses vuex to push data
+        store.pushSyncConfig = () => {
+          /* no-op */
+        }
         store.setPreference({ path: 'simple.object', value: {} })
         expect(() =>
           store.setPreference({ path: 'simple.object.lv3', value: 1 }),
@@ -308,11 +395,16 @@ describe('The serverSideStorage module', () => {
           _mergePrefs(
             // RECENT
             {
-              simple: { a: 1, b: 0, c: true },
+              simple: { theme: '1', style: '0', hideISP: true },
               _journal: [
-                { path: 'simple.b', operation: 'set', args: [0], timestamp: 2 },
                 {
-                  path: 'simple.c',
+                  path: 'simple.style',
+                  operation: 'set',
+                  args: ['0'],
+                  timestamp: 2,
+                },
+                {
+                  path: 'simple.hideISP',
                   operation: 'set',
                   args: [true],
                   timestamp: 4,
@@ -321,19 +413,44 @@ describe('The serverSideStorage module', () => {
             },
             // STALE
             {
-              simple: { a: 1, b: 1, c: false },
+              simple: { theme: '1', style: '1', hideISP: false },
               _journal: [
-                { path: 'simple.a', operation: 'set', args: [1], timestamp: 1 },
-                { path: 'simple.b', operation: 'set', args: [1], timestamp: 3 },
+                {
+                  path: 'simple.theme',
+                  operation: 'set',
+                  args: ['1'],
+                  timestamp: 1,
+                },
+                {
+                  path: 'simple.style',
+                  operation: 'set',
+                  args: ['1'],
+                  timestamp: 3,
+                },
               ],
             },
           ),
         ).to.eql({
-          simple: { a: 1, b: 1, c: true },
+          simple: { theme: '1', style: '1', hideISP: true },
           _journal: [
-            { path: 'simple.a', operation: 'set', args: [1], timestamp: 1 },
-            { path: 'simple.b', operation: 'set', args: [1], timestamp: 3 },
-            { path: 'simple.c', operation: 'set', args: [true], timestamp: 4 },
+            {
+              path: 'simple.theme',
+              operation: 'set',
+              args: ['1'],
+              timestamp: 1,
+            },
+            {
+              path: 'simple.style',
+              operation: 'set',
+              args: ['1'],
+              timestamp: 3,
+            },
+            {
+              path: 'simple.hideISP',
+              operation: 'set',
+              args: [true],
+              timestamp: 4,
+            },
           ],
         })
       })
@@ -343,11 +460,16 @@ describe('The serverSideStorage module', () => {
           _mergePrefs(
             // RECENT
             {
-              simple: { a: 1, b: 0, c: false },
+              simple: { theme: '1', style: '0', hideISP: false },
               _journal: [
-                { path: 'simple.b', operation: 'set', args: [0], timestamp: 2 },
                 {
-                  path: 'simple.c',
+                  path: 'simple.style',
+                  operation: 'set',
+                  args: ['0'],
+                  timestamp: 2,
+                },
+                {
+                  path: 'simple.hideISP',
                   operation: 'set',
                   args: [false],
                   timestamp: 4,
@@ -356,19 +478,44 @@ describe('The serverSideStorage module', () => {
             },
             // STALE
             {
-              simple: { a: 0, b: 0, c: true },
+              simple: { theme: '0', style: '0', hideISP: true },
               _journal: [
-                { path: 'simple.a', operation: 'set', args: [0], timestamp: 1 },
-                { path: 'simple.b', operation: 'set', args: [0], timestamp: 3 },
+                {
+                  path: 'simple.theme',
+                  operation: 'set',
+                  args: ['0'],
+                  timestamp: 1,
+                },
+                {
+                  path: 'simple.style',
+                  operation: 'set',
+                  args: ['0'],
+                  timestamp: 3,
+                },
               ],
             },
           ),
         ).to.eql({
-          simple: { a: 0, b: 0, c: false },
+          simple: { theme: '0', style: '0', hideISP: false },
           _journal: [
-            { path: 'simple.a', operation: 'set', args: [0], timestamp: 1 },
-            { path: 'simple.b', operation: 'set', args: [0], timestamp: 3 },
-            { path: 'simple.c', operation: 'set', args: [false], timestamp: 4 },
+            {
+              path: 'simple.theme',
+              operation: 'set',
+              args: ['0'],
+              timestamp: 1,
+            },
+            {
+              path: 'simple.style',
+              operation: 'set',
+              args: ['0'],
+              timestamp: 3,
+            },
+            {
+              path: 'simple.hideISP',
+              operation: 'set',
+              args: [false],
+              timestamp: 4,
+            },
           ],
         })
       })
@@ -378,10 +525,10 @@ describe('The serverSideStorage module', () => {
           _mergePrefs(
             // RECENT
             {
-              simple: { a: 'foo' },
+              simple: { theme: 'foo' },
               _journal: [
                 {
-                  path: 'simple.a',
+                  path: 'simple.theme',
                   operation: 'set',
                   args: ['foo'],
                   timestamp: 2,
@@ -390,10 +537,10 @@ describe('The serverSideStorage module', () => {
             },
             // STALE
             {
-              simple: { a: 'bar' },
+              simple: { theme: 'bar' },
               _journal: [
                 {
-                  path: 'simple.a',
+                  path: 'simple.theme',
                   operation: 'set',
                   args: ['bar'],
                   timestamp: 4,
@@ -402,9 +549,14 @@ describe('The serverSideStorage module', () => {
             },
           ),
         ).to.eql({
-          simple: { a: 'bar' },
+          simple: { theme: 'bar' },
           _journal: [
-            { path: 'simple.a', operation: 'set', args: ['bar'], timestamp: 4 },
+            {
+              path: 'simple.theme',
+              operation: 'set',
+              args: ['bar'],
+              timestamp: 4,
+            },
           ],
         })
       })
@@ -414,10 +566,10 @@ describe('The serverSideStorage module', () => {
           _mergePrefs(
             // RECENT
             {
-              simple: { lv2: { lv3: 'foo' } },
+              simple: { fontInput: { lv3: 'foo' } },
               _journal: [
                 {
-                  path: 'simple.lv2.lv3',
+                  path: 'simple.fontInput.lv3',
                   operation: 'set',
                   args: ['foo'],
                   timestamp: 2,
@@ -426,10 +578,10 @@ describe('The serverSideStorage module', () => {
             },
             // STALE
             {
-              simple: { lv2: { lv3: 'bar' } },
+              simple: { fontInput: { lv3: 'bar' } },
               _journal: [
                 {
-                  path: 'simple.lv2.lv3',
+                  path: 'simple.fontInput.lv3',
                   operation: 'set',
                   args: ['bar'],
                   timestamp: 4,
@@ -438,10 +590,10 @@ describe('The serverSideStorage module', () => {
             },
           ),
         ).to.eql({
-          simple: { lv2: { lv3: 'bar' } },
+          simple: { fontInput: { lv3: 'bar' } },
           _journal: [
             {
-              path: 'simple.lv2.lv3',
+              path: 'simple.fontInput.lv3',
               operation: 'set',
               args: ['bar'],
               timestamp: 4,
@@ -455,10 +607,10 @@ describe('The serverSideStorage module', () => {
           _mergePrefs(
             // RECENT
             {
-              simple: { lv2: { lv3: 'foo' } },
+              simple: { fontInput: { lv3: 'foo' } },
               _journal: [
                 {
-                  path: 'simple.lv2.lv3',
+                  path: 'simple.fontInput.lv3',
                   operation: 'set',
                   args: ['foo'],
                   timestamp: 2,
@@ -467,10 +619,10 @@ describe('The serverSideStorage module', () => {
             },
             // STALE
             {
-              simple: { lv2: {} },
+              simple: { fontInput: {} },
               _journal: [
                 {
-                  path: 'simple.lv2.lv3',
+                  path: 'simple.fontInput.lv3',
                   operation: 'unset',
                   args: [],
                   timestamp: 4,
@@ -479,10 +631,10 @@ describe('The serverSideStorage module', () => {
             },
           ),
         ).to.eql({
-          simple: { lv2: {} },
+          simple: { fontInput: {} },
           _journal: [
             {
-              path: 'simple.lv2.lv3',
+              path: 'simple.fontInput.lv3',
               operation: 'unset',
               args: [],
               timestamp: 4,
@@ -493,11 +645,6 @@ describe('The serverSideStorage module', () => {
     })
 
     describe('_resetFlags', () => {
-      it('should reset all known flags to 0 when reset flag is set to > 0 and < 9000', () => {
-        const totalFlags = { a: 0, b: 3, reset: 1 }
-
-        expect(_resetFlags(totalFlags)).to.eql({ a: 0, b: 0, reset: 0 })
-      })
       it('should trim all flags to known when reset is set to 1000', () => {
         const totalFlags = { a: 0, b: 3, c: 33, reset: COMMAND_TRIM_FLAGS }
 
diff --git a/test/unit/specs/stores/user_highlight.spec.js b/test/unit/specs/stores/user_highlight.spec.js
new file mode 100644
index 000000000..c46852256
--- /dev/null
+++ b/test/unit/specs/stores/user_highlight.spec.js
@@ -0,0 +1,316 @@
+import { cloneDeep } from 'lodash'
+import { createPinia, setActivePinia } from 'pinia'
+
+import {
+  _getRecentData,
+  _mergeHighlights,
+  _moveItemInArray,
+  useUserHighlightStore,
+} from 'src/stores/user_highlight.js'
+
+describe('The UserHighlight store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    window.vuex = {
+      state: {
+        users: {
+          currentUser: {
+            fqn: 'foo@bar.tld',
+          },
+        },
+      },
+    }
+  })
+
+  describe('mutations', () => {
+    describe('initUserHighlight', () => {
+      const user = {
+        created_at: new Date('1999-02-09'),
+        storage: {},
+      }
+
+      it('should initialize storage if none present', async () => {
+        const store = useUserHighlightStore()
+        await store.initUserHighlight({ ...user })
+        expect(store.cache._timestamp).to.be.a('number')
+        expect(store.cache.highlight).to.eql({ _journal: [] })
+      })
+
+      it('should initialize storage for new users if none present', async () => {
+        const store = useUserHighlightStore()
+        await store.initUserHighlight({ ...user, created_at: new Date() })
+        expect(store.cache._timestamp).to.be.a('number')
+        expect(store.cache.highlight).to.eql({ _journal: [] })
+      })
+
+      it('should use remote version if local missing', async () => {
+        const store = useUserHighlightStore()
+        await store.initUserHighlight(store, user)
+        expect(store.cache._timestamp).to.be.a('number')
+      })
+    })
+    describe('set', () => {
+      it('should set preference and update journal log accordingly', () => {
+        const store = useUserHighlightStore()
+        store.set({ user: 'highlight@testing', value: { type: 'test' } })
+        expect(store.highlight['highlight@testing']).to.eql({
+          user: 'highlight@testing',
+          type: 'test',
+        })
+        expect(store.highlight._journal.length).to.eql(1)
+        expect(store.highlight._journal[0]).to.eql({
+          user: 'highlight@testing',
+          operation: 'set',
+          args: [{ user: 'highlight@testing', type: 'test' }],
+          // should have A timestamp, we don't really care what it is
+          timestamp: store.highlight._journal[0].timestamp,
+        })
+      })
+
+      it('should keep journal to a minimum', () => {
+        const store = useUserHighlightStore()
+        store.set({ user: 'highlight@testing.xyz', value: { type: 'test' } })
+        store.set({ user: 'highlight@testing.xyz', value: { type: 'test' } })
+        store.updateCache({ username: 'test' })
+        expect(store.highlight['highlight@testing.xyz']).to.eql({
+          user: 'highlight@testing.xyz',
+          type: 'test',
+        })
+        expect(store.highlight._journal.length).to.eql(1)
+        expect(store.highlight._journal[0]).to.eql({
+          user: 'highlight@testing.xyz',
+          operation: 'set',
+          args: [
+            {
+              user: 'highlight@testing.xyz',
+              type: 'test',
+            },
+          ],
+          // should have A timestamp, we don't really care what it is
+          timestamp: store.highlight._journal[0].timestamp,
+        })
+      })
+
+      it('should remove duplicate entries from journal', () => {
+        const store = useUserHighlightStore()
+        store.set({ user: 'a@test.xyz', value: { type: 'foo' } })
+        store.set({ user: 'a@test.xyz', value: { type: 'foo' } })
+        store.updateCache({ username: 'test' })
+        expect(store.highlight['a@test.xyz']).to.eql({
+          user: 'a@test.xyz',
+          type: 'foo',
+        })
+        expect(store.highlight._journal.length).to.eql(1)
+      })
+    })
+  })
+
+  describe('helper functions', () => {
+    describe('_getRecentData', () => {
+      it('should handle nulls correctly', () => {
+        expect(_getRecentData(null, null, true)).to.eql({
+          recent: null,
+          stale: null,
+          needUpload: true,
+        })
+      })
+
+      it("doesn't choke on invalid data", () => {
+        expect(_getRecentData({ a: 1 }, { b: 2 }, true)).to.eql({
+          recent: null,
+          stale: null,
+          needUpload: true,
+        })
+      })
+
+      it('should prefer the valid non-null correctly, needUpload works properly', () => {
+        const nonNull = { _timestamp: 1 }
+        expect(_getRecentData(nonNull, null, true)).to.eql({
+          recent: nonNull,
+          stale: null,
+          needUpload: true,
+        })
+        expect(_getRecentData(null, nonNull, true)).to.eql({
+          recent: nonNull,
+          stale: null,
+          needUpload: false,
+        })
+      })
+
+      it('should prefer the one with higher timestamp', () => {
+        const a = { _timestamp: 1 }
+        const b = { _timestamp: 2 }
+
+        expect(_getRecentData(a, b, true)).to.eql({
+          recent: b,
+          stale: a,
+          needUpload: false,
+        })
+        expect(_getRecentData(b, a, true)).to.eql({
+          recent: b,
+          stale: a,
+          needUpload: false,
+        })
+      })
+
+      it('case where both are same', () => {
+        const a = { _timestamp: 3 }
+        const b = { _timestamp: 3 }
+
+        expect(_getRecentData(a, b, true)).to.eql({
+          recent: b,
+          stale: a,
+          needUpload: false,
+        })
+        expect(_getRecentData(b, a, true)).to.eql({
+          recent: b,
+          stale: a,
+          needUpload: false,
+        })
+      })
+    })
+
+    describe('_mergeHighlights', () => {
+      it('should prefer recent and apply journal to it', () => {
+        expect(
+          _mergeHighlights(
+            {
+              // RECENT
+              'a@test.xyz': 1,
+              'b@test.xyz': 0,
+              'c@test.xyz': true,
+              _journal: [
+                {
+                  user: 'b@test.xyz',
+                  operation: 'set',
+                  args: [0],
+                  timestamp: 2,
+                },
+                {
+                  user: 'c@test.xyz',
+                  operation: 'set',
+                  args: [true],
+                  timestamp: 4,
+                },
+              ],
+            },
+            {
+              // STALE
+              'a@test.xyz': 1,
+              'b@test.xyz': 1,
+              'c@test.xyz': false,
+              _journal: [
+                {
+                  user: 'a@test.xyz',
+                  operation: 'set',
+                  args: [1],
+                  timestamp: 1,
+                },
+                {
+                  user: 'b@test.xyz',
+                  operation: 'set',
+                  args: [1],
+                  timestamp: 3,
+                },
+              ],
+            },
+          ),
+        ).to.eql({
+          'a@test.xyz': 1,
+          'b@test.xyz': 1,
+          'c@test.xyz': true,
+          _journal: [
+            { user: 'a@test.xyz', operation: 'set', args: [1], timestamp: 1 },
+            { user: 'b@test.xyz', operation: 'set', args: [1], timestamp: 3 },
+            {
+              user: 'c@test.xyz',
+              operation: 'set',
+              args: [true],
+              timestamp: 4,
+            },
+          ],
+        })
+      })
+
+      it('should work with objects', () => {
+        expect(
+          _mergeHighlights(
+            // RECENT
+            {
+              'a@test.xyz': { type: 'foo' },
+              _journal: [
+                {
+                  user: 'a@test.xyz',
+                  operation: 'set',
+                  args: [{ type: 'foo' }],
+                  timestamp: 2,
+                },
+              ],
+            },
+            // STALE
+            {
+              'a@test.xyz': { type: 'bar' },
+              _journal: [
+                {
+                  user: 'a@test.xyz',
+                  operation: 'set',
+                  args: [{ type: 'bar' }],
+                  timestamp: 4,
+                },
+              ],
+            },
+          ),
+        ).to.eql({
+          'a@test.xyz': { type: 'bar' },
+          _journal: [
+            {
+              user: 'a@test.xyz',
+              operation: 'set',
+              args: [{ type: 'bar' }],
+              timestamp: 4,
+            },
+          ],
+        })
+      })
+
+      it('should work with unset', () => {
+        expect(
+          _mergeHighlights(
+            // RECENT
+            {
+              'a@test.xyz': { type: 'foo' },
+              _journal: [
+                {
+                  user: 'a@test.xyz',
+                  operation: 'set',
+                  args: [{ type: 'foo' }],
+                  timestamp: 2,
+                },
+              ],
+            },
+            // STALE
+            {
+              _journal: [
+                {
+                  user: 'a@test.xyz',
+                  operation: 'unset',
+                  args: [],
+                  timestamp: 4,
+                },
+              ],
+            },
+          ),
+        ).to.eql({
+          _journal: [
+            {
+              user: 'a@test.xyz',
+              operation: 'unset',
+              args: [],
+              timestamp: 4,
+            },
+          ],
+        })
+      })
+    })
+  })
+})