diff --git a/biome.json b/biome.json
index d64639d52..6a464a0e5 100644
--- a/biome.json
+++ b/biome.json
@@ -132,7 +132,11 @@
             "groups": [
               [":NODE:", ":PACKAGE:", "!src/**", "!@fortawesome/**"],
               ":BLANK_LINE:",
-              [":PATH:", "src/**"],
+              [":PATH:", "src/components/**"],
+              ":BLANK_LINE:",
+              [":PATH:", "src/stores/**"],
+              ":BLANK_LINE:",
+              [":PATH:", "src/**", "src/stores/**", "src/components/**"],
               ":BLANK_LINE:",
               "@fortawesome/fontawesome-svg-core",
               "@fortawesome/*"
diff --git a/changelog.d/instance-store-migration.skip b/changelog.d/instance-store-migration.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/package.json b/package.json
index bdd1acfbe..20c01a0b3 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
     "@babel/preset-env": "7.28.5",
     "@babel/register": "7.28.3",
     "@biomejs/biome": "2.3.11",
+    "@pinia/testing": "1.0.3",
     "@ungap/event-target": "0.2.4",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
diff --git a/src/App.js b/src/App.js
index 33645c63d..0714ced1d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,5 @@
 import { throttle } from 'lodash'
+import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 import { mapGetters } from 'vuex'
 
@@ -20,8 +21,11 @@ import UserReportingModal from './components/user_reporting_modal/user_reporting
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
 import { getOrCreateServiceWorker } from './services/sw/sw'
 import { windowHeight, windowWidth } from './services/window_utils/window_utils'
-import { useInterfaceStore } from './stores/interface'
-import { useShoutStore } from './stores/shout'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+import { useShoutStore } from 'src/stores/shout.js'
 
 export default {
   name: 'app',
@@ -80,7 +84,7 @@ export default {
     window.addEventListener('resize', this.updateMobileState)
     this.scrollParent.addEventListener('scroll', this.updateScrollState)
 
-    if (useInterfaceStore().themeApplied) {
+    if (this.themeApplied) {
       this.setThemeBodyClass()
       this.removeSplash()
     }
@@ -91,12 +95,9 @@ export default {
     this.scrollParent.removeEventListener('scroll', this.updateScrollState)
   },
   computed: {
-    themeApplied() {
-      return useInterfaceStore().themeApplied
-    },
     currentTheme() {
-      if (useInterfaceStore().styleDataUsed) {
-        const styleMeta = useInterfaceStore().styleDataUsed.find(
+      if (this.styleDataUsed) {
+        const styleMeta = this.styleDataUsed.find(
           (x) => x.component === '@meta',
         )
 
@@ -134,9 +135,7 @@ export default {
       return this.currentUser.background_image
     },
     instanceBackground() {
-      return this.mergedConfig.hideInstanceWallpaper
-        ? null
-        : this.$store.state.instance.background
+      return this.mergedConfig.hideInstanceWallpaper ? null : this.background
     },
     background() {
       return this.userBackground || this.instanceBackground
@@ -151,16 +150,6 @@ export default {
     shout() {
       return useShoutStore().joined
     },
-    suggestionsEnabled() {
-      return this.$store.state.instance.suggestionsEnabled
-    },
-    showInstanceSpecificPanel() {
-      return (
-        this.$store.state.instance.showInstanceSpecificPanel &&
-        !this.$store.getters.mergedConfig.hideISP &&
-        this.$store.state.instance.instanceSpecificPanelContent
-      )
-    },
     isChats() {
       return this.$route.name === 'chat' || this.$route.name === 'chats'
     },
@@ -175,24 +164,12 @@ export default {
         this.layoutType === 'mobile'
       )
     },
-    showFeaturesPanel() {
-      return this.$store.state.instance.showFeaturesPanel
-    },
-    editingAvailable() {
-      return this.$store.state.instance.editingAvailable
-    },
     shoutboxPosition() {
       return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
     },
     hideShoutbox() {
       return this.$store.getters.mergedConfig.hideShoutbox
     },
-    layoutType() {
-      return useInterfaceStore().layoutType
-    },
-    privateMode() {
-      return this.$store.state.instance.private
-    },
     reverseLayout() {
       const { thirdColumnMode, sidebarRight: reverseSetting } =
         this.$store.getters.mergedConfig
@@ -213,7 +190,30 @@ export default {
     scrollParent() {
       return window /* this.$refs.appContentRef */
     },
+    showInstanceSpecificPanel() {
+      return (
+        this.instanceSpecificPanelPresent &&
+        !this.$store.getters.mergedConfig.hideISP
+      )
+    },
     ...mapGetters(['mergedConfig']),
+    ...mapState(useInterfaceStore, [
+      'themeApplied',
+      'styleDataUsed',
+      'layoutType',
+    ]),
+    ...mapState(useInstanceStore, ['styleDataUsed']),
+    ...mapState(useInstanceCapabilitiesStore, [
+      'suggestionsEnabled',
+      'editingAvailable',
+    ]),
+    ...mapState(useInstanceStore, {
+      background: (store) => store.instanceIdentity.background,
+      showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
+      instanceSpecificPanelPresent: (store) =>
+        store.instanceIdentity.showInstanceSpecificPanel &&
+        store.instanceIdentity.instanceSpecificPanelContent,
+    }),
   },
   methods: {
     resizeHandler() {
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 1a2be5bd7..b7e97cf45 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -14,16 +14,6 @@ import {
 
 config.autoAddCss = false
 
-import VBodyScrollLock from 'src/directives/body_scroll_lock'
-import {
-  instanceDefaultConfig,
-  staticOrApiConfigDefault,
-} from 'src/modules/default_config_state.js'
-import { useAnnouncementsStore } from 'src/stores/announcements'
-import { useAuthFlowStore } from 'src/stores/auth_flow'
-import { useI18nStore } from 'src/stores/i18n'
-import { useInterfaceStore } from 'src/stores/interface'
-import { useOAuthStore } from 'src/stores/oauth'
 import App from '../App.vue'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
@@ -35,6 +25,21 @@ import {
 } from '../services/window_utils/window_utils'
 import routes from './routes'
 
+import { useAnnouncementsStore } from 'src/stores/announcements'
+import { useAuthFlowStore } from 'src/stores/auth_flow'
+import { useEmojiStore } from 'src/stores/emoji.js'
+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 { useOAuthStore } from 'src/stores/oauth'
+
+import VBodyScrollLock from 'src/directives/body_scroll_lock'
+import {
+  instanceDefaultConfig,
+  staticOrApiConfigDefault,
+} from 'src/modules/default_config_state.js'
+
 let staticInitialResults = null
 
 const parsedInitialResults = () => {
@@ -78,29 +83,29 @@ const getInstanceConfig = async ({ store }) => {
       const textlimit = data.max_toot_chars
       const vapidPublicKey = data.pleroma.vapid_public_key
 
-      store.dispatch('setInstanceOption', {
-        name: 'pleromaExtensionsAvailable',
-        value: data.pleroma,
-      })
-      store.dispatch('setInstanceOption', {
+      useInstanceCapabilitiesStore().set(
+        'pleromaExtensionsAvailable',
+        data.pleroma,
+      )
+      useInstanceStore().set({
         name: 'textlimit',
         value: textlimit,
       })
-      store.dispatch('setInstanceOption', {
+      useInstanceStore().set({
         name: 'accountApprovalRequired',
         value: data.approval_required,
       })
-      store.dispatch('setInstanceOption', {
+      useInstanceStore().set({
         name: 'birthdayRequired',
         value: !!data.pleroma?.metadata.birthday_required,
       })
-      store.dispatch('setInstanceOption', {
+      useInstanceStore().set({
         name: 'birthdayMinAge',
         value: data.pleroma?.metadata.birthday_min_age || 0,
       })
 
       if (vapidPublicKey) {
-        store.dispatch('setInstanceOption', {
+        useInstanceStore().set({
           name: 'vapidPublicKey',
           value: vapidPublicKey,
         })
@@ -161,14 +166,18 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
     config = Object.assign({}, staticConfig, apiConfig)
   }
 
-  const copyInstanceOption = (name) => {
-    if (typeof config[name] !== 'undefined') {
-      store.dispatch('setInstanceOption', { name, value: config[name] })
+  const copyInstanceOption = ({ source, destination }) => {
+    if (typeof config[source] !== 'undefined') {
+      useInstanceStore().set({ path: destination, value: config[source] })
     }
   }
 
-  Object.keys(staticOrApiConfigDefault).forEach(copyInstanceOption)
-  Object.keys(instanceDefaultConfig).forEach(copyInstanceOption)
+  Object.keys(staticOrApiConfigDefault)
+    .map((k) => ({ source: k, destination: `instanceIdentity.${k}` }))
+    .forEach(copyInstanceOption)
+  Object.keys(instanceDefaultConfig)
+    .map((k) => ({ source: k, destination: `prefsStorage.${k}` }))
+    .forEach(copyInstanceOption)
 
   useAuthFlowStore().setInitialStrategy(config.loginMethod)
 }
@@ -178,7 +187,7 @@ const getTOS = async ({ store }) => {
     const res = await window.fetch('/static/terms-of-service.html')
     if (res.ok) {
       const html = await res.text()
-      store.dispatch('setInstanceOption', { name: 'tos', value: html })
+      useInstanceStore().set({ name: 'instanceIdentity.tos', value: html })
     } else {
       throw res
     }
@@ -192,8 +201,8 @@ const getInstancePanel = async ({ store }) => {
     const res = await preloadFetch('/instance/panel.html')
     if (res.ok) {
       const html = await res.text()
-      store.dispatch('setInstanceOption', {
-        name: 'instanceSpecificPanelContent',
+      useInstanceStore().set({
+        path: 'instanceIdentity.instanceSpecificPanelContent',
         value: html,
       })
     } else {
@@ -227,7 +236,7 @@ const getStickers = async ({ store }) => {
       ).sort((a, b) => {
         return a.meta.title.localeCompare(b.meta.title)
       })
-      store.dispatch('setInstanceOption', { name: 'stickers', value: stickers })
+      useEmojiStore().setStickers(stickers)
     } else {
       throw res
     }
@@ -248,7 +257,7 @@ const getAppSecret = async ({ store }) => {
 
 const resolveStaffAccounts = ({ store, accounts }) => {
   const nicknames = accounts.map((uri) => uri.split('/').pop())
-  store.dispatch('setInstanceOption', {
+  useInstanceStore().set({
     name: 'staffAccounts',
     value: nicknames,
   })
@@ -262,160 +271,158 @@ const getNodeInfo = async ({ store }) => {
       const data = await res.json()
       const metadata = data.metadata
       const features = metadata.features
-      store.dispatch('setInstanceOption', {
-        name: 'name',
+      useInstanceStore().set({
+        path: 'name',
         value: metadata.nodeName,
       })
-      store.dispatch('setInstanceOption', {
-        name: 'registrationOpen',
+      useInstanceStore().set({
+        path: 'registrationOpen',
         value: data.openRegistrations,
       })
-      store.dispatch('setInstanceOption', {
-        name: 'mediaProxyAvailable',
-        value: features.includes('media_proxy'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'safeDM',
-        value: features.includes('safe_dm_mentions'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'shoutAvailable',
-        value: features.includes('chat'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'pleromaChatMessagesAvailable',
-        value: features.includes('pleroma_chat_messages'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'pleromaCustomEmojiReactionsAvailable',
-        value:
-          features.includes('pleroma_custom_emoji_reactions') ||
+      useInstanceCapabilitiesStore().set(
+        'mediaProxyAvailable',
+        features.includes('media_proxy'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'safeDM',
+        features.includes('safe_dm_mentions'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'shoutAvailable',
+        features.includes('chat'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'pleromaChatMessagesAvailable',
+        features.includes('pleroma_chat_messages'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'pleromaCustomEmojiReactionsAvailable',
+
+        features.includes('pleroma_custom_emoji_reactions') ||
           features.includes('custom_emoji_reactions'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'pleromaBookmarkFoldersAvailable',
-        value: features.includes('pleroma:bookmark_folders'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'gopherAvailable',
-        value: features.includes('gopher'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'pollsAvailable',
-        value: features.includes('polls'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'editingAvailable',
-        value: features.includes('editing'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'pollLimits',
-        value: metadata.pollLimits,
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'mailerEnabled',
-        value: metadata.mailerEnabled,
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'quotingAvailable',
-        value: features.includes('quote_posting'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'groupActorAvailable',
-        value: features.includes('pleroma:group_actors'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'blockExpiration',
-        value: features.includes('pleroma:block_expiration'),
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'localBubbleInstances',
+      )
+      useInstanceCapabilitiesStore().set(
+        'pleromaBookmarkFoldersAvailable',
+        features.includes('pleroma:bookmark_folders'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'gopherAvailable',
+        features.includes('gopher'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'pollsAvailable',
+        features.includes('polls'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'editingAvailable',
+        features.includes('editing'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'mailerEnabled',
+        metadata.mailerEnabled,
+      )
+      useInstanceCapabilitiesStore().set(
+        'quotingAvailable',
+        features.includes('quote_posting'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'groupActorAvailable',
+        features.includes('pleroma:group_actors'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'blockExpiration',
+        features.includes('pleroma:block_expiration'),
+      )
+      useInstanceStore().set({
+        path: 'localBubbleInstances',
         value: metadata.localBubbleInstances ?? [],
       })
+      useInstanceCapabilitiesStore().set(
+        'localBubble',
+        (metadata.localBubbleInstances ?? []).length > 0,
+      )
 
+      useInstanceStore().set({
+        path: 'limits.pollLimits',
+        value: metadata.pollLimits,
+      })
       const uploadLimits = metadata.uploadLimits
-      store.dispatch('setInstanceOption', {
-        name: 'uploadlimit',
+      useInstanceStore().set({
+        path: 'limits.uploadlimit',
         value: parseInt(uploadLimits.general),
       })
-      store.dispatch('setInstanceOption', {
-        name: 'avatarlimit',
+      useInstanceStore().set({
+        path: 'limits.avatarlimit',
         value: parseInt(uploadLimits.avatar),
       })
-      store.dispatch('setInstanceOption', {
-        name: 'backgroundlimit',
+      useInstanceStore().set({
+        path: 'limits.backgroundlimit',
         value: parseInt(uploadLimits.background),
       })
-      store.dispatch('setInstanceOption', {
-        name: 'bannerlimit',
+      useInstanceStore().set({
+        path: 'limits.bannerlimit',
         value: parseInt(uploadLimits.banner),
       })
-      store.dispatch('setInstanceOption', {
-        name: 'fieldsLimits',
+      useInstanceStore().set({
+        path: 'limits.fieldsLimits',
         value: metadata.fieldsLimits,
       })
 
-      store.dispatch('setInstanceOption', {
-        name: 'restrictedNicknames',
+      useInstanceStore().set({
+        path: 'restrictedNicknames',
         value: metadata.restrictedNicknames,
       })
-      store.dispatch('setInstanceOption', {
-        name: 'postFormats',
-        value: metadata.postFormats,
-      })
+      useInstanceCapabilitiesStore().set('postFormats', metadata.postFormats)
 
       const suggestions = metadata.suggestions
-      store.dispatch('setInstanceOption', {
-        name: 'suggestionsEnabled',
-        value: suggestions.enabled,
-      })
-      store.dispatch('setInstanceOption', {
-        name: 'suggestionsWeb',
-        value: suggestions.web,
-      })
+      useInstanceCapabilitiesStore().set(
+        'suggestionsEnabled',
+        suggestions.enabled,
+      )
+      // this is unused, why?
+      useInstanceCapabilitiesStore().set('suggestionsWeb', suggestions.web)
 
       const software = data.software
-      store.dispatch('setInstanceOption', {
+      useInstanceStore().set({
         name: 'backendVersion',
         value: software.version,
       })
-      store.dispatch('setInstanceOption', {
+      useInstanceStore().set({
         name: 'backendRepository',
         value: software.repository,
       })
 
       const priv = metadata.private
-      store.dispatch('setInstanceOption', { name: 'private', value: priv })
+      useInstanceStore().set({ name: 'privateMode', value: priv })
 
       const frontendVersion = window.___pleromafe_commit_hash
-      store.dispatch('setInstanceOption', {
+      useInstanceStore().set({
         name: 'frontendVersion',
         value: frontendVersion,
       })
 
       const federation = metadata.federation
 
-      store.dispatch('setInstanceOption', {
-        name: 'tagPolicyAvailable',
-        value:
-          typeof federation.mrf_policies === 'undefined'
-            ? false
-            : metadata.federation.mrf_policies.includes('TagPolicy'),
-      })
+      useInstanceCapabilitiesStore().set(
+        'tagPolicyAvailable',
+        typeof federation.mrf_policies === 'undefined'
+          ? false
+          : metadata.federation.mrf_policies.includes('TagPolicy'),
+      )
 
-      store.dispatch('setInstanceOption', {
-        name: 'federationPolicy',
+      useInstanceStore().set({
+        path: 'federationPolicy',
         value: federation,
       })
-      store.dispatch('setInstanceOption', {
-        name: 'federating',
+      useInstanceStore().set({
+        path: 'federating',
         value:
           typeof federation.enabled === 'undefined' ? true : federation.enabled,
       })
 
       const accountActivationRequired = metadata.accountActivationRequired
-      store.dispatch('setInstanceOption', {
-        name: 'accountActivationRequired',
+      useInstanceStore().set({
+        path: 'accountActivationRequired',
         value: accountActivationRequired,
       })
 
@@ -526,7 +533,7 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
     typeof overrides.target !== 'undefined'
       ? overrides.target
       : window.location.origin
-  store.dispatch('setInstanceOption', { name: 'server', value: server })
+  useInstanceStore().set({ name: 'server', value: server })
 
   await setConfig({ store })
   try {
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 3296755a1..193daf4a7 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -32,12 +32,17 @@ import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_fold
 import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
 import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
     if (store.state.users.currentUser) {
       next()
     } else {
-      next(store.state.instance.redirectRootNoLogin || '/main/all')
+      next(
+        useInstanceStore().instanceIdentity.redirectRootNoLogin || '/main/all',
+      )
     }
   }
 
@@ -48,8 +53,9 @@ export default (store) => {
       redirect: () => {
         return (
           (store.state.users.currentUser
-            ? store.state.instance.redirectRootLogin
-            : store.state.instance.redirectRootNoLogin) || '/main/all'
+            ? useInstanceStore().instanceIdentity.redirectRootLogin
+            : useInstanceStore().instanceIdentity.redirectRootNoLogin) ||
+          '/main/all'
         )
       },
     },
@@ -200,7 +206,7 @@ export default (store) => {
     },
   ]
 
-  if (store.state.instance.pleromaChatMessagesAvailable) {
+  if (useInstanceCapabilitiesStore().pleromaChatMessagesAvailable) {
     routes = routes.concat([
       {
         name: 'chat',
diff --git a/src/components/about/about.js b/src/components/about/about.js
index d091dfd0a..f52d5c797 100644
--- a/src/components/about/about.js
+++ b/src/components/about/about.js
@@ -4,6 +4,8 @@ import MRFTransparencyPanel from '../mrf_transparency_panel/mrf_transparency_pan
 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'
+
 const About = {
   components: {
     InstanceSpecificPanel,
@@ -14,13 +16,13 @@ const About = {
   },
   computed: {
     showFeaturesPanel() {
-      return this.$store.state.instance.showFeaturesPanel
+      return useInstanceStore().instanceIdentity.showFeaturesPanel
     },
     showInstanceSpecificPanel() {
       return (
-        this.$store.state.instance.showInstanceSpecificPanel &&
+        useInstanceStore().instanceIdentity.showInstanceSpecificPanel &&
         !this.$store.getters.mergedConfig.hideISP &&
-        this.$store.state.instance.instanceSpecificPanelContent
+        useInstanceStore().instanceIdentity.instanceSpecificPanelContent
       )
     },
   },
diff --git a/src/components/account_actions/account_actions.js b/src/components/account_actions/account_actions.js
index ee94dc544..8fce4b5af 100644
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@@ -1,12 +1,14 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
 import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
-import { useReportsStore } from 'src/stores/reports'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import Popover from '../popover/popover.vue'
 import ProgressButton from '../progress_button/progress_button.vue'
 
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useReportsStore } from 'src/stores/reports'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
 
@@ -92,11 +94,10 @@ const AccountActions = {
     shouldConfirmRemoveUserFromFollowers() {
       return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
     },
-    ...mapState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-      pleromaChatMessagesAvailable: (state) =>
-        state.instance.pleromaChatMessagesAvailable,
-    }),
+    ...mapState(useInstanceCapabilitiesStore, [
+      'blockExpiration',
+      'pleromaChatMessagesAvailable',
+    ]),
   },
 }
 
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index cc00a735d..94cb91ee0 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -95,7 +95,7 @@
     </Popover>
     <teleport to="#modal">
       <confirm-modal
-        v-if="showingConfirmBlock && !blockExpirationSupported"
+        v-if="showingConfirmBlock && !blockExpiration"
         ref="blockDialog"
         :title="$t('user_card.block_confirm_title')"
         :confirm-text="$t('user_card.block_confirm_accept_button')"
@@ -138,7 +138,7 @@
         </i18n-t>
       </confirm-modal>
       <UserTimedFilterModal
-        v-if="blockExpirationSupported"
+        v-if="blockExpiration"
         ref="timedBlockDialog"
         :is-mute="false"
         :user="user"
diff --git a/src/components/announcement/announcement.js b/src/components/announcement/announcement.js
index 906b84ce2..13d55c159 100644
--- a/src/components/announcement/announcement.js
+++ b/src/components/announcement/announcement.js
@@ -1,10 +1,11 @@
 import { mapState } from 'vuex'
 
-import { useAnnouncementsStore } from 'src/stores/announcements'
 import localeService from '../../services/locale/locale.service.js'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
 import RichContent from '../rich_content/rich_content.jsx'
 
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
+
 const Announcement = {
   components: {
     AnnouncementEditor,
diff --git a/src/components/announcements_page/announcements_page.js b/src/components/announcements_page/announcements_page.js
index 0c4383d2e..b8b1f000a 100644
--- a/src/components/announcements_page/announcements_page.js
+++ b/src/components/announcements_page/announcements_page.js
@@ -1,9 +1,10 @@
 import { mapState } from 'vuex'
 
-import { useAnnouncementsStore } from 'src/stores/announcements'
 import Announcement from '../announcement/announcement.vue'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
 
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
+
 const AnnouncementsPage = {
   components: {
     Announcement,
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js
index 31fceba60..db5171c80 100644
--- a/src/components/attachment/attachment.js
+++ b/src/components/attachment/attachment.js
@@ -1,12 +1,15 @@
 import { mapGetters } from 'vuex'
 
-import { useMediaViewerStore } from 'src/stores/media_viewer'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import Flash from '../flash/flash.vue'
 import StillImage from '../still-image/still-image.vue'
 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 { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAlignRight,
@@ -53,7 +56,8 @@ const Attachment = {
   data() {
     return {
       localDescription: this.description || this.attachment.description,
-      nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
+      nsfwImage:
+        useInstanceStore().instanceIdentity.nsfwCensorImage || nsfwImage,
       hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
       preloadImage: this.$store.getters.mergedConfig.preloadImage,
       loading: false,
@@ -104,7 +108,9 @@ const Attachment = {
       return 'file'
     },
     referrerpolicy() {
-      return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
+      return useInstanceCapabilitiesStore().mediaProxyAvailable
+        ? ''
+        : 'no-referrer'
     },
     type() {
       return fileTypeService.fileType(this.attachment.mimetype)
diff --git a/src/components/auth_form/auth_form.js b/src/components/auth_form/auth_form.js
index ce88aa6f9..9e05095ca 100644
--- a/src/components/auth_form/auth_form.js
+++ b/src/components/auth_form/auth_form.js
@@ -1,11 +1,12 @@
 import { mapState } from 'pinia'
 import { h, resolveComponent } from 'vue'
 
-import { useAuthFlowStore } from 'src/stores/auth_flow'
 import LoginForm from '../login_form/login_form.vue'
 import MFARecoveryForm from '../mfa_form/recovery_form.vue'
 import MFATOTPForm from '../mfa_form/totp_form.vue'
 
+import { useAuthFlowStore } from 'src/stores/auth_flow.js'
+
 const AuthForm = {
   name: 'AuthForm',
   render() {
diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js
index aad157686..830b64219 100644
--- a/src/components/avatar_list/avatar_list.js
+++ b/src/components/avatar_list/avatar_list.js
@@ -1,6 +1,9 @@
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 const AvatarList = {
   props: ['users'],
   computed: {
@@ -16,7 +19,7 @@ const AvatarList = {
       return generateProfileLink(
         user.id,
         user.screen_name,
-        this.$store.state.instance.restrictedNicknames,
+        useInstanceStore().restrictedNicknames,
       )
     },
   },
diff --git a/src/components/basic_user_card/basic_user_card.js b/src/components/basic_user_card/basic_user_card.js
index cc4cbce44..0e45b140a 100644
--- a/src/components/basic_user_card/basic_user_card.js
+++ b/src/components/basic_user_card/basic_user_card.js
@@ -1,9 +1,12 @@
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserLink from '../user_link/user_link.vue'
 import UserPopover from '../user_popover/user_popover.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 const BasicUserCard = {
   props: ['user'],
   components: {
@@ -17,7 +20,7 @@ const BasicUserCard = {
       return generateProfileLink(
         user.id,
         user.screen_name,
-        this.$store.state.instance.restrictedNicknames,
+        useInstanceStore().restrictedNicknames,
       )
     },
   },
diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js
index 7301bf0c7..967ce2a3c 100644
--- a/src/components/block_card/block_card.js
+++ b/src/components/block_card/block_card.js
@@ -1,7 +1,10 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+
 const BlockCard = {
   props: ['userId'],
   computed: {
@@ -24,19 +27,18 @@ const BlockCard = {
             new Date(this.user.mute_expires_at).toLocaleString(),
           ])
     },
-    ...mapState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
+    ...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
   },
   components: {
     BasicUserCard,
+    UserTimedFilterModal,
   },
   methods: {
     unblockUser() {
       this.$store.dispatch('unblockUser', this.user.id)
     },
     blockUser() {
-      if (this.blockExpirationSupported) {
+      if (this.blockExpiration) {
         this.$refs.timedBlockDialog.optionallyPrompt()
       } else {
         this.$store.dispatch('blockUser', { id: this.user.id })
diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.js b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
index a658a0f40..a036895bf 100644
--- a/src/components/bookmark_folder_edit/bookmark_folder_edit.js
+++ b/src/components/bookmark_folder_edit/bookmark_folder_edit.js
@@ -1,8 +1,9 @@
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
-import { useInterfaceStore } from 'src/stores/interface'
 import apiService from '../../services/api/api.service'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 const BookmarkFolderEdit = {
   data() {
     return {
diff --git a/src/components/bookmark_folders/bookmark_folders.js b/src/components/bookmark_folders/bookmark_folders.js
index 8e09abb31..1147fd3a5 100644
--- a/src/components/bookmark_folders/bookmark_folders.js
+++ b/src/components/bookmark_folders/bookmark_folders.js
@@ -1,6 +1,7 @@
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
 
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
+
 const BookmarkFolders = {
   data() {
     return {
diff --git a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
index e84b3bc85..be1fb06ea 100644
--- a/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
+++ b/src/components/bookmark_folders_menu/bookmark_folders_menu_content.js
@@ -2,7 +2,8 @@ import { mapState } from 'pinia'
 
 import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
+
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
 
 export const BookmarkFoldersMenuContent = {
   props: ['showPin'],
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index 6dd69ada4..caeb2aea7 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -2,7 +2,6 @@ import _ from 'lodash'
 import { mapState as mapPiniaState } from 'pinia'
 import { mapGetters, mapState } from 'vuex'
 
-import { useInterfaceStore } from 'src/stores/interface.js'
 import { WSConnectionStatus } from '../../services/api/api.service.js'
 import chatService from '../../services/chat_service/chat_service.js'
 import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
@@ -17,6 +16,8 @@ import {
   isScrollable,
 } from './chat_layout_utils.js'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons'
 
diff --git a/src/components/chat_list_item/chat_list_item.js b/src/components/chat_list_item/chat_list_item.js
index 0923a8568..4f4ea4955 100644
--- a/src/components/chat_list_item/chat_list_item.js
+++ b/src/components/chat_list_item/chat_list_item.js
@@ -1,12 +1,13 @@
 import { mapState } from 'vuex'
 
-import fileType from 'src/services/file_type/file_type.service'
 import AvatarList from '../avatar_list/avatar_list.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
 import StatusBody from '../status_content/status_content.vue'
 import Timeago from '../timeago/timeago.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 
+import fileType from 'src/services/file_type/file_type.service'
+
 const ChatListItem = {
   name: 'ChatListItem',
   props: ['chat'],
diff --git a/src/components/chat_message/chat_message.js b/src/components/chat_message/chat_message.js
index f3cc495c2..af3701ebf 100644
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@@ -2,7 +2,6 @@ import { mapState as mapPiniaState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
 import { mapGetters, mapState } from 'vuex'
 
-import { useInterfaceStore } from 'src/stores/interface'
 import Attachment from '../attachment/attachment.vue'
 import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
 import Gallery from '../gallery/gallery.vue'
@@ -11,6 +10,9 @@ import Popover from '../popover/popover.vue'
 import StatusContent from '../status_content/status_content.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faEllipsisH, faTimes } from '@fortawesome/free-solid-svg-icons'
 
@@ -74,7 +76,7 @@ const ChatMessage = {
     }),
     ...mapState({
       currentUser: (state) => state.users.currentUser,
-      restrictedNicknames: (state) => state.instance.restrictedNicknames,
+      restrictedNicknames: (state) => useInstanceStore().restrictedNicknames,
     }),
     popoverMarginStyle() {
       if (this.isCurrentUser) {
diff --git a/src/components/component_preview/component_preview.js b/src/components/component_preview/component_preview.js
index 70696f56b..1d54f58de 100644
--- a/src/components/component_preview/component_preview.js
+++ b/src/components/component_preview/component_preview.js
@@ -1,5 +1,6 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ColorInput from 'src/components/color_input/color_input.vue'
+
 import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
 import {
   adoptStyleSheets,
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 3caf4add7..cb7cf4782 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -2,13 +2,14 @@ import { clone, filter, findIndex, get, reduce } from 'lodash'
 import { mapState as mapPiniaState } from 'pinia'
 import { mapGetters, mapState } from 'vuex'
 
-import { useInterfaceStore } from 'src/stores/interface'
 import { WSConnectionStatus } from '../../services/api/api.service.js'
 import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
 import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
 import Status from '../status/status.vue'
 import ThreadTree from '../thread_tree/thread_tree.vue'
 
+import { useInterfaceStore } from 'src/stores/interface'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAngleDoubleDown,
diff --git a/src/components/desktop_nav/desktop_nav.js b/src/components/desktop_nav/desktop_nav.js
index 8ab54b3df..943c66d1e 100644
--- a/src/components/desktop_nav/desktop_nav.js
+++ b/src/components/desktop_nav/desktop_nav.js
@@ -1,8 +1,11 @@
 import SearchBar from 'components/search_bar/search_bar.vue'
+import { mapActions, mapState } from 'pinia'
 
-import { useInterfaceStore } from 'src/stores/interface'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,
@@ -51,7 +54,7 @@ export default {
   }),
   computed: {
     enableMask() {
-      return this.supportsMask && this.$store.state.instance.logoMask
+      return this.supportsMask && this.logoMask
     },
     logoStyle() {
       return {
@@ -61,7 +64,7 @@ export default {
     logoMaskStyle() {
       return this.enableMask
         ? {
-            'mask-image': `url(${this.$store.state.instance.logo})`,
+            'mask-image': `url(${this.logo})`,
           }
         : {
             'background-color': this.enableMask ? '' : 'transparent',
@@ -70,7 +73,7 @@ export default {
     logoBgStyle() {
       return Object.assign(
         {
-          margin: `${this.$store.state.instance.logoMargin} 0`,
+          margin: `${this.logoMargin} 0`,
           opacity: this.searchBarHidden ? 1 : 0,
         },
         this.enableMask
@@ -80,24 +83,18 @@ export default {
             },
       )
     },
-    logo() {
-      return this.$store.state.instance.logo
-    },
-    sitename() {
-      return this.$store.state.instance.name
-    },
-    hideSitename() {
-      return this.$store.state.instance.hideSitename
-    },
-    logoLeft() {
-      return this.$store.state.instance.logoLeft
-    },
+    ...mapState(useInstanceStore, ['privateMode']),
+    ...mapState(useInstanceStore, {
+      logoMask: (store) => store.instanceIdentity.logoMask,
+      logo: (store) => store.instanceIdentity.logo,
+      logoLeft: (store) => store.instanceIdentity.logoLeft,
+      logoMargin: (store) => store.instanceIdentity.logoMargin,
+      sitename: (store) => store.instanceIdentity.name,
+      hideSitename: (store) => store.instanceIdentity.hideSitename,
+    }),
     currentUser() {
       return this.$store.state.users.currentUser
     },
-    privateMode() {
-      return this.$store.state.instance.private
-    },
     shouldConfirmLogout() {
       return this.$store.getters.mergedConfig.modalOnLogout
     },
@@ -127,11 +124,6 @@ export default {
     onSearchBarToggled(hidden) {
       this.searchBarHidden = hidden
     },
-    openSettingsModal() {
-      useInterfaceStore().openSettingsModal('user')
-    },
-    openAdminModal() {
-      useInterfaceStore().openSettingsModal('admin')
-    },
+    ...mapActions(useInterfaceStore, ['openSettingsModal']),
   },
 }
diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index 49382f8ee..da427f2a1 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -40,7 +40,7 @@
         <button
           class="button-unstyled nav-icon"
           :title="$t('nav.preferences')"
-          @click.stop="openSettingsModal"
+          @click.stop="openSettingsModal('user')"
         >
           <FAIcon
             fixed-width
@@ -53,7 +53,7 @@
           class="button-unstyled nav-icon"
           target="_blank"
           :title="$t('nav.administration')"
-          @click.stop="openAdminModal"
+          @click.stop="openSettingsModal('admin')"
         >
           <FAIcon
             fixed-width
diff --git a/src/components/edit_status_modal/edit_status_modal.js b/src/components/edit_status_modal/edit_status_modal.js
index 8a16e4234..07836f161 100644
--- a/src/components/edit_status_modal/edit_status_modal.js
+++ b/src/components/edit_status_modal/edit_status_modal.js
@@ -1,9 +1,10 @@
 import get from 'lodash/get'
 
-import { useEditStatusStore } from 'src/stores/editStatus'
 import EditStatusForm from '../edit_status_form/edit_status_form.vue'
 import Modal from '../modal/modal.vue'
 
+import { useEditStatusStore } from 'src/stores/editStatus.js'
+
 const EditStatusModal = {
   components: {
     EditStatusForm,
diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js
index 79d97cff7..c478fea67 100644
--- a/src/components/emoji_input/suggestor.js
+++ b/src/components/emoji_input/suggestor.js
@@ -2,7 +2,7 @@
  * suggest - generates a suggestor function to be used by emoji-input
  * data: object providing source information for specific types of suggestions:
  * data.emoji - optional, an array of all emoji available i.e.
- *   (getters.standardEmojiList + state.instance.customEmoji)
+ *   (useEmojiStore().standardEmojiList + state.instance.customEmoji)
  * data.users - optional, an array of all known users
  * updateUsersList - optional, a function to search and append to users
  *
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index e4221f706..79c0ab47e 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -6,6 +6,9 @@ import { ensureFinalFallback } from '../../i18n/languages.js'
 import Checkbox from '../checkbox/checkbox.vue'
 import StillImage from '../still-image/still-image.vue'
 
+import { useEmojiStore } from 'src/stores/emoji.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBasketballBall,
@@ -349,8 +352,8 @@ const EmojiPicker = {
       return this.showingStickers ? '' : this.activeGroup
     },
     stickersAvailable() {
-      if (this.$store.state.instance.stickers) {
-        return this.$store.state.instance.stickers.length > 0
+      if (useEmojiStore().stickers) {
+        return useEmojiStore().stickers.length > 0
       }
       return 0
     },
@@ -358,7 +361,7 @@ const EmojiPicker = {
       if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
         return {}
       }
-      const emojis = this.$store.getters.groupedCustomEmojis
+      const emojis = useEmojiStore().groupedCustomEmojis
       if (emojis.unpacked) {
         emojis.unpacked.text = this.$t('emoji.unpacked')
       }
@@ -368,7 +371,7 @@ const EmojiPicker = {
       return Object.keys(this.allCustomGroups)[0]
     },
     unicodeEmojiGroups() {
-      return this.$store.getters.standardEmojiGroupList.map((group) => ({
+      return useEmojiStore().standardEmojiGroupList.map((group) => ({
         id: `standard-${group.id}`,
         text: this.$t(`emoji.unicode_groups.${group.id}`),
         icon: UNICODE_EMOJI_GROUP_ICON[group.id],
@@ -381,7 +384,7 @@ const EmojiPicker = {
         .concat(this.unicodeEmojiGroups)
     },
     stickerPickerEnabled() {
-      return (this.$store.state.instance.stickers || []).length !== 0
+      return (useEmojiStore().stickers || []).length !== 0
     },
     debouncedHandleKeywordChange() {
       return debounce(() => {
diff --git a/src/components/extra_notifications/extra_notifications.js b/src/components/extra_notifications/extra_notifications.js
index 1deebd878..85f4f72bd 100644
--- a/src/components/extra_notifications/extra_notifications.js
+++ b/src/components/extra_notifications/extra_notifications.js
@@ -1,8 +1,8 @@
 import { mapState as mapPiniaState } from 'pinia'
 import { mapGetters } from 'vuex'
 
-import { useAnnouncementsStore } from 'src/stores/announcements'
-import { useInterfaceStore } from 'src/stores/interface'
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js
index e92cb975e..106da1487 100644
--- a/src/components/features_panel/features_panel.js
+++ b/src/components/features_panel/features_panel.js
@@ -1,33 +1,24 @@
+import { mapState } from 'pinia'
+
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+
 const FeaturesPanel = {
   computed: {
-    shout: function () {
-      return this.$store.state.instance.shoutAvailable
-    },
-    pleromaChatMessages: function () {
-      return this.$store.state.instance.pleromaChatMessagesAvailable
-    },
-    gopher: function () {
-      return this.$store.state.instance.gopherAvailable
-    },
-    whoToFollow: function () {
-      return this.$store.state.instance.suggestionsEnabled
-    },
-    mediaProxy: function () {
-      return this.$store.state.instance.mediaProxyAvailable
-    },
-    minimalScopesMode: function () {
-      return this.$store.state.instance.minimalScopesMode
-    },
-    textlimit: function () {
-      return this.$store.state.instance.textlimit
-    },
-    uploadlimit: function () {
-      return fileSizeFormatService.fileSizeFormat(
-        this.$store.state.instance.uploadlimit,
-      )
-    },
+    ...mapState(useInstanceCapabilitiesStore, [
+      'shoutAvailable',
+      'pleromaChatMessagesAvailable',
+      'gopherAvailable',
+      'suggestionsEnabled',
+      'mediaProxyAvailable',
+    ]),
+    ...mapState(useInstanceStore, {
+      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 d91ef1eff..4270436fa 100644
--- a/src/components/features_panel/features_panel.vue
+++ b/src/components/features_panel/features_panel.vue
@@ -8,19 +8,19 @@
       </div>
       <div class="panel-body">
         <ul>
-          <li v-if="shout">
+          <li v-if="shoutAvailable">
             {{ $t('features_panel.shout') }}
           </li>
-          <li v-if="pleromaChatMessages">
+          <li v-if="pleromaChatMessagesAvailable">
             {{ $t('features_panel.pleroma_chat_messages') }}
           </li>
-          <li v-if="gopher">
+          <li v-if="gopherAvailable">
             {{ $t('features_panel.gopher') }}
           </li>
-          <li v-if="whoToFollow">
+          <li v-if="suggestionsEnabled">
             {{ $t('features_panel.who_to_follow') }}
           </li>
-          <li v-if="mediaProxy">
+          <li v-if="mediaProxyAvailable">
             {{ $t('features_panel.media_proxy') }}
           </li>
           <li>{{ $t('features_panel.scope_options') }}</li>
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 08d25d52d..45e5fde81 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,8 +1,9 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
-import { useInterfaceStore } from 'src/stores/interface'
 import Select from '../select/select.vue'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faExclamationTriangle,
diff --git a/src/components/gallery/gallery.js b/src/components/gallery/gallery.js
index 9934a7905..6015861f8 100644
--- a/src/components/gallery/gallery.js
+++ b/src/components/gallery/gallery.js
@@ -1,8 +1,9 @@
 import { set, sumBy } from 'lodash'
 
-import { useMediaViewerStore } from 'src/stores/media_viewer'
 import Attachment from '../attachment/attachment.vue'
 
+import { useMediaViewerStore } from 'src/stores/media_viewer.js'
+
 const Gallery = {
   props: [
     'attachments',
diff --git a/src/components/global_notice_list/global_notice_list.js b/src/components/global_notice_list/global_notice_list.js
index 4a2726d7b..f3a7eee42 100644
--- a/src/components/global_notice_list/global_notice_list.js
+++ b/src/components/global_notice_list/global_notice_list.js
@@ -1,4 +1,4 @@
-import { useInterfaceStore } from 'src/stores/interface'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
diff --git a/src/components/instance_specific_panel/instance_specific_panel.js b/src/components/instance_specific_panel/instance_specific_panel.js
index eead52f40..1ab0eec61 100644
--- a/src/components/instance_specific_panel/instance_specific_panel.js
+++ b/src/components/instance_specific_panel/instance_specific_panel.js
@@ -1,7 +1,9 @@
+import { useInstanceStore } from 'src/stores/instance.js'
+
 const InstanceSpecificPanel = {
   computed: {
     instanceSpecificPanelContent() {
-      return this.$store.state.instance.instanceSpecificPanelContent
+      return useInstanceStore().instanceIdentity.instanceSpecificPanelContent
     },
   },
 }
diff --git a/src/components/lists/lists.js b/src/components/lists/lists.js
index 446178245..ae58960f5 100644
--- a/src/components/lists/lists.js
+++ b/src/components/lists/lists.js
@@ -1,6 +1,7 @@
-import { useListsStore } from 'src/stores/lists'
 import ListsCard from '../lists_card/lists_card.vue'
 
+import { useListsStore } from 'src/stores/lists.js'
+
 const Lists = {
   data() {
     return {
diff --git a/src/components/lists_edit/lists_edit.js b/src/components/lists_edit/lists_edit.js
index 64a2e942c..83bd56de9 100644
--- a/src/components/lists_edit/lists_edit.js
+++ b/src/components/lists_edit/lists_edit.js
@@ -3,12 +3,13 @@ import { mapGetters, mapState } from 'vuex'
 
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
-import { useInterfaceStore } from 'src/stores/interface'
-import { useListsStore } from 'src/stores/lists'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+import { useListsStore } from 'src/stores/lists.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronLeft, faSearch } from '@fortawesome/free-solid-svg-icons'
 
diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js
index 7574c4c3f..d96f14599 100644
--- a/src/components/lists_menu/lists_menu_content.js
+++ b/src/components/lists_menu/lists_menu_content.js
@@ -3,7 +3,9 @@ import { mapState } from 'vuex'
 
 import { getListEntries } from 'src/components/navigation/filter.js'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
-import { useListsStore } from 'src/stores/lists'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useListsStore } from 'src/stores/lists.js'
 
 export const ListsMenuContent = {
   props: ['showPin'],
@@ -16,8 +18,6 @@ export const ListsMenuContent = {
     }),
     ...mapState({
       currentUser: (state) => state.users.currentUser,
-      privateMode: (state) => state.instance.private,
-      federating: (state) => state.instance.federating,
     }),
   },
 }
diff --git a/src/components/lists_timeline/lists_timeline.js b/src/components/lists_timeline/lists_timeline.js
index ae1554eb6..3d2cafa73 100644
--- a/src/components/lists_timeline/lists_timeline.js
+++ b/src/components/lists_timeline/lists_timeline.js
@@ -1,6 +1,7 @@
-import { useListsStore } from 'src/stores/lists'
 import Timeline from '../timeline/timeline.vue'
 
+import { useListsStore } from 'src/stores/lists.js'
+
 const ListsTimeline = {
   data() {
     return {
diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js
index 7c43923c9..b16fb8d2f 100644
--- a/src/components/login_form/login_form.js
+++ b/src/components/login_form/login_form.js
@@ -1,10 +1,12 @@
 import { mapActions, mapState as mapPiniaState, mapStores } from 'pinia'
 import { mapState } from 'vuex'
 
-import { useAuthFlowStore } from 'src/stores/auth_flow.js'
-import { useOAuthStore } from 'src/stores/oauth.js'
 import oauthApi from '../../services/new_api/oauth.js'
 
+import { useAuthFlowStore } from 'src/stores/auth_flow.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useOAuthStore } from 'src/stores/oauth.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
@@ -16,41 +18,34 @@ const LoginForm = {
     error: false,
   }),
   computed: {
-    isPasswordAuth() {
-      return this.requiredPassword
-    },
-    isTokenAuth() {
-      return this.requiredToken
-    },
-    ...mapStores(useOAuthStore),
     ...mapState({
-      registrationOpen: (state) => state.instance.registrationOpen,
-      instance: (state) => state.instance,
       loggingIn: (state) => state.users.loggingIn,
     }),
-    ...mapPiniaState(useAuthFlowStore, [
-      'requiredPassword',
-      'requiredToken',
-      'requiredMFA',
-    ]),
+    ...mapPiniaState(useOAuthStore, ['clientId', 'clientSecret']),
+    ...mapPiniaState(useInstanceStore, ['server', 'registrationOpen']),
+    ...mapPiniaState(useAuthFlowStore, {
+      isTokenAuth: (store) => store.requiredToken,
+      isPasswordAuth: (store) => !store.requiredToken,
+    }),
   },
   methods: {
     ...mapActions(useAuthFlowStore, ['requireMFA', 'login']),
+    ...mapActions(useOAuthStore, ['ensureAppToken']),
     submit() {
       this.isTokenAuth ? this.submitToken() : this.submitPassword()
     },
     submitToken() {
       const data = {
-        instance: this.instance.server,
+        instance: this.server,
         commit: this.$store.commit,
       }
 
       // NOTE: we do not really need the app token, but obtaining a token and
       // calling verify_credentials is the only way to ensure the app still works.
-      this.oauthStore.ensureAppToken().then(() => {
+      this.ensureAppToken().then(() => {
         const app = {
-          clientId: this.oauthStore.clientId,
-          clientSecret: this.oauthStore.clientSecret,
+          clientId: this.clientId,
+          clientSecret: this.clientSecret,
         }
         oauthApi.login({ ...app, ...data })
       })
@@ -60,16 +55,16 @@ const LoginForm = {
 
       // NOTE: we do not really need the app token, but obtaining a token and
       // calling verify_credentials is the only way to ensure the app still works.
-      this.oauthStore.ensureAppToken().then(() => {
+      this.ensureAppToken().then(() => {
         const app = {
-          clientId: this.oauthStore.clientId,
-          clientSecret: this.oauthStore.clientSecret,
+          clientId: this.clientId,
+          clientSecret: this.clientSecret,
         }
 
         oauthApi
           .getTokenWithCredentials({
             ...app,
-            instance: this.instance.server,
+            instance: this.server,
             username: this.user.username,
             password: this.user.password,
           })
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index 6199a6e32..f0db02ffd 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -1,5 +1,4 @@
 import Flash from 'src/components/flash/flash.vue'
-import { useMediaViewerStore } from 'src/stores/media_viewer'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import GestureService from '../../services/gesture_service/gesture_service'
 import Modal from '../modal/modal.vue'
@@ -8,6 +7,8 @@ import StillImage from '../still-image/still-image.vue'
 import SwipeClick from '../swipe_click/swipe_click.vue'
 import VideoAttachment from '../video_attachment/video_attachment.vue'
 
+import { useMediaViewerStore } from 'src/stores/media_viewer.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronLeft,
diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js
index 8dc3d6c65..ee61fa369 100644
--- a/src/components/media_upload/media_upload.js
+++ b/src/components/media_upload/media_upload.js
@@ -1,8 +1,8 @@
-/* eslint-env browser */
-
 import fileSizeFormatService from '../../services/file_size_format/file_size_format.js'
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faUpload } from '@fortawesome/free-solid-svg-icons'
 
@@ -122,10 +122,10 @@ const mediaUpload = {
     async uploadFile(file) {
       const self = this
       const store = this.$store
-      if (file.size > store.state.instance.uploadlimit) {
+      if (file.size > useInstanceStore().uploadlimit) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(
-          store.state.instance.uploadlimit,
+          useInstanceStore().uploadlimit,
         )
         self.$emit('upload-failed', 'file_too_big', {
           filesize: filesize.num,
diff --git a/src/components/mention_link/mention_link.js b/src/components/mention_link/mention_link.js
index 4c211b5e9..37c30355c 100644
--- a/src/components/mention_link/mention_link.js
+++ b/src/components/mention_link/mention_link.js
@@ -1,7 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 import { mapGetters, mapState } from 'vuex'
 
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import {
   highlightClass,
   highlightStyle,
@@ -9,6 +8,8 @@ import {
 import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
 
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faAt } from '@fortawesome/free-solid-svg-icons'
 
diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js
index 5fa5c187a..f4ddcadd0 100644
--- a/src/components/mfa_form/recovery_form.js
+++ b/src/components/mfa_form/recovery_form.js
@@ -1,9 +1,10 @@
-import { mapActions, mapState as mapPiniaState, mapStores } from 'pinia'
-import { mapState } from 'vuex'
+import { mapActions, mapState, mapStores } from 'pinia'
+
+import mfaApi from '../../services/new_api/mfa.js'
 
 import { useAuthFlowStore } from 'src/stores/auth_flow.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
-import mfaApi from '../../services/new_api/mfa.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -16,13 +17,10 @@ export default {
     error: false,
   }),
   computed: {
-    ...mapPiniaState(useAuthFlowStore, {
-      authSettings: (store) => store.settings,
-    }),
     ...mapStores(useOAuthStore),
-    ...mapState({
-      instance: 'instance',
-    }),
+    ...mapState(useOAuthStore, ['clientId', 'clientSecret']),
+    ...mapState(useAuthFlowStore, ['settings']),
+    ...mapState(useInstanceStore, ['server']),
   },
   methods: {
     ...mapActions(useAuthFlowStore, ['requireTOTP', 'abortMFA', 'login']),
@@ -37,13 +35,11 @@ export default {
     },
 
     submit() {
-      const { clientId, clientSecret } = this.oauthStore
-
       const data = {
-        clientId,
-        clientSecret,
-        instance: this.instance.server,
-        mfaToken: this.authSettings.mfa_token,
+        clientId: this.clientId,
+        clientSecret: this.clientSecret,
+        instance: this.server,
+        mfaToken: this.settings.mfa_token,
         code: this.code,
       }
 
diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js
index d1378b078..6d51cba94 100644
--- a/src/components/mfa_form/totp_form.js
+++ b/src/components/mfa_form/totp_form.js
@@ -1,9 +1,10 @@
-import { mapActions, mapState as mapPiniaState, mapStores } from 'pinia'
-import { mapState } from 'vuex'
+import { mapActions, mapState, mapStores } from 'pinia'
+
+import mfaApi from '../../services/new_api/mfa.js'
 
 import { useAuthFlowStore } from 'src/stores/auth_flow.js'
+import { useInstanceStore } from 'src/stores/instance.js'
 import { useOAuthStore } from 'src/stores/oauth.js'
-import mfaApi from '../../services/new_api/mfa.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -16,13 +17,11 @@ export default {
     error: false,
   }),
   computed: {
-    ...mapPiniaState(useAuthFlowStore, {
+    ...mapState(useAuthFlowStore, {
       authSettings: (store) => store.settings,
     }),
+    ...mapState(useInstanceStore, ['server']),
     ...mapStores(useOAuthStore),
-    ...mapState({
-      instance: 'instance',
-    }),
   },
   methods: {
     ...mapActions(useAuthFlowStore, ['requireRecovery', 'abortMFA', 'login']),
@@ -42,7 +41,7 @@ export default {
       const data = {
         clientId,
         clientSecret,
-        instance: this.instance.server,
+        instance: this.server,
         mfaToken: this.authSettings.mfa_token,
         code: this.code,
       }
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 873bdc40d..c5b1d66f6 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -2,8 +2,6 @@ import { mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import NavigationPins from 'src/components/navigation/navigation_pins.vue'
-import { useAnnouncementsStore } from 'src/stores/announcements'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import GestureService from '../../services/gesture_service/gesture_service'
 import {
   countExtraNotifications,
@@ -13,6 +11,10 @@ import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import Notifications from '../notifications/notifications.vue'
 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 { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faArrowUp,
@@ -64,10 +66,10 @@ const MobileNav = {
       return `${this.unseenCount ? this.unseenCount : ''}`
     },
     hideSitename() {
-      return this.$store.state.instance.hideSitename
+      return useInstanceStore().hideSitename
     },
     sitename() {
-      return this.$store.state.instance.name
+      return useInstanceStore().name
     },
     isChat() {
       return this.$route.name === 'chat'
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 dfa7b6fe2..83103c827 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,6 +1,6 @@
 import { debounce } from 'lodash'
 
-import { usePostStatusStore } from 'src/stores/post_status'
+import { usePostStatusStore } from 'src/stores/post_status.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPen } from '@fortawesome/free-solid-svg-icons'
diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index fdb8a74b6..4149fd6d0 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -1,6 +1,9 @@
 import DialogModal from '../dialog_modal/dialog_modal.vue'
 import Popover from '../popover/popover.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
@@ -54,7 +57,7 @@ const ModerationTools = {
     },
     canUseTagPolicy() {
       return (
-        this.$store.state.instance.tagPolicyAvailable &&
+        useInstanceCapabilitiesStore().tagPolicyAvailable &&
         this.privileged('users_manage_tags')
       )
     },
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index d80cd0a5d..8aff31f02 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -8,7 +8,10 @@ import { filterNavigation } from 'src/components/navigation/filter.js'
 import { ROOT_ITEMS, TIMELINES } from 'src/components/navigation/navigation.js'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 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 { library } from '@fortawesome/fontawesome-svg-core'
@@ -110,6 +113,15 @@ const NavPanel = {
       unreadAnnouncementCount: 'unreadAnnouncementCount',
       supportsAnnouncements: (store) => store.supportsAnnouncements,
     }),
+    ...mapPiniaState(useInstanceCapabilitiesStore, [
+      'pleromaChatMessagesAvailable',
+      'pleromaBookmarkFoldersAvailable',
+      'localBubble',
+    ]),
+    ...mapPiniaState(useInstanceStore, ['federating']),
+    ...mapPiniaState(useInstanceStore, {
+      privateMode: (store) => store.private,
+    }),
     ...mapPiniaState(useServerSideStorageStore, {
       collapsed: (store) => store.prefsStorage.simple.collapseNav,
       pinnedItems: (store) =>
@@ -118,13 +130,6 @@ const NavPanel = {
     ...mapState({
       currentUser: (state) => state.users.currentUser,
       followRequestCount: (state) => state.api.followRequests.length,
-      privateMode: (state) => state.instance.private,
-      federating: (state) => state.instance.federating,
-      pleromaChatMessagesAvailable: (state) =>
-        state.instance.pleromaChatMessagesAvailable,
-      bookmarkFolders: (state) =>
-        state.instance.pleromaBookmarkFoldersAvailable,
-      bubbleTimeline: (state) => state.instance.localBubbleInstances.length > 0,
     }),
     timelinesItems() {
       return filterNavigation(
@@ -138,8 +143,8 @@ const NavPanel = {
           isFederating: this.federating,
           isPrivate: this.privateMode,
           currentUser: this.currentUser,
-          supportsBubbleTimeline: this.bubbleTimeline,
-          supportsBookmarkFolders: this.bookmarkFolders,
+          supportsBubbleTimeline: this.localBubble,
+          supportsBookmarkFolders: this.pleromaBookmarkFoldersAvailable,
         },
       )
     },
@@ -152,8 +157,8 @@ const NavPanel = {
           isFederating: this.federating,
           isPrivate: this.privateMode,
           currentUser: this.currentUser,
-          supportsBubbleTimeline: this.bubbleTimeline,
-          supportsBookmarkFolders: this.bookmarkFolders,
+          supportsBubbleTimeline: this.localBubble,
+          supportsBookmarkFolders: this.pleromaBookmarkFoldersAvailable,
         },
       )
     },
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 10903bcae..ae5c6eae4 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -84,7 +84,7 @@
           />
         </div>
         <NavigationEntry
-          v-if="currentUser && bookmarkFolders"
+          v-if="currentUser && pleromaBookmarkFoldersAvailable"
           :show-pin="false"
           :item="{ icon: 'bookmark', label: 'nav.bookmarks' }"
           :aria-expanded="showBookmarkFolders ? 'true' : 'false'"
diff --git a/src/components/navigation/navigation_entry.js b/src/components/navigation/navigation_entry.js
index 75d4dffdd..3384534be 100644
--- a/src/components/navigation/navigation_entry.js
+++ b/src/components/navigation/navigation_entry.js
@@ -3,8 +3,9 @@ import { mapState } from 'vuex'
 
 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'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faThumbtack } from '@fortawesome/free-solid-svg-icons'
diff --git a/src/components/navigation/navigation_pins.js b/src/components/navigation/navigation_pins.js
index e14edce14..698bf5d59 100644
--- a/src/components/navigation/navigation_pins.js
+++ b/src/components/navigation/navigation_pins.js
@@ -12,8 +12,11 @@ import {
   TIMELINES,
 } from 'src/components/navigation/navigation.js'
 import StillImage from 'src/components/still-image/still-image.vue'
+
 import { useAnnouncementsStore } from 'src/stores/announcements'
 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'
 
@@ -71,14 +74,14 @@ const NavPanel = {
       pinnedItems: (store) =>
         new Set(store.prefsStorage.collections.pinnedNavItems),
     }),
+    ...mapPiniaState(useInstanceStore, ['privateMode', 'federating']),
+    ...mapPiniaState(useInstanceCapabilitiesStore, [
+      'pleromaChatMessagesAvailable',
+      'localBubble',
+    ]),
     ...mapState({
       currentUser: (state) => state.users.currentUser,
       followRequestCount: (state) => state.api.followRequests.length,
-      privateMode: (state) => state.instance.private,
-      federating: (state) => state.instance.federating,
-      pleromaChatMessagesAvailable: (state) =>
-        state.instance.pleromaChatMessagesAvailable,
-      bubbleTimeline: (state) => state.instance.localBubbleInstances.length > 0,
     }),
     pinnedList() {
       if (!this.currentUser) {
@@ -94,7 +97,7 @@ const NavPanel = {
             isFederating: this.federating,
             isPrivate: this.privateMode,
             currentUser: this.currentUser,
-            supportsBubbleTimeline: this.bubbleTimeline,
+            supportsBubbleTimeline: this.localBubble,
             supportsBookmarkFolders: this.bookmarks,
           },
         )
@@ -113,7 +116,7 @@ const NavPanel = {
         {
           hasChats: this.pleromaChatMessagesAvailable,
           hasAnnouncements: this.supportsAnnouncements,
-          supportsBubbleTimeline: this.bubbleTimeline,
+          supportsBubbleTimeline: this.localBubble,
           supportsBookmarkFolders: this.bookmarks,
           isFederating: this.federating,
           isPrivate: this.privateMode,
diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js
index 275827c43..16084dee4 100644
--- a/src/components/notification/notification.js
+++ b/src/components/notification/notification.js
@@ -1,7 +1,6 @@
 import { mapState } from 'vuex'
 
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { isStatusNotification } from '../../services/notification_utils/notification_utils.js'
 import {
   highlightClass,
@@ -17,6 +16,10 @@ import UserCard from '../user_card/user_card.vue'
 import UserLink from '../user_link/user_link.vue'
 import UserPopover from '../user_popover/user_popover.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCheck,
@@ -107,7 +110,7 @@ const Notification = {
       return generateProfileLink(
         user.id,
         user.screen_name,
-        this.$store.state.instance.restrictedNicknames,
+        useInstanceStore().restrictedNicknames,
       )
     },
     getUser(notification) {
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 9e349a2eb..6483a256e 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -2,8 +2,6 @@ import { mapState } from 'pinia'
 import { computed } from 'vue'
 import { mapGetters } from 'vuex'
 
-import { useAnnouncementsStore } from 'src/stores/announcements'
-import { useInterfaceStore } from 'src/stores/interface'
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import {
   ACTIONABLE_NOTIFICATION_TYPES,
@@ -17,6 +15,9 @@ import ExtraNotifications from '../extra_notifications/extra_notifications.vue'
 import Notification from '../notification/notification.vue'
 import NotificationFilters from './notification_filters.vue'
 
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faArrowUp,
diff --git a/src/components/oauth_callback/oauth_callback.js b/src/components/oauth_callback/oauth_callback.js
index 82c3db047..4bcb9803e 100644
--- a/src/components/oauth_callback/oauth_callback.js
+++ b/src/components/oauth_callback/oauth_callback.js
@@ -1,6 +1,8 @@
-import { useOAuthStore } from 'src/stores/oauth.js'
 import oauth from '../../services/new_api/oauth.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useOAuthStore } from 'src/stores/oauth.js'
+
 const oac = {
   props: ['code'],
   mounted() {
@@ -12,7 +14,7 @@ const oac = {
         .getToken({
           clientId,
           clientSecret,
-          instance: this.$store.state.instance.server,
+          instance: useInstanceStore().server,
           code: this.code,
         })
         .then((result) => {
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
index 21b40bccb..eec9fe361 100644
--- a/src/components/palette_editor/palette_editor.vue
+++ b/src/components/palette_editor/palette_editor.vue
@@ -48,11 +48,13 @@
 import { computed } from 'vue'
 
 import ColorInput from 'src/components/color_input/color_input.vue'
+
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import {
   newExporter,
   newImporter,
 } from 'src/services/export_import/export_import.js'
-import { useInterfaceStore } from 'src/stores/interface'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFileExport, faFileImport } from '@fortawesome/free-solid-svg-icons'
diff --git a/src/components/password_reset/password_reset.js b/src/components/password_reset/password_reset.js
index 4fd53f8dd..5a54d846b 100644
--- a/src/components/password_reset/password_reset.js
+++ b/src/components/password_reset/password_reset.js
@@ -1,7 +1,10 @@
+import { mapState as mapPiniaState } from 'pinia'
 import { mapState } from 'vuex'
 
 import passwordResetApi from '../../services/new_api/password_reset.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
 
@@ -20,11 +23,8 @@ const passwordReset = {
   computed: {
     ...mapState({
       signedIn: (state) => !!state.users.currentUser,
-      instance: (state) => state.instance,
     }),
-    mailerEnabled() {
-      return this.instance.mailerEnabled
-    },
+    ...mapPiniaState(useInstanceStore, ['server', 'mailerEnabled']),
   },
   created() {
     if (this.signedIn) {
@@ -44,9 +44,9 @@ const passwordReset = {
     submit() {
       this.isPending = true
       const email = this.user.email
-      const instance = this.instance.server
+      const server = this.server
 
-      passwordResetApi({ instance, email })
+      passwordResetApi({ server, email })
         .then(({ status }) => {
           this.isPending = false
           this.user.email = ''
diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index 594a7be88..f8887e53f 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -2,9 +2,10 @@ import Checkbox from 'components/checkbox/checkbox.vue'
 import RichContent from 'components/rich_content/rich_content.jsx'
 import Timeago from 'components/timeago/timeago.vue'
 
-import { usePollsStore } from 'src/stores/polls'
 import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 
+import { usePollsStore } from 'src/stores/polls.js'
+
 export default {
   name: 'Poll',
   props: ['basePoll', 'emoji'],
diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index 92b471314..1e132312f 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,6 +1,9 @@
+import Select from '../select/select.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { pollFallback } from 'src/services/poll/poll.service.js'
-import Select from '../select/select.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -52,7 +55,7 @@ export default {
       },
     },
     pollLimits() {
-      return this.$store.state.instance.pollLimits
+      return useInstanceStore().limits.pollLimits
     },
     maxOptions() {
       return this.pollLimits.max_options
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 396aa94f0..802d340ab 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -5,9 +5,6 @@ import { mapGetters } from 'vuex'
 import DraftCloser from 'src/components/draft_closer/draft_closer.vue'
 import Gallery from 'src/components/gallery/gallery.vue'
 import Popover from 'src/components/popover/popover.vue'
-import { pollFormToMasto } from 'src/services/poll/poll.service.js'
-import { useInterfaceStore } from 'src/stores/interface.js'
-import { useMediaViewerStore } from 'src/stores/media_viewer.js'
 import { propsToNative } from '../../services/attributes_helper/attributes_helper.service.js'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
@@ -23,6 +20,14 @@ import ScopeSelector from '../scope_selector/scope_selector.vue'
 import Select from '../select/select.vue'
 import StatusContent from '../status_content/status_content.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.js'
+import { useMediaViewerStore } from 'src/stores/media_viewer.js'
+
+import { pollFormToMasto } from 'src/services/poll/poll.service.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBan,
@@ -258,8 +263,8 @@ const PostStatusForm = {
     emojiUserSuggestor() {
       return suggestor({
         emoji: [
-          ...this.$store.getters.standardEmojiList,
-          ...this.$store.state.instance.customEmoji,
+          ...useEmojiStore().standardEmojiList,
+          ...useEmojiStore().customEmoji,
         ],
         store: this.$store,
       })
@@ -267,16 +272,16 @@ const PostStatusForm = {
     emojiSuggestor() {
       return suggestor({
         emoji: [
-          ...this.$store.getters.standardEmojiList,
-          ...this.$store.state.instance.customEmoji,
+          ...useEmojiStore().standardEmojiList,
+          ...useEmojiStore().customEmoji,
         ],
       })
     },
     emoji() {
-      return this.$store.getters.standardEmojiList || []
+      return useEmojiStore().standardEmojiList || []
     },
     customEmoji() {
-      return this.$store.state.instance.customEmoji || []
+      return useEmojiStore().customEmoji || []
     },
     statusLength() {
       return this.newStatus.status.length
@@ -285,7 +290,7 @@ const PostStatusForm = {
       return this.newStatus.spoilerText.length
     },
     statusLengthLimit() {
-      return this.$store.state.instance.textlimit
+      return useInstanceStore().textlimit
     },
     hasStatusLengthLimit() {
       return this.statusLengthLimit > 0
@@ -299,21 +304,21 @@ const PostStatusForm = {
       return this.hasStatusLengthLimit && this.charactersLeft < 0
     },
     minimalScopesMode() {
-      return this.$store.state.instance.minimalScopesMode
+      return useInstanceStore().minimalScopesMode
     },
     alwaysShowSubject() {
       return this.mergedConfig.alwaysShowSubjectInput
     },
     postFormats() {
-      return this.$store.state.instance.postFormats || []
+      return useInstanceCapabilitiesStore().postFormats || []
     },
     safeDMEnabled() {
-      return this.$store.state.instance.safeDM
+      return useInstanceCapabilitiesStore().safeDM
     },
     pollsAvailable() {
       return (
-        this.$store.state.instance.pollsAvailable &&
-        this.$store.state.instance.pollLimits.max_options >= 2 &&
+        useInstanceCapabilitiesStore().pollsAvailable &&
+        useInstanceStore().limits.pollLimits.max_options >= 2 &&
         this.disablePolls !== true
       )
     },
@@ -342,7 +347,7 @@ const PostStatusForm = {
       return typeof this.statusId !== 'undefined' && this.statusId.trim() !== ''
     },
     quotable() {
-      if (!this.$store.state.instance.quotingAvailable) {
+      if (!useInstanceCapabilitiesStore().quotingAvailable) {
         return false
       }
 
diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js
index 2c643e9db..0fe51791e 100644
--- a/src/components/post_status_modal/post_status_modal.js
+++ b/src/components/post_status_modal/post_status_modal.js
@@ -1,9 +1,10 @@
 import get from 'lodash/get'
 
-import { usePostStatusStore } from 'src/stores/post_status'
 import Modal from '../modal/modal.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 
+import { usePostStatusStore } from 'src/stores/post_status.js'
+
 const PostStatusModal = {
   components: {
     PostStatusForm,
diff --git a/src/components/quick_filter_settings/quick_filter_settings.js b/src/components/quick_filter_settings/quick_filter_settings.js
index 3572dbb18..84abeec72 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.js
+++ b/src/components/quick_filter_settings/quick_filter_settings.js
@@ -1,9 +1,10 @@
 import { mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
-import { useInterfaceStore } from 'src/stores/interface'
 import Popover from '../popover/popover.vue'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faFilter, faFont, faWrench } from '@fortawesome/free-solid-svg-icons'
 
diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
index 6c5a9f667..438d1405b 100644
--- a/src/components/quick_view_settings/quick_view_settings.js
+++ b/src/components/quick_view_settings/quick_view_settings.js
@@ -3,7 +3,8 @@ 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'
+
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index 8d1081acb..9058963c6 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -1,12 +1,16 @@
 import useVuelidate from '@vuelidate/core'
 import { required, requiredIf, sameAs } from '@vuelidate/validators'
+import { mapState as mapPiniaState } from 'pinia'
 import { mapActions, mapState } from 'vuex'
 
-import { DAY } from 'src/services/date_utils/date_utils.js'
 import localeService from '../../services/locale/locale.service.js'
 import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
 import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import { DAY } from 'src/services/date_utils/date_utils.js'
+
 const registration = {
   setup() {
     return { v$: useVuelidate() }
@@ -96,21 +100,21 @@ const registration = {
         )
       )
     },
+    ...mapPiniaState(useInstanceStore, {
+      registrationOpen: (store) => store.registrationOpen,
+      embeddedToS: (store) => store.embeddedToS,
+      termsOfService: (store) => store.tos,
+      accountActivationRequired: (store) => store.accountActivationRequired,
+      accountApprovalRequired: (store) => store.accountApprovalRequired,
+      birthdayRequired: (store) => store.birthdayRequired,
+      birthdayMinAge: (store) => store.birthdayMinAge,
+    }),
     ...mapState({
-      registrationOpen: (state) => state.instance.registrationOpen,
       signedIn: (state) => !!state.users.currentUser,
       isPending: (state) => state.users.signUpPending,
       serverValidationErrors: (state) => state.users.signUpErrors,
       signUpNotice: (state) => state.users.signUpNotice,
       hasSignUpNotice: (state) => !!state.users.signUpNotice.message,
-      termsOfService: (state) => state.instance.tos,
-      embeddedToS: (state) => state.instance.embeddedToS,
-      accountActivationRequired: (state) =>
-        state.instance.accountActivationRequired,
-      accountApprovalRequired: (state) =>
-        state.instance.accountApprovalRequired,
-      birthdayRequired: (state) => state.instance.birthdayRequired,
-      birthdayMinAge: (state) => state.instance.birthdayMinAge,
     }),
   },
   methods: {
diff --git a/src/components/report/report.js b/src/components/report/report.js
index a4df8eb6c..fcfb83c3a 100644
--- a/src/components/report/report.js
+++ b/src/components/report/report.js
@@ -1,10 +1,13 @@
 import RichContent from 'src/components/rich_content/rich_content.jsx'
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
-import { useReportsStore } from 'src/stores/reports'
 import Select from '../select/select.vue'
 import StatusContent from '../status_content/status_content.vue'
 import Timeago from '../timeago/timeago.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useReportsStore } from 'src/stores/reports.js'
+
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 const Report = {
   props: ['reportId'],
   components: {
@@ -31,7 +34,7 @@ const Report = {
       return generateProfileLink(
         user.id,
         user.screen_name,
-        this.$store.state.instance.restrictedNicknames,
+        useInstanceStore().restrictedNicknames,
       )
     },
     setReportState(state) {
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index 99dd8035d..3a6f0b1bc 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -5,6 +5,7 @@ import { MENTIONS_LIMIT } from 'src/components/mentions_line/mentions_line.js'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import StillImage from 'src/components/still-image/still-image.vue'
 import StillImageEmojiPopover from 'src/components/still-image/still-image-emoji-popover.vue'
+
 import { convertHtmlToLines } from 'src/services/html_converter/html_line_converter.service.js'
 import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
 import {
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index e53c2f219..115ef519b 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -6,12 +6,14 @@ import StillImage from 'components/still-image/still-image.vue'
 import { assign, clone } from 'lodash'
 
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
-import { useInterfaceStore } from 'src/stores/interface'
 import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
 import ModifiedIndicator from '../helpers/modified_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faArrowsRotate,
@@ -102,7 +104,7 @@ const EmojiTab = {
         // Remote pack
         return `${this.pack.remote.instance}/emoji/${encodeURIComponent(this.pack.remote.baseName)}/${name}`
       } else {
-        return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}`
+        return `${useInstanceStore().server}/emoji/${encodeURIComponent(this.packName)}/${name}`
       }
     },
 
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index 7563adae0..b76cd9015 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -1,6 +1,5 @@
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import Popover from 'src/components/popover/popover.vue'
-import { useInterfaceStore } from 'src/stores/interface'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import GroupSetting from '../helpers/group_setting.vue'
@@ -8,6 +7,8 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import StringSetting from '../helpers/string_setting.vue'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faGlobe } from '@fortawesome/free-solid-svg-icons'
 
diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
index 61e00a353..7ba910950 100644
--- a/src/components/settings_modal/helpers/attachment_setting.js
+++ b/src/components/settings_modal/helpers/attachment_setting.js
@@ -1,8 +1,11 @@
 import Attachment from 'src/components/attachment/attachment.vue'
 import MediaUpload from 'src/components/media_upload/media_upload.vue'
-import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
 import Setting from './setting.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+
 export default {
   ...Setting,
   props: {
@@ -24,9 +27,7 @@ export default {
     attachment() {
       const path = this.realDraftMode ? this.draft : this.state
       // The "server" part is primarily for local dev, but could be useful for alt-domain or multiuser usage.
-      const url = path.includes('://')
-        ? path
-        : this.$store.state.instance.server + path
+      const url = path.includes('://') ? path : useInstanceStore().server + path
       return {
         mimetype: fileTypeExt(url),
         url,
diff --git a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
index 6d6cdd121..5d90ccb1e 100644
--- a/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
+++ b/src/components/settings_modal/helpers/pwa_manifest_icons_setting.js
@@ -3,9 +3,12 @@ import { clone } from 'lodash'
 import Attachment from 'src/components/attachment/attachment.vue'
 import MediaUpload from 'src/components/media_upload/media_upload.vue'
 import Select from 'src/components/select/select.vue'
-import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
 import Setting from './setting.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import { fileTypeExt } from 'src/services/file_type/file_type.service.js'
+
 export default {
   ...Setting,
   components: {
@@ -34,9 +37,7 @@ export default {
           url: '',
         }
       }
-      const url = path.includes('://')
-        ? path
-        : this.$store.state.instance.server + path
+      const url = path.includes('://') ? path : useInstanceStore().server + path
 
       return {
         mimetype: fileTypeExt(url),
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index c77de92b1..2884d92b4 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -15,6 +15,10 @@ export default {
       type: String,
       default: null,
     },
+    description: {
+      type: String,
+      default: null,
+    },
     path: {
       type: [String, Array],
       required: false,
diff --git a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
index a3238ce2f..e407d29e5 100644
--- a/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
+++ b/src/components/settings_modal/helpers/vertical_tab_switcher.jsx
@@ -8,7 +8,7 @@ import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 
 import './vertical_tab_switcher.scss'
 
-import { useInterfaceStore } from 'src/stores/interface'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 const findFirstUsable = (slots) => slots.findIndex((_) => _.props)
 
@@ -35,11 +35,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    parentCollapsed: {
-      required: false,
-      type: Boolean,
-      default: null,
-    },
   },
   data() {
     return {
@@ -202,7 +197,7 @@ export default {
         </div>
         <div
           role="tabpanel"
-          class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}
+          class="contents"
           v-body-scroll-lock={this.bodyScrollLock}
           ref="contents"
         >
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index 4517c3295..f2c071045 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -6,13 +6,15 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Modal from 'src/components/modal/modal.vue'
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
+import Popover from '../popover/popover.vue'
+
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import {
   newExporter,
   newImporter,
 } from 'src/services/export_import/export_import.js'
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
-import { useInterfaceStore } from 'src/stores/interface'
-import Popover from '../popover/popover.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faWindowMinimize } from '@fortawesome/free-regular-svg-icons'
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index 1a3f10e77..6cd760833 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -1,4 +1,3 @@
-import { useInterfaceStore } from 'src/stores/interface'
 import AuthTab from './admin_tabs/auth_tab.vue'
 import EmojiTab from './admin_tabs/emoji_tab.vue'
 import FederationTab from './admin_tabs/federation_tab.vue'
@@ -18,6 +17,8 @@ import RegistrationsTab from './admin_tabs/registrations_tab.vue'
 import UploadsTab from './admin_tabs/uploads_tab.vue'
 import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChain,
diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
index f66099049..ddee812ca 100644
--- a/src/components/settings_modal/settings_modal_user_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -1,4 +1,3 @@
-import { useInterfaceStore } from 'src/stores/interface'
 import VerticalTabSwitcher from './helpers/vertical_tab_switcher.jsx'
 import AppearanceTab from './tabs/appearance_tab.vue'
 import ClutterTab from './tabs/clutter_tab.vue'
@@ -16,6 +15,8 @@ import ProfileTab from './tabs/profile_tab.vue'
 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 { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index 44460adfb..139622781 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -3,7 +3,6 @@
     ref="tabSwitcher"
     class="settings_tab-switcher"
     :scrollable-tabs="true"
-    :child-collapsed="childCollapsed"
     :body-scroll-lock="bodyLock"
     :hide-header="navHideHeader"
   >
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 1110505cc..0a217a216 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -2,6 +2,18 @@ import { mapActions } from 'pinia'
 
 import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js'
 import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
+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'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { normalizeThemeData, useInterfaceStore } from 'src/stores/interface.js'
+
 import { newImporter } from 'src/services/export_import/export_import.js'
 import {
   adoptStyleSheets,
@@ -11,15 +23,6 @@ import { getCssRules } from 'src/services/theme_data/css_utils.js'
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
-import { normalizeThemeData, useInterfaceStore } from 'src/stores/interface'
-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'
 
 const AppearanceTab = {
   data() {
@@ -83,7 +86,7 @@ const AppearanceTab = {
 
     const updateIndex = (resource) => {
       const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
-      const currentIndex = this.$store.state.instance[`${resource}sIndex`]
+      const currentIndex = useInstanceStore()[`${resource}sIndex`]
 
       let promise
       if (currentIndex) {
@@ -273,11 +276,11 @@ const AppearanceTab = {
       return !window.IntersectionObserver
     },
     instanceWallpaper() {
-      this.$store.state.instance.background
+      useInstanceStore().instanceIdentity.background
     },
     instanceWallpaperUsed() {
       return (
-        this.$store.state.instance.background &&
+        useInstanceStore().instanceIdentity.background &&
         !this.$store.state.users.currentUser.background_image
       )
     },
@@ -333,18 +336,21 @@ const AppearanceTab = {
     },
     isThemeActive(key) {
       return (
-        key === (this.mergedConfig.theme || this.$store.state.instance.theme)
+        key ===
+        (this.mergedConfig.theme || useInstanceStore().instanceIdentity.theme)
       )
     },
     isStyleActive(key) {
       return (
-        key === (this.mergedConfig.style || this.$store.state.instance.style)
+        key ===
+        (this.mergedConfig.style || useInstanceStore().instanceIdentity.style)
       )
     },
     isPaletteActive(key) {
       return (
         key ===
-        (this.mergedConfig.palette || this.$store.state.instance.palette)
+        (this.mergedConfig.palette ||
+          useInstanceStore().instanceIdentity.palette)
       )
     },
     ...mapActions(useInterfaceStore, ['setStyle', 'setTheme']),
@@ -431,10 +437,10 @@ const AppearanceTab = {
       if (!file) {
         return
       }
-      if (file.size > this.$store.state.instance[slot + 'limit']) {
+      if (file.size > useInstanceStore()[slot + 'limit']) {
         const filesize = fileSizeFormatService.fileSizeFormat(file.size)
         const allowedsize = fileSizeFormatService.fileSizeFormat(
-          this.$store.state.instance[slot + 'limit'],
+          useInstanceStore()[slot + 'limit'],
         )
         useInterfaceStore().pushGlobalNotice({
           messageKey: 'upload.error.message',
diff --git a/src/components/settings_modal/tabs/clutter_tab.js b/src/components/settings_modal/tabs/clutter_tab.js
index c0b7b33b2..23e069d21 100644
--- a/src/components/settings_modal/tabs/clutter_tab.js
+++ b/src/components/settings_modal/tabs/clutter_tab.js
@@ -1,10 +1,8 @@
 import { mapActions, mapState } from 'pinia'
 import { v4 as uuidv4 } from 'uuid'
-import { mapState as mapVuexState } from 'vuex'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import HelpIndicator from '../helpers/help_indicator.vue'
@@ -12,6 +10,10 @@ import IntegerSetting from '../helpers/integer_setting.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 { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+
 const ClutterTab = {
   components: {
     BooleanSetting,
@@ -23,18 +25,19 @@ const ClutterTab = {
     HelpIndicator,
   },
   computed: {
-    instanceSpecificPanelPresent() {
-      return this.$store.state.instance.showInstanceSpecificPanel
-    },
     ...SharedComputedObject(),
+    ...mapState(useInstanceCapabilitiesStore, ['shoutAvailable']),
+    ...mapState(useInstanceStore, {
+      showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
+      instanceSpecificPanelPresent: (store) =>
+        store.instanceIdentity.showInstanceSpecificPanel &&
+        store.instanceIdentity.instanceSpecificPanelContent,
+    }),
     ...mapState(useServerSideStorageStore, {
       muteFilters: (store) =>
         Object.entries(store.prefsStorage.simple.muteFilters),
       muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
     }),
-    ...mapVuexState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
     onMuteDefaultActionLv1: {
       get() {
         const value = this.$store.state.config.onMuteDefaultAction
diff --git a/src/components/settings_modal/tabs/clutter_tab.vue b/src/components/settings_modal/tabs/clutter_tab.vue
index daf098f5a..d14d94818 100644
--- a/src/components/settings_modal/tabs/clutter_tab.vue
+++ b/src/components/settings_modal/tabs/clutter_tab.vue
@@ -45,6 +45,11 @@
                 {{ $t('settings.hide_scrobbles_after') }}
               </UnitSetting>
             </li>
+            <li v-if="instanceSpecificPanelPresent">
+              <BooleanSetting path="hideISP">
+                {{ $t('settings.hide_isp') }}
+              </BooleanSetting>
+            </li>
           </ul>
         </li>
       </ul>
@@ -73,7 +78,7 @@
             {{ $t('settings.user_card_hide_personal_marks') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceShoutboxPresent">
+        <li v-if="shoutAvailable">
           <BooleanSetting
             path="hideShoutbox"
           >
diff --git a/src/components/settings_modal/tabs/composing_tab.js b/src/components/settings_modal/tabs/composing_tab.js
index 0b06922e0..9d55d1f4f 100644
--- a/src/components/settings_modal/tabs/composing_tab.js
+++ b/src/components/settings_modal/tabs/composing_tab.js
@@ -1,11 +1,9 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import FontControl from 'src/components/font_control/font_control.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import Select from 'src/components/select/select.vue'
-import localeService from 'src/services/locale/locale.service.js'
-import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
@@ -14,6 +12,11 @@ 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 localeService from 'src/services/locale/locale.service.js'
+import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faDatabase,
@@ -26,12 +29,6 @@ import {
 library.add(faGlobe, faMessage, faPenAlt, faDatabase, faSliders)
 
 const ComposingTab = {
-  props: {
-    parentCollapsed: {
-      required: true,
-      type: Boolean,
-    },
-  },
   data() {
     return {
       subjectLineOptions: ['email', 'noop', 'masto'].map((mode) => ({
@@ -108,7 +105,7 @@ const ComposingTab = {
   },
   computed: {
     postFormats() {
-      return this.$store.state.instance.postFormats || []
+      return useInstanceStore().postFormats || []
     },
     postContentOptions() {
       return this.postFormats.map((format) => ({
@@ -129,9 +126,7 @@ const ComposingTab = {
       },
     },
     ...SharedComputedObject(),
-    ...mapState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
+    ...mapState(useInstanceStore, ['blockExpiration']),
   },
   methods: {
     changeDefaultScope(value) {
diff --git a/src/components/settings_modal/tabs/data_import_export_tab.js b/src/components/settings_modal/tabs/data_import_export_tab.js
index dcd63416b..cc41302c7 100644
--- a/src/components/settings_modal/tabs/data_import_export_tab.js
+++ b/src/components/settings_modal/tabs/data_import_export_tab.js
@@ -3,7 +3,8 @@ import { mapState } from 'vuex'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Exporter from 'src/components/exporter/exporter.vue'
 import Importer from 'src/components/importer/importer.vue'
-import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
+
+import { useOAuthTokensStore } from 'src/stores/oauth_tokens.js'
 
 const DataImportExportTab = {
   data() {
diff --git a/src/components/settings_modal/tabs/developer_tab.js b/src/components/settings_modal/tabs/developer_tab.js
index 60f2ecb36..b500d2f03 100644
--- a/src/components/settings_modal/tabs/developer_tab.js
+++ b/src/components/settings_modal/tabs/developer_tab.js
@@ -1,13 +1,16 @@
-import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import { cacheKey, clearCache, emojiCacheKey } from 'src/services/sw/sw.js'
+
 const pleromaFeCommitUrl =
   'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
 
 const VersionTab = {
   data() {
-    const instance = this.$store.state.instance
+    const instance = useInstanceStore()
     return {
       backendVersion: instance.backendVersion,
       backendRepository: instance.backendRepository,
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 8bd2b913d..68efbe762 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,16 +1,9 @@
 import { cloneDeep } from 'lodash'
 import { mapActions, mapState } from 'pinia'
 import { v4 as uuidv4 } from 'uuid'
-import { mapState as mapVuexState } from 'vuex'
 
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
-import {
-  newExporter,
-  newImporter,
-} from 'src/services/export_import/export_import.js'
-import { useInterfaceStore } from 'src/stores/interface'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import HelpIndicator from '../helpers/help_indicator.vue'
@@ -18,6 +11,15 @@ import IntegerSetting from '../helpers/integer_setting.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 { useInterfaceStore } from 'src/stores/interface'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+
+import {
+  newExporter,
+  newImporter,
+} from 'src/services/export_import/export_import.js'
+
 const SUPPORTED_TYPES = new Set(['word', 'regexp', 'user', 'user_regexp'])
 
 const FilteringTab = {
@@ -89,18 +91,13 @@ const FilteringTab = {
     HelpIndicator,
   },
   computed: {
-    instanceSpecificPanelPresent() {
-      return this.$store.state.instance.showInstanceSpecificPanel
-    },
     ...SharedComputedObject(),
     ...mapState(useServerSideStorageStore, {
       muteFilters: (store) =>
         Object.entries(store.prefsStorage.simple.muteFilters),
       muteFiltersObject: (store) => store.prefsStorage.simple.muteFilters,
     }),
-    ...mapVuexState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
+    ...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
     onMuteDefaultActionLv1: {
       get() {
         const value = this.$store.state.config.onMuteDefaultAction
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index ff7498656..bb0dccb85 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -47,7 +47,7 @@
             </li>
           </ul>
         </li>
-        <li v-if="blockExpirationSupported">
+        <li v-if="blockExpiration">
           <span class="setting-item">
             <span class="setting-label">
               {{ $t('user_card.default_block_expiration') }}
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index cf98fd182..0d8f9a786 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -1,8 +1,7 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import FontControl from 'src/components/font_control/font_control.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
-import localeService from 'src/services/locale/locale.service.js'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
@@ -10,13 +9,12 @@ 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 localeService from 'src/services/locale/locale.service.js'
+
 const GeneralTab = {
-  props: {
-    parentCollapsed: {
-      required: true,
-      type: Boolean,
-    },
-  },
   data() {
     return {
       absoluteTime12hOptions: ['24h', '12h'].map((mode) => ({
@@ -49,9 +47,7 @@ const GeneralTab = {
       },
     },
     ...SharedComputedObject(),
-    ...mapState({
-      blockExpirationSupported: (state) => state.instance.blockExpiration,
-    }),
+    ...mapState(useInstanceCapabilitiesStore, ['blockExpiration']),
   },
   methods: {
     updateProfile() {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index ceb073a48..c44e558b5 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -157,7 +157,7 @@
               </BooleanSetting>
             </li>
             <li
-              v-if="!blockExpirationSupported"
+              v-if="!blockExpiration"
             >
               <BooleanSetting
                 path="modalOnBlock"
diff --git a/src/components/settings_modal/tabs/layout_tab.js b/src/components/settings_modal/tabs/layout_tab.js
index 3fc18491c..8259820fc 100644
--- a/src/components/settings_modal/tabs/layout_tab.js
+++ b/src/components/settings_modal/tabs/layout_tab.js
@@ -1,16 +1,14 @@
+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'
+
 const GeneralTab = {
-  props: {
-    parentCollapsed: {
-      required: true,
-      type: Boolean,
-    },
-  },
   data() {
     return {
       thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(
@@ -29,12 +27,10 @@ const GeneralTab = {
     ProfileSettingIndicator,
   },
   computed: {
-    postFormats() {
-      return this.$store.state.instance.postFormats || []
-    },
-    instanceShoutboxPresent() {
-      return this.$store.state.instance.shoutAvailable
-    },
+    ...mapState(useInstanceCapabilitiesStore, [
+      'postFormats',
+      'suggestionsEnabled',
+    ]),
     columns() {
       const mode = this.$store.getters.mergedConfig.thirdColumnMode
 
diff --git a/src/components/settings_modal/tabs/layout_tab.vue b/src/components/settings_modal/tabs/layout_tab.vue
index 2290b0630..b52c106b9 100644
--- a/src/components/settings_modal/tabs/layout_tab.vue
+++ b/src/components/settings_modal/tabs/layout_tab.vue
@@ -69,11 +69,6 @@
             {{ $t('settings.show_scrollbars') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceSpecificPanelPresent">
-          <BooleanSetting path="hideISP">
-            {{ $t('settings.hide_isp') }}
-          </BooleanSetting>
-        </li>
         <li>
           <UnitSetting
             path="panelHeaderSize"
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
index 55087d1e2..cb198619f 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.js
@@ -12,7 +12,9 @@ import MuteCard from 'src/components/mute_card/mute_card.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import SelectableList from 'src/components/selectable_list/selectable_list.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
-import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useOAuthTokensStore } from 'src/stores/oauth_tokens.js'
 
 const BlockList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
@@ -48,7 +50,7 @@ const MutesAndBlocks = {
   },
   created() {
     useOAuthTokensStore().fetchTokens()
-    this.$store.dispatch('getKnownDomains')
+    useInstanceStore().getKnownDomains()
   },
   components: {
     TabSwitcher,
@@ -64,7 +66,7 @@ const MutesAndBlocks = {
   },
   computed: {
     knownDomains() {
-      return this.$store.state.instance.knownDomains
+      return useInstanceStore().knownDomains
     },
     user() {
       return this.$store.state.users.currentUser
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 c79c72e70..549803265 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
@@ -7,6 +7,11 @@ import RangeInput from 'src/components/range_input/range_input.vue'
 import Select from 'src/components/select/select.vue'
 import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import Preview from './theme_preview.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import {
   getContrastRatioLayers,
   hex2rgb,
@@ -41,8 +46,6 @@ import {
 } from 'src/services/theme_data/theme_data.service.js'
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
-import { useInterfaceStore } from 'src/stores/interface'
-import Preview from './theme_preview.vue'
 
 // List of color values used in v1
 const v1OnlyNames = [
@@ -125,7 +128,7 @@ export default {
     }
   },
   created() {
-    const currentIndex = this.$store.state.instance.themesIndex
+    const currentIndex = useInstanceStore().themesIndex
 
     let promise
     if (currentIndex) {
diff --git a/src/components/settings_modal/tabs/posts_tab.js b/src/components/settings_modal/tabs/posts_tab.js
index dfc4d4f8b..268a0a56f 100644
--- a/src/components/settings_modal/tabs/posts_tab.js
+++ b/src/components/settings_modal/tabs/posts_tab.js
@@ -6,12 +6,6 @@ import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 
 const GeneralTab = {
-  props: {
-    parentCollapsed: {
-      required: true,
-      type: Boolean,
-    },
-  },
   data() {
     return {
       conversationDisplayOptions: ['tree', 'linear'].map((mode) => ({
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.js b/src/components/settings_modal/tabs/security_tab/security_tab.js
index 3bc02829a..96510edcf 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.js
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.js
@@ -1,9 +1,13 @@
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
-import localeService from 'src/services/locale/locale.service.js'
-import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
 import Mfa from './mfa.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useOAuthTokensStore } from 'src/stores/oauth_tokens'
+
+import localeService from 'src/services/locale/locale.service.js'
+
 const SecurityTab = {
   data() {
     return {
@@ -42,7 +46,7 @@ const SecurityTab = {
       return this.$store.state.users.currentUser
     },
     pleromaExtensionsAvailable() {
-      return this.$store.state.instance.pleromaExtensionsAvailable
+      return useInstanceCapabilitiesStore().pleromaExtensionsAvailable
     },
     oauthTokens() {
       return useOAuthTokensStore().tokens.map((oauthToken) => {
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.js b/src/components/settings_modal/tabs/style_tab/style_tab.js
index 7fa55761a..6c2366999 100644
--- a/src/components/settings_modal/tabs/style_tab/style_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/style_tab.js
@@ -20,6 +20,12 @@ import SelectMotion from 'src/components/select/select_motion.vue'
 import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Tooltip from 'src/components/tooltip/tooltip.vue'
+import StringSetting from '../../helpers/string_setting.vue'
+import Preview from '../old_theme_tab/theme_preview.vue'
+import VirtualDirectivesTab from './virtual_directives_tab.vue'
+
+import { useInterfaceStore } from 'src/stores/interface'
+
 import {
   getContrastRatio,
   hex2rgb,
@@ -43,10 +49,6 @@ import {
   findColor,
   init,
 } from 'src/services/theme_data/theme_data_3.service.js'
-import { useInterfaceStore } from 'src/stores/interface'
-import StringSetting from '../../helpers/string_setting.vue'
-import Preview from '../old_theme_tab/theme_preview.vue'
-import VirtualDirectivesTab from './virtual_directives_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
diff --git a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
index d52c0084c..70a24010b 100644
--- a/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
+++ b/src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js
@@ -4,6 +4,7 @@ import ColorInput from 'src/components/color_input/color_input.vue'
 import Select from 'src/components/select/select.vue'
 import SelectMotion from 'src/components/select/select_motion.vue'
 import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
+
 import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
 
 // helper for debugging
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index a7613923c..066fe9d71 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -7,6 +7,7 @@ import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
 import Popover from 'src/components/popover/popover.vue'
 import Select from 'src/components/select/select.vue'
 import SelectMotion from 'src/components/select/select_motion.vue'
+
 import { rgb2hex } from 'src/services/color_convert/color_convert.js'
 import {
   getCssShadow,
diff --git a/src/components/shout_panel/shout_panel.js b/src/components/shout_panel/shout_panel.js
index 6cb6a53b0..fd0f6912b 100644
--- a/src/components/shout_panel/shout_panel.js
+++ b/src/components/shout_panel/shout_panel.js
@@ -1,5 +1,7 @@
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useShoutStore } from 'src/stores/shout.js'
+
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
-import { useShoutStore } from 'src/stores/shout'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faBullhorn, faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -32,7 +34,7 @@ const shoutPanel = {
       return generateProfileLink(
         user.id,
         user.username,
-        this.$store.state.instance.restrictedNicknames,
+        useInstanceStore().restrictedNicknames,
       )
     },
   },
diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js
index b12cef86e..05d8e92f5 100644
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@@ -1,14 +1,17 @@
-import { mapState as mapPiniaState } from 'pinia'
-import { mapGetters, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapGetters } from 'vuex'
 
 import { USERNAME_ROUTES } from 'src/components/navigation/navigation.js'
-import { useAnnouncementsStore } from 'src/stores/announcements'
-import { useInterfaceStore } from 'src/stores/interface'
-import { useShoutStore } from 'src/stores/shout'
 import GestureService from '../../services/gesture_service/gesture_service'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import UserCard from '../user_card/user_card.vue'
 
+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 { useShoutStore } from 'src/stores/shout'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,
@@ -74,27 +77,9 @@ const SideDrawer = {
     unseenNotificationsCount() {
       return this.unseenNotifications.length
     },
-    suggestionsEnabled() {
-      return this.$store.state.instance.suggestionsEnabled
-    },
-    logo() {
-      return this.$store.state.instance.logo
-    },
-    hideSitename() {
-      return this.$store.state.instance.hideSitename
-    },
-    sitename() {
-      return this.$store.state.instance.name
-    },
     followRequestCount() {
       return this.$store.state.api.followRequests.length
     },
-    privateMode() {
-      return this.$store.state.instance.private
-    },
-    federating() {
-      return this.$store.state.instance.federating
-    },
     timelinesRoute() {
       let name
       if (useInterfaceStore().lastTimeline) {
@@ -107,13 +92,19 @@ const SideDrawer = {
         return { name }
       }
     },
-    ...mapPiniaState(useAnnouncementsStore, {
-      supportsAnnouncements: (store) => store.supportsAnnouncements,
-      unreadAnnouncementCount: 'unreadAnnouncementCount',
-    }),
-    ...mapState({
-      pleromaChatMessagesAvailable: (state) =>
-        state.instance.pleromaChatMessagesAvailable,
+    ...mapState(useAnnouncementsStore, [
+      'supportsAnnouncements',
+      'unreadAnnouncementCount',
+    ]),
+    ...mapState(useInstanceCapabilitiesStore, [
+      'pleromaChatMessagesAvailable',
+      'suggestionsEnabled',
+    ]),
+    ...mapState(useInstanceStore, ['privateMode', 'federating']),
+    ...mapState(useInstanceStore, {
+      logo: (store) => store.instanceIdentity.logo,
+      sitename: (store) => store.instanceIdentity.name,
+      hideSitename: (store) => store.instanceIdentity.hideSitename,
     }),
     ...mapGetters(['unreadChatCount', 'draftCount']),
   },
@@ -131,12 +122,7 @@ const SideDrawer = {
     touchMove(e) {
       GestureService.updateSwipe(e, this.closeGesture)
     },
-    openSettingsModal() {
-      useInterfaceStore().openSettingsModal('user')
-    },
-    openAdminModal() {
-      useInterfaceStore().openSettingsModal('admin')
-    },
+    ...mapActions(useInterfaceStore, ['openSettingsModal']),
   },
 }
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index eda60a96a..c034edf91 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -198,7 +198,7 @@
         <li @click="toggleDrawer">
           <button
             class="menu-item"
-            @click="openSettingsModal"
+            @click="openSettingsModal('user')"
           >
             <FAIcon
               fixed-width
@@ -225,7 +225,7 @@
         >
           <button
             class="menu-item"
-            @click.stop="openAdminModal"
+            @click.stop="openSettingsModal('admin')"
           >
             <FAIcon
               fixed-width
diff --git a/src/components/staff_panel/staff_panel.js b/src/components/staff_panel/staff_panel.js
index 0b7dc8b57..3f271f4d3 100644
--- a/src/components/staff_panel/staff_panel.js
+++ b/src/components/staff_panel/staff_panel.js
@@ -4,9 +4,11 @@ import { mapGetters, mapState } from 'vuex'
 
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
 const StaffPanel = {
   created() {
-    const nicknames = this.$store.state.instance.staffAccounts
+    const nicknames = useInstanceStore().staffAccounts
     nicknames.forEach((nickname) =>
       this.$store.dispatch('fetchUserIfMissing', nickname),
     )
@@ -28,7 +30,7 @@ const StaffPanel = {
     },
     ...mapGetters(['findUserByName']),
     ...mapState({
-      staffAccounts: (state) => state.instance.staffAccounts,
+      staffAccounts: (state) => useInstanceStore().staffAccounts,
     }),
   },
 }
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 1673a6933..fbea34b4b 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -4,8 +4,6 @@ import MentionLink from 'src/components/mention_link/mention_link.vue'
 import MentionsLine from 'src/components/mentions_line/mentions_line.vue'
 import RichContent from 'src/components/rich_content/rich_content.jsx'
 import StatusActionButtons from 'src/components/status_action_buttons/status_action_buttons.vue'
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import { muteFilterHits } from '../../services/status_parser/status_parser.js'
 import {
   highlightClass,
@@ -22,6 +20,12 @@ import UserLink from '../user_link/user_link.vue'
 import UserListPopover from '../user_list_popover/user_list_popover.vue'
 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 generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faAngleDoubleRight,
@@ -494,7 +498,7 @@ const Status = {
       return this.status.edited_at !== null
     },
     editingAvailable() {
-      return this.$store.state.instance.editingAvailable
+      return useInstanceCapabilitiesStore().editingAvailable
     },
     hasVisibleQuote() {
       return this.status.quote_url && this.status.quote_visible
@@ -588,7 +592,7 @@ const Status = {
       return generateProfileLink(
         id,
         name,
-        this.$store.state.instance.restrictedNicknames,
+        useInstanceStore().restrictedNicknames,
       )
     },
     addMediaPlaying(id) {
diff --git a/src/components/status_action_buttons/action_button.js b/src/components/status_action_buttons/action_button.js
index 5badd87e7..3c493b682 100644
--- a/src/components/status_action_buttons/action_button.js
+++ b/src/components/status_action_buttons/action_button.js
@@ -2,6 +2,9 @@ import EmojiPicker from 'src/components/emoji_picker/emoji_picker.vue'
 import Popover from 'src/components/popover/popover.vue'
 import StatusBookmarkFolderMenu from 'src/components/status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBookmark as faBookmarkRegular,
@@ -91,7 +94,8 @@ export default {
       return this.status.thread_muted
     },
     hideCustomEmoji() {
-      return !this.$store.state.instance.pleromaCustomEmojiReactionsAvailable
+      return !useInstanceCapabilitiesStore()
+        .pleromaCustomEmojiReactionsAvailable
     },
     buttonInnerClass() {
       return [
@@ -107,7 +111,7 @@ export default {
       ]
     },
     remoteInteractionLink() {
-      return this.$store.getters.remoteInteractionLink({
+      return useInstanceStore().getRemoteInteractionLink({
         statusId: this.status.id,
       })
     },
diff --git a/src/components/status_action_buttons/buttons_definitions.js b/src/components/status_action_buttons/buttons_definitions.js
index d1a6845d1..20db7aa45 100644
--- a/src/components/status_action_buttons/buttons_definitions.js
+++ b/src/components/status_action_buttons/buttons_definitions.js
@@ -1,4 +1,6 @@
 import { useEditStatusStore } from 'src/stores/editStatus.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useReportsStore } from 'src/stores/reports.js'
 import { useStatusHistoryStore } from 'src/stores/statusHistory.js'
 
@@ -159,7 +161,10 @@ export const BUTTONS = [
     icon: 'history',
     label: 'status.status_history',
     if({ status, state }) {
-      return state.instance.editingAvailable && status.edited_at !== null
+      return (
+        useInstanceCapabilitiesStore().editingAvailable &&
+        status.edited_at !== null
+      )
     },
     action({ status }) {
       const originalStatus = { ...status }
@@ -189,7 +194,7 @@ export const BUTTONS = [
     if({ status, loggedIn, currentUser, state }) {
       return (
         loggedIn &&
-        state.instance.editingAvailable &&
+        useInstanceCapabilitiesStore().editingAvailable &&
         status.user.id === currentUser.id
       )
     },
@@ -243,7 +248,7 @@ export const BUTTONS = [
     action({ state, status, router }) {
       navigator.clipboard.writeText(
         [
-          state.instance.server,
+          useInstanceStore().server,
           router.resolve({ name: 'conversation', params: { id: status.id } })
             .href,
         ].join(''),
diff --git a/src/components/status_action_buttons/status_action_buttons.js b/src/components/status_action_buttons/status_action_buttons.js
index 8473a0db1..2e08797c8 100644
--- a/src/components/status_action_buttons/status_action_buttons.js
+++ b/src/components/status_action_buttons/status_action_buttons.js
@@ -2,11 +2,13 @@ import { mapState } from 'pinia'
 
 import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import Popover from 'src/components/popover/popover.vue'
-import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import ActionButtonContainer from './action_button_container.vue'
 import { BUTTONS } from './buttons_definitions.js'
 
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
+
+import genRandomSeed from 'src/services/random_seed/random_seed.service.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faEllipsisH } from '@fortawesome/free-solid-svg-icons'
 
diff --git a/src/components/status_body/status_body.js b/src/components/status_body/status_body.js
index 80f8400b6..4a3872895 100644
--- a/src/components/status_body/status_body.js
+++ b/src/components/status_body/status_body.js
@@ -1,6 +1,7 @@
 import { mapGetters } from 'vuex'
 
 import RichContent from 'src/components/rich_content/rich_content.jsx'
+
 import fileType from 'src/services/file_type/file_type.service'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
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 4aa617832..a3c97ffe6 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
@@ -2,7 +2,8 @@ import { mapState } from 'pinia'
 
 import Popover from 'src/components/popover/popover.vue'
 import StillImage from 'src/components/still-image/still-image.vue'
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
+
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons'
diff --git a/src/components/status_content/status_content.js b/src/components/status_content/status_content.js
index 51bfe6f1e..a00792826 100644
--- a/src/components/status_content/status_content.js
+++ b/src/components/status_content/status_content.js
@@ -1,12 +1,13 @@
 import { mapGetters, mapState } from 'vuex'
 
 import StatusBody from 'src/components/status_body/status_body.vue'
-import { useMediaViewerStore } from 'src/stores/media_viewer'
 import Attachment from '../attachment/attachment.vue'
 import Gallery from '../gallery/gallery.vue'
 import LinkPreview from '../link-preview/link-preview.vue'
 import Poll from '../poll/poll.vue'
 
+import { useMediaViewerStore } from 'src/stores/media_viewer.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCircleNotch,
diff --git a/src/components/status_history_modal/status_history_modal.js b/src/components/status_history_modal/status_history_modal.js
index 1ad48ace3..2cf97d893 100644
--- a/src/components/status_history_modal/status_history_modal.js
+++ b/src/components/status_history_modal/status_history_modal.js
@@ -1,9 +1,10 @@
 import { get } from 'lodash'
 
-import { useStatusHistoryStore } from 'src/stores/statusHistory'
 import Modal from '../modal/modal.vue'
 import Status from '../status/status.vue'
 
+import { useStatusHistoryStore } from 'src/stores/statusHistory.js'
+
 const StatusHistoryModal = {
   components: {
     Modal,
diff --git a/src/components/sticker_picker/sticker_picker.js b/src/components/sticker_picker/sticker_picker.js
index 6a6aed862..949d2ecf9 100644
--- a/src/components/sticker_picker/sticker_picker.js
+++ b/src/components/sticker_picker/sticker_picker.js
@@ -1,7 +1,11 @@
 /* eslint-env browser */
+
 import statusPosterService from '../../services/status_poster/status_poster.service.js'
 import TabSwitcher from '../tab_switcher/tab_switcher.jsx'
 
+import { useEmojiStore } from 'src/stores/emoji.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+
 const StickerPicker = {
   components: {
     TabSwitcher,
@@ -16,7 +20,7 @@ const StickerPicker = {
   },
   computed: {
     pack() {
-      return this.$store.state.instance.stickers || []
+      return useEmojiStore().stickers || []
     },
   },
   methods: {
diff --git a/src/components/still-image/still-image-emoji-popover.vue b/src/components/still-image/still-image-emoji-popover.vue
index f8ff89a6f..4e087c094 100644
--- a/src/components/still-image/still-image-emoji-popover.vue
+++ b/src/components/still-image/still-image-emoji-popover.vue
@@ -60,9 +60,11 @@ import Popover from 'components/popover/popover.vue'
 import SelectComponent from 'components/select/select.vue'
 import { assign } from 'lodash'
 
-import { useInterfaceStore } from 'src/stores/interface'
 import StillImage from './still-image.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface'
+
 export default {
   components: { StillImage, Popover, SelectComponent },
   props: {
@@ -125,7 +127,7 @@ export default {
       const allPacks = {}
 
       return listFunction({
-        instance: this.$store.state.instance.server,
+        instance: useInstanceStore().server,
         page: 1,
         pageSize: 0,
       })
@@ -140,7 +142,7 @@ export default {
             resultingPromise = resultingPromise
               .then(() =>
                 listFunction({
-                  instance: this.$store.state.instance.server,
+                  instance: useInstanceStore().server,
                   page: i,
                   pageSize,
                 }),
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index a495ddd51..b485b3ff8 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -7,7 +7,7 @@ import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
 
 import './tab_switcher.scss'
 
-import { useInterfaceStore } from 'src/stores/interface'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 const findFirstUsable = (slots) => slots.findIndex((_) => _.props)
 
diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.js b/src/components/terms_of_service_panel/terms_of_service_panel.js
index e250ba5af..64a745455 100644
--- a/src/components/terms_of_service_panel/terms_of_service_panel.js
+++ b/src/components/terms_of_service_panel/terms_of_service_panel.js
@@ -1,12 +1,12 @@
+import { mapState } from 'pinia'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+
 const TermsOfServicePanel = {
-  computed: {
-    content() {
-      return this.$store.state.instance.tos
-    },
-    embedded() {
-      return this.$store.state.instance.embeddedToS
-    },
-  },
+  computed: mapState(useInstanceStore, {
+    content: (store) => store.instanceIdentity.tos,
+    embedded: (store) => store.instanceIdentity.embeddedToS,
+  }),
 }
 
 export default TermsOfServicePanel
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index afb1690e0..4616a4111 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,8 +1,6 @@
 import { debounce, keyBy, throttle } from 'lodash'
 import { mapState } from 'pinia'
 
-import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'
-import { useInterfaceStore } from 'src/stores/interface'
 import Conversation from '../conversation/conversation.vue'
 import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
 import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
@@ -10,6 +8,10 @@ import ScrollTopButton from '../scroll_top_button/scroll_top_button.vue'
 import Status from '../status/status.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 
+import { useInterfaceStore } from 'src/stores/interface.js'
+
+import timelineFetcher from 'src/services/timeline_fetcher/timeline_fetcher.service.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faArrowUp,
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 97c4dbe35..3db087db6 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -1,15 +1,19 @@
+import { mapState as mapPiniaState } from 'pinia'
 import { mapState } from 'vuex'
 
 import { filterNavigation } from 'src/components/navigation/filter.js'
 import { TIMELINES } from 'src/components/navigation/navigation.js'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
-import { useInterfaceStore } from 'src/stores/interface'
-import { useListsStore } from 'src/stores/lists'
 import BookmarkFoldersMenuContent from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
 import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
 import Popover from '../popover/popover.vue'
 
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface'
+import { useListsStore } from 'src/stores/lists'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 
@@ -58,13 +62,15 @@ const TimelineMenu = {
         (route === 'bookmark-folder' || route === 'bookmarks')
       )
     },
+    ...mapPiniaState(useInstanceCapabilitiesStore, [
+      'pleromaChatMessagesAvailable',
+      'pleromaBookmarkFoldersAvailable',
+      'bookmarkFolders',
+      'localBubble',
+    ]),
+    ...mapPiniaState(useInstanceStore, ['privateMode', 'federating']),
     ...mapState({
       currentUser: (state) => state.users.currentUser,
-      privateMode: (state) => state.instance.private,
-      federating: (state) => state.instance.federating,
-      bookmarkFolders: (state) =>
-        state.instance.pleromaBookmarkFoldersAvailable,
-      bubbleTimeline: (state) => state.instance.localBubbleInstances.length > 0,
     }),
     timelinesList() {
       return filterNavigation(
@@ -74,8 +80,8 @@ const TimelineMenu = {
           isFederating: this.federating,
           isPrivate: this.privateMode,
           currentUser: this.currentUser,
-          supportsBookmarkFolders: this.bookmarkFolders,
-          supportsBubbleTimeline: this.bubbleTimeline,
+          supportsBookmarkFolders: this.pleromaBookmarkFoldersAvailable,
+          supportsBubbleTimeline: this.localBubble,
         },
       )
     },
diff --git a/src/components/update_notification/update_notification.js b/src/components/update_notification/update_notification.js
index a2cb9e5c1..a8bc60676 100644
--- a/src/components/update_notification/update_notification.js
+++ b/src/components/update_notification/update_notification.js
@@ -1,7 +1,10 @@
+import Modal from 'src/components/modal/modal.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
+
 import pleromaTanFoxMask from 'src/assets/pleromatan_apology_fox_mask.png'
 import pleromaTanMask from 'src/assets/pleromatan_apology_mask.png'
-import Modal from 'src/components/modal/modal.vue'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faTimes } from '@fortawesome/free-solid-svg-icons'
@@ -36,7 +39,7 @@ const UpdateNotification = {
     },
     shouldShow() {
       return (
-        !this.$store.state.instance.disableUpdateNotification &&
+        !useInstanceStore().disableUpdateNotification &&
         this.$store.state.users.currentUser &&
         useServerSideStorageStore().flagStorage.updateCounter <
           CURRENT_UPDATE_COUNTER &&
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index a8bd03d49..fdf766f58 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -1,6 +1,8 @@
-import { useInterfaceStore } from 'src/stores/interface'
 import StillImage from '../still-image/still-image.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faPeopleGroup, faRobot } from '@fortawesome/free-solid-svg-icons'
 
@@ -35,7 +37,7 @@ const UserAvatar = {
   data() {
     return {
       showPlaceholder: false,
-      defaultAvatar: `${this.$store.state.instance.server + this.$store.state.instance.defaultAvatar}`,
+      defaultAvatar: `${useInstanceStore().server + useInstanceStore().defaultAvatar}`,
       betterShadow: useInterfaceStore().browserSupport.cssFilter,
     }
   },
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index 0786e5b35..0df27e6cb 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -11,10 +11,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 { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
-import localeService from 'src/services/locale/locale.service.js'
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
-import { usePostStatusStore } from 'src/stores/post_status'
 import { useInterfaceStore } from '../../stores/interface'
 import { useMediaViewerStore } from '../../stores/media_viewer'
 import AccountActions from '../account_actions/account_actions.vue'
@@ -27,6 +23,15 @@ import UserAvatar from '../user_avatar/user_avatar.vue'
 import UserLink from '../user_link/user_link.vue'
 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 { usePostStatusStore } from 'src/stores/post_status'
+
+import { propsToNative } from 'src/services/attributes_helper/attributes_helper.service.js'
+import localeService from 'src/services/locale/locale.service.js'
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faBell,
@@ -176,7 +181,7 @@ export default {
       return false
     },
     groupActorAvailable() {
-      return this.$store.state.instance.groupActorAvailable
+      return useInstanceCapabilitiesStore().groupActorAvailable
     },
     availableActorTypes() {
       return this.groupActorAvailable
@@ -209,7 +214,7 @@ export default {
       return Math.round(this.user.statuses_count / days)
     },
     emoji() {
-      return this.$store.state.instance.customEmoji.map((e) => ({
+      return useEmojiStore().customEmoji.map((e) => ({
         shortcode: e.displayText,
         static_url: e.imageUrl,
         url: e.imageUrl,
@@ -336,18 +341,18 @@ export default {
     },
     defaultAvatar() {
       return (
-        this.$store.state.instance.server +
-        this.$store.state.instance.defaultAvatar
+        useInstanceStore().server +
+        useInstanceStore().instanceIdentity.defaultAvatar
       )
     },
     defaultBanner() {
       return (
-        this.$store.state.instance.server +
-        this.$store.state.instance.defaultBanner
+        useInstanceStore().server +
+        useInstanceStore().instanceIdentity.defaultBanner
       )
     },
     isDefaultAvatar() {
-      const baseAvatar = this.$store.state.instance.defaultAvatar
+      const baseAvatar = useInstanceStore().defaultAvatar
       return (
         !this.$store.state.users.currentUser.profile_image_url ||
         this.$store.state.users.currentUser.profile_image_url.includes(
@@ -356,14 +361,14 @@ export default {
       )
     },
     isDefaultBanner() {
-      const baseBanner = this.$store.state.instance.defaultBanner
+      const baseBanner = useInstanceStore().defaultBanner
       return (
         !this.$store.state.users.currentUser.cover_photo ||
         this.$store.state.users.currentUser.cover_photo.includes(baseBanner)
       )
     },
     fieldsLimits() {
-      return this.$store.state.instance.fieldsLimits
+      return useInstanceStore().limits.fieldsLimits
     },
     maxFields() {
       return this.fieldsLimits ? this.fieldsLimits.maxFields : 0
@@ -372,7 +377,7 @@ export default {
       return suggestor({
         emoji: [
           ...this.$store.getters.standardEmojiList,
-          ...this.$store.state.instance.customEmoji,
+          ...useEmojiStore().customEmoji,
         ],
         store: this.$store,
       })
@@ -381,7 +386,7 @@ export default {
       return suggestor({
         emoji: [
           ...this.$store.getters.standardEmojiList,
-          ...this.$store.state.instance.customEmoji,
+          ...useEmojiStore().customEmoji,
         ],
       })
     },
@@ -412,7 +417,7 @@ export default {
       return generateProfileLink(
         user.id,
         user.screen_name,
-        this.$store.state.instance.restrictedNicknames,
+        useInstanceStore().restrictedNicknames,
       )
     },
     openProfileTab() {
diff --git a/src/components/user_link/user_link.vue b/src/components/user_link/user_link.vue
index 059508f49..e8a4ac4a7 100644
--- a/src/components/user_link/user_link.vue
+++ b/src/components/user_link/user_link.vue
@@ -14,9 +14,12 @@
 </template>
 
 <script>
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 const UserLink = {
   props: {
     user: Object,
@@ -33,7 +36,7 @@ const UserLink = {
       return generateProfileLink(
         user.id,
         user.screen_name,
-        this.$store.state.instance.restrictedNicknames,
+        useInstanceStore().restrictedNicknames,
       )
     },
   },
diff --git a/src/components/user_list_menu/user_list_menu.js b/src/components/user_list_menu/user_list_menu.js
index b30a8808f..47a84a6bb 100644
--- a/src/components/user_list_menu/user_list_menu.js
+++ b/src/components/user_list_menu/user_list_menu.js
@@ -1,9 +1,10 @@
 import { mapState } from 'pinia'
 
-import { useListsStore } from 'src/stores/lists'
 import DialogModal from '../dialog_modal/dialog_modal.vue'
 import Popover from '../popover/popover.vue'
 
+import { useListsStore } from 'src/stores/lists.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
 
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 73fc81a9e..25f71fba8 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -9,6 +9,9 @@ import List from '../list/list.vue'
 import Timeline from '../timeline/timeline.vue'
 import UserCard from '../user_card/user_card.vue'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
 
@@ -87,7 +90,7 @@ const UserProfile = {
     favoritesTabVisible() {
       return (
         this.isUs ||
-        (this.$store.state.instance.pleromaPublicFavouritesAvailable &&
+        (useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable &&
           !this.user.hide_favorites)
       )
     },
diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js
index 39c264d5b..896167df0 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.js
+++ b/src/components/user_reporting_modal/user_reporting_modal.js
@@ -1,10 +1,11 @@
-import { useReportsStore } from 'src/stores/reports'
 import Checkbox from '../checkbox/checkbox.vue'
 import List from '../list/list.vue'
 import Modal from '../modal/modal.vue'
 import Status from '../status/status.vue'
 import UserLink from '../user_link/user_link.vue'
 
+import { useReportsStore } from 'src/stores/reports.js'
+
 const UserReportingModal = {
   components: {
     Status,
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 66bb6bda2..6c005ab4b 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
@@ -1,6 +1,7 @@
 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 { durationStrToMs } from 'src/services/date_utils/date_utils.js'
 
 const UserTimedFilterModal = {
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js
index 5dbb1c3d1..e364dcf80 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.js
+++ b/src/components/who_to_follow_panel/who_to_follow_panel.js
@@ -1,14 +1,18 @@
 import { shuffle } from 'lodash'
 
-import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import apiService from '../../services/api/api.service.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+
+import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
+
 function showWhoToFollow(panel, reply) {
   const shuffled = shuffle(reply)
 
   panel.usersToFollow.forEach((toFollow, index) => {
     const user = shuffled[index]
-    const img = user.avatar || this.$store.state.instance.defaultAvatar
+    const img = user.avatar || useInstanceStore().defaultAvatar
     const name = user.acct
 
     toFollow.img = img
@@ -46,7 +50,7 @@ const WhoToFollowPanel = {
       return this.$store.state.users.currentUser.screen_name
     },
     suggestionsEnabled() {
-      return this.$store.state.instance.suggestionsEnabled
+      return useInstanceCapabilitiesStore().suggestionsEnabled
     },
   },
   methods: {
@@ -54,7 +58,7 @@ const WhoToFollowPanel = {
       return generateProfileLink(
         id,
         name,
-        this.$store.state.instance.restrictedNicknames,
+        useInstanceStore().restrictedNicknames,
       )
     },
   },
@@ -67,7 +71,7 @@ const WhoToFollowPanel = {
   },
   mounted: function () {
     this.usersToFollow = new Array(3).fill().map(() => ({
-      img: this.$store.state.instance.defaultAvatar,
+      img: useInstanceStore().defaultAvatar,
       name: '',
       id: 0,
     }))
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index 90f602c40..f7e2b0b08 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -1,9 +1,10 @@
 import { cloneDeep, each, get, set } from 'lodash'
 import merge from 'lodash.merge'
 
-import { useInterfaceStore } from 'src/stores/interface'
 import { storage } from './storage.js'
 
+import { useInterfaceStore } from 'src/stores/interface'
+
 let loaded = false
 
 const defaultReducer = (state, paths) =>
diff --git a/src/lib/push_notifications_plugin.js b/src/lib/push_notifications_plugin.js
index 2cc55c3bb..9732a82c9 100644
--- a/src/lib/push_notifications_plugin.js
+++ b/src/lib/push_notifications_plugin.js
@@ -1,8 +1,9 @@
-import { useInterfaceStore } from 'src/stores/interface'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 export default (store) => {
   store.subscribe((mutation, state) => {
-    const vapidPublicKey = state.instance.vapidPublicKey
+    const vapidPublicKey = useInstanceStore().vapidPublicKey
     const webPushNotification = state.config.webPushNotifications
     const permission = useInterfaceStore().notificationPermission === 'granted'
     const user = state.users.currentUser
diff --git a/src/modules/api.js b/src/modules/api.js
index cb8b72e10..d6bf27f23 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -1,11 +1,14 @@
 import { Socket } from 'phoenix'
 
-import { useInterfaceStore } from 'src/stores/interface.js'
-import { useShoutStore } from 'src/stores/shout.js'
 import { WSConnectionStatus } from '../services/api/api.service.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { maybeShowChatNotification } from '../services/chat_utils/chat_utils.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+import { useShoutStore } from 'src/stores/shout.js'
+
 const retryTimeout = (multiplier) => 1000 * multiplier
 
 const api = {
@@ -237,7 +240,7 @@ const api = {
     ) {
       if (
         timeline === 'favourites' &&
-        !store.rootState.instance.pleromaPublicFavouritesAvailable
+        !useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable
       )
         return
       if (store.state.fetchers[timeline]) return
@@ -322,7 +325,8 @@ const api = {
     // Bookmark folders
     startFetchingBookmarkFolders(store) {
       if (store.state.fetchers.bookmarkFolders) return
-      if (!store.rootState.instance.pleromaBookmarkFoldersAvailable) return
+      if (!useInstanceCapabilitiesStore().pleromaBookmarkFoldersAvailable)
+        return
       const fetcher =
         store.state.backendInteractor.startFetchingBookmarkFolders({ store })
       store.commit('addFetcher', { fetcherName: 'bookmarkFolders', fetcher })
@@ -341,7 +345,7 @@ const api = {
       // Set up websocket connection
       const token = state.wsToken
       if (
-        rootState.instance.shoutAvailable &&
+        useInstanceStore().shoutAvailable &&
         typeof token !== 'undefined' &&
         state.socket === null
       ) {
diff --git a/src/modules/config.js b/src/modules/config.js
index cf144664a..82acf8162 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,13 +1,16 @@
 import Cookies from 'js-cookie'
 import { set } from 'lodash'
 
-import { useI18nStore } from 'src/stores/i18n.js'
-import { useInterfaceStore } from 'src/stores/interface.js'
 import messages from '../i18n/messages'
 import localeService from '../services/locale/locale.service.js'
 import { applyConfig } 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',
@@ -43,24 +46,26 @@ export const instanceDefaultProperties = Object.keys(instanceDefaultConfig)
 const config = {
   state: { ...defaultState },
   getters: {
-    defaultConfig(state, getters, rootState) {
-      const { instance } = rootState
+    defaultConfig() {
       return {
         ...defaultState,
         ...Object.fromEntries(
-          instanceDefaultProperties.map((key) => [key, instance[key]]),
+          instanceDefaultProperties.map((key) => [
+            key,
+            useInstanceStore().prefsStorage[key],
+          ]),
         ),
       }
     },
-    mergedConfig(state, getters, rootState, rootGetters) {
-      const { defaultConfig } = rootGetters
-      return {
-        ...defaultConfig,
-        // Do not override with undefined
-        ...Object.fromEntries(
-          Object.entries(state).filter(([, v]) => v !== undefined),
-        ),
-      }
+    mergedConfig(state) {
+      const instancePrefs = useInstanceStore().prefsStorage
+      const result = Object.fromEntries(
+        Object.keys(defaultState).map((key) => [
+          key,
+          state[key] ?? instancePrefs[key],
+        ]),
+      )
+      return result
     },
   },
   mutations: {
@@ -177,7 +182,7 @@ const config = {
           }
           case 'interfaceLanguage':
             messages.setLanguage(useI18nStore().i18n, value)
-            dispatch('loadUnicodeEmojiData', value)
+            useEmojiStore().loadUnicodeEmojiData(value)
             Cookies.set(
               BACKEND_LANGUAGE_COOKIE_NAME,
               localeService.internalToBackendLocaleMulti(value),
diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
index d5daef3d3..3e39fb1fc 100644
--- a/src/modules/default_config_state.js
+++ b/src/modules/default_config_state.js
@@ -18,9 +18,13 @@ export const staticOrApiConfigDefault = {
   redirectRootLogin: '/main/friends',
   redirectRootNoLogin: '/main/all',
   hideSitename: false,
-  nsfwCensorImage: undefined,
+  nsfwCensorImage: null,
   showFeaturesPanel: true,
   showInstanceSpecificPanel: false,
+
+  // Html stuff
+  instanceSpecificPanelContent: '',
+  tos: '',
 }
 
 /// This object contains setting entries that makes sense
diff --git a/src/modules/index.js b/src/modules/index.js
index ab9dd2418..15e57f716 100644
--- a/src/modules/index.js
+++ b/src/modules/index.js
@@ -3,14 +3,12 @@ import api from './api.js'
 import chats from './chats.js'
 import config from './config.js'
 import drafts from './drafts.js'
-import instance from './instance.js'
 import notifications from './notifications.js'
 import profileConfig from './profileConfig.js'
 import statuses from './statuses.js'
 import users from './users.js'
 
 export default {
-  instance,
   statuses,
   notifications,
   users,
diff --git a/src/modules/notifications.js b/src/modules/notifications.js
index 7667a20d0..cb3d430db 100644
--- a/src/modules/notifications.js
+++ b/src/modules/notifications.js
@@ -1,5 +1,3 @@
-import { useReportsStore } from 'src/stores/reports.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import apiService from '../services/api/api.service.js'
 import {
   closeAllDesktopNotifications,
@@ -11,6 +9,9 @@ import {
   maybeShowNotification,
 } from '../services/notification_utils/notification_utils.js'
 
+import { useReportsStore } from 'src/stores/reports.js'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage.js'
+
 const emptyNotifications = () => ({
   desktopNotificationSilence: true,
   maxId: 0,
diff --git a/src/modules/statuses.js b/src/modules/statuses.js
index bf6500238..339b6193a 100644
--- a/src/modules/statuses.js
+++ b/src/modules/statuses.js
@@ -13,9 +13,11 @@ import {
   slice,
 } from 'lodash'
 
-import { useInterfaceStore } from 'src/stores/interface'
 import apiService from '../services/api/api.service.js'
 
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+
 const emptyTl = (userId = 0) => ({
   statuses: [],
   statusesObject: {},
@@ -40,7 +42,6 @@ export const defaultState = () => ({
   conversationsObject: {},
   maxId: 0,
   favorites: new Set(),
-  pleromaScrobblesAvailable: true, // not reported in nodeinfo
   timelines: {
     mentions: emptyTl(),
     public: emptyTl(),
@@ -114,7 +115,8 @@ const sortTimeline = (timeline) => {
 }
 
 const getLatestScrobble = (state, user) => {
-  const scrobblesSupport = state.pleromaScrobblesAvailable
+  const scrobblesSupport =
+    useInstanceCapabilitiesStore().pleromaScrobblesAvailable
 
   if (!scrobblesSupport || !user.name || user.id === 'undefined') {
     return
@@ -133,7 +135,7 @@ const getLatestScrobble = (state, user) => {
     .fetchScrobbles({ accountId: user.id })
     .then((scrobbles) => {
       if (scrobbles?.error) {
-        state.pleromaScrobblesAvailable = false
+        useInstanceCapabilitiesStore().set('pleromaScrobblesAvailable', false)
         return
       }
 
diff --git a/src/modules/users.js b/src/modules/users.js
index 4e45d420f..b0febcd3a 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -9,10 +9,6 @@ import {
   uniq,
 } from 'lodash'
 
-import { declarations } from 'src/modules/config_declaration'
-import { useInterfaceStore } from 'src/stores/interface.js'
-import { useOAuthStore } from 'src/stores/oauth.js'
-import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
 import apiService from '../services/api/api.service.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import oauthApi from '../services/new_api/oauth.js'
@@ -25,6 +21,15 @@ import {
   windowWidth,
 } from '../services/window_utils/window_utils'
 
+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 { useOAuthStore } from 'src/stores/oauth.js'
+import { useServerSideStorageStore } from 'src/stores/serverSideStorage'
+
+import { declarations } from 'src/modules/config_declaration'
+
 // TODO: Unify with mergeOrAdd in statuses.js
 export const mergeOrAdd = (arr, obj, item) => {
   if (!item) {
@@ -547,7 +552,7 @@ const users = {
     },
     registerPushNotifications(store) {
       const token = store.state.currentUser.credentials
-      const vapidPublicKey = store.rootState.instance.vapidPublicKey
+      const vapidPublicKey = useInstanceStore().vapidPublicKey
       const isEnabled = store.rootState.config.webPushNotifications
       const notificationVisibility =
         store.rootState.config.notificationVisibility
@@ -644,7 +649,6 @@ const users = {
 
     logout(store) {
       const oauth = useOAuthStore()
-      const { instance } = store.rootState
 
       // NOTE: No need to verify the app still exists, because if it doesn't,
       // the token will be invalid too
@@ -653,7 +657,7 @@ const users = {
         .then((app) => {
           const params = {
             app,
-            instance: instance.server,
+            instance: useInstanceStore().server,
             token: oauth.userToken,
           }
 
@@ -685,7 +689,6 @@ const users = {
       return new Promise((resolve, reject) => {
         const commit = store.commit
         const dispatch = store.dispatch
-        const rootState = store.rootState
         commit('beginLogin')
         store.rootState.api.backendInteractor
           .verifyCredentials(accessToken)
@@ -702,7 +705,7 @@ const users = {
               useServerSideStorageStore().setServerSideStorage(user)
               commit('addNewUsers', [user])
 
-              dispatch('fetchEmoji')
+              useEmojiStore().fetchEmoji()
 
               getNotificationPermission().then((permission) =>
                 useInterfaceStore().setNotificationPermission(permission),
@@ -763,7 +766,9 @@ const users = {
                 // Start fetching notifications
                 dispatch('startFetchingNotifications')
 
-                if (rootState.instance.pleromaChatMessagesAvailable) {
+                if (
+                  useInstanceCapabilitiesStore().pleromaChatMessagesAvailable
+                ) {
                   // Start fetching chats
                   dispatch('startFetchingChats')
                 }
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index ccbc76d2b..adc18ef7f 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -8,6 +8,8 @@ import apiService, {
 import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
 import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
 const backendInteractorService = (credentials) => ({
   startFetchingTimeline({
     timeline,
@@ -55,7 +57,7 @@ const backendInteractorService = (credentials) => ({
   },
 
   startUserSocket({ store }) {
-    const serv = store.rootState.instance.server.replace('http', 'ws')
+    const serv = useInstanceStore().server.replace('http', 'ws')
     const url = getMastodonSocketURI({}, serv)
     return ProcessedWS({ url, id: 'Unified', credentials })
   },
diff --git a/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js b/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
index 50afb4564..7b81c19dc 100644
--- a/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
+++ b/src/services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js
@@ -1,7 +1,8 @@
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
 import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders.js'
+
 const fetchAndUpdate = ({ credentials }) => {
   return apiService
     .fetchBookmarkFolders({ credentials })
diff --git a/src/services/lists_fetcher/lists_fetcher.service.js b/src/services/lists_fetcher/lists_fetcher.service.js
index 6744fb696..c395ef93b 100644
--- a/src/services/lists_fetcher/lists_fetcher.service.js
+++ b/src/services/lists_fetcher/lists_fetcher.service.js
@@ -1,7 +1,8 @@
-import { useListsStore } from 'src/stores/lists.js'
 import apiService from '../api/api.service.js'
 import { promiseInterval } from '../promise_interval/promise_interval.js'
 
+import { useListsStore } from 'src/stores/lists.js'
+
 const fetchAndUpdate = ({ credentials }) => {
   return apiService
     .fetchLists({ credentials })
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index b803e2146..ead2153a6 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -20,8 +20,10 @@ 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 b5c233ad9..14785a685 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -1,9 +1,11 @@
-import FaviconService from 'src/services/favicon_service/favicon_service.js'
-import { useAnnouncementsStore } from 'src/stores/announcements'
-import { useI18nStore } from 'src/stores/i18n.js'
 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 { useI18nStore } from 'src/stores/i18n.js'
+
+import FaviconService from 'src/services/favicon_service/favicon_service.js'
+
 export const ACTIONABLE_NOTIFICATION_TYPES = new Set([
   'mention',
   'pleroma:report',
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index c8dca3159..73411b6a5 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -1,7 +1,10 @@
-import { useInterfaceStore } from 'src/stores/interface.js'
 import apiService from '../api/api.service.js'
 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'
+
 const update = ({ store, notifications, older }) => {
   store.dispatch('addNewNotifications', { notifications, older })
 }
@@ -28,7 +31,7 @@ const fetchAndUpdate = ({ store, credentials, older = false, since }) => {
   const timelineData = rootState.notifications
   const hideMutedPosts = getters.mergedConfig.hideMutedPosts
 
-  if (rootState.instance.pleromaChatMessagesAvailable) {
+  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 d44b0fc06..08034d485 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,10 +1,11 @@
 import localforage from 'localforage'
 import { chunk, throttle } from 'lodash'
 
-import { defaultState } from 'src/modules/default_config_state.js'
 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'
+
 // On platforms where this is not supported, it will return undefined
 // Otherwise it will return an array
 const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index aef724eda..da62f8b37 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -1,9 +1,12 @@
 import { camelCase } from 'lodash'
 
-import { useInterfaceStore } from 'src/stores/interface.js'
 import apiService from '../api/api.service.js'
 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'
+
 const update = ({
   store,
   statuses,
@@ -76,7 +79,7 @@ const fetchAndUpdate = ({
     .then((response) => {
       if (response.errors) {
         if (timeline === 'favorites') {
-          rootState.instance.pleromaPublicFavouritesAvailable = false
+          useInstanceCapabilitiesStore().pleromaPublicFavouritesAvailable = false
           return
         }
         throw new Error(`${response.status} ${response.statusText}`)
diff --git a/src/modules/instance.js b/src/stores/emoji.js
similarity index 53%
rename from src/modules/instance.js
rename to src/stores/emoji.js
index 0f7009bc7..5c284064b 100644
--- a/src/modules/instance.js
+++ b/src/stores/emoji.js
@@ -1,16 +1,25 @@
-// See build/emojis_plugin for more details
+import { defineStore } from 'pinia'
 
-import { useInterfaceStore } from 'src/stores/interface.js'
-import { ensureFinalFallback } from '../i18n/languages.js'
-import apiService from '../services/api/api.service.js'
-import { instanceDefaultProperties } from './config.js'
-import {
-  instanceDefaultConfig,
-  staticOrApiConfigDefault,
-} from './default_config_state.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import { ensureFinalFallback } from 'src/i18n/languages.js'
 
 import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'
 
+const defaultState = {
+  // Custom emoji from server
+  customEmoji: [],
+  customEmojiFetched: false,
+
+  // Unicode emoji from bundle
+  emoji: {},
+  emojiFetched: false,
+  unicodeEmojiAnnotations: {},
+
+  // Stickers
+  stickers: null,
+}
+
 const SORTED_EMOJI_GROUP_IDS = [
   'smileys-and-emotion',
   'people-and-body',
@@ -43,79 +52,6 @@ const REGIONAL_INDICATORS = (() => {
   return res
 })()
 
-const REMOTE_INTERACTION_URL = '/main/ostatus'
-
-const defaultState = {
-  // Stuff from apiConfig
-  name: 'Pleroma FE',
-  registrationOpen: true,
-  server: 'http://localhost:4040/',
-  textlimit: 5000,
-  themesIndex: undefined,
-  stylesIndex: undefined,
-  palettesIndex: undefined,
-  themeData: undefined, // used for theme editor v2
-  vapidPublicKey: undefined,
-
-  // Stuff from static/config.json
-  loginMethod: 'password',
-  disableUpdateNotification: false,
-
-  fontsOverride: {},
-
-  // Instance-wide configurations that should not be changed by individual users
-  ...staticOrApiConfigDefault,
-  // Instance admins can override default settings for the whole instance
-  ...instanceDefaultConfig,
-
-  // Nasty stuff
-  customEmoji: [],
-  customEmojiFetched: false,
-  emoji: {},
-  emojiFetched: false,
-  unicodeEmojiAnnotations: {},
-  pleromaExtensionsAvailable: true,
-  postFormats: [],
-  restrictedNicknames: [],
-  safeDM: true,
-  knownDomains: [],
-  birthdayRequired: false,
-  birthdayMinAge: 0,
-
-  // Feature-set, apparently, not everything here is reported...
-  shoutAvailable: false,
-  pleromaChatMessagesAvailable: false,
-  pleromaCustomEmojiReactionsAvailable: false,
-  pleromaBookmarkFoldersAvailable: false,
-  pleromaPublicFavouritesAvailable: true,
-  statusNotificationTypeAvailable: true,
-  gopherAvailable: false,
-  mediaProxyAvailable: false,
-  suggestionsEnabled: false,
-  suggestionsWeb: '',
-  quotingAvailable: false,
-  groupActorAvailable: false,
-  blockExpiration: false,
-  localBubbleInstances: [], // Akkoma
-
-  // Html stuff
-  instanceSpecificPanelContent: '',
-  tos: '',
-
-  // Version Information
-  backendVersion: '',
-  backendRepository: '',
-  frontendVersion: '',
-
-  pollsAvailable: false,
-  pollLimits: {
-    max_options: 4,
-    max_option_chars: 255,
-    min_expiration: 60,
-    max_expiration: 60 * 60 * 24,
-  },
-}
-
 const loadAnnotations = (lang) => {
   return annotationsLoader[lang]().then((k) => k.default)
 }
@@ -137,27 +73,9 @@ const injectRegionalIndicators = (groups) => {
   return groups
 }
 
-const instance = {
-  state: defaultState,
-  mutations: {
-    setInstanceOption(state, { name, value }) {
-      if (typeof value !== 'undefined') {
-        state[name] = value
-      }
-    },
-    setKnownDomains(state, domains) {
-      state.knownDomains = domains
-    },
-    setUnicodeEmojiAnnotations(state, { lang, annotations }) {
-      state.unicodeEmojiAnnotations[lang] = annotations
-    },
-  },
+export const useEmojiStore = defineStore('emoji', {
+  state: () => ({ ...defaultState }),
   getters: {
-    instanceDefaultConfig(state) {
-      return instanceDefaultProperties
-        .map((key) => [key, state[key]])
-        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
-    },
     groupedCustomEmojis(state) {
       const packsOf = (emoji) => {
         const packs = emoji.tags
@@ -181,7 +99,7 @@ const instance = {
         }
       }
 
-      return state.customEmoji.reduce((res, emoji) => {
+      return this.customEmoji.reduce((res, emoji) => {
         packsOf(emoji).forEach(({ id: packId, text: packName }) => {
           if (!res[packId]) {
             res[packId] = {
@@ -198,53 +116,27 @@ const instance = {
     },
     standardEmojiList(state) {
       return SORTED_EMOJI_GROUP_IDS.map((groupId) =>
-        (state.emoji[groupId] || []).map((k) =>
-          injectAnnotations(k, state.unicodeEmojiAnnotations),
+        (this.emoji[groupId] || []).map((k) =>
+          injectAnnotations(k, this.unicodeEmojiAnnotations),
         ),
       ).reduce((a, b) => a.concat(b), [])
     },
     standardEmojiGroupList(state) {
       return SORTED_EMOJI_GROUP_IDS.map((groupId) => ({
         id: groupId,
-        emojis: (state.emoji[groupId] || []).map((k) =>
-          injectAnnotations(k, state.unicodeEmojiAnnotations),
+        emojis: (this.emoji[groupId] || []).map((k) =>
+          injectAnnotations(k, this.unicodeEmojiAnnotations),
         ),
       }))
     },
-    instanceDomain(state) {
-      return new URL(state.server).hostname
-    },
-    remoteInteractionLink(state) {
-      const server = state.server.endsWith('/')
-        ? state.server.slice(0, -1)
-        : state.server
-      const link = server + REMOTE_INTERACTION_URL
-
-      return ({ statusId, nickname }) => {
-        if (statusId) {
-          return `${link}?status_id=${statusId}`
-        } else {
-          return `${link}?nickname=${nickname}`
-        }
-      }
-    },
   },
   actions: {
-    setInstanceOption({ commit, dispatch }, { name, value }) {
-      commit('setInstanceOption', { name, value })
-      switch (name) {
-        case 'name':
-          useInterfaceStore().setPageTitle()
-          break
-        case 'shoutAvailable':
-          if (value) {
-            dispatch('initializeSocket')
-          }
-          break
-      }
+    setStickers(stickers) {
+      this.stickers = stickers
     },
-    async getStaticEmoji({ commit }) {
+    async getStaticEmoji() {
       try {
+        // See build/emojis_plugin for more details
         const values = (await import('/src/assets/emoji.json')).default
 
         const emoji = Object.keys(values).reduce((res, groupId) => {
@@ -255,24 +147,21 @@ const instance = {
           }))
           return res
         }, {})
-        commit('setInstanceOption', {
-          name: 'emoji',
-          value: injectRegionalIndicators(emoji),
-        })
+        this.emoji = injectRegionalIndicators(emoji)
       } catch (e) {
         console.warn("Can't load static emoji\n", e)
       }
     },
 
-    loadUnicodeEmojiData({ commit, state }, language) {
+    loadUnicodeEmojiData(language) {
       const langList = ensureFinalFallback(language)
 
       return Promise.all(
         langList.map(async (lang) => {
-          if (!state.unicodeEmojiAnnotations[lang]) {
+          if (!this.unicodeEmojiAnnotations[lang]) {
             try {
               const annotations = await loadAnnotations(lang)
-              commit('setUnicodeEmojiAnnotations', { lang, annotations })
+              this.unicodeEmojiAnnotations[lang] = annotations
             } catch (e) {
               console.warn(
                 `Error loading unicode emoji annotations for ${lang}: `,
@@ -285,7 +174,7 @@ const instance = {
       )
     },
 
-    async getCustomEmoji({ commit, state }) {
+    async getCustomEmoji() {
       try {
         let res = await window.fetch('/api/v1/pleroma/emoji')
         if (!res.ok) {
@@ -331,7 +220,9 @@ const instance = {
               const imageUrl = value.image_url
               return {
                 displayText: key,
-                imageUrl: imageUrl ? state.server + imageUrl : value,
+                imageUrl: imageUrl
+                  ? useInstanceStore().server + imageUrl
+                  : value,
                 tags: imageUrl
                   ? value.tags.sort((a, b) => (a > b ? 1 : 0))
                   : ['utf'],
@@ -341,7 +232,7 @@ const instance = {
               // should have been "pack" field, that would be more useful
             })
             .sort(byPackThenByName)
-          commit('setInstanceOption', { name: 'customEmoji', value: emoji })
+          this.customEmoji = emoji
         } else {
           throw res
         }
@@ -349,28 +240,13 @@ const instance = {
         console.warn("Can't load custom emojis\n", e)
       }
     },
-    fetchEmoji({ dispatch, state }) {
-      if (!state.customEmojiFetched) {
-        state.customEmojiFetched = true
-        dispatch('getCustomEmoji')
+    fetchEmoji() {
+      if (!this.customEmojiFetched) {
+        this.getCustomEmoji().then(() => (this.customEmojiFetched = true))
       }
-      if (!state.emojiFetched) {
-        state.emojiFetched = true
-        dispatch('getStaticEmoji')
-      }
-    },
-
-    async getKnownDomains({ commit, rootState }) {
-      try {
-        const result = await apiService.fetchKnownDomains({
-          credentials: rootState.users.currentUser.credentials,
-        })
-        commit('setKnownDomains', result)
-      } catch (e) {
-        console.warn("Can't load known domains\n", e)
+      if (!this.emojiFetched) {
+        this.getStaticEmoji().then(() => (this.emojiFetched = true))
       }
     },
   },
-}
-
-export default instance
+})
diff --git a/src/stores/instance.js b/src/stores/instance.js
new file mode 100644
index 000000000..76ad22fb5
--- /dev/null
+++ b/src/stores/instance.js
@@ -0,0 +1,123 @@
+import { get, set } from 'lodash'
+import { defineStore } from 'pinia'
+
+import { instanceDefaultProperties } from '../modules/config.js'
+import {
+  instanceDefaultConfig,
+  staticOrApiConfigDefault,
+} 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,
+
+  // Stuff from static/config.json
+  loginMethod: 'password',
+  disableUpdateNotification: false,
+
+  // Instance-wide configurations that should not be changed by individual users
+  instanceIdentity: {
+    ...staticOrApiConfigDefault,
+  },
+
+  limits: {
+    bannerlimit: null,
+    avatarlimit: null,
+    backgroundlimit: null,
+    uploadlimit: null,
+    fieldsLimits: null,
+    pollLimits: {
+      max_options: 4,
+      max_option_chars: 255,
+      min_expiration: 60,
+      max_expiration: 60 * 60 * 24,
+    },
+  },
+
+  // Instance admins can override default settings for the whole instance
+  prefsStorage: {
+    ...instanceDefaultConfig,
+  },
+
+  // 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 }),
+  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(this, path ?? name, value)
+
+      if ((path ?? name) === 'name') useInterfaceStore().setPageTitle()
+    },
+    async getKnownDomains() {
+      try {
+        this.knownDomains = await apiService.fetchKnownDomains({
+          credentials: window.vuex.state.users.currentUser.credentials,
+        })
+      } catch (e) {
+        console.warn("Can't load known domains\n", e)
+      }
+    },
+    getRemoteInteractionLink({ statusId, nickname }) {
+      const server = this.server.endsWith('/')
+        ? this.server.slice(0, -1)
+        : this.server
+      const link = server + REMOTE_INTERACTION_URL
+
+      if (statusId) {
+        return `${link}?status_id=${statusId}`
+      } else {
+        return `${link}?nickname=${nickname}`
+      }
+    },
+  },
+})
diff --git a/src/stores/instance_capabilities.js b/src/stores/instance_capabilities.js
new file mode 100644
index 000000000..67c04a4ad
--- /dev/null
+++ b/src/stores/instance_capabilities.js
@@ -0,0 +1,48 @@
+import { defineStore } from 'pinia'
+
+const defaultState = {
+  postFormats: [],
+  mailerEnabled: false,
+  safeDM: true,
+  shoutAvailable: false,
+  pleromaExtensionsAvailable: true,
+  pleromaChatMessagesAvailable: false,
+  pleromaCustomEmojiReactionsAvailable: false,
+  pleromaBookmarkFoldersAvailable: false,
+  pleromaPublicFavouritesAvailable: true,
+  statusNotificationTypeAvailable: true,
+  gopherAvailable: false,
+  editingAvailable: false,
+  mediaProxyAvailable: false,
+  suggestionsEnabled: false,
+  suggestionsWeb: '',
+  quotingAvailable: false,
+  groupActorAvailable: false,
+  blockExpiration: false,
+  tagPolicyAvailable: false,
+  pollsAvailable: false,
+  localBubble: false, // Akkoma
+  scrobblesSupport: false,
+}
+
+export const useInstanceCapabilitiesStore = defineStore(
+  'instance-capabilities',
+  {
+    state: () => ({ ...defaultState }),
+    actions: {
+      set(capability, value) {
+        if (!Object.hasOwn(defaultState, capability)) {
+          console.error(
+            `Unknown instance capability ${capability}, value: ${value}`,
+          )
+        }
+
+        this[capability] = value
+
+        if (capability === 'shoutAvailable') {
+          window.vuex.dispatch('initializeSocket')
+        }
+      },
+    },
+  },
+)
diff --git a/src/stores/interface.js b/src/stores/interface.js
index d39a6d742..8d05ce44b 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -1,10 +1,5 @@
 import { defineStore } from 'pinia'
 
-import {
-  CURRENT_VERSION,
-  generatePreset,
-} from 'src/services/theme_data/theme_data.service.js'
-import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 import {
   applyTheme,
   getResourcesIndex,
@@ -12,6 +7,14 @@ import {
 } from '../services/style_setter/style_setter.js'
 import { deserialize } from '../services/theme_data/iss_deserializer.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import {
+  CURRENT_VERSION,
+  generatePreset,
+} from 'src/services/theme_data/theme_data.service.js'
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+
 export const useInterfaceStore = defineStore('interface', {
   state: () => ({
     localFonts: null,
@@ -86,7 +89,7 @@ export const useInterfaceStore = defineStore('interface', {
     },
     setPageTitle(option = '') {
       try {
-        document.title = `${option} ${window.vuex.state.instance.name}`
+        document.title = `${option} ${useInstanceStore().name}`
       } catch (error) {
         console.error(`${error}`)
       }
@@ -221,14 +224,14 @@ export const useInterfaceStore = defineStore('interface', {
     async fetchPalettesIndex() {
       try {
         const value = await getResourcesIndex('/static/palettes/index.json')
-        window.vuex.commit('setInstanceOption', {
+        useInstanceStore().set({
           name: 'palettesIndex',
           value,
         })
         return value
       } catch (e) {
         console.error('Could not fetch palettes index', e)
-        window.vuex.commit('setInstanceOption', {
+        useInstanceStore().set({
           name: 'palettesIndex',
           value: { _error: e },
         })
@@ -257,11 +260,11 @@ export const useInterfaceStore = defineStore('interface', {
           '/static/styles/index.json',
           deserialize,
         )
-        window.vuex.commit('setInstanceOption', { name: 'stylesIndex', value })
+        useInstanceStore().set({ name: 'stylesIndex', value })
         return value
       } catch (e) {
         console.error('Could not fetch styles index', e)
-        window.vuex.commit('setInstanceOption', {
+        useInstanceStore().set({
           name: 'stylesIndex',
           value: { _error: e },
         })
@@ -295,11 +298,11 @@ export const useInterfaceStore = defineStore('interface', {
     async fetchThemesIndex() {
       try {
         const value = await getResourcesIndex('/static/styles.json')
-        window.vuex.commit('setInstanceOption', { name: 'themesIndex', value })
+        useInstanceStore().set({ name: 'themesIndex', value })
         return value
       } catch (e) {
         console.error('Could not fetch themes index', e)
-        window.vuex.commit('setInstanceOption', {
+        useInstanceStore().set({
           name: 'themesIndex',
           value: { _error: e },
         })
@@ -385,14 +388,14 @@ export const useInterfaceStore = defineStore('interface', {
       }
 
       const { style: instanceStyleName, palette: instancePaletteName } =
-        window.vuex.state.instance
+        useInstanceStore()
 
       let {
         theme: instanceThemeV2Name,
         themesIndex,
         stylesIndex,
         palettesIndex,
-      } = window.vuex.state.instance
+      } = useInstanceStore()
 
       const {
         style: userStyleName,
diff --git a/src/stores/oauth.js b/src/stores/oauth.js
index ea5a4bfac..ef0f5ba35 100644
--- a/src/stores/oauth.js
+++ b/src/stores/oauth.js
@@ -1,5 +1,7 @@
 import { defineStore } from 'pinia'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+
 import {
   createApp,
   getClientToken,
@@ -61,8 +63,7 @@ export const useOAuthStore = defineStore('oauth', {
       this.userToken = false
     },
     async createApp() {
-      const { state } = window.vuex
-      const instance = state.instance.server
+      const instance = useInstanceStore().server
       const app = await createApp(instance)
       this.setClientData(app)
       return app
@@ -81,8 +82,8 @@ export const useOAuthStore = defineStore('oauth', {
       }
     },
     async getAppToken() {
-      const { state } = window.vuex
-      const instance = state.instance.server
+      const instance = useInstanceStore().server
+      console.log(this.clientId)
       const res = await getClientToken({
         clientId: this.clientId,
         clientSecret: this.clientSecret,
@@ -94,11 +95,10 @@ export const useOAuthStore = defineStore('oauth', {
     /// Use this if you want to ensure the app is still valid to use.
     /// @return {string} The access token to the app (not attached to any user)
     async ensureAppToken() {
-      const { state } = window.vuex
       if (this.appToken) {
         try {
           await verifyAppToken({
-            instance: state.instance.server,
+            instance: useInstanceStore().server,
             appToken: this.appToken,
           })
           return this.appToken
diff --git a/src/stores/reports.js b/src/stores/reports.js
index 52b67527d..d2cd4fd7c 100644
--- a/src/stores/reports.js
+++ b/src/stores/reports.js
@@ -1,7 +1,7 @@
 import filter from 'lodash/filter'
 import { defineStore } from 'pinia'
 
-import { useInterfaceStore } from 'src/stores/interface'
+import { useInterfaceStore } from 'src/stores/interface.js'
 
 export const useReportsStore = defineStore('reports', {
   state: () => ({
diff --git a/src/sw.js b/src/sw.js
index 711aae6d0..38a2fe7b2 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -4,11 +4,12 @@ import 'virtual:pleroma-fe/service_worker_env'
 
 import { createI18n } from 'vue-i18n'
 
-import { storage } from 'src/lib/storage.js'
 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'
+
 // Collects all messages for service workers
 // Needed because service workers cannot use dynamic imports
 // See /build/sw_plugin.js for more information
diff --git a/test/fixtures/setup_test.js b/test/fixtures/setup_test.js
index 082fdbe29..02c49eb60 100644
--- a/test/fixtures/setup_test.js
+++ b/test/fixtures/setup_test.js
@@ -2,9 +2,10 @@ import { config } from '@vue/test-utils'
 import { createMemoryHistory, createRouter } from 'vue-router'
 import VueVirtualScroller from 'vue-virtual-scroller'
 
-import routes from 'src/boot/routes'
 import makeMockStore from './mock_store'
 
+import routes from 'src/boot/routes'
+
 export const $t = (msg) => msg
 const $i18n = { t: (msg) => msg }
 
diff --git a/test/unit/specs/boot/routes.spec.js b/test/unit/specs/boot/routes.spec.js
index ed6838d7e..f4be28a65 100644
--- a/test/unit/specs/boot/routes.spec.js
+++ b/test/unit/specs/boot/routes.spec.js
@@ -1,3 +1,7 @@
+import { createTestingPinia } from '@pinia/testing'
+
+createTestingPinia()
+
 import { createMemoryHistory, createRouter } from 'vue-router'
 import { createStore } from 'vuex'
 
diff --git a/test/unit/specs/components/draft.spec.js b/test/unit/specs/components/draft.spec.js
index 2b9ade95d..7bc053f52 100644
--- a/test/unit/specs/components/draft.spec.js
+++ b/test/unit/specs/components/draft.spec.js
@@ -1,3 +1,4 @@
+import { createTestingPinia } from '@pinia/testing'
 import { flushPromises, mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 
@@ -35,6 +36,8 @@ afterEach(() => {
 })
 
 describe('Draft saving', () => {
+  createTestingPinia()
+
   autoSaveOrNot(
     it,
     'should save when the button is clicked',
diff --git a/test/unit/specs/components/emoji_input.spec.js b/test/unit/specs/components/emoji_input.spec.js
index 80f5a9c74..032e7e9b6 100644
--- a/test/unit/specs/components/emoji_input.spec.js
+++ b/test/unit/specs/components/emoji_input.spec.js
@@ -1,7 +1,10 @@
+import { createTestingPinia } from '@pinia/testing'
 import { shallowMount } from '@vue/test-utils'
 import vClickOutside from 'click-outside-vue3'
 import { h } from 'vue'
 
+createTestingPinia()
+
 import EmojiInput from 'src/components/emoji_input/emoji_input.vue'
 
 const generateInput = (value, padEmoji = true) => {
diff --git a/test/unit/specs/components/user_profile.spec.js b/test/unit/specs/components/user_profile.spec.js
index 2b594b160..8b198420b 100644
--- a/test/unit/specs/components/user_profile.spec.js
+++ b/test/unit/specs/components/user_profile.spec.js
@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import { createStore } from 'vuex'
 
 import UserProfile from 'src/components/user_profile/user_profile.vue'
+
 import { getters } from 'src/modules/users.js'
 import backendInteractorService from 'src/services/backend_interactor_service/backend_interactor_service.js'
 
diff --git a/test/unit/specs/modules/statuses.spec.js b/test/unit/specs/modules/statuses.spec.js
index 379b7795d..1315724da 100644
--- a/test/unit/specs/modules/statuses.spec.js
+++ b/test/unit/specs/modules/statuses.spec.js
@@ -1,9 +1,13 @@
+import { createTestingPinia } from '@pinia/testing'
+
 import {
   defaultState,
   mutations,
   prepareStatus,
 } from '../../../../src/modules/statuses.js'
 
+createTestingPinia()
+
 const makeMockStatus = ({ id, text, type = 'status' }) => {
   return {
     id,
diff --git a/test/unit/specs/stores/lists.spec.js b/test/unit/specs/stores/lists.spec.js
index 192546981..083730856 100644
--- a/test/unit/specs/stores/lists.spec.js
+++ b/test/unit/specs/stores/lists.spec.js
@@ -1,9 +1,10 @@
 import { createPinia, setActivePinia } from 'pinia'
 import { createStore } from 'vuex'
 
-import apiModule from 'src/modules/api.js'
 import { useListsStore } from 'src/stores/lists.js'
 
+import apiModule from 'src/modules/api.js'
+
 setActivePinia(createPinia())
 const store = useListsStore()
 window.vuex = createStore({
diff --git a/test/unit/specs/stores/oauth.spec.js b/test/unit/specs/stores/oauth.spec.js
index c634ebb66..4664bba02 100644
--- a/test/unit/specs/stores/oauth.spec.js
+++ b/test/unit/specs/stores/oauth.spec.js
@@ -1,210 +1,198 @@
+import { createTestingPinia } from '@pinia/testing'
 import { HttpResponse, http } from 'msw'
 import { createPinia, setActivePinia } from 'pinia'
-import { createApp } from 'vue'
-import { createStore } from 'vuex'
 
-import { useOAuthStore } from 'src/stores/oauth.js'
 import {
   authApis,
   injectMswToTest,
   testServer,
 } from '/test/fixtures/mock_api.js'
 
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useOAuthStore } from 'src/stores/oauth.js'
+
 const test = injectMswToTest(authApis)
 
-const vuexStore = createStore({
-  modules: {
-    instance: {
-      state: () => ({ server: testServer }),
-    },
-  },
-})
-const app = createApp({})
-app.use(vuexStore)
-window.vuex = vuexStore
-
-const getStore = (defaultStateInjection) => {
-  const pinia = createPinia().use(({ store }) => {
-    if (store.$id === 'oauth') {
-      store.$patch(defaultStateInjection)
-    }
-  })
-  app.use(pinia)
-  setActivePinia(pinia)
-  return useOAuthStore()
-}
-
-describe('createApp', () => {
-  test('it should use create an app and record client id and secret', async () => {
-    const store = getStore()
-    const app = await store.createApp()
-    expect(store.clientId).to.eql('test-id')
-    expect(store.clientSecret).to.eql('test-secret')
-    expect(app.clientId).to.eql('test-id')
-    expect(app.clientSecret).to.eql('test-secret')
+describe('oauth store', () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false }))
+    useInstanceStore().server = testServer
   })
 
-  test('it should throw and not update if failed', async ({ worker }) => {
-    worker.use(
-      http.post(`${testServer}/api/v1/apps`, () => {
-        return HttpResponse.text('Throttled', { status: 429 })
-      }),
-    )
+  describe('createApp', () => {
+    test('it should use create an app and record client id and secret', async () => {
+      const store = useOAuthStore()
+      const app = await store.createApp()
+      expect(store.clientId).to.eql('test-id')
+      expect(store.clientSecret).to.eql('test-secret')
+      expect(app.clientId).to.eql('test-id')
+      expect(app.clientSecret).to.eql('test-secret')
+    })
 
-    const store = getStore()
-    const res = store.createApp()
-    await expect(res).rejects.toThrowError('Throttled')
-    expect(store.clientId).to.eql(false)
-    expect(store.clientSecret).to.eql(false)
-  })
-})
-
-describe('ensureApp', () => {
-  test('it should create an app if it does not exist', async () => {
-    const store = getStore()
-    const app = await store.ensureApp()
-    expect(store.clientId).to.eql('test-id')
-    expect(store.clientSecret).to.eql('test-secret')
-    expect(app.clientId).to.eql('test-id')
-    expect(app.clientSecret).to.eql('test-secret')
-  })
-
-  test('it should not create an app if it exists', async ({ worker }) => {
-    worker.use(
-      http.post(`${testServer}/api/v1/apps`, () => {
-        return HttpResponse.text('Should not call this API', { status: 400 })
-      }),
-    )
-
-    const store = getStore({
-      clientId: 'another-id',
-      clientSecret: 'another-secret',
-    })
-    const app = await store.ensureApp()
-    expect(store.clientId).to.eql('another-id')
-    expect(store.clientSecret).to.eql('another-secret')
-    expect(app.clientId).to.eql('another-id')
-    expect(app.clientSecret).to.eql('another-secret')
-  })
-})
-
-describe('getAppToken', () => {
-  test('it should get app token and set it in state', async () => {
-    const store = getStore({
-      clientId: 'test-id',
-      clientSecret: 'test-secret',
-    })
-    const token = await store.getAppToken()
-    expect(token).to.eql('test-app-token')
-    expect(store.appToken).to.eql('test-app-token')
-  })
-
-  test('it should throw and not set state if it cannot get app token', async () => {
-    const store = getStore({
-      clientId: 'bad-id',
-      clientSecret: 'bad-secret',
-    })
-    await expect(store.getAppToken()).rejects.toThrowError('400')
-    expect(store.appToken).to.eql(false)
-  })
-})
-
-describe('ensureAppToken', () => {
-  test('it should work if the state is empty', async () => {
-    const store = getStore()
-    const token = await store.ensureAppToken()
-    expect(token).to.eql('test-app-token')
-    expect(store.appToken).to.eql('test-app-token')
-  })
-
-  test('it should work if we already have a working token', async () => {
-    const store = getStore({
-      appToken: 'also-good-app-token',
-    })
-    const token = await store.ensureAppToken()
-    expect(token).to.eql('also-good-app-token')
-    expect(store.appToken).to.eql('also-good-app-token')
-  })
-
-  test('it should work if we have a bad token but good app credentials', async ({
-    worker,
-  }) => {
-    worker.use(
-      http.post(`${testServer}/api/v1/apps`, () => {
-        return HttpResponse.text('Should not call this API', { status: 400 })
-      }),
-    )
-    const store = getStore({
-      appToken: 'bad-app-token',
-      clientId: 'test-id',
-      clientSecret: 'test-secret',
-    })
-    const token = await store.ensureAppToken()
-    expect(token).to.eql('test-app-token')
-    expect(store.appToken).to.eql('test-app-token')
-  })
-
-  test('it should work if we have no token but good app credentials', async ({
-    worker,
-  }) => {
-    worker.use(
-      http.post(`${testServer}/api/v1/apps`, () => {
-        return HttpResponse.text('Should not call this API', { status: 400 })
-      }),
-    )
-    const store = getStore({
-      clientId: 'test-id',
-      clientSecret: 'test-secret',
-    })
-    const token = await store.ensureAppToken()
-    expect(token).to.eql('test-app-token')
-    expect(store.appToken).to.eql('test-app-token')
-  })
-
-  test('it should work if we have no token and bad app credentials', async () => {
-    const store = getStore({
-      clientId: 'bad-id',
-      clientSecret: 'bad-secret',
-    })
-    const token = await store.ensureAppToken()
-    expect(token).to.eql('test-app-token')
-    expect(store.appToken).to.eql('test-app-token')
-    expect(store.clientId).to.eql('test-id')
-    expect(store.clientSecret).to.eql('test-secret')
-  })
-
-  test('it should work if we have bad token and bad app credentials', async () => {
-    const store = getStore({
-      appToken: 'bad-app-token',
-      clientId: 'bad-id',
-      clientSecret: 'bad-secret',
-    })
-    const token = await store.ensureAppToken()
-    expect(token).to.eql('test-app-token')
-    expect(store.appToken).to.eql('test-app-token')
-    expect(store.clientId).to.eql('test-id')
-    expect(store.clientSecret).to.eql('test-secret')
-  })
-
-  test('it should throw if we cannot create an app', async ({ worker }) => {
-    worker.use(
-      http.post(`${testServer}/api/v1/apps`, () => {
-        return HttpResponse.text('Throttled', { status: 429 })
-      }),
-    )
-
-    const store = getStore()
-    await expect(store.ensureAppToken()).rejects.toThrowError('Throttled')
-  })
-
-  test('it should throw if we cannot obtain app token', async ({ worker }) => {
-    worker.use(
-      http.post(`${testServer}/oauth/token`, () => {
-        return HttpResponse.text('Throttled', { status: 429 })
-      }),
-    )
-
-    const store = getStore()
-    await expect(store.ensureAppToken()).rejects.toThrowError('Throttled')
+    test('it should throw and not update if failed', async ({ worker }) => {
+      worker.use(
+        http.post(`${testServer}/api/v1/apps`, () => {
+          return HttpResponse.text('Throttled', { status: 429 })
+        }),
+      )
+
+      const store = useOAuthStore()
+      const res = store.createApp()
+      await expect(res).rejects.toThrowError('Throttled')
+      expect(store.clientId).to.eql(false)
+      expect(store.clientSecret).to.eql(false)
+    })
+  })
+
+  describe('ensureApp', () => {
+    test('it should create an app if it does not exist', async () => {
+      const store = useOAuthStore()
+      const app = await store.ensureApp()
+      expect(store.clientId).to.eql('test-id')
+      expect(store.clientSecret).to.eql('test-secret')
+      expect(app.clientId).to.eql('test-id')
+      expect(app.clientSecret).to.eql('test-secret')
+    })
+
+    test('it should not create an app if it exists', async ({ worker }) => {
+      worker.use(
+        http.post(`${testServer}/api/v1/apps`, () => {
+          return HttpResponse.text('Should not call this API', { status: 400 })
+        }),
+      )
+
+      const store = useOAuthStore()
+      store.clientId = 'another-id'
+      store.clientSecret = 'another-secret'
+
+      const app = await store.ensureApp()
+      expect(store.clientId).to.eql('another-id')
+      expect(store.clientSecret).to.eql('another-secret')
+      expect(app.clientId).to.eql('another-id')
+      expect(app.clientSecret).to.eql('another-secret')
+    })
+  })
+
+  describe('getAppToken', () => {
+    test('it should get app token and set it in state', async () => {
+      const store = useOAuthStore()
+      store.clientId = 'test-id'
+      store.clientSecret = 'test-secret'
+
+      const token = await store.getAppToken()
+      expect(token).to.eql('test-app-token')
+      expect(store.appToken).to.eql('test-app-token')
+    })
+
+    test('it should throw and not set state if it cannot get app token', async () => {
+      const store = useOAuthStore()
+      store.clientId = 'bad-id'
+      store.clientSecret = 'bad-secret'
+
+      await expect(store.getAppToken()).rejects.toThrowError('400')
+      expect(store.appToken).to.eql(false)
+    })
+  })
+
+  describe('ensureAppToken', () => {
+    test('it should work if the state is empty', async () => {
+      const store = useOAuthStore()
+      const token = await store.ensureAppToken()
+      expect(token).to.eql('test-app-token')
+      expect(store.appToken).to.eql('test-app-token')
+    })
+
+    test('it should work if we already have a working token', async () => {
+      const store = useOAuthStore()
+      store.appToken = 'also-good-app-token'
+
+      const token = await store.ensureAppToken()
+      expect(token).to.eql('also-good-app-token')
+      expect(store.appToken).to.eql('also-good-app-token')
+    })
+
+    test('it should work if we have a bad token but good app credentials', async ({
+      worker,
+    }) => {
+      worker.use(
+        http.post(`${testServer}/api/v1/apps`, () => {
+          return HttpResponse.text('Should not call this API', { status: 400 })
+        }),
+      )
+      const store = useOAuthStore()
+      store.appToken = 'bad-app-token'
+      store.clientId = 'test-id'
+      store.clientSecret = 'test-secret'
+
+      const token = await store.ensureAppToken()
+      expect(token).to.eql('test-app-token')
+      expect(store.appToken).to.eql('test-app-token')
+    })
+
+    test('it should work if we have no token but good app credentials', async ({
+      worker,
+    }) => {
+      worker.use(
+        http.post(`${testServer}/api/v1/apps`, () => {
+          return HttpResponse.text('Should not call this API', { status: 400 })
+        }),
+      )
+      const store = useOAuthStore()
+      store.clientId = 'test-id'
+      store.clientSecret = 'test-secret'
+
+      const token = await store.ensureAppToken()
+      expect(token).to.eql('test-app-token')
+      expect(store.appToken).to.eql('test-app-token')
+    })
+
+    test('it should work if we have no token and bad app credentials', async () => {
+      const store = useOAuthStore()
+      store.clientId = 'bad-id'
+      store.clientSecret = 'bad-secret'
+
+      const token = await store.ensureAppToken()
+      expect(token).to.eql('test-app-token')
+      expect(store.appToken).to.eql('test-app-token')
+      expect(store.clientId).to.eql('test-id')
+      expect(store.clientSecret).to.eql('test-secret')
+    })
+
+    test('it should work if we have bad token and bad app credentials', async () => {
+      const store = useOAuthStore()
+      store.appToken = 'bad-app-token'
+      store.clientId = 'bad-id'
+      store.clientSecret = 'bad-secret'
+
+      const token = await store.ensureAppToken()
+      expect(token).to.eql('test-app-token')
+      expect(store.appToken).to.eql('test-app-token')
+      expect(store.clientId).to.eql('test-id')
+      expect(store.clientSecret).to.eql('test-secret')
+    })
+
+    test('it should throw if we cannot create an app', async ({ worker }) => {
+      worker.use(
+        http.post(`${testServer}/api/v1/apps`, () => {
+          return HttpResponse.text('Throttled', { status: 429 })
+        }),
+      )
+
+      const store = useOAuthStore()
+      await expect(store.ensureAppToken()).rejects.toThrowError('Throttled')
+    })
+
+    test('it should throw if we cannot obtain app token', async ({
+      worker,
+    }) => {
+      worker.use(
+        http.post(`${testServer}/oauth/token`, () => {
+          return HttpResponse.text('Throttled', { status: 429 })
+        }),
+      )
+
+      const store = useOAuthStore()
+      await expect(store.ensureAppToken()).rejects.toThrowError('Throttled')
+    })
   })
 })
diff --git a/vite.config.js b/vite.config.js
index 2b6187413..401cb4b35 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -88,6 +88,11 @@ export default defineConfig(async ({ mode, command }) => {
       changeOrigin: true,
       cookieDomainRewrite: 'localhost',
     },
+    '/instance': {
+      target,
+      changeOrigin: true,
+      cookieDomainRewrite: 'localhost',
+    },
     '/socket': {
       target,
       changeOrigin: true,
diff --git a/yarn.lock b/yarn.lock
index d053a6f51..54d81f139 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2040,6 +2040,11 @@
     "@parcel/watcher-win32-ia32" "2.5.1"
     "@parcel/watcher-win32-x64" "2.5.1"
 
+"@pinia/testing@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@pinia/testing/-/testing-1.0.3.tgz#62e0813a7a8ac735505422bb7a4e38eb86f815dc"
+  integrity sha512-g+qR49GNdI1Z8rZxKrQC3GN+LfnGTNf5Kk8Nz5Cz6mIGva5WRS+ffPXQfzhA0nu6TveWzPNYTjGl4nJqd3Cu9Q==
+
 "@pkgjs/parseargs@^0.11.0":
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33"