diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ea878f2937..8bcbec0dae 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -104,7 +104,7 @@ export default {
         ...mapState(useUxDrawersStore, ['hiddenLeftDrawer']),
         ...mapState(useAccountAuthStore, ['user']),
         ...mapState(useUxLoadingStore, ['appLoader', 'offline']),
-        ...mapVuexState('account', ['team', 'settings']),
+        ...mapVuexState('account', ['settings']),
         loginRequired () {
             return this.$route.meta.requiresLogin !== false
         },
diff --git a/frontend/src/components/DevicesBrowser.vue b/frontend/src/components/DevicesBrowser.vue
index bdf5df82d6..4b96ce4e39 100644
--- a/frontend/src/components/DevicesBrowser.vue
+++ b/frontend/src/components/DevicesBrowser.vue
@@ -348,7 +348,7 @@ import { CogIcon, PlusSmIcon } from '@heroicons/vue/solid'
 
 import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import deviceApi from '../api/devices.js'
 import teamApi from '../api/team.js'
@@ -386,6 +386,7 @@ import DevicesStatusBar from './charts/DeviceStatusBar.vue'
 import AddDeviceToGroupDialog from './dialogs/device-group-management/AddDeviceToGroupDialog.vue'
 import RemoveDeviceFromGroupDialog from './dialogs/device-group-management/RemoveDeviceFromGroupDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
 import { useUxDialogStore } from '@/stores/ux-dialog.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
@@ -461,7 +462,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team', 'teamMembership']),
+        ...mapState(useContextStore, ['team']),
         ...mapGetters('account', ['featuresCheck']),
         ...mapState(useUxDialogStore, ['dialog']),
         ...mapState(useUxToursStore, ['tours']),
@@ -615,7 +616,7 @@ export default {
         if (this.deviceCountDeltaSincePageLoad !== 0) {
             // Trigger a refresh of team info to resync following device
             // changes
-            await this.$store.dispatch('account/refreshTeam')
+            await useContextStore().refreshTeam()
         }
     },
     methods: {
diff --git a/frontend/src/components/NotificationsButton.vue b/frontend/src/components/NotificationsButton.vue
index fdc457111e..7fda56ca7e 100644
--- a/frontend/src/components/NotificationsButton.vue
+++ b/frontend/src/components/NotificationsButton.vue
@@ -11,10 +11,10 @@
 import { MailIcon } from '@heroicons/vue/outline'
 import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters } from 'vuex'
 
 import NotificationsDrawer from './drawers/notifications/NotificationsDrawer.vue'
 
+import { useAccountStore } from '@/stores/account.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -22,8 +22,7 @@ export default {
     components: { MailIcon },
     computed: {
         ...mapState(useUxDrawersStore, ['rightDrawer']),
-        ...mapGetters('account', ['hasNotifications']),
-        ...mapGetters('account', ['unreadNotificationsCount']),
+        ...mapState(useAccountStore, ['hasNotifications', 'unreadNotificationsCount']),
         notificationsCount: function () {
             // Return null if count = 0 so we don't show a 0 in the pill
             if (!this.unreadNotificationsCount) {
diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
index 8ada94fa4d..189c73a0e4 100644
--- a/frontend/src/components/PageHeader.vue
+++ b/frontend/src/components/PageHeader.vue
@@ -104,7 +104,7 @@
 import { AcademicCapIcon, AdjustmentsIcon, CogIcon, CursorClickIcon, LogoutIcon, MenuIcon, PlusIcon, QuestionMarkCircleIcon, XIcon } from '@heroicons/vue/solid'
 import { mapActions, mapState } from 'pinia'
 import { ref } from 'vue'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
@@ -120,6 +120,8 @@ import TeamSelection from './TeamSelection.vue'
 import GlobalSearch from './global-search/GlobalSearch.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
@@ -132,8 +134,9 @@ export default {
         },
         ...mapState(useUxDrawersStore, ['leftDrawer', 'hiddenLeftDrawer']),
         ...mapState(useAccountAuthStore, ['user']),
-        ...mapVuexState('account', ['team', 'teams']),
-        ...mapGetters('account', ['notifications', 'hasAvailableTeams', 'defaultUserTeam', 'canCreateTeam', 'isTrialAccount', 'featuresCheck']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['teams', 'notifications', 'hasAvailableTeams', 'defaultUserTeam']),
+        ...mapGetters('account', ['canCreateTeam', 'featuresCheck']),
         navigationOptions () {
             return [
                 {
diff --git a/frontend/src/components/TeamSelection.vue b/frontend/src/components/TeamSelection.vue
index 45b1f038b3..2b7159e97b 100644
--- a/frontend/src/components/TeamSelection.vue
+++ b/frontend/src/components/TeamSelection.vue
@@ -42,12 +42,16 @@ import {
     ListboxOption
 } from '@headlessui/vue'
 import { PlusIcon, UserAddIcon } from '@heroicons/vue/solid'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import usePermissions from '../composables/Permissions.js'
 
 import NavItem from './NavItem.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'FFTeamSelection',
     emits: ['option-selected'],
@@ -61,8 +65,10 @@ export default {
         return { PlusIcon, UserAddIcon, hasPermission }
     },
     computed: {
-        ...mapState('account', ['team', 'teams', 'settings']),
-        ...mapGetters('account', ['hasAvailableTeams', 'canCreateTeam']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['teams', 'hasAvailableTeams']),
+        ...mapVuexState('account', ['settings']),
+        ...mapGetters('account', ['canCreateTeam']),
         teamOptions () {
             return [
                 ...this.teams.map(team => {
@@ -101,7 +107,7 @@ export default {
     methods: {
         selectTeam (team) {
             if (team) {
-                this.$store.dispatch('account/setTeam', team.slug)
+                useAccountStore().setTeam(team.slug)
                     .then(() => this.$router.push({
                         name: 'Team',
                         params: {
diff --git a/frontend/src/components/TeamTypeTile.vue b/frontend/src/components/TeamTypeTile.vue
index 3bdd13a089..f3ac8fdf42 100644
--- a/frontend/src/components/TeamTypeTile.vue
+++ b/frontend/src/components/TeamTypeTile.vue
@@ -31,11 +31,11 @@
 
 <script>
 import { mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import { useHubspotHelper } from '../composables/Hubspot.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
 
 export default {
     name: 'TeamTypeTile',
@@ -59,7 +59,7 @@ export default {
         return { talkToSalesCalendarModal }
     },
     computed: {
-        ...mapVuexState('account', ['teams']),
+        ...mapState(useAccountStore, ['teams']),
         ...mapState(useAccountAuthStore, ['user']),
         pricing: function () {
             const billingDescriptionKey = this.billingInterval === 'year' ? 'yrDescription' : 'description'
diff --git a/frontend/src/components/banners/FeatureUnavailableToTeam.vue b/frontend/src/components/banners/FeatureUnavailableToTeam.vue
index 8db0fc409a..1c034fe1ce 100644
--- a/frontend/src/components/banners/FeatureUnavailableToTeam.vue
+++ b/frontend/src/components/banners/FeatureUnavailableToTeam.vue
@@ -26,7 +26,9 @@
 <script>
 import { SparklesIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'FeatureUnavailableToTeam',
@@ -49,7 +51,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         upgradePath () {
             return { name: 'TeamChangeType', params: { team_slug: this.team.slug } }
         }
diff --git a/frontend/src/components/banners/SubscriptionExpired.vue b/frontend/src/components/banners/SubscriptionExpired.vue
index e5f8c7dc52..bb2f2cd59b 100644
--- a/frontend/src/components/banners/SubscriptionExpired.vue
+++ b/frontend/src/components/banners/SubscriptionExpired.vue
@@ -28,10 +28,12 @@
 
 <script>
 import { ChevronRightIcon, ExclamationCircleIcon } from '@heroicons/vue/outline'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import usePermissions from '../../composables/Permissions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'SubscriptionExpired',
     components: {
@@ -44,7 +46,7 @@ export default {
         return { hasPermission }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         billingPath () {
             return '/team/' + this.team.slug + '/billing'
         },
diff --git a/frontend/src/components/banners/TeamSuspended.vue b/frontend/src/components/banners/TeamSuspended.vue
index 0dad64a0bf..05793e1236 100644
--- a/frontend/src/components/banners/TeamSuspended.vue
+++ b/frontend/src/components/banners/TeamSuspended.vue
@@ -13,7 +13,9 @@
 
 <script>
 import { ExclamationCircleIcon } from '@heroicons/vue/outline'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'TeamSuspended',
@@ -21,7 +23,7 @@ export default {
         ExclamationCircleIcon
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     }
 }
 </script>
diff --git a/frontend/src/components/banners/TeamTrial.vue b/frontend/src/components/banners/TeamTrial.vue
index 60423e5c60..84fcfaa573 100644
--- a/frontend/src/components/banners/TeamTrial.vue
+++ b/frontend/src/components/banners/TeamTrial.vue
@@ -38,10 +38,12 @@
 <script>
 import { ChevronRightIcon, ExclamationCircleIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import usePermissions from '../../composables/Permissions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamTrialBanner',
     components: {
@@ -54,7 +56,7 @@ export default {
         return { hasPermission }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership']),
+        ...mapState(useContextStore, ['team']),
         billingPath () {
             return '/team/' + this.team.slug + '/settings/change-type'
         },
diff --git a/frontend/src/components/blueprints/BlueprintTile.vue b/frontend/src/components/blueprints/BlueprintTile.vue
index affd1a2843..a49bc867dd 100644
--- a/frontend/src/components/blueprints/BlueprintTile.vue
+++ b/frontend/src/components/blueprints/BlueprintTile.vue
@@ -63,8 +63,8 @@
 <script>
 import { CheckCircleIcon, PlusIcon } from '@heroicons/vue/outline'
 import { SearchIcon } from '@heroicons/vue/solid'
+import { mapState } from 'pinia'
 import { defineAsyncComponent } from 'vue'
-import { mapState } from 'vuex'
 
 import ProjectIcon from '../../components/icons/Projects.js'
 import { useNavigationHelper } from '../../composables/NavigationHelper.js'
@@ -73,6 +73,8 @@ import FfDialog from '../../ui-components/components/DialogBox.vue'
 import FormRow from '../FormRow.vue'
 import AssetDetailDialog from '../dialogs/AssetDetailDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'BlueprintTile',
     components: {
@@ -134,7 +136,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         categoryClass () {
             // to lower case and strip spaces
             return this.blueprint?.category.toLowerCase().replace(/\s/g, '-')
diff --git a/frontend/src/components/dialogs/BlueprintSelectorDialog.vue b/frontend/src/components/dialogs/BlueprintSelectorDialog.vue
index 9783c2a02e..b44488a929 100644
--- a/frontend/src/components/dialogs/BlueprintSelectorDialog.vue
+++ b/frontend/src/components/dialogs/BlueprintSelectorDialog.vue
@@ -29,10 +29,12 @@
 </template>
 <script>
 import FlowRenderer from '@flowfuse/flow-renderer'
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import BlueprintSelection from '../../pages/instance/Blueprints/BlueprintSelection.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+
 export default {
     name: 'BlueprintSelectorDialog',
     components: { BlueprintSelection },
@@ -59,7 +61,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['blueprints', 'defaultBlueprint'])
+        ...mapState(useAccountStore, ['blueprints', 'defaultBlueprint'])
     },
     watch: {
         currentBlueprint (val) {
diff --git a/frontend/src/components/dialogs/EditApplicationPermissionsDialog.vue b/frontend/src/components/dialogs/EditApplicationPermissionsDialog.vue
index 8fa95021ff..51ebf30ef5 100644
--- a/frontend/src/components/dialogs/EditApplicationPermissionsDialog.vue
+++ b/frontend/src/components/dialogs/EditApplicationPermissionsDialog.vue
@@ -17,14 +17,16 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapState } from 'vuex'
 
 import teamApi from '../../api/team.js'
 import { capitalize } from '../../composables/strings/String.js'
 import alerts from '../../services/alerts.js'
 import { RoleNames, Roles } from '../../utils/roles.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default defineComponent({
     name: 'EditApplicationPermissionsDialog',
     emits: ['user-updated'],
@@ -38,7 +40,7 @@ export default defineComponent({
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         options () {
             return Object.keys(RoleNames)
                 .filter(key => key.toString() !== '99')
diff --git a/frontend/src/components/drawers/navigation/MainNav.vue b/frontend/src/components/drawers/navigation/MainNav.vue
index 37718d69d5..f381810deb 100644
--- a/frontend/src/components/drawers/navigation/MainNav.vue
+++ b/frontend/src/components/drawers/navigation/MainNav.vue
@@ -34,6 +34,7 @@ import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import NavItem from '../../NavItem.vue'
 
+import { useContextStore } from '@/stores/context.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 import { useUxNavigationStore } from '@/stores/ux-navigation.js'
 
@@ -43,7 +44,8 @@ export default {
     emits: ['option-selected'],
     computed: {
         ...mapState(useUxNavigationStore, ['mainNav', 'mainNavContext']),
-        ...mapVuexState('account', ['team', 'features', 'notifications']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         ...mapGetters('account', ['requiresBilling']),
         nearestMetaMenu () {
             if (this.$route?.meta?.menu) {
diff --git a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
index 7db85853ca..ab30d37e6d 100644
--- a/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
+++ b/frontend/src/components/drawers/notifications/NotificationsDrawer.vue
@@ -74,9 +74,8 @@
 
 <script>
 import { XIcon } from '@heroicons/vue/solid'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters, mapActions as mapVuexActions } from 'vuex'
 
 import userAPI from '../../../api/user.js'
 
@@ -86,6 +85,7 @@ import GenericNotification from '../../notifications/Generic.vue'
 import TeamInvitationAcceptedNotification from '../../notifications/invitations/Accepted.vue'
 import TeamInvitationReceivedNotification from '../../notifications/invitations/Received.vue'
 
+import { useAccountStore } from '@/stores/account.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -101,7 +101,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['notifications']),
+        ...mapState(useAccountStore, ['notifications']),
         canSelectAll () {
             return this.filteredNotifications.length !== this.selections.length
         },
@@ -126,7 +126,7 @@ export default {
     },
     methods: {
         ...mapActions(useUxDrawersStore, ['closeRightDrawer']),
-        ...mapVuexActions('account', ['setNotifications']),
+        ...mapActions(useAccountStore, ['setNotifications']),
         closeDrawer () {
             this.closeRightDrawer()
         },
diff --git a/frontend/src/components/global-search/GlobalSearch.vue b/frontend/src/components/global-search/GlobalSearch.vue
index 5b1595fc41..169e93e8ca 100644
--- a/frontend/src/components/global-search/GlobalSearch.vue
+++ b/frontend/src/components/global-search/GlobalSearch.vue
@@ -109,8 +109,8 @@
 
 <script>
 import { ChipIcon, ClockIcon, SearchIcon, TemplateIcon, XIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapState } from 'vuex'
 
 import globalApi from '../../api/global.js'
 import SpinnerIcon from '../../components/icons/Spinner.js'
@@ -122,6 +122,8 @@ import ProjectsIcon from '../icons/Projects.js'
 import ResultSection from './components/ResultSection.vue'
 import SearchTrigger from './components/SearchTrigger.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'GlobalSearch',
     components: {
@@ -146,7 +148,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         resApplication () {
             return this.results.filter(res => res.object === 'application')
         },
diff --git a/frontend/src/components/global-search/components/ResultSection.vue b/frontend/src/components/global-search/components/ResultSection.vue
index 3b236d7cf4..09c2f7c40a 100644
--- a/frontend/src/components/global-search/components/ResultSection.vue
+++ b/frontend/src/components/global-search/components/ResultSection.vue
@@ -41,7 +41,9 @@
 
 <script>
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'ResultSection',
@@ -74,7 +76,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         resultCount () {
             return this.results.length
         },
diff --git a/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue b/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue
index 5581ecf64c..7552ac1a81 100644
--- a/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue
+++ b/frontend/src/components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import applicationApi from '../../../api/application.js'
 import flowBlueprintsApi from '../../../api/flowBlueprints.js'
@@ -30,6 +30,9 @@ import InstanceStep from './steps/InstanceStep.vue'
 import TeamStep from './steps/TeamStep.vue'
 import FlowsStep from './steps/flows-step/index.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
 const TEAM_STEP_SLUG = 'team'
 const APPLICATION_SLUG = 'application'
 const INSTANCE_SLUG = 'instance'
@@ -85,8 +88,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'teams']),
-        ...mapGetters('account', ['isFreeTeamType']),
+        ...mapState(useContextStore, ['team', 'isFreeTeamType']),
+        ...mapState(useAccountStore, ['teams']),
         formSteps () {
             return [
                 {
diff --git a/frontend/src/components/multi-step-forms/instance/MultiStepDuplicateInstanceForm.vue b/frontend/src/components/multi-step-forms/instance/MultiStepDuplicateInstanceForm.vue
index 3a2b5c2f57..ee07aa2fc8 100644
--- a/frontend/src/components/multi-step-forms/instance/MultiStepDuplicateInstanceForm.vue
+++ b/frontend/src/components/multi-step-forms/instance/MultiStepDuplicateInstanceForm.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import instanceApi from '../../../api/instances.js'
 import teamApi from '../../../api/team.js'
@@ -32,6 +32,8 @@ import ApplicationStep from './steps/ApplicationStep.vue'
 import DuplicationStep from './steps/DuplicationStep.vue'
 import InstanceStep from './steps/InstanceStep.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 const INSTANCE_SLUG = 'instance'
 const APPLICATION_SLUG = 'application'
 const DUPLICATION_SLUG = 'duplication'
@@ -66,7 +68,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         formSteps () {
             return [
                 {
diff --git a/frontend/src/components/multi-step-forms/instance/MultiStepInstanceForm.vue b/frontend/src/components/multi-step-forms/instance/MultiStepInstanceForm.vue
index 9e10433371..23832b5533 100644
--- a/frontend/src/components/multi-step-forms/instance/MultiStepInstanceForm.vue
+++ b/frontend/src/components/multi-step-forms/instance/MultiStepInstanceForm.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import flowBlueprintsApi from '../../../api/flowBlueprints.js'
 import instanceApi from '../../../api/instances.js'
@@ -27,6 +27,8 @@ import MultiStepForm from '../MultiStepForm.vue'
 import InstanceStep from './steps/InstanceStep.vue'
 import FlowsStep from './steps/flows-step/index.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 const INSTANCE_SLUG = 'instance'
 const FLOWS_SLUG = 'flows'
 
@@ -55,7 +57,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         formSteps () {
             return [
                 {
diff --git a/frontend/src/components/multi-step-forms/instance/steps/DuplicationStep.vue b/frontend/src/components/multi-step-forms/instance/steps/DuplicationStep.vue
index 6388f53f7c..ecdedc3e0c 100644
--- a/frontend/src/components/multi-step-forms/instance/steps/DuplicationStep.vue
+++ b/frontend/src/components/multi-step-forms/instance/steps/DuplicationStep.vue
@@ -99,7 +99,8 @@
 
 <script>
 import { PencilIcon, RefreshIcon } from '@heroicons/vue/outline'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import billingApi from '../../../../api/billing.js'
 import instanceTypesApi from '../../../../api/instanceTypes.js'
@@ -117,6 +118,8 @@ import NameGenerator from '../../../../utils/name-generator/index.js'
 
 import FfLoading from '../../../Loading.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DuplicationStep',
     components: {
@@ -175,7 +178,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'features']),
+        ...mapVuexState('account', ['features']),
+        ...mapState(useContextStore, ['team']),
         isTrialProjectSelected () {
             //  - Team is in trial mode, and
             //  - Team billing is not configured, or
diff --git a/frontend/src/components/multi-step-forms/instance/steps/InstanceStep.vue b/frontend/src/components/multi-step-forms/instance/steps/InstanceStep.vue
index cc31c99fa5..5bedcaa031 100644
--- a/frontend/src/components/multi-step-forms/instance/steps/InstanceStep.vue
+++ b/frontend/src/components/multi-step-forms/instance/steps/InstanceStep.vue
@@ -126,7 +126,8 @@
 
 <script>
 import { CheckCircleIcon, RefreshIcon } from '@heroicons/vue/outline'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import billingApi from '../../../../api/billing.js'
 import instanceTypesApi from '../../../../api/instanceTypes.js'
@@ -146,6 +147,8 @@ import NameGenerator from '../../../../utils/name-generator/index.js'
 import Loading from '../../../Loading.vue'
 import FeatureUnavailableToTeam from '../../../banners/FeatureUnavailableToTeam.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceStep',
     components: {
@@ -208,7 +211,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team']),
+        ...mapVuexState('account', ['features']),
+        ...mapState(useContextStore, ['team']),
         activeInstanceTypeCount () {
             return this.decoratedInstanceTypes.filter(instance => !instance.disabled).length
         },
diff --git a/frontend/src/components/multi-step-forms/instance/steps/TeamStep.vue b/frontend/src/components/multi-step-forms/instance/steps/TeamStep.vue
index 6848d78cf6..d27dafc2f7 100644
--- a/frontend/src/components/multi-step-forms/instance/steps/TeamStep.vue
+++ b/frontend/src/components/multi-step-forms/instance/steps/TeamStep.vue
@@ -24,7 +24,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
+
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'TeamStep',
@@ -36,7 +39,8 @@ export default {
     },
     emits: ['next-step', 'step-updated'],
     computed: {
-        ...mapGetters('account', ['team', 'teams'])
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['teams'])
     },
     mounted () {
         this.$emit('step-updated', {
@@ -48,7 +52,7 @@ export default {
     },
     methods: {
         selectTeam (team) {
-            return this.$store.dispatch('account/setTeam', team.slug)
+            return useAccountStore().setTeam(team.slug)
                 .then(() => this.$emit('next-step'))
         }
     }
diff --git a/frontend/src/components/multi-step-forms/instance/steps/flows-step/BlueprintsSection.vue b/frontend/src/components/multi-step-forms/instance/steps/flows-step/BlueprintsSection.vue
index 36d2db962a..6f0291499a 100644
--- a/frontend/src/components/multi-step-forms/instance/steps/flows-step/BlueprintsSection.vue
+++ b/frontend/src/components/multi-step-forms/instance/steps/flows-step/BlueprintsSection.vue
@@ -63,7 +63,6 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
 
 import { scrollIntoView } from '../../../../../composables/Ux.js'
 
@@ -96,7 +95,6 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
         categories () {
             return [...this.blueprints].sort((a, b) => {
                 return a.order - b.order
diff --git a/frontend/src/components/pipelines/PipelineRow.vue b/frontend/src/components/pipelines/PipelineRow.vue
index 2b41973767..a7caba0e3e 100644
--- a/frontend/src/components/pipelines/PipelineRow.vue
+++ b/frontend/src/components/pipelines/PipelineRow.vue
@@ -58,7 +58,7 @@
 <script>
 import { ChevronRightIcon, PencilAltIcon, TrashIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import ApplicationAPI from '../../api/application.js'
 import { StageAction, StageType } from '../../api/pipeline.js'
@@ -71,6 +71,8 @@ import { Roles } from '../../utils/roles.js'
 
 import PipelineStage from './Stage.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'PipelineRow',
     components: {
@@ -124,7 +126,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership']),
+        ...mapState(useContextStore, ['teamMembership']),
         saveRowEnabled () {
             return this.scopedPipeline.name?.length > 0
         },
diff --git a/frontend/src/components/router-links/TeamLink.vue b/frontend/src/components/router-links/TeamLink.vue
index 9dcc9ad211..b608789e2e 100644
--- a/frontend/src/components/router-links/TeamLink.vue
+++ b/frontend/src/components/router-links/TeamLink.vue
@@ -7,8 +7,10 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { RouterLink as DefaultRouterLink } from 'vue-router'
-import { mapState } from 'vuex'
+
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'TeamLink',
@@ -17,7 +19,7 @@ export default {
         ...DefaultRouterLink.props
     },
     computed: {
-        ...mapState('account', ['team', 'teams']),
+        ...mapState(useContextStore, ['team']),
         extendedProps () {
             const props = { ...this.$props }
 
diff --git a/frontend/src/components/tables/cells/TeamCell.vue b/frontend/src/components/tables/cells/TeamCell.vue
index bf1d1855df..9fd1ed4ec5 100644
--- a/frontend/src/components/tables/cells/TeamCell.vue
+++ b/frontend/src/components/tables/cells/TeamCell.vue
@@ -8,13 +8,15 @@
     </div>
 </template>
 <script>
+import { useAccountStore } from '@/stores/account.js'
+
 export default {
     name: 'TeamCell',
     props: ['avatar', 'name', 'id', 'slug'],
     methods: {
         goToTeam () {
             if (this.slug) {
-                this.$store.dispatch('account/setTeam', this.slug)
+                useAccountStore().setTeam(this.slug)
                     .then(() => this.$router.push({
                         name: 'Team',
                         params: {
diff --git a/frontend/src/components/tiles/InstanceCounter.vue b/frontend/src/components/tiles/InstanceCounter.vue
index fd9b6bbc40..99479abb79 100644
--- a/frontend/src/components/tiles/InstanceCounter.vue
+++ b/frontend/src/components/tiles/InstanceCounter.vue
@@ -11,7 +11,6 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
 
 export default {
     name: 'InstanceCounter',
@@ -36,7 +35,6 @@ export default {
     },
     emits: ['clicked'],
     computed: {
-        ...mapGetters('account', ['team']),
         accent () {
             switch (this.state) {
             case 'running':
diff --git a/frontend/src/composables/Components/multi-step-forms/instance/InstanceFormHelper.js b/frontend/src/composables/Components/multi-step-forms/instance/InstanceFormHelper.js
index 8174a8c14f..cf18b2fc33 100644
--- a/frontend/src/composables/Components/multi-step-forms/instance/InstanceFormHelper.js
+++ b/frontend/src/composables/Components/multi-step-forms/instance/InstanceFormHelper.js
@@ -1,40 +1,47 @@
-import store from '../../../../store/index.js'
+import { storeToRefs } from 'pinia'
 
+import store from '../../../../store/index.js'
 import { getTeamProperty } from '../../../TeamProperties.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export function useInstanceFormHelper () {
     const _store = store
 
     const teamRuntimeLimitReached = () => {
-        let teamTypeRuntimeLimit = getTeamProperty(_store.state.account.team, 'runtimes.limit')
-        const currentRuntimeCount = _store.state.account.team.deviceCount + _store.state.account.team.instanceCount
-        if (_store.state.account.team.billing?.trial && !_store.state.account.team.billing?.active && getTeamProperty(_store.state.account.team, 'trial.runtimesLimit')) {
-            teamTypeRuntimeLimit = getTeamProperty(_store.state.account.team, 'trial.runtimesLimit')
+        const { team: teamRef } = storeToRefs(useContextStore())
+        const team = teamRef.value
+        let teamTypeRuntimeLimit = getTeamProperty(team, 'runtimes.limit')
+        const currentRuntimeCount = (team?.deviceCount ?? 0) + (team?.instanceCount ?? 0)
+        if (team?.billing?.trial && !team?.billing?.active && getTeamProperty(team, 'trial.runtimesLimit')) {
+            teamTypeRuntimeLimit = getTeamProperty(team, 'trial.runtimesLimit')
         }
         return (teamTypeRuntimeLimit > 0 && currentRuntimeCount >= teamTypeRuntimeLimit)
     }
 
     const decorateInstanceTypes = (instanceTypes) => {
+        const { team: teamRef } = storeToRefs(useContextStore())
+        const team = teamRef.value
         // Do a first pass of the instance types to disable any not allowed for this team
         instanceTypes = instanceTypes.map(instanceType => {
             // Need to combine the projectType billing info with any overrides
             // from the current teamType
-            const existingInstanceCount = _store.state.account.team.instanceCountByType?.[instanceType.id] || 0
+            const existingInstanceCount = team?.instanceCountByType?.[instanceType.id] || 0
             if (teamRuntimeLimitReached()) {
                 // The overall limit has been reached
                 instanceType.disabled = true
             } else {
                 // Get individual properties to ensure we pickup any team overrides
-                if (!getTeamProperty(_store.state.account.team, `instances.${instanceType.id}.active`)) {
+                if (!getTeamProperty(team, `instances.${instanceType.id}.active`)) {
                     // This instanceType is disabled for this teamType
                     instanceType.disabled = true
-                } else if (getTeamProperty(_store.state.account.team, `instances.${instanceType.id}.creatable`) === false) {
+                } else if (getTeamProperty(team, `instances.${instanceType.id}.creatable`) === false) {
                     // Type is active (it can exist), but not creatable (not allowed to create more) for this team type.
                     // This can happen follow a change of TeamType where different instance types are available.
                     // This check treats undefined as true for backwards compatibility
                     instanceType.disabled = true
                 } else {
-                    const limit = getTeamProperty(_store.state.account.team, `instances.${instanceType.id}.limit`)
+                    const limit = getTeamProperty(team, `instances.${instanceType.id}.limit`)
                     if (limit !== null && limit <= existingInstanceCount) {
                         // This team has reached the limit of this instance type
                         instanceType.disabled = true
@@ -51,24 +58,24 @@ export function useInstanceFormHelper () {
             instanceTypes = instanceTypes.map(instanceType => {
             // Need to combine the projectType billing info with any overrides
             // from the current teamType
-                let existingInstanceCount = _store.state.account.team.instanceCountByType?.[instanceType.id] || 0
-                if (getTeamProperty(_store.state.account.team, 'devices.combinedFreeType') === instanceType.id) {
+                let existingInstanceCount = team?.instanceCountByType?.[instanceType.id] || 0
+                if (getTeamProperty(team, 'devices.combinedFreeType') === instanceType.id) {
                 // Need to include device count as they use a combined free allocation
-                    existingInstanceCount += _store.state.account.team.deviceCount
+                    existingInstanceCount += team?.deviceCount ?? 0
                 }
                 instanceType.price = ''
                 instanceType.priceInterval = ''
                 instanceType.currency = ''
                 instanceType.cost = 0
-                if (!instanceType.disabled && !_store.state.account.team.billing?.unmanaged) {
+                if (!instanceType.disabled && !team?.billing?.unmanaged) {
                     let billingDescription
-                    const teamTypeFreeCount = getTeamProperty(_store.state.account.team, `instances.${instanceType.id}.free`)
+                    const teamTypeFreeCount = getTeamProperty(team, `instances.${instanceType.id}.free`)
                     // Get the right description based on the billing interval
                     let descriptionKey = 'description'
-                    if (_store.state.account.team.billing?.interval === 'year') {
+                    if (team?.billing?.interval === 'year') {
                         descriptionKey = 'yrDescription'
                     }
-                    const teamTypeDescription = getTeamProperty(_store.state.account.team, `instances.${instanceType.id}.${descriptionKey}`)
+                    const teamTypeDescription = getTeamProperty(team, `instances.${instanceType.id}.${descriptionKey}`)
                     if (teamTypeDescription) {
                     // TeamType provides metadata to use - do not fall back to instanceType
                         if (existingInstanceCount >= (teamTypeFreeCount || 0)) {
@@ -90,14 +97,14 @@ export function useInstanceFormHelper () {
                         instanceType.currency = ''
                         instanceType.cost = 0
                     }
-                    if (_store.state.account.team.billing?.trial) {
-                        if (getTeamProperty(_store.state.account.team, 'trial.instanceType')) {
-                            const isTrialProjectType = instanceType.id === getTeamProperty(_store.state.account.team, 'trial.instanceType')
-                            if (!_store.state.account.team.billing?.active) {
+                    if (team?.billing?.trial) {
+                        if (getTeamProperty(team, 'trial.instanceType')) {
+                            const isTrialProjectType = instanceType.id === getTeamProperty(team, 'trial.instanceType')
+                            if (!team?.billing?.active) {
                             // No active billing - only allow the trial instance type
                                 instanceType.disabled = !isTrialProjectType
                             }
-                            if (isTrialProjectType && _store.state.account.team.billing?.trialProjectAllowed) {
+                            if (isTrialProjectType && team?.billing?.trialProjectAllowed) {
                                 instanceType.price = 'Free Trial'
                             // instanceType.priceInterval = instanceType.properties?.billingDescription
                             }
diff --git a/frontend/src/composables/DeviceHelper.js b/frontend/src/composables/DeviceHelper.js
index 27e34e9990..00ea1808e5 100644
--- a/frontend/src/composables/DeviceHelper.js
+++ b/frontend/src/composables/DeviceHelper.js
@@ -1,14 +1,16 @@
 import semver from 'semver'
 import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
 
 import deviceApi from '../api/devices.js'
+
 import Alerts from '../services/alerts.js'
 import Dialog from '../services/dialog.js'
 import { DeviceStateMutator } from '../utils/DeviceStateMutator.js'
 import { createPollTimer } from '../utils/timers.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 // constants
 const POLL_TIME = 5000
 const deviceTransitionStates = [
@@ -22,7 +24,6 @@ const deviceTransitionStates = [
 ]
 
 export function useDeviceHelper () {
-    const $store = useStore()
     const $router = useRouter()
 
     let deviceStateMutator = null
@@ -147,8 +148,8 @@ export function useDeviceHelper () {
                 await deviceApi.deleteDevice(device.value.id)
                 Alerts.emit('Successfully deleted the device', 'confirmation')
                 // Trigger a refresh of team info to resync following device changes
-                await $store.dispatch('account/refreshTeam')
-                await $router.push({ name: 'TeamDevices', params: { team_slug: $store.state.account.team.slug } })
+                await useContextStore().refreshTeam()
+                await $router.push({ name: 'TeamDevices', params: { team_slug: useContextStore().team.slug } })
             } catch (err) {
                 Alerts.emit('Failed to delete device: ' + err.toString(), 'warning', 7500)
             }
diff --git a/frontend/src/composables/Permissions.js b/frontend/src/composables/Permissions.js
index dbb1785eb4..704c6f722e 100644
--- a/frontend/src/composables/Permissions.js
+++ b/frontend/src/composables/Permissions.js
@@ -1,9 +1,11 @@
 import { computed } from 'vue'
-import { useStore } from 'vuex'
 
 import { Permissions } from '../../../forge/lib/permissions.js'
+
 import { Roles } from '../utils/roles.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 /**
  * Determines if a user is visiting as an admin based on their team membership role.
  *
@@ -89,9 +91,7 @@ export const hasALowerOrEqualTeamRoleThan = (role, teamMembership) => {
  * Enum for roles with specific numeric values.
  */
 export default function usePermissions () {
-    const store = useStore()
-
-    const teamMembership = computed(() => store?.state?.account?.teamMembership || { role: 0 })
+    const teamMembership = computed(() => useContextStore().teamMembership || { role: 0 })
 
     /**
      * Determines if a user is visiting as an admin based on their team membership role.
diff --git a/frontend/src/mixins/Application.js b/frontend/src/mixins/Application.js
index 94c54314b3..e744829d7e 100644
--- a/frontend/src/mixins/Application.js
+++ b/frontend/src/mixins/Application.js
@@ -1,6 +1,8 @@
 import ApplicationApi from '../api/application.js'
 import alerts from '../services/alerts.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     data () {
         return {
@@ -78,7 +80,7 @@ export default {
 
             try {
                 await ApplicationApi.deleteApplication(this.application.id, this.team.id)
-                await this.$store.dispatch('account/refreshTeam')
+                await useContextStore().refreshTeam()
                 this.$router.push({ name: 'Applications' })
                 alerts.emit('Application successfully deleted.', 'confirmation')
             } catch (err) {
diff --git a/frontend/src/mixins/DeviceActions.js b/frontend/src/mixins/DeviceActions.js
index 3f742fd6bc..d427f963cf 100644
--- a/frontend/src/mixins/DeviceActions.js
+++ b/frontend/src/mixins/DeviceActions.js
@@ -1,4 +1,4 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import ApplicationApi from '../api/application.js'
 
@@ -8,9 +8,11 @@ import teamApi from '../api/team.js'
 import Alerts from '../services/alerts.js'
 import Dialog from '../services/dialog.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         displayingTeam () {
             return this.team !== null && !this.displayingInstance && !this.displayingApplication
         },
diff --git a/frontend/src/mixins/Features.js b/frontend/src/mixins/Features.js
index 106922593d..a5eb720ee9 100644
--- a/frontend/src/mixins/Features.js
+++ b/frontend/src/mixins/Features.js
@@ -4,7 +4,7 @@ export default {
     // todo The account store's featuresCheck getter should be used instead of this mixin
     //  Currently keeping it for backwards compat, as all permissions checks should use the accounts featuresCheck getter
     computed: {
-        ...mapState('account', ['features', 'team']),
+        ...mapState('account', ['features']),
         ...mapGetters('account', ['featuresCheck']),
         isSharedLibraryFeatureEnabledForTeam () {
             return this.featuresCheck.isSharedLibraryFeatureEnabledForTeam
diff --git a/frontend/src/mixins/Instance.js b/frontend/src/mixins/Instance.js
index 06df651ae6..99e2db4bbf 100644
--- a/frontend/src/mixins/Instance.js
+++ b/frontend/src/mixins/Instance.js
@@ -1,4 +1,4 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import InstanceApi from '../api/instances.js'
 import SnapshotApi from '../api/projectSnapshots.js'
@@ -7,9 +7,12 @@ import alerts from '../services/alerts.js'
 import Dialog from '../services/dialog.js'
 import { InstanceStateMutator } from '../utils/InstanceStateMutator.js'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     computed: {
-        ...mapState('account', ['teamMembership', 'team']),
+        ...mapState(useContextStore, ['team']),
         instanceRunning () {
             return this.instance?.meta?.state === 'running'
         },
@@ -63,7 +66,7 @@ export default {
             try {
                 const data = await InstanceApi.getInstance(instanceId)
                 this.instance = { ...{ deviceSettings: {} }, ...this.instance, ...data }
-                this.$store.dispatch('account/setTeam', this.instance.team.slug)
+                useAccountStore().setTeam(this.instance.team.slug)
                 this.instance.deviceSettings = await InstanceApi.getInstanceDeviceSettings(instanceId)
                 if (this.instance.deviceSettings?.targetSnapshot) {
                     this.instance.targetSnapshot = await SnapshotApi.getSnapshot(instanceId, this.instance.deviceSettings.targetSnapshot)
diff --git a/frontend/src/mixins/Navigation.js b/frontend/src/mixins/Navigation.js
index 87f10ac980..8ba7e971d9 100644
--- a/frontend/src/mixins/Navigation.js
+++ b/frontend/src/mixins/Navigation.js
@@ -1,8 +1,12 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+
+import { useAccountStore } from '@/stores'
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     computed: {
-        ...mapState('account', ['team', 'defaultUserTeam']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['defaultUserTeam']),
         homeLink () {
             if (this.team?.slug) {
                 return { name: 'Team', params: { team_slug: this.team.slug } }
diff --git a/frontend/src/pages/Home.vue b/frontend/src/pages/Home.vue
index d651478132..0b8aaba147 100644
--- a/frontend/src/pages/Home.vue
+++ b/frontend/src/pages/Home.vue
@@ -38,7 +38,7 @@
 <script>
 
 import { mapState } from 'pinia'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import EmptyState from '../components/EmptyState.vue'
 
@@ -47,6 +47,8 @@ import FlowFuseLogo from '../components/Logo.vue'
 import TeamTypeSelection from '../components/TeamTypeSelection.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 import { useUxLoadingStore } from '@/stores/ux-loading.js'
 
 export default {
@@ -62,8 +64,9 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team', 'teams', 'settings']),
-        ...mapGetters('account', ['defaultUserTeam']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['teams', 'defaultUserTeam']),
+        ...mapVuexState('account', ['settings']),
         ...mapState(useAccountAuthStore, ['user', 'redirectUrlAfterLogin']),
         ...mapState(useUxLoadingStore, ['appLoader']),
         canCreateTeam () {
diff --git a/frontend/src/pages/account/AccessRequest.vue b/frontend/src/pages/account/AccessRequest.vue
index 4209714284..e72201e271 100644
--- a/frontend/src/pages/account/AccessRequest.vue
+++ b/frontend/src/pages/account/AccessRequest.vue
@@ -25,7 +25,6 @@
 <script>
 import { ArrowSmLeftIcon, ArrowSmRightIcon, KeyIcon, TemplateIcon } from '@heroicons/vue/solid'
 import { mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 
@@ -38,7 +37,6 @@ export default {
         ArrowSmLeftIcon
     },
     computed: {
-        ...mapVuexState('account', ['team']),
         ...mapState(useAccountAuthStore, ['user'])
     },
     methods: {
diff --git a/frontend/src/pages/account/AccessRequestEditor.vue b/frontend/src/pages/account/AccessRequestEditor.vue
index 29ebc64a41..c0f6928c59 100644
--- a/frontend/src/pages/account/AccessRequestEditor.vue
+++ b/frontend/src/pages/account/AccessRequestEditor.vue
@@ -16,7 +16,6 @@
 <script>
 import { ArrowSmRightIcon, TemplateIcon } from '@heroicons/vue/solid'
 import { mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
 
@@ -27,7 +26,6 @@ export default {
         ArrowSmRightIcon
     },
     computed: {
-        ...mapVuexState('account', ['team']),
         ...mapState(useAccountAuthStore, ['user'])
     },
     mounted () {
diff --git a/frontend/src/pages/account/Settings.vue b/frontend/src/pages/account/Settings.vue
index f57b648e3c..1a92eb49ff 100644
--- a/frontend/src/pages/account/Settings.vue
+++ b/frontend/src/pages/account/Settings.vue
@@ -51,7 +51,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, storeToRefs } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import teamApi from '../../api/team.js'
 import userApi from '../../api/user.js'
@@ -63,6 +64,8 @@ import dialog from '../../services/dialog.js'
 import { RoleNames, Roles } from '../../utils/roles.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'AccountSettings',
@@ -91,7 +94,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['settings']),
+        ...mapVuexState('account', ['settings']),
+        ...mapState(useAccountStore, { storeTeams: 'teams' }),
         formValid () {
             return (this.changed.name || this.changed.username || this.changed.email || this.changed.defaultTeam) &&
                    (!this.emailEditingEnabled || (this.input.email && !this.errors.email)) &&
@@ -103,7 +107,7 @@ export default {
         },
         teams () {
             const currentUser = this.user
-            const teams = this.$store.getters['account/teams']
+            const teams = this.storeTeams
             const teamOptions = teams?.map(team => {
                 if (team.id === currentUser.defaultTeam) {
                     this.defaultTeamName = team.name
@@ -293,15 +297,15 @@ export default {
                     .then(() => {
                         alerts.emit('Team successfully deleted', 'confirmation')
                         // refresh teams
-                        return this.$store.dispatch('account/refreshTeams')
+                        return useAccountStore().refreshTeams()
                     }).then(() => {
-                        const activeTeam = this.$store.getters['account/team']
+                        const { teams } = storeToRefs(useAccountStore())
+                        const team = useContextStore().team
                         // check if the active team is one deleted
-                        if (activeTeam?.id === teamId) {
-                            const teams = this.$store.getters['account/teams']
-                            if (teams.length > 0) {
+                        if (team?.id === teamId) {
+                            if (teams.value.length > 0) {
                                 // get another team
-                                this.$store.dispatch('account/setTeam', teams[0].slug)
+                                useAccountStore().setTeam(teams.value[0].slug)
                             }
                         }
                     }).catch(err => {
@@ -311,7 +315,7 @@ export default {
             })
         },
         selectTeam (team) {
-            this.$store.dispatch('account/setTeam', team.slug)
+            useAccountStore().setTeam(team.slug)
                 .then(() => this.$router.push({
                     name: 'Team',
                     params: {
diff --git a/frontend/src/pages/account/Teams/Invitations.vue b/frontend/src/pages/account/Teams/Invitations.vue
index 1b371183f4..3733c903aa 100644
--- a/frontend/src/pages/account/Teams/Invitations.vue
+++ b/frontend/src/pages/account/Teams/Invitations.vue
@@ -10,14 +10,17 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapGetters } from 'vuex'
 
 import userApi from '../../../api/user.js'
+
 import InviteUserCell from '../../../components/tables/cells/InviteUserCell.vue'
 import TeamCell from '../../../components/tables/cells/TeamCell.vue'
 import Alerts from '../../../services/alerts.js'
 
+import { useAccountStore } from '@/stores/account.js'
+
 export default {
     name: 'UserInviteTable',
     props: {
@@ -38,22 +41,20 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', {
-            invitations: 'teamInvitations'
-        })
+        ...mapState(useAccountStore, { invitations: 'teamInvitations' })
     },
     mounted () {
-        this.$store.dispatch('account/getInvitations')
+        useAccountStore().getInvitations()
     },
     methods: {
         async acceptInvite (invite) {
             await userApi.acceptTeamInvitation(invite.id, invite.team.id)
-            await this.$store.dispatch('account/getNotifications')
-            await this.$store.dispatch('account/getInvitations')
-            await this.$store.dispatch('account/refreshTeams')
+            await useAccountStore().getNotifications()
+            await useAccountStore().getInvitations()
+            await useAccountStore().refreshTeams()
             Alerts.emit(`Invite to "${invite.team.name}" has been accepted.`, 'confirmation')
             // navigate to team dashboad once invite accepted
-            this.$store.dispatch('account/setTeam', invite.team.slug)
+            useAccountStore().setTeam(invite.team.slug)
                 .then(() => this.$router.push({
                     name: 'Team',
                     params: {
@@ -64,8 +65,8 @@ export default {
         },
         async rejectInvite (invite) {
             await userApi.rejectTeamInvitation(invite.id, invite.team.id)
-            await this.$store.dispatch('account/getNotifications')
-            await this.$store.dispatch('account/getInvitations')
+            await useAccountStore().getNotifications()
+            await useAccountStore().getInvitations()
             Alerts.emit(`Invite to "${invite.team.name}" has been rejected.`, 'confirmation')
         }
     }
diff --git a/frontend/src/pages/account/Teams/Teams.vue b/frontend/src/pages/account/Teams/Teams.vue
index b52c48f3d1..6a55fc0682 100644
--- a/frontend/src/pages/account/Teams/Teams.vue
+++ b/frontend/src/pages/account/Teams/Teams.vue
@@ -22,6 +22,7 @@ import Dialog from '../../../services/dialog.js'
 import CreateTeamButton from '../components/CreateTeamButton.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
 
 export default {
     name: 'AccountTeams',
@@ -39,7 +40,8 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['teams', 'settings']),
+        ...mapState(useAccountStore, ['teams']),
+        ...mapVuexState('account', ['settings']),
         ...mapState(useAccountAuthStore, ['user']),
         teamCount () {
             return this.teams ? this.teams.length : 0
@@ -69,9 +71,9 @@ export default {
                 try {
                     await teamApi.removeTeamMember(row.id, this.user.id)
                     alerts.emit(`${this.user.username} successfully removed from ${row.name}`, 'confirmation')
-                    await this.$store.dispatch('account/refreshTeams')
+                    await useAccountStore().refreshTeams()
                     if (!this.teamCount) {
-                        await this.$store.dispatch('account/setTeam', null)
+                        await useAccountStore().setTeam(null)
                     }
                 } catch (err) {
                     alerts.emit(`Failed to remove ${this.user.username} from ${row.name}: ${err.response.data.error}`, 'warning')
diff --git a/frontend/src/pages/account/Teams/index.vue b/frontend/src/pages/account/Teams/index.vue
index 4b8a9bea78..fe57efa186 100644
--- a/frontend/src/pages/account/Teams/index.vue
+++ b/frontend/src/pages/account/Teams/index.vue
@@ -14,11 +14,11 @@
 
 <script>
 import { mapState } from 'pinia'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import SectionSideMenu from '../../../components/SectionSideMenu.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
 
 export default {
     name: 'AccountTeams',
@@ -31,8 +31,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['teams']),
-        ...mapGetters('account', ['teamInvitationsCount']),
+        ...mapState(useAccountStore, ['teamInvitationsCount']),
         ...mapState(useAccountAuthStore, ['user'])
     },
     watch: {
diff --git a/frontend/src/pages/account/index.vue b/frontend/src/pages/account/index.vue
index c8f534b030..88663238f9 100644
--- a/frontend/src/pages/account/index.vue
+++ b/frontend/src/pages/account/index.vue
@@ -16,9 +16,9 @@
 <script>
 import { ChevronLeftIcon, CogIcon, LockClosedIcon, UserGroupIcon } from '@heroicons/vue/solid'
 import { mapState } from 'pinia'
-import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
 
 export default {
     name: 'UserSettings',
@@ -36,8 +36,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team']),
-        ...mapGetters('account', ['teamInvitationsCount']),
+        ...mapState(useAccountStore, ['teamInvitationsCount']),
         ...mapState(useAccountAuthStore, ['user'])
     },
     watch: {
diff --git a/frontend/src/pages/admin/Teams.vue b/frontend/src/pages/admin/Teams.vue
index 4de811f383..42aca6efb0 100644
--- a/frontend/src/pages/admin/Teams.vue
+++ b/frontend/src/pages/admin/Teams.vue
@@ -74,6 +74,8 @@ import SectionTopMenu from '../../components/SectionTopMenu.vue'
 import TeamCell from '../../components/tables/cells/TeamCell.vue'
 import TeamTypeCell from '../../components/tables/cells/TeamTypeCell.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+
 export default {
     name: 'AdminTeams',
     components: {
@@ -225,7 +227,7 @@ export default {
             this.loading = false
         },
         viewTeam (row) {
-            this.$store.dispatch('account/setTeam', row.slug)
+            useAccountStore().setTeam(row.slug)
                 .then(() => this.$router.push({
                     name: 'Team',
                     params: {
diff --git a/frontend/src/pages/admin/index.vue b/frontend/src/pages/admin/index.vue
index 2997b77810..fc226d2af5 100644
--- a/frontend/src/pages/admin/index.vue
+++ b/frontend/src/pages/admin/index.vue
@@ -16,7 +16,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['features', 'team'])
+        ...mapVuexState('account', ['features'])
     },
     async mounted () {
         try {
diff --git a/frontend/src/pages/application/Activity.vue b/frontend/src/pages/application/Activity.vue
index f9cf62d15b..7fc64e1165 100644
--- a/frontend/src/pages/application/Activity.vue
+++ b/frontend/src/pages/application/Activity.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import ApplicationApi from '../../api/application.js'
 import InstanceApi from '../../api/instances.js'
@@ -39,6 +39,8 @@ import AuditLogBrowser from '../../components/audit-log/AuditLogBrowser.vue'
 import usePermissions from '../../composables/Permissions.js'
 import FfListbox from '../../ui-components/components/form/ListBox.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'ApplicationActivity',
     components: {
@@ -71,7 +73,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership']),
+        ...mapState(useContextStore, ['team', 'teamMembership']),
         instanceList () {
             return [
                 { name: 'This Application', id: '' },
diff --git a/frontend/src/pages/application/CreateInstanceMultiStep.vue b/frontend/src/pages/application/CreateInstanceMultiStep.vue
index 8898316c52..fe14ea4277 100644
--- a/frontend/src/pages/application/CreateInstanceMultiStep.vue
+++ b/frontend/src/pages/application/CreateInstanceMultiStep.vue
@@ -40,13 +40,16 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import MultiStepInstanceForm from '../../components/multi-step-forms/instance/MultiStepInstanceForm.vue'
 
 import { getTeamProperty } from '../../composables/TeamProperties.js'
 import applicationMixin from '../../mixins/Application.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'ApplicationCreateInstance',
     components: {
@@ -69,7 +72,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         isLoading () {
             return this.loading || !this.team
         }
@@ -107,7 +111,7 @@ export default {
     },
     methods: {
         async onInstanceCreated () {
-            await this.$store.dispatch('account/refreshTeam')
+            await useContextStore().refreshTeam()
 
             this.$emit('application-updated')
 
diff --git a/frontend/src/pages/application/DeviceGroup/Settings/index.vue b/frontend/src/pages/application/DeviceGroup/Settings/index.vue
index d5e913f7a5..74db374006 100644
--- a/frontend/src/pages/application/DeviceGroup/Settings/index.vue
+++ b/frontend/src/pages/application/DeviceGroup/Settings/index.vue
@@ -11,12 +11,14 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { useRouter } from 'vue-router'
-import { mapState } from 'vuex'
 
 import SectionSideMenu from '../../../../components/SectionSideMenu.vue'
 import SectionTopMenu from '../../../../components/SectionTopMenu.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceGroupSettings',
     components: {
@@ -40,7 +42,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['teamMembership'])
+        ...mapState(useContextStore, ['teamMembership'])
     },
     watch: {
         deviceGroup: function (newVal, oldVal) {
diff --git a/frontend/src/pages/application/DeviceGroup/devices.vue b/frontend/src/pages/application/DeviceGroup/devices.vue
index 7052eabd25..0645f94321 100644
--- a/frontend/src/pages/application/DeviceGroup/devices.vue
+++ b/frontend/src/pages/application/DeviceGroup/devices.vue
@@ -96,7 +96,6 @@
 
 <script>
 import { h } from 'vue'
-import { mapState } from 'vuex'
 
 import ApplicationApi from '../../../api/application.js'
 import SectionTopMenu from '../../../components/SectionTopMenu.vue'
@@ -168,7 +167,6 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership']),
         selectedAvailableDevices () {
             return this.localAvailableDevices.filter((device) => device.selected)
         },
diff --git a/frontend/src/pages/application/DeviceGroup/index.vue b/frontend/src/pages/application/DeviceGroup/index.vue
index 7c1185d5ce..9020ebfc21 100644
--- a/frontend/src/pages/application/DeviceGroup/index.vue
+++ b/frontend/src/pages/application/DeviceGroup/index.vue
@@ -61,7 +61,7 @@
 <script>
 import { CheckCircleIcon, CogIcon, ExclamationIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import ApplicationApi from '../../../api/application.js'
 
@@ -70,6 +70,9 @@ import TeamTrialBanner from '../../../components/banners/TeamTrial.vue'
 import DeviceSolidIcon from '../../../components/icons/DeviceSolid.js'
 import usePermissions from '../../../composables/Permissions.js'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceGroup',
     components: {
@@ -92,7 +95,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         navigation () {
             const routes = [
                 {
@@ -170,7 +173,7 @@ export default {
                 } while (cursor)
                 this.applicationDevices = devices.flat()
 
-                this.$store.dispatch('account/setTeam', this.application.team.slug)
+                useAccountStore().setTeam(this.application.team.slug)
             } catch (err) {
                 this.$router.push({
                     name: 'page-not-found',
diff --git a/frontend/src/pages/application/DeviceGroups.vue b/frontend/src/pages/application/DeviceGroups.vue
index ec548ad301..e402e7b06b 100644
--- a/frontend/src/pages/application/DeviceGroups.vue
+++ b/frontend/src/pages/application/DeviceGroups.vue
@@ -72,8 +72,9 @@
 
 <script>
 import { PlusSmIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import ApplicationAPI from '../../api/application.js'
 
@@ -86,6 +87,8 @@ import Alerts from '../../services/alerts.js'
 
 import TargetSnapshotCell from './components/cells/TargetSnapshot.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'ApplicationDeviceGroups',
     components: {
@@ -151,7 +154,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team', 'teamMembership']),
+        ...mapState(useContextStore, ['team', 'teamMembership']),
+        ...mapVuexState('account', ['features']),
         featureEnabledForTeam () {
             return !!this.team?.type?.properties?.features?.deviceGroups
         },
diff --git a/frontend/src/pages/application/Overview.vue b/frontend/src/pages/application/Overview.vue
index 7e93ea9779..1b302bd48c 100644
--- a/frontend/src/pages/application/Overview.vue
+++ b/frontend/src/pages/application/Overview.vue
@@ -114,7 +114,7 @@
 
 import { PlusSmIcon } from '@heroicons/vue/outline'
 import { markRaw } from 'vue'
-import { mapGetters, mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import EmptyState from '../../components/EmptyState.vue'
 import SectionTopMenu from '../../components/SectionTopMenu.vue'
@@ -165,7 +165,6 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['teamMembership']),
         ...mapGetters('account', ['featuresCheck']),
         cloudColumns () {
             return [
diff --git a/frontend/src/pages/application/Pipeline/create.vue b/frontend/src/pages/application/Pipeline/create.vue
index cfdc0cac7b..80c31c4b54 100644
--- a/frontend/src/pages/application/Pipeline/create.vue
+++ b/frontend/src/pages/application/Pipeline/create.vue
@@ -52,7 +52,7 @@
 
 <script>
 import { ChevronLeftIcon } from '@heroicons/vue/solid'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import ApplicationsAPI from '../../../api/application.js'
 import FormRow from '../../../components/FormRow.vue'
@@ -60,6 +60,8 @@ import SectionTopMenu from '../../../components/SectionTopMenu.vue'
 import usePermissions from '../../../composables/Permissions.js'
 import Alerts from '../../../services/alerts.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'CreatePipeline',
     components: {
@@ -90,7 +92,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         submitEnabled () {
             return this.input.name?.length > 0
         }
diff --git a/frontend/src/pages/application/PipelineStage/create.vue b/frontend/src/pages/application/PipelineStage/create.vue
index e76846cc8b..ac05fdadec 100644
--- a/frontend/src/pages/application/PipelineStage/create.vue
+++ b/frontend/src/pages/application/PipelineStage/create.vue
@@ -14,7 +14,7 @@
 
 <script>
 import { ChevronLeftIcon } from '@heroicons/vue/solid'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import ApplicationAPI from '../../../api/application.js'
 import PipelinesAPI from '../../../api/pipeline.js'
@@ -24,6 +24,8 @@ import Alerts from '../../../services/alerts.js'
 
 import PipelineStageForm from './form.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'CreatePipelineStage',
     components: {
@@ -65,7 +67,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     watch: {
         team: {
diff --git a/frontend/src/pages/application/PipelineStage/edit.vue b/frontend/src/pages/application/PipelineStage/edit.vue
index 3045a47da4..3097e41d6c 100644
--- a/frontend/src/pages/application/PipelineStage/edit.vue
+++ b/frontend/src/pages/application/PipelineStage/edit.vue
@@ -18,7 +18,7 @@
 
 <script>
 import { ChevronLeftIcon } from '@heroicons/vue/solid'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import ApplicationAPI from '../../../api/application.js'
 import PipelinesAPI from '../../../api/pipeline.js'
@@ -28,6 +28,8 @@ import Alerts from '../../../services/alerts.js'
 
 import PipelineStageForm from './form.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'EditPipelineStage',
     components: {
@@ -69,7 +71,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     watch: {
         team: {
diff --git a/frontend/src/pages/application/PipelineStage/form.vue b/frontend/src/pages/application/PipelineStage/form.vue
index 6182b5eadf..bd99a96265 100644
--- a/frontend/src/pages/application/PipelineStage/form.vue
+++ b/frontend/src/pages/application/PipelineStage/form.vue
@@ -342,7 +342,8 @@
 <script>
 import { InformationCircleIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import { StageAction, StageType } from '../../../api/pipeline.js'
 import teamApi from '../../../api/team.js'
@@ -355,6 +356,8 @@ import IconDeviceSolid from '../../../components/icons/DeviceSolid.js'
 import IconGit from '../../../components/icons/Git.js'
 import IconNodeRedSolid from '../../../components/icons/NodeRedSolid.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'PipelineForm',
     components: {
@@ -437,7 +440,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'features']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         isEdit () {
             return !!this.stage.id
         },
diff --git a/frontend/src/pages/application/Pipelines.vue b/frontend/src/pages/application/Pipelines.vue
index bc590a7a63..977f64187a 100644
--- a/frontend/src/pages/application/Pipelines.vue
+++ b/frontend/src/pages/application/Pipelines.vue
@@ -97,7 +97,8 @@
 
 <script>
 import { PlusSmIcon } from '@heroicons/vue/outline'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import ApplicationAPI from '../../api/application.js'
 import PipelineAPI from '../../api/pipeline.js'
@@ -109,6 +110,8 @@ import usePermissions from '../../composables/Permissions.js'
 
 import Alerts from '../../services/alerts.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'ApplicationPipelines',
     components: {
@@ -152,7 +155,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'teamMembership', 'team']),
+        ...mapState(useContextStore, ['teamMembership']),
+        ...mapVuexState('account', ['features']),
         featureEnabled () {
             return this.features['devops-pipelines']
         }
diff --git a/frontend/src/pages/application/Settings/UserAccess.vue b/frontend/src/pages/application/Settings/UserAccess.vue
index 6e226c42e1..5b1be6e425 100644
--- a/frontend/src/pages/application/Settings/UserAccess.vue
+++ b/frontend/src/pages/application/Settings/UserAccess.vue
@@ -27,6 +27,7 @@ import usePermissions from '../../../composables/Permissions.js'
 import RoleRow from './components/RoleRow.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useContextStore } from '@/stores/context.js'
 
 export default defineComponent({
     name: 'UserAccess',
@@ -49,7 +50,8 @@ export default defineComponent({
         }
     },
     computed: {
-        ...mapGetters('account', ['team', 'featuresCheck']),
+        ...mapState(useContextStore, ['team']),
+        ...mapGetters('account', ['featuresCheck']),
         ...mapState(useAccountAuthStore, ['isAdminUser']),
         columns () {
             return [
diff --git a/frontend/src/pages/application/createInstance.vue b/frontend/src/pages/application/createInstance.vue
index 346c9293d1..b7d0ae4bd8 100644
--- a/frontend/src/pages/application/createInstance.vue
+++ b/frontend/src/pages/application/createInstance.vue
@@ -36,7 +36,8 @@
 
 <script>
 import { ChevronLeftIcon } from '@heroicons/vue/solid/index.js'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import instanceApi from '../../api/instances.js'
 
@@ -44,6 +45,8 @@ import applicationMixin from '../../mixins/Application.js'
 import Alerts from '../../services/alerts.js'
 import InstanceForm from '../instance/components/InstanceForm.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'ApplicationCreateInstance',
     components: {
@@ -73,7 +76,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         isLoading () {
             return this.loading || !this.team
         }
@@ -101,7 +105,7 @@ export default {
 
             try {
                 await this.createInstance(instanceFields, copyParts)
-                await this.$store.dispatch('account/refreshTeam')
+                await useContextStore().refreshTeam()
 
                 this.$emit('application-updated')
 
diff --git a/frontend/src/pages/application/index.vue b/frontend/src/pages/application/index.vue
index f18681bfa8..0345ba53b9 100644
--- a/frontend/src/pages/application/index.vue
+++ b/frontend/src/pages/application/index.vue
@@ -33,7 +33,8 @@
 <script>
 // import { ChipIcon, ClockIcon, CogIcon, TerminalIcon, ViewListIcon } from '@heroicons/vue/solid'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import InstanceStatusPolling from '../../components/InstanceStatusPolling.vue'
 // import PipelinesIcon from '../../components/icons/Pipelines.js'
@@ -47,6 +48,8 @@ import ConfirmInstanceDeleteDialog from '../instance/Settings/dialogs/ConfirmIns
 
 import ConfirmApplicationDeleteDialog from './Settings/dialogs/ConfirmApplicationDeleteDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'ApplicationPage',
     components: {
@@ -61,7 +64,8 @@ export default {
         return { hasPermission, isVisitingAdmin }
     },
     computed: {
-        ...mapState('account', ['features', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         navigation () {
             const routes = [
                 {
diff --git a/frontend/src/pages/device/AuditLog.vue b/frontend/src/pages/device/AuditLog.vue
index 26aaf15ae9..e8d8ee5b00 100644
--- a/frontend/src/pages/device/AuditLog.vue
+++ b/frontend/src/pages/device/AuditLog.vue
@@ -6,13 +6,15 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import DeviceApi from '../../api/devices.js'
 import TeamAPI from '../../api/team.js'
 import SectionTopMenu from '../../components/SectionTopMenu.vue'
 import AuditLogBrowser from '../../components/audit-log/AuditLogBrowser.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceAuditLog',
     components: {
@@ -34,7 +36,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     watch: {
         device () {
diff --git a/frontend/src/pages/device/DeveloperMode/index.vue b/frontend/src/pages/device/DeveloperMode/index.vue
index 1c23294dec..8ac148f6b6 100644
--- a/frontend/src/pages/device/DeveloperMode/index.vue
+++ b/frontend/src/pages/device/DeveloperMode/index.vue
@@ -103,8 +103,9 @@
 
 <script>
 import { BeakerIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import semver from 'semver'
-import { mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import deviceApi from '../../../api/devices.js'
 
@@ -114,6 +115,8 @@ import InfoCardRow from '../../../components/InfoCardRow.vue'
 import alerts from '../../../services/alerts.js'
 import SnapshotCreateDialog from '../dialogs/SnapshotCreateDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceDeveloperMode',
     components: {
@@ -146,7 +149,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership', 'features']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         developerMode: function () {
             return this.device?.mode === 'developer'
         },
diff --git a/frontend/src/pages/device/Editor/index.vue b/frontend/src/pages/device/Editor/index.vue
index 642e399bbb..06cc065c2f 100644
--- a/frontend/src/pages/device/Editor/index.vue
+++ b/frontend/src/pages/device/Editor/index.vue
@@ -83,6 +83,7 @@ import usePermissions from '../../../composables/Permissions.js'
 import { useResizingHelper } from '../../../composables/ResizingHelper.js'
 import Alerts from '../../../services/alerts.js'
 
+import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
 
 const DRAWER_DEFAULT_WIDTH = 550 // Default drawer width in pixels
@@ -344,7 +345,7 @@ export default {
             }
 
             this.device = device
-            await this.$store.dispatch('account/setTeam', this.device.team.slug)
+            await useAccountStore().setTeam(this.device.team.slug)
         },
         showConfirmDeleteDialog () {
             this.showDeleteDeviceDialog()
diff --git a/frontend/src/pages/device/Overview.vue b/frontend/src/pages/device/Overview.vue
index c91fc55ca6..9b00018af1 100644
--- a/frontend/src/pages/device/Overview.vue
+++ b/frontend/src/pages/device/Overview.vue
@@ -223,7 +223,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['settings', 'features', 'team']),
+        ...mapState('account', ['settings', 'features']),
         targetSnapshotDeployed: function () {
             return this.device.activeSnapshot?.id === this.device.targetSnapshot?.id
         },
diff --git a/frontend/src/pages/device/Settings/Danger.vue b/frontend/src/pages/device/Settings/Danger.vue
index 0cd68cca08..3c6d1e6d28 100644
--- a/frontend/src/pages/device/Settings/Danger.vue
+++ b/frontend/src/pages/device/Settings/Danger.vue
@@ -14,7 +14,7 @@
     </div>
 </template>
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import deviceApi from '../../../api/devices.js'
 import FormHeading from '../../../components/FormHeading.vue'
@@ -22,6 +22,8 @@ import usePermissions from '../../../composables/Permissions.js'
 
 import ConfirmDeviceDeleteDialog from './dialogs/ConfirmDeviceDeleteDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceSettingsDanger',
     props: ['device'],
@@ -32,7 +34,7 @@ export default {
         FormHeading
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     setup () {
         const { hasPermission } = usePermissions()
diff --git a/frontend/src/pages/device/Settings/Editor.vue b/frontend/src/pages/device/Settings/Editor.vue
index e63f6bc8c8..e02a84c002 100644
--- a/frontend/src/pages/device/Settings/Editor.vue
+++ b/frontend/src/pages/device/Settings/Editor.vue
@@ -29,9 +29,10 @@
 </template>
 
 <script>
-import semver from 'semver'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import semver from 'semver'
+import { mapState as mapVuexState } from 'vuex'
 
 import deviceApi from '../../../api/devices.js'
 import FormHeading from '../../../components/FormHeading.vue'
@@ -44,6 +45,8 @@ import Alerts from '../../../services/alerts.js'
 
 import ChangeIndicator from '../../admin/Template/components/ChangeIndicator.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceSettingsEditor',
     components: {
@@ -83,7 +86,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         limitsLauncherEnabled () {
             if (!this.device.agentVersion) {
                 // Device has not called home yet - so we don't know what agent
diff --git a/frontend/src/pages/device/Settings/General.vue b/frontend/src/pages/device/Settings/General.vue
index bceda07468..6b966439d2 100644
--- a/frontend/src/pages/device/Settings/General.vue
+++ b/frontend/src/pages/device/Settings/General.vue
@@ -187,8 +187,8 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapState } from 'vuex'
 
 import ApplicationApi from '../../../api/application.js'
 
@@ -202,6 +202,8 @@ import { scrollToAndJiggleHighlight } from '../../../composables/Ux.js'
 import Alerts from '../../../services/alerts.js'
 import Dialog from '../../../services/dialog.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 const semVer = require('semver')
 
 export default {
@@ -253,7 +255,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         canChangeNodeRedVersion () {
             return this.deviceOwnerType === 'application' && this.hasPermission('device:edit', { application: this.device.application })
         },
diff --git a/frontend/src/pages/device/Settings/Security.vue b/frontend/src/pages/device/Settings/Security.vue
index 225b81598a..78a87a80ad 100644
--- a/frontend/src/pages/device/Settings/Security.vue
+++ b/frontend/src/pages/device/Settings/Security.vue
@@ -25,8 +25,8 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import semver from 'semver'
-import { mapState } from 'vuex'
 
 import deviceApi from '../../../api/devices.js'
 import usePermissions from '../../../composables/Permissions.js'
@@ -35,6 +35,8 @@ import Alerts from '../../../services/alerts.js'
 
 import TemplateSettingsSecurity from '../../admin/Template/sections/Security.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceSettingsSecurity',
     components: {
@@ -89,7 +91,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         securityOptionsSupported () {
             if (!this.device.agentVersion) {
                 // Device has not called home yet - so we don't know what agent
diff --git a/frontend/src/pages/device/Settings/index.vue b/frontend/src/pages/device/Settings/index.vue
index 492f7812c1..f6cb6d4caa 100644
--- a/frontend/src/pages/device/Settings/index.vue
+++ b/frontend/src/pages/device/Settings/index.vue
@@ -8,12 +8,14 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { useRouter } from 'vue-router'
-import { mapState } from 'vuex'
 
 import SectionSideMenu from '../../../components/SectionSideMenu.vue'
 import usePermissions from '../../../composables/Permissions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceSettings',
     props: ['device'],
@@ -29,7 +31,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['teamMembership']),
+        ...mapState(useContextStore, ['teamMembership']),
         sideNav () {
             const canEditDevice = this.hasPermission('device:edit', { application: this.device.application })
             const isApplicationOwned = this.device.ownerType === 'application'
diff --git a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
index 26c5e18b27..815606223b 100644
--- a/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
+++ b/frontend/src/pages/device/VersionHistory/Snapshots/index.vue
@@ -105,10 +105,10 @@
 
 <script>
 import { FilterIcon, PlusSmIcon, UploadIcon } from '@heroicons/vue/outline'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import SemVer from 'semver'
 import { markRaw } from 'vue'
-import { mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import ApplicationApi from '../../../../api/application.js'
 import DropdownMenu from '../../../../components/DropdownMenu.vue'
@@ -123,6 +123,8 @@ import DaysSince from '../../../application/Snapshots/components/cells/DaysSince
 import SnapshotName from '../../../application/Snapshots/components/cells/SnapshotName.vue'
 import SnapshotSource from '../../../application/Snapshots/components/cells/SnapshotSource.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -202,7 +204,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'features']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         canCreateSnapshot () {
             if (!this.developerMode || this.busy) {
                 return false
diff --git a/frontend/src/pages/device/components/DevicePerformance.vue b/frontend/src/pages/device/components/DevicePerformance.vue
index 554e1d6897..1068329ecd 100644
--- a/frontend/src/pages/device/components/DevicePerformance.vue
+++ b/frontend/src/pages/device/components/DevicePerformance.vue
@@ -59,8 +59,8 @@
 
 <script>
 import { ChipIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import SemVer from 'semver'
-import { mapState } from 'vuex'
 
 import deviceApi from '../../../api/devices.js'
 import EmptyState from '../../../components/EmptyState.vue'
@@ -75,6 +75,8 @@ import InformationWell from '../../../components/wells/InformationWell.vue'
 import usePermissions from '../../../composables/Permissions.js'
 import featuresMixin from '../../../mixins/Features.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 let mqtt
 
 export default {
@@ -115,7 +117,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         deviceOnline () {
             const offline = ['stopped', 'offline', 'error']
             return !offline.includes(this.device.status)
diff --git a/frontend/src/pages/device/index.vue b/frontend/src/pages/device/index.vue
index 42f2955000..bf27ddf210 100644
--- a/frontend/src/pages/device/index.vue
+++ b/frontend/src/pages/device/index.vue
@@ -136,9 +136,9 @@
 <script>
 
 import { CogIcon } from '@heroicons/vue/solid/index.js'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import semver from 'semver'
-import { mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import deviceApi from '../../api/devices.js'
 import DropdownMenu from '../../components/DropdownMenu.vue'
@@ -167,6 +167,9 @@ import DeviceEditorLink from './components/DeviceEditorLink.vue'
 import DeviceLastSeenBadge from './components/DeviceLastSeenBadge.vue'
 import DeviceModeBadge from './components/DeviceModeBadge.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
 import { useUxStore } from '@/stores/ux.js'
 
 // constants
@@ -222,7 +225,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['teamMembership', 'team', 'features', 'settings']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features', 'settings']),
         actionsButtonKind () {
             switch (true) {
             case this.neverConnected:
@@ -410,7 +414,7 @@ export default {
             }
             this.agentSupportsDeviceAccess = this.device.agentVersion && semver.gte(this.device.agentVersion, '0.8.0')
             this.agentSupportsActions = this.device.agentVersion && semver.gte(this.device.agentVersion, '2.3.0')
-            this.$store.dispatch('account/setTeam', this.device.team.slug)
+            useAccountStore().setTeam(this.device.team.slug)
         },
         deviceRefresh: async function () {
             if (this.pollTimer.running) {
@@ -575,7 +579,7 @@ export default {
                     await deviceApi.deleteDevice(this.device.id)
                     Alerts.emit('Successfully deleted the device', 'confirmation')
                     // Trigger a refresh of team info to resync following device changes
-                    await this.$store.dispatch('account/refreshTeam')
+                    await useContextStore().refreshTeam()
                     this.$router.push({ name: 'TeamDevices', params: { team_slug: this.team.slug } })
                 } catch (err) {
                     Alerts.emit('Failed to delete device: ' + err.toString(), 'warning', 7500)
diff --git a/frontend/src/pages/instance/Assets.vue b/frontend/src/pages/instance/Assets.vue
index e76f9d52a3..6dc7b25bcb 100644
--- a/frontend/src/pages/instance/Assets.vue
+++ b/frontend/src/pages/instance/Assets.vue
@@ -37,8 +37,8 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import SemVer from 'semver'
-import { mapState } from 'vuex'
 
 import AssetsAPI from '../../api/assets.js'
 import FeatureUnavailable from '../../components/banners/FeatureUnavailable.vue'
@@ -50,6 +50,8 @@ import Alerts from '../../services/alerts.js'
 
 import FolderBreadcrumbs from './components/FolderBreadcrumbs.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceAssets',
     components: {
@@ -82,7 +84,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['teamMembership', 'team']),
+        ...mapState(useContextStore, ['teamMembership', 'team']),
         currentDirectory () {
             if (this.breadcrumbs.length) {
                 return this.breadcrumbs[this.breadcrumbs.length - 1]
diff --git a/frontend/src/pages/instance/AuditLog.vue b/frontend/src/pages/instance/AuditLog.vue
index bd6c7880d1..e246cf7957 100644
--- a/frontend/src/pages/instance/AuditLog.vue
+++ b/frontend/src/pages/instance/AuditLog.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import InstanceApi from '../../api/instances.js'
 import TeamAPI from '../../api/team.js'
@@ -31,6 +31,8 @@ import SectionTopMenu from '../../components/SectionTopMenu.vue'
 import AuditLogBrowser from '../../components/audit-log/AuditLogBrowser.vue'
 import FfListbox from '../../ui-components/components/form/ListBox.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceAuditLog',
     components: {
@@ -63,7 +65,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     watch: {
         instance () {
diff --git a/frontend/src/pages/instance/Devices.vue b/frontend/src/pages/instance/Devices.vue
index d489560c70..d24509a565 100644
--- a/frontend/src/pages/instance/Devices.vue
+++ b/frontend/src/pages/instance/Devices.vue
@@ -22,11 +22,13 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import DevicesBrowser from '../../components/DevicesBrowser.vue'
 import SectionTopMenu from '../../components/SectionTopMenu.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceRemoteInstances',
     components: {
@@ -42,7 +44,7 @@ export default {
     },
     emits: ['instance-updated'],
     computed: {
-        ...mapState('account', ['team', 'teamMembership'])
+        ...mapState(useContextStore, ['team', 'teamMembership'])
     }
 }
 </script>
diff --git a/frontend/src/pages/instance/DuplicateInstance.vue b/frontend/src/pages/instance/DuplicateInstance.vue
index c9fd2bf388..50fc08f81d 100644
--- a/frontend/src/pages/instance/DuplicateInstance.vue
+++ b/frontend/src/pages/instance/DuplicateInstance.vue
@@ -54,11 +54,14 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import instanceApi from '../../api/instances.js'
 import MultiStepDuplicateInstanceForm from '../../components/multi-step-forms/instance/MultiStepDuplicateInstanceForm.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DuplicateInstance',
     components: { MultiStepDuplicateInstanceForm },
@@ -73,13 +76,13 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     mounted () {
         this.getInstance()
             .then(() => {
                 if (!this.team) {
-                    this.$store.dispatch('account/setTeam', this.instance.team.slug)
+                    useAccountStore().setTeam(this.instance.team.slug)
                 }
             }).catch(e => e)
     },
diff --git a/frontend/src/pages/instance/Performance/index.vue b/frontend/src/pages/instance/Performance/index.vue
index 0db9fd6c89..63ab148a27 100644
--- a/frontend/src/pages/instance/Performance/index.vue
+++ b/frontend/src/pages/instance/Performance/index.vue
@@ -103,7 +103,6 @@
 <script>
 import { ChipIcon, RefreshIcon } from '@heroicons/vue/outline'
 import SemVer from 'semver'
-import { mapState } from 'vuex'
 
 import instancesApi from '../../../api/instances.js'
 import EmptyState from '../../../components/EmptyState.vue'
@@ -157,7 +156,6 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
         isInstanceRunning () {
             return this.instance.meta.state === 'running'
         },
diff --git a/frontend/src/pages/instance/Settings/ChangeInstanceType.vue b/frontend/src/pages/instance/Settings/ChangeInstanceType.vue
index 39995cf934..2342feb1f6 100644
--- a/frontend/src/pages/instance/Settings/ChangeInstanceType.vue
+++ b/frontend/src/pages/instance/Settings/ChangeInstanceType.vue
@@ -12,7 +12,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import InstanceApi from '../../../api/instances.js'
 import usePermissions from '../../../composables/Permissions.js'
@@ -20,6 +21,8 @@ import usePermissions from '../../../composables/Permissions.js'
 import Alerts from '../../../services/alerts.js'
 import InstanceForm from '../components/InstanceForm.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'ChangeInstanceType',
     components: {
@@ -45,7 +48,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'features'])
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features'])
     },
     mounted () {
         this.checkAccess()
diff --git a/frontend/src/pages/instance/Settings/Danger.vue b/frontend/src/pages/instance/Settings/Danger.vue
index 7ab72f742c..cf92d83f8c 100644
--- a/frontend/src/pages/instance/Settings/Danger.vue
+++ b/frontend/src/pages/instance/Settings/Danger.vue
@@ -132,9 +132,10 @@
 </template>
 
 <script>
-import { useRouter } from 'vue-router'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { useRouter } from 'vue-router'
+import { mapState as mapVuexState } from 'vuex'
 
 import InstanceApi from '../../../api/instances.js'
 
@@ -146,6 +147,8 @@ import alerts from '../../../services/alerts.js'
 import ChangeStackDialog from './dialogs/ChangeStackDialog.vue'
 import ImportInstanceDialog from './dialogs/ImportInstanceDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceSettingsDanger',
     components: {
@@ -179,7 +182,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'features']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         isLoading () {
             return this.loading.deleting || this.loading.suspend || this.loading.changingStack || this.loading.duplicating || this.loading.settingType
         }
diff --git a/frontend/src/pages/instance/Settings/Editor.vue b/frontend/src/pages/instance/Settings/Editor.vue
index b1df8db343..0104e72e2b 100644
--- a/frontend/src/pages/instance/Settings/Editor.vue
+++ b/frontend/src/pages/instance/Settings/Editor.vue
@@ -6,8 +6,8 @@
 
 <script>
 
+import { mapState } from 'pinia'
 import { useRouter } from 'vue-router'
-import { mapState } from 'vuex'
 
 import InstanceApi from '../../../api/instances.js'
 import usePermissions from '../../../composables/Permissions.js'
@@ -23,6 +23,8 @@ import {
     templateValidators
 } from '../../admin/Template/utils.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceSettingsEditor',
     components: {
@@ -60,7 +62,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         saveButton () {
             return {
                 visible: true,
diff --git a/frontend/src/pages/instance/Settings/General.vue b/frontend/src/pages/instance/Settings/General.vue
index 4d3dcecb14..138bce179a 100644
--- a/frontend/src/pages/instance/Settings/General.vue
+++ b/frontend/src/pages/instance/Settings/General.vue
@@ -94,9 +94,10 @@
 
 <script>
 import { BadgeCheckIcon, ExclamationIcon, RefreshIcon } from '@heroicons/vue/solid'
-import SemVer from 'semver'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import SemVer from 'semver'
+import { mapState as mapVuexState } from 'vuex'
 
 import instanceAPI from '../../../api/instances.js'
 
@@ -109,6 +110,8 @@ import Dialog from '../../../services/dialog.js'
 
 import DangerSettings from './Danger.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceSettings',
     components: {
@@ -163,7 +166,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team', 'settings']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features', 'settings']),
         isHA () {
             return !!this.instance?.ha
         },
diff --git a/frontend/src/pages/instance/Settings/HighAvailability.vue b/frontend/src/pages/instance/Settings/HighAvailability.vue
index e0dcb1a62a..889a88b255 100644
--- a/frontend/src/pages/instance/Settings/HighAvailability.vue
+++ b/frontend/src/pages/instance/Settings/HighAvailability.vue
@@ -39,7 +39,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import InstanceApi from '../../../api/instances.js'
 
@@ -50,6 +51,8 @@ import usePermissions from '../../../composables/Permissions.js'
 import Alerts from '../../../services/alerts.js'
 import Dialog from '../../../services/dialog.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceSettingsStages',
     components: {
@@ -80,7 +83,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'features']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         isHA () {
             return this.instance?.ha?.replicas !== undefined
         },
diff --git a/frontend/src/pages/instance/Settings/Maintenance.vue b/frontend/src/pages/instance/Settings/Maintenance.vue
index fb32fcbe62..7191d4b966 100644
--- a/frontend/src/pages/instance/Settings/Maintenance.vue
+++ b/frontend/src/pages/instance/Settings/Maintenance.vue
@@ -57,7 +57,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import instanceApi from '../../../api/instances.js'
 import FormHeading from '../../../components/FormHeading.vue'
@@ -67,6 +68,8 @@ import featuresMixin from '../../../mixins/Features.js'
 import Alerts from '../../../services/alerts.js'
 import DateTimePicker from '../../../ui-components/components/form/DateTime.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceSettingsMaintenance',
     components: {
@@ -135,7 +138,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team', 'settings']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features', 'settings']),
         saveButton () {
             return {
                 visible: true,
diff --git a/frontend/src/pages/instance/Settings/Palette.vue b/frontend/src/pages/instance/Settings/Palette.vue
index 26cc701b79..9e871c95fa 100644
--- a/frontend/src/pages/instance/Settings/Palette.vue
+++ b/frontend/src/pages/instance/Settings/Palette.vue
@@ -9,9 +9,9 @@
 
 <script>
 
+import { mapState } from 'pinia'
 import { useRouter } from 'vue-router'
-
-import { mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import InstanceApi from '../../../api/instances.js'
 import usePermissions from '../../../composables/Permissions.js'
@@ -29,6 +29,8 @@ import {
     templateFields
 } from '../../admin/Template/utils.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceSettingsPalette',
     components: {
@@ -71,7 +73,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'features']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         catalogFeatureEnabledForTeam () {
             if (!this.features.customCatalogs) {
                 return false
diff --git a/frontend/src/pages/instance/Settings/ProtectInstance.vue b/frontend/src/pages/instance/Settings/ProtectInstance.vue
index fa6567f13b..60b4efca1f 100644
--- a/frontend/src/pages/instance/Settings/ProtectInstance.vue
+++ b/frontend/src/pages/instance/Settings/ProtectInstance.vue
@@ -23,7 +23,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import InstanceApi from '../../../api/instances.js'
 
@@ -33,6 +34,8 @@ import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavail
 import usePermissions from '../../../composables/Permissions.js'
 import { Roles } from '../../../utils/roles.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceSettingsProtect',
     components: {
@@ -63,7 +66,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership', 'features']),
+        ...mapState(useContextStore, ['team', 'teamMembership']),
+        ...mapVuexState('account', ['features']),
         isProtected () {
             return this.instance?.protected?.enabled
         },
diff --git a/frontend/src/pages/instance/Settings/Security.vue b/frontend/src/pages/instance/Settings/Security.vue
index d229a7212f..ffc7dd2f2c 100644
--- a/frontend/src/pages/instance/Settings/Security.vue
+++ b/frontend/src/pages/instance/Settings/Security.vue
@@ -39,11 +39,12 @@
 
 <script>
 import { PlusSmIcon } from '@heroicons/vue/outline'
-import SemVer from 'semver'
 
+import { mapState } from 'pinia'
+import SemVer from 'semver'
 import { markRaw } from 'vue'
 import { useRouter } from 'vue-router'
-import { mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import InstanceApi from '../../../api/instances.js'
 import FormHeading from '../../../components/FormHeading.vue'
@@ -65,6 +66,8 @@ import {
 
 import TokenDialog from './dialogs/TokenDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceSettingsSecurity',
     components: {
@@ -119,7 +122,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'settings']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['settings']),
         projectLauncherCompatible () {
             const launcherVersion = this.project?.meta?.versions?.launcher
             if (!launcherVersion) {
diff --git a/frontend/src/pages/instance/Settings/index.vue b/frontend/src/pages/instance/Settings/index.vue
index 08b16184f1..8d9beaffe8 100644
--- a/frontend/src/pages/instance/Settings/index.vue
+++ b/frontend/src/pages/instance/Settings/index.vue
@@ -38,13 +38,16 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import SectionSideMenu from '../../../components/SectionSideMenu.vue'
 import SectionTopMenu from '../../../components/SectionTopMenu.vue'
 import usePermissions from '../../../composables/Permissions.js'
 import instanceActionsMixin from '../../../mixins/InstanceActions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstanceSettings',
     components: {
@@ -80,7 +83,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'features', 'settings']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features', 'settings']),
         navigation () {
             const canEditProject = this.hasPermission('project:edit', { application: this.instance.application })
 
diff --git a/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue b/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue
index 72d0f02460..7c4a61109b 100644
--- a/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue
+++ b/frontend/src/pages/instance/VersionHistory/Snapshots/index.vue
@@ -49,9 +49,8 @@
 
 <script>
 import { FilterIcon } from '@heroicons/vue/outline'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapState } from 'vuex'
 
 import InstanceApi from '../../../../api/instances.js'
 import SnapshotApi from '../../../../api/projectSnapshots.js'
@@ -69,6 +68,8 @@ import DaysSince from '../../../application/Snapshots/components/cells/DaysSince
 import DeviceCount from '../../../application/Snapshots/components/cells/DeviceCount.vue'
 import SnapshotName from '../../../application/Snapshots/components/cells/SnapshotName.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
 export default {
@@ -137,7 +138,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         columns () {
             const cols = [
                 {
diff --git a/frontend/src/pages/instance/components/EditorLink.vue b/frontend/src/pages/instance/components/EditorLink.vue
index 687cf49d1a..567a038b46 100644
--- a/frontend/src/pages/instance/components/EditorLink.vue
+++ b/frontend/src/pages/instance/components/EditorLink.vue
@@ -48,8 +48,6 @@
 
 import SemVer from 'semver'
 
-import { mapState } from 'vuex'
-
 import DropdownMenu from '../../../components/DropdownMenu.vue'
 import ProjectIcon from '../../../components/icons/Projects.js'
 import { useNavigationHelper } from '../../../composables/NavigationHelper.js'
@@ -100,7 +98,6 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership']),
         isImmersiveEditor () {
             // Immersive Editor only available for:
             // - Node-RED 4.0.2+
diff --git a/frontend/src/pages/instance/components/InstanceForm.vue b/frontend/src/pages/instance/components/InstanceForm.vue
index 3645d52b7f..9af1d9e6d0 100644
--- a/frontend/src/pages/instance/components/InstanceForm.vue
+++ b/frontend/src/pages/instance/components/InstanceForm.vue
@@ -236,7 +236,8 @@
 
 <script>
 import { CheckCircleIcon, FolderIcon, RefreshIcon } from '@heroicons/vue/outline'
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
+import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import billingApi from '../../../api/billing.js'
 import instanceTypesApi from '../../../api/instanceTypes.js'
@@ -260,6 +261,8 @@ import ExportInstanceComponents from './ExportImportComponents.vue'
 import InstanceChargesTable from './InstanceChargesTable.vue'
 import InstanceCreditBanner from './InstanceCreditBanner.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+
 export default {
     name: 'InstanceForm',
     components: {
@@ -384,8 +387,9 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['settings']),
-        ...mapGetters('account', ['blueprints', 'defaultBlueprint', 'featuresCheck']),
+        ...mapState(useAccountStore, ['blueprints', 'defaultBlueprint']),
+        ...mapVuexState('account', ['settings']),
+        ...mapGetters('account', ['featuresCheck']),
         creatingApplication () {
             return (this.applicationSelection && !this.applications.length) || (this.creatingNew && this.applicationFieldsVisible)
         },
@@ -691,7 +695,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('account', ['getTeamBlueprints']),
+        ...mapActions(useAccountStore, ['getTeamBlueprints']),
         refreshName () {
             this.input.name = NameGenerator()
         },
diff --git a/frontend/src/pages/instance/index.vue b/frontend/src/pages/instance/index.vue
index 14674ba985..3d2927fef1 100644
--- a/frontend/src/pages/instance/index.vue
+++ b/frontend/src/pages/instance/index.vue
@@ -77,7 +77,7 @@
 <script>
 import { LockClosedIcon } from '@heroicons/vue/outline'
 import { ChevronLeftIcon } from '@heroicons/vue/solid'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import InstanceStatusPolling from '../../components/InstanceStatusPolling.vue'
 import StatusBadge from '../../components/StatusBadge.vue'
@@ -94,6 +94,8 @@ import DashboardLink from './components/DashboardLink.vue'
 import InstanceEditorLink from './components/EditorLink.vue'
 import InstanceStatusBadge from './components/InstanceStatusBadge.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstancePage',
     components: {
@@ -126,7 +128,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         navigation () {
             if (!this.instance.id) return []
             let versionHistoryRoute
diff --git a/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue b/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue
index 4fd13d7fc9..dd8f1dfc7e 100644
--- a/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue
+++ b/frontend/src/pages/team/Applications/components/compact/DevicesWrapper.vue
@@ -23,13 +23,15 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import teamApi from '../../../../../api/team.js'
 
 import InstanceCounter from '../../../../../components/tiles/InstanceCounter.vue'
 import { useInstanceStates } from '../../../../../composables/InstanceStates.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DevicesWrapper',
     components: { InstanceCounter },
@@ -55,7 +57,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         groupedStates () {
             return this.groupBySimplifiedStates(this.instanceStates)
         },
diff --git a/frontend/src/pages/team/Applications/components/compact/InstancesWrapper.vue b/frontend/src/pages/team/Applications/components/compact/InstancesWrapper.vue
index 0f90132b43..e7e93919f7 100644
--- a/frontend/src/pages/team/Applications/components/compact/InstancesWrapper.vue
+++ b/frontend/src/pages/team/Applications/components/compact/InstancesWrapper.vue
@@ -23,13 +23,15 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import teamApi from '../../../../../api/team.js'
 
 import InstanceCounter from '../../../../../components/tiles/InstanceCounter.vue'
 import { useInstanceStates } from '../../../../../composables/InstanceStates.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'InstancesWrapper',
     components: { InstanceCounter },
@@ -55,7 +57,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         groupedStates () {
             return this.groupBySimplifiedStates(this.instanceStates)
         },
diff --git a/frontend/src/pages/team/Applications/index.vue b/frontend/src/pages/team/Applications/index.vue
index c948663d0a..e60997d9bc 100644
--- a/frontend/src/pages/team/Applications/index.vue
+++ b/frontend/src/pages/team/Applications/index.vue
@@ -103,6 +103,7 @@
 <script>
 import { PlusSmIcon, SearchIcon } from '@heroicons/vue/outline'
 
+import { mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import teamApi from '../../../api/team.js'
@@ -111,6 +112,8 @@ import usePermissions from '../../../composables/Permissions.js'
 
 import ApplicationListItem from './components/Application.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamApplications',
     components: {
@@ -136,7 +139,8 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team', 'isFreeTeamType']),
+        ...mapState(useContextStore, ['team']),
+        ...mapGetters('account', ['featuresCheck']),
         applicationsList () {
             return Array.from(this.applications.values())
         },
diff --git a/frontend/src/pages/team/AuditLog.vue b/frontend/src/pages/team/AuditLog.vue
index cb96f904f9..89f0819f98 100644
--- a/frontend/src/pages/team/AuditLog.vue
+++ b/frontend/src/pages/team/AuditLog.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import TeamAPI from '../../api/team.js'
 import FormHeading from '../../components/FormHeading.vue'
@@ -48,6 +48,8 @@ import AuditLogBrowser from '../../components/audit-log/AuditLogBrowser.vue'
 import usePermissions from '../../composables/Permissions.js'
 import FfListbox from '../../ui-components/components/form/ListBox.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamAuditLog',
     components: {
@@ -80,7 +82,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership']),
+        ...mapState(useContextStore, ['team', 'teamMembership']),
         logScope () {
             return !this.auditFilters.selectedEventScope ? 'application' : 'project' // cannot use 'instance' due to legacy naming
         }
diff --git a/frontend/src/pages/team/BOM/index.vue b/frontend/src/pages/team/BOM/index.vue
index f8be046059..a33cce66d5 100644
--- a/frontend/src/pages/team/BOM/index.vue
+++ b/frontend/src/pages/team/BOM/index.vue
@@ -72,6 +72,7 @@
 
 <script>
 import { SearchIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import teamApi from '../../../api/team.js'
@@ -82,6 +83,8 @@ import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavail
 import BomDependencies from '../../../components/bill-of-materials/BomDependencies.vue'
 import usePermissions from '../../../composables/Permissions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamBOM',
     components: {
@@ -105,7 +108,8 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapGetters('account', ['featuresCheck']),
         payload () {
             const payload = { children: [] }
             this.intermediaryPayload.forEach(app => {
diff --git a/frontend/src/pages/team/Billing/components/UsageOverview.vue b/frontend/src/pages/team/Billing/components/UsageOverview.vue
index 2428ef2c5c..1573e35fd0 100644
--- a/frontend/src/pages/team/Billing/components/UsageOverview.vue
+++ b/frontend/src/pages/team/Billing/components/UsageOverview.vue
@@ -65,7 +65,7 @@
 
 <script>
 import { ChipIcon, IdentificationIcon, RssIcon, UsersIcon } from '@heroicons/vue/outline'
-import { mapActions, mapState } from 'vuex'
+import { mapActions, mapState } from 'pinia'
 
 import instanceTypesApi from '../../../../api/instanceTypes.js'
 
@@ -75,6 +75,8 @@ import { getObjectValue } from '../../../admin/Template/utils.js'
 
 import UsageValue from './UsageValue.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'UsageOverview',
     components: {
@@ -92,7 +94,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         usedInstancesByType () {
             return Object.keys(this.team.instanceCountByType).map(key => {
                 return {
@@ -109,7 +111,7 @@ export default {
         await this.refreshTeam()
     },
     methods: {
-        ...mapActions('account', ['refreshTeam']),
+        ...mapActions(useContextStore, ['refreshTeam']),
         getTeamProperty (property) {
             if (this.team.properties) {
                 const teamProperty = getObjectValue(this.team.properties, property)
diff --git a/frontend/src/pages/team/Billing/index.vue b/frontend/src/pages/team/Billing/index.vue
index 09a4c64e5d..7ae48d9ada 100644
--- a/frontend/src/pages/team/Billing/index.vue
+++ b/frontend/src/pages/team/Billing/index.vue
@@ -117,7 +117,6 @@ import { ExternalLinkIcon } from '@heroicons/vue/outline'
 
 import { mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapState as mapVuexState } from 'vuex'
 
 import billingApi from '../../../api/billing.js'
 
@@ -131,6 +130,7 @@ import formatDateMixin from '../../../mixins/DateTime.js'
 import UsageOverview from './components/UsageOverview.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useContextStore } from '@/stores/context.js'
 
 const priceCell = {
     name: 'PriceCell',
@@ -203,7 +203,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         ...mapState(useAccountAuthStore, ['isAdminUser']),
         billingSetUp () {
             return !this.missingSubscription && this.team.billing?.active
diff --git a/frontend/src/pages/team/Brokers/Clients/components/BrokerClient.vue b/frontend/src/pages/team/Brokers/Clients/components/BrokerClient.vue
index c003e8d289..c7b15889ce 100644
--- a/frontend/src/pages/team/Brokers/Clients/components/BrokerClient.vue
+++ b/frontend/src/pages/team/Brokers/Clients/components/BrokerClient.vue
@@ -65,7 +65,7 @@
 <script>
 import { ChipIcon, PencilIcon, TrashIcon } from '@heroicons/vue/outline'
 
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import FfAccordion from '../../../../../components/Accordion.vue'
 import TextCopier from '../../../../../components/TextCopier.vue'
@@ -75,6 +75,8 @@ import { Roles } from '../../../../../utils/roles.js'
 
 import BrokerAclRule from './BrokerAclRule.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'BrokerClient',
     components: {
@@ -101,7 +103,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         Roles () {
             return Roles
         },
diff --git a/frontend/src/pages/team/Brokers/Clients/dialogs/ClientDialog.vue b/frontend/src/pages/team/Brokers/Clients/dialogs/ClientDialog.vue
index 3abe1c3e96..8cc24713d6 100644
--- a/frontend/src/pages/team/Brokers/Clients/dialogs/ClientDialog.vue
+++ b/frontend/src/pages/team/Brokers/Clients/dialogs/ClientDialog.vue
@@ -73,7 +73,6 @@
 <script>
 import { PlusIcon } from '@heroicons/vue/solid'
 import { mapActions, mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import brokerApi from '../../../../../api/broker.js'
 import FormRow from '../../../../../components/FormRow.vue'
@@ -81,6 +80,7 @@ import { generateUuid } from '../../../../../composables/strings/String.js'
 
 import AclItem from './AclItem.vue'
 
+import { useContextStore } from '@/stores/context.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 
 export default {
@@ -149,7 +149,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         ...mapState(useProductBrokersStore, {
             clients: state => state.UNS.clients
         }),
diff --git a/frontend/src/pages/team/Brokers/Clients/index.vue b/frontend/src/pages/team/Brokers/Clients/index.vue
index 9582bcb9df..60d1d1fd40 100644
--- a/frontend/src/pages/team/Brokers/Clients/index.vue
+++ b/frontend/src/pages/team/Brokers/Clients/index.vue
@@ -113,6 +113,7 @@ import BrokerClient from './components/BrokerClient.vue'
 
 import ClientDialog from './dialogs/ClientDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 
 export default {
@@ -142,7 +143,8 @@ export default {
         Roles () {
             return Roles
         },
-        ...mapVuexState('account', ['team', 'features']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         ...mapState(useProductBrokersStore, {
             clients: state => state.UNS.clients
         }),
diff --git a/frontend/src/pages/team/Brokers/Docs/index.vue b/frontend/src/pages/team/Brokers/Docs/index.vue
index b9ca972998..564132697c 100644
--- a/frontend/src/pages/team/Brokers/Docs/index.vue
+++ b/frontend/src/pages/team/Brokers/Docs/index.vue
@@ -23,12 +23,14 @@
 <script>
 import { ChevronLeftIcon } from '@heroicons/vue/outline'
 import { ExternalLinkIcon } from '@heroicons/vue/solid'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import BrokerAPI from '../../../../api/broker.js'
 import { useNavigationHelper } from '../../../../composables/NavigationHelper.js'
 
 import FFTopicDocs from './components/TopicDocs.vue'
+
+import { useContextStore } from '@/stores/context.js'
 const { openInANewTab } = useNavigationHelper()
 
 export default {
@@ -46,7 +48,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         brokerId () {
             return this.$route.params.brokerId
         }
diff --git a/frontend/src/pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue b/frontend/src/pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue
index 497a2a6107..56d7abbc13 100644
--- a/frontend/src/pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue
+++ b/frontend/src/pages/team/Brokers/Hierarchy/TopicHierarchy/index.vue
@@ -127,7 +127,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team']),
+        ...mapGetters('account', ['featuresCheck']),
         ...mapState(useProductBrokersStore, ['brokerExpandedTopics']),
         brokerId () {
             return this.$route.params.brokerId
diff --git a/frontend/src/pages/team/Brokers/Hierarchy/TopicInspector/index.vue b/frontend/src/pages/team/Brokers/Hierarchy/TopicInspector/index.vue
index 6e6e4fca15..587a1e2849 100644
--- a/frontend/src/pages/team/Brokers/Hierarchy/TopicInspector/index.vue
+++ b/frontend/src/pages/team/Brokers/Hierarchy/TopicInspector/index.vue
@@ -47,7 +47,7 @@
 
 <script>
 import { StatusOnlineIcon } from '@heroicons/vue/outline'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import brokerApi from '../../../../../api/broker.js'
 import EmptyState from '../../../../../components/EmptyState.vue'
@@ -57,6 +57,8 @@ import MainTitle from '../components/MainTitle.vue'
 import PayloadMetadata from './PayloadMetadata.vue'
 import PayloadSchema from './PayloadSchema.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TopicInspector',
     components: {
@@ -88,7 +90,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         brokerId () {
             return this.$route.params.brokerId
         },
diff --git a/frontend/src/pages/team/Brokers/Hierarchy/index.vue b/frontend/src/pages/team/Brokers/Hierarchy/index.vue
index 3d04e83c85..ca725c02aa 100644
--- a/frontend/src/pages/team/Brokers/Hierarchy/index.vue
+++ b/frontend/src/pages/team/Brokers/Hierarchy/index.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import brokerApi from '../../../../api/broker.js'
 
@@ -32,6 +32,8 @@ import BrokerError from '../components/BrokerError.vue'
 import TopicHierarchy from './TopicHierarchy/index.vue'
 import TopicInspector from './TopicInspector/index.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'BrokerHierarchy',
     components: { TopicInspector, TopicHierarchy, BrokerError },
@@ -54,7 +56,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     watch: {
         $route: function () {
diff --git a/frontend/src/pages/team/Brokers/index.vue b/frontend/src/pages/team/Brokers/index.vue
index 15694a51f3..0ad47f6160 100644
--- a/frontend/src/pages/team/Brokers/index.vue
+++ b/frontend/src/pages/team/Brokers/index.vue
@@ -90,6 +90,8 @@ import { Roles } from '../../../utils/roles.js'
 
 import BrokerStatusBadge from './components/BrokerStatusBadge.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
 
 export default {
@@ -114,7 +116,9 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team', 'pendingTeamChange']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['pendingTeamChange']),
+        ...mapGetters('account', ['featuresCheck']),
         ...mapState(useProductBrokersStore, ['hasFfUnsClients', 'hasBrokers']),
         ...mapState(useProductBrokersStore, {
             brokers: state => state.UNS.brokers
diff --git a/frontend/src/pages/team/DeviceGroups/index.vue b/frontend/src/pages/team/DeviceGroups/index.vue
index 5e8f251875..ed61fdbfe7 100644
--- a/frontend/src/pages/team/DeviceGroups/index.vue
+++ b/frontend/src/pages/team/DeviceGroups/index.vue
@@ -116,6 +116,7 @@
 
 <script>
 import { PlusSmIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
 import { mapGetters } from 'vuex'
 
@@ -131,6 +132,8 @@ import FfButton from '../../../ui-components/components/Button.vue'
 import FfListbox from '../../../ui-components/components/form/ListBox.vue'
 import TargetSnapshotCell from '../../application/components/cells/TargetSnapshot.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceGroups',
     components: {
@@ -191,7 +194,8 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapGetters('account', ['featuresCheck']),
         applicationOptions () {
             return this.applications
                 .filter(application => this.hasPermission('device:create', { application }))
diff --git a/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue b/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
index 5f2d3049fc..ba1addb671 100644
--- a/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
+++ b/frontend/src/pages/team/Devices/dialogs/DeviceAssignApplicationDialog.vue
@@ -34,12 +34,14 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import TeamAPI from '../../../../api/team.js'
 import FormRow from '../../../../components/FormRow.vue'
 import usePermissions from '../../../../composables/Permissions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceAssignApplicationDialog',
     components: {
@@ -71,7 +73,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         Application () {
             return this.input.application
         },
diff --git a/frontend/src/pages/team/Devices/dialogs/DeviceAssignInstanceDialog.vue b/frontend/src/pages/team/Devices/dialogs/DeviceAssignInstanceDialog.vue
index b11f885c84..ac7f894eb6 100644
--- a/frontend/src/pages/team/Devices/dialogs/DeviceAssignInstanceDialog.vue
+++ b/frontend/src/pages/team/Devices/dialogs/DeviceAssignInstanceDialog.vue
@@ -26,10 +26,12 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import SelectInstance from '../../../../components/SelectInstance.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'DeviceAssignInstanceDialog',
     components: {
@@ -53,7 +55,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         bulkOp () {
             return Array.isArray(this.selection)
         },
diff --git a/frontend/src/pages/team/Devices/dialogs/TeamDeviceCreateDialog.vue b/frontend/src/pages/team/Devices/dialogs/TeamDeviceCreateDialog.vue
index 2ea7cdb83d..5738a1bb9f 100644
--- a/frontend/src/pages/team/Devices/dialogs/TeamDeviceCreateDialog.vue
+++ b/frontend/src/pages/team/Devices/dialogs/TeamDeviceCreateDialog.vue
@@ -42,7 +42,8 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import billingApi from '../../../../api/billing.js'
 import devicesApi from '../../../../api/devices.js'
@@ -56,6 +57,8 @@ import alerts from '../../../../services/alerts.js'
 
 import InstanceChargesTable from '../../../instance/components/InstanceChargesTable.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamDeviceCreateDialog',
     components: {
@@ -117,7 +120,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         deviceIsBillable () {
             let freeAllocation = getTeamProperty(this.team, 'devices.free') || 0
             let deviceCount = this.teamDeviceCount
diff --git a/frontend/src/pages/team/Home/components/RecentlyModifiedDevices.vue b/frontend/src/pages/team/Home/components/RecentlyModifiedDevices.vue
index 7a6a951583..1fd7033d2b 100644
--- a/frontend/src/pages/team/Home/components/RecentlyModifiedDevices.vue
+++ b/frontend/src/pages/team/Home/components/RecentlyModifiedDevices.vue
@@ -51,7 +51,7 @@
 
 <script>
 import { ChevronRightIcon } from '@heroicons/vue/outline'
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import teamAPI from '../../../../api/team.js'
 
@@ -62,6 +62,8 @@ import DeviceTile from '../../Applications/components/compact/DeviceTile.vue'
 import DeviceCredentialsDialog from '../../Devices/dialogs/DeviceCredentialsDialog.vue'
 import TeamDeviceCreateDialog from '../../Devices/dialogs/TeamDeviceCreateDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'RecentlyModified',
     components: {
@@ -86,7 +88,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         instancesLeft () {
             return this.totalDevices - this.devices.length
         }
diff --git a/frontend/src/pages/team/Home/components/RecentlyModifiedInstances.vue b/frontend/src/pages/team/Home/components/RecentlyModifiedInstances.vue
index 96ce5b1920..e39010e6ea 100644
--- a/frontend/src/pages/team/Home/components/RecentlyModifiedInstances.vue
+++ b/frontend/src/pages/team/Home/components/RecentlyModifiedInstances.vue
@@ -26,12 +26,14 @@
 
 <script>
 import { ChevronRightIcon } from '@heroicons/vue/outline'
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
 
 import teamAPI from '../../../../api/team.js'
 import TeamLink from '../../../../components/router-links/TeamLink.vue'
 import InstanceTile from '../../Applications/components/compact/InstanceTile.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'RecentlyModifiedInstances',
     components: { TeamLink, InstanceTile, ChevronRightIcon },
@@ -49,7 +51,7 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         instancesLeft () {
             return this.totalInstances - this.instances.length
         }
diff --git a/frontend/src/pages/team/Home/index.vue b/frontend/src/pages/team/Home/index.vue
index c5a709941d..4afef64adb 100644
--- a/frontend/src/pages/team/Home/index.vue
+++ b/frontend/src/pages/team/Home/index.vue
@@ -149,6 +149,8 @@ import DashboardSection from './components/DashboardSection.vue'
 import RecentlyModifiedDevices from './components/RecentlyModifiedDevices.vue'
 import RecentlyModifiedInstances from './components/RecentlyModifiedInstances.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
 export default {
@@ -193,7 +195,9 @@ export default {
     },
     computed: {
         ...mapState(useUxToursStore, ['tours']),
-        ...mapGetters('account', ['team', 'pendingTeamChange', 'featuresCheck']),
+        ...mapState(useContextStore, ['team']),
+        ...mapState(useAccountStore, ['pendingTeamChange']),
+        ...mapGetters('account', ['featuresCheck']),
         instanceStats () {
             return this.groupBySimplifiedStates(this.instanceStateCounts)
         },
diff --git a/frontend/src/pages/team/Instances.vue b/frontend/src/pages/team/Instances.vue
index 83571cd782..337673106a 100644
--- a/frontend/src/pages/team/Instances.vue
+++ b/frontend/src/pages/team/Instances.vue
@@ -158,6 +158,7 @@
 
 <script>
 import { PlusSmIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
 import { mapGetters } from 'vuex'
 
@@ -179,6 +180,8 @@ import DashboardLink from '../instance/components/DashboardLink.vue'
 import InstanceEditorLink from '../instance/components/EditorLink.vue'
 import InstanceStatusBadge from '../instance/components/InstanceStatusBadge.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamInstances',
     components: {
@@ -255,7 +258,8 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapGetters('account', ['featuresCheck']),
         instances () {
             return Array.from(this.instancesMap.values())
         },
diff --git a/frontend/src/pages/team/Library/Blueprints.vue b/frontend/src/pages/team/Library/Blueprints.vue
index 162c3adc0d..fc13ac84ba 100644
--- a/frontend/src/pages/team/Library/Blueprints.vue
+++ b/frontend/src/pages/team/Library/Blueprints.vue
@@ -45,7 +45,6 @@
 <script>
 import { PlusIcon } from '@heroicons/vue/solid'
 import { mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import flowBlueprintsApi from '../../../api/flowBlueprints.js'
 import EmptyState from '../../../components/EmptyState.vue'
@@ -53,6 +52,7 @@ import BlueprintTile from '../../../components/blueprints/BlueprintTile.vue'
 import featuresMixin from '../../../mixins/Features.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'BluePrints',
@@ -68,7 +68,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         ...mapState(useAccountAuthStore, ['isAdminUser']),
         blueprintsByCategory () {
             return [...this.blueprints].sort((a, b) => {
diff --git a/frontend/src/pages/team/Library/Registry/Index.vue b/frontend/src/pages/team/Library/Registry/Index.vue
index c7d414c41b..255b050865 100644
--- a/frontend/src/pages/team/Library/Registry/Index.vue
+++ b/frontend/src/pages/team/Library/Registry/Index.vue
@@ -86,7 +86,8 @@
 
 <script>
 import { ArrowCircleUpIcon, RefreshIcon } from '@heroicons/vue/outline'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import TeamAPI from '../../../../api/team.js'
 
@@ -99,6 +100,8 @@ import RegistryEntry from './components/RegistryEntry.vue'
 
 import PublishNodeDialog from './dialogs/PublishNode.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'NodeRegistry',
     components: {
@@ -118,7 +121,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['settings', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['settings']),
         ...mapGetters('account', ['featuresCheck']),
         enabled () {
             return this.featuresCheck?.isPrivateRegistryFeatureEnabledForPlatform && this.featuresCheck?.isPrivateRegistryFeatureEnabledForTeam
diff --git a/frontend/src/pages/team/Library/Registry/dialogs/PublishNode.vue b/frontend/src/pages/team/Library/Registry/dialogs/PublishNode.vue
index 80562a9f71..56275343c0 100644
--- a/frontend/src/pages/team/Library/Registry/dialogs/PublishNode.vue
+++ b/frontend/src/pages/team/Library/Registry/dialogs/PublishNode.vue
@@ -65,13 +65,16 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import TeamAPI from '../../../../../api/team.js'
 import CodeSnippet from '../../../../../components/CodeSnippet.vue'
 import CopySnippet from '../../../../../components/CopySnippet.vue'
 import Alerts from '../../../../instance/Settings/Alerts.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'PublishNodeDialog',
     components: {
@@ -97,7 +100,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['settings', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['settings']),
         registryHost () {
             return this.settings ? this.settings['team:npm:registry'] : ''
         },
diff --git a/frontend/src/pages/team/Library/TeamLibrary.vue b/frontend/src/pages/team/Library/TeamLibrary.vue
index f53c70a91b..4330a8a378 100644
--- a/frontend/src/pages/team/Library/TeamLibrary.vue
+++ b/frontend/src/pages/team/Library/TeamLibrary.vue
@@ -56,7 +56,7 @@
 
 <script>
 import { ChevronRightIcon, PlusIcon } from '@heroicons/vue/solid'
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
 
 import teamApi from '../../../api/team.js'
 
@@ -71,6 +71,8 @@ import Alerts from '../../../services/alerts.js'
 import Dialog from '../../../services/dialog.js'
 import TypeIcon from '../components/LibraryEntryTypeIcon.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamLibrary',
     components: {
@@ -114,7 +116,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team', 'teamMembership'])
+        ...mapState(useContextStore, ['team'])
     },
     watch: {
         '$route.params': {
diff --git a/frontend/src/pages/team/Members/General.vue b/frontend/src/pages/team/Members/General.vue
index 1d1bbb4e59..a0cf4fadaf 100644
--- a/frontend/src/pages/team/Members/General.vue
+++ b/frontend/src/pages/team/Members/General.vue
@@ -53,10 +53,10 @@
 
 <script>
 import { UserAddIcon } from '@heroicons/vue/solid'
-import { mapState } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { markRaw } from 'vue'
 
-import { mapActions, mapGetters, mapState as mapVuexState } from 'vuex'
+import { mapGetters } from 'vuex'
 
 import teamApi from '../../../api/team.js'
 import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavailableToTeam.vue'
@@ -76,6 +76,7 @@ import ApplicationPermissionOverride from './components/ApplicationPermissionOve
 import ApplicationPermissionRow from './components/ApplicationPermissionsRow.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'TeamUsersGeneral',
@@ -110,7 +111,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         ...mapGetters('account', ['requiresBilling', 'featuresCheck']),
         ...mapState(useAccountAuthStore, ['user', 'isAdminUser']),
         canEditUser: function () {
@@ -187,7 +188,7 @@ export default {
         }
     },
     methods: {
-        ...mapActions('account', ['refreshTeamMembership']),
+        ...mapActions(useContextStore, ['refreshTeamMembership']),
         inviteMember () {
             this.$refs.inviteMemberDialog.show()
         },
diff --git a/frontend/src/pages/team/Members/Invitations.vue b/frontend/src/pages/team/Members/Invitations.vue
index ba986f987c..26f4d07a63 100644
--- a/frontend/src/pages/team/Members/Invitations.vue
+++ b/frontend/src/pages/team/Members/Invitations.vue
@@ -30,10 +30,11 @@
 
 <script>
 import { RefreshIcon, TrashIcon } from '@heroicons/vue/outline'
-import { markRaw } from 'vue'
 
+import { mapState } from 'pinia'
+import { markRaw } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import teamApi from '../../../api/team.js'
 import InviteUserCell from '../../../components/tables/cells/InviteUserCell.vue'
@@ -42,6 +43,8 @@ import usePermissions from '../../../composables/Permissions.js'
 import Alerts from '../../../services/alerts.js'
 import Dialog from '../../../services/dialog.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'MemberInviteTable',
     components: { TrashIcon, RefreshIcon },
@@ -69,7 +72,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['settings', 'team', 'teamMembership'])
+        ...mapState(useContextStore, ['team', 'teamMembership']),
+        ...mapVuexState('account', ['settings'])
     },
     watch: {
         teamMembership: 'fetchData',
diff --git a/frontend/src/pages/team/Members/index.vue b/frontend/src/pages/team/Members/index.vue
index 50dc4dc7a4..7d85533651 100644
--- a/frontend/src/pages/team/Members/index.vue
+++ b/frontend/src/pages/team/Members/index.vue
@@ -15,11 +15,13 @@
 
 <script>
 
-import { mapState as mapVuexState } from 'vuex'
+import { mapState } from 'pinia'
 
 import teamApi from '../../../api/team.js'
 import usePermissions from '../../../composables/Permissions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamUsers',
     setup () {
@@ -34,7 +36,7 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     watch: {
         teamMembership: 'checkAccess'
diff --git a/frontend/src/pages/team/Performance/index.vue b/frontend/src/pages/team/Performance/index.vue
index e54751ea92..ea7188ec0e 100644
--- a/frontend/src/pages/team/Performance/index.vue
+++ b/frontend/src/pages/team/Performance/index.vue
@@ -60,6 +60,7 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
 import { mapGetters } from 'vuex'
 
@@ -74,6 +75,8 @@ import InstanceStatusBadge from '../../instance/components/InstanceStatusBadge.v
 
 import CPUUtilizationCell from './components/CPUUtilizationCell.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamPerformance',
     components: {
@@ -124,7 +127,8 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapGetters('account', ['featuresCheck']),
         rows () {
             return this.instances.map(instance => ({
                 instanceId: instance.id,
diff --git a/frontend/src/pages/team/Pipelines/index.vue b/frontend/src/pages/team/Pipelines/index.vue
index 23af2811e6..3c09878213 100644
--- a/frontend/src/pages/team/Pipelines/index.vue
+++ b/frontend/src/pages/team/Pipelines/index.vue
@@ -88,6 +88,7 @@
 
 <script>
 import { SearchIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import { mapGetters } from 'vuex'
 
 import pipelineAPI from '../../../api/pipeline.js'
@@ -96,6 +97,8 @@ import usePermissions from '../../../composables/Permissions.js'
 
 import TeamPipeline from './components/TeamPipeline.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamPipelines',
     components: {
@@ -116,7 +119,8 @@ export default {
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapGetters('account', ['featuresCheck']),
         filteredPipelines () {
             if (this.filterTerm) {
                 return this.pipelines
diff --git a/frontend/src/pages/team/Settings/Danger.vue b/frontend/src/pages/team/Settings/Danger.vue
index d7d6a6578c..4522403217 100644
--- a/frontend/src/pages/team/Settings/Danger.vue
+++ b/frontend/src/pages/team/Settings/Danger.vue
@@ -67,6 +67,7 @@ import ConfirmTeamSuspendDialog from '../dialogs/ConfirmTeamSuspendDialog.vue'
 import TeamAdminTools from './TeamAdminTools.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'TeamSettingsDanger',
@@ -82,7 +83,8 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['features', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         ...mapState(useAccountAuthStore, ['user']),
         isAdmin: function () {
             return this.user.admin
@@ -115,7 +117,7 @@ export default {
         suspendTeam () {
             teamApi.updateTeam(this.team.id, { suspended: true }).then(() => {
                 alerts.emit('Team successfully suspended', 'confirmation')
-                this.$store.dispatch('account/refreshTeam')
+                useContextStore().refreshTeam()
             }).catch(err => {
                 alerts.emit('Problem suspending team', 'warning')
                 console.warn(err)
@@ -124,7 +126,7 @@ export default {
         unsuspendTeam () {
             teamApi.updateTeam(this.team.id, { suspended: false }).then(() => {
                 alerts.emit('Team successfully reactivated', 'confirmation')
-                this.$store.dispatch('account/refreshTeam')
+                useContextStore().refreshTeam()
             }).catch(err => {
                 alerts.emit('Problem suspending team', 'warning')
                 console.warn(err)
diff --git a/frontend/src/pages/team/Settings/Devices.vue b/frontend/src/pages/team/Settings/Devices.vue
index fcc02606f7..9b95d4d207 100644
--- a/frontend/src/pages/team/Settings/Devices.vue
+++ b/frontend/src/pages/team/Settings/Devices.vue
@@ -56,8 +56,8 @@
 
 <script>
 import { KeyIcon, PlusSmIcon, TemplateIcon } from '@heroicons/vue/outline'
+import { mapState } from 'pinia'
 import { markRaw } from 'vue'
-import { mapState } from 'vuex'
 
 import teamApi from '../../../api/team.js'
 import SectionTopMenu from '../../../components/SectionTopMenu.vue'
@@ -69,6 +69,8 @@ import Dialog from '../../../services/dialog.js'
 import CreateProvisioningTokenDialog from '../Devices/dialogs/CreateProvisioningTokenDialog.vue'
 import ProvisioningCredentialsDialog from '../Devices/dialogs/ProvisioningCredentialsDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 const TokenFieldFormatter = {
     template: '<span><span v-if="name">{{name}}</span><span v-else class="italic text-gray-500">unnamed</span></span>',
     props: ['name'],
@@ -117,7 +119,7 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         addEnabled: function () {
             return this.hasPermission('team:device:provisioning-token:create')
         },
diff --git a/frontend/src/pages/team/Settings/General.vue b/frontend/src/pages/team/Settings/General.vue
index 95cd8fb8d8..a08c7f7a08 100644
--- a/frontend/src/pages/team/Settings/General.vue
+++ b/frontend/src/pages/team/Settings/General.vue
@@ -83,6 +83,8 @@ import FormRow from '../../../components/FormRow.vue'
 import alerts from '../../../services/alerts.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'TeamSettingsGeneral',
@@ -108,7 +110,8 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['features', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         ...mapState(useAccountAuthStore, ['user']),
         formValid () {
             return this.input.teamName && !this.pendingSlugCheck && !this.errors.slug && !this.errors.teamName
@@ -174,8 +177,8 @@ export default {
 
             teamApi.updateTeam(this.team.id, options).then(async result => {
                 this.editing = false
-                await this.$store.dispatch('account/refreshTeams')
-                await this.$store.dispatch('account/refreshTeam')
+                await useAccountStore().refreshTeams()
+                await useContextStore().refreshTeam()
                 alerts.emit('Team Settings updated.', 'confirmation')
             }).catch(err => {
                 if (err.response.data) {
diff --git a/frontend/src/pages/team/Settings/Integrations.vue b/frontend/src/pages/team/Settings/Integrations.vue
index 18b9b29e28..7523294454 100644
--- a/frontend/src/pages/team/Settings/Integrations.vue
+++ b/frontend/src/pages/team/Settings/Integrations.vue
@@ -81,7 +81,8 @@
 
 <script>
 import { PlusSmIcon } from '@heroicons/vue/outline'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapGetters, mapState as mapVuexState } from 'vuex'
 
 import teamApi from '../../../api/team.js'
 import EmptyState from '../../../components/EmptyState.vue'
@@ -92,6 +93,8 @@ import Dialog from '../../../services/dialog.js'
 
 import CreateGitTokenDialog from './dialogs/CreateGitTokenDialog.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamIntegrations',
     components: {
@@ -115,7 +118,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         ...mapGetters('account', ['featuresCheck']),
         addEnabled: function () {
             return this.hasPermission('team:git:tokens:create')
diff --git a/frontend/src/pages/team/Settings/TeamAdminTools.vue b/frontend/src/pages/team/Settings/TeamAdminTools.vue
index 55c2d20730..0333d31bec 100644
--- a/frontend/src/pages/team/Settings/TeamAdminTools.vue
+++ b/frontend/src/pages/team/Settings/TeamAdminTools.vue
@@ -206,6 +206,9 @@ import { getObjectValue } from '../../admin/Template/utils.js'
 import ConfirmTeamManualBillingDialog from '../dialogs/ConfirmTeamManualBillingDialog.vue'
 import ExtendTeamTrialDialog from '../dialogs/ExtendTeamTrialDialog.vue'
 
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamAdminTools',
     components: {
@@ -333,8 +336,8 @@ export default {
         },
         async setupManualBilling (teamTypeId) {
             billingApi.setupManualBilling(this.team.id, teamTypeId).then(async () => {
-                await this.$store.dispatch('account/refreshTeams')
-                await this.$store.dispatch('account/refreshTeam')
+                await useAccountStore().refreshTeams()
+                await useContextStore().refreshTeam()
             }).catch(err => {
                 console.warn(err)
             })
@@ -346,8 +349,8 @@ export default {
                 text: 'Are you sure you want to re-enable billing for this team?'
             }, async () => {
                 billingApi.disableManualBilling(this.team.id).then(async () => {
-                    await this.$store.dispatch('account/refreshTeams')
-                    await this.$store.dispatch('account/refreshTeam')
+                    await useAccountStore().refreshTeams()
+                    await useContextStore().refreshTeam()
                 }).catch(err => {
                     console.warn(err)
                 })
@@ -359,8 +362,8 @@ export default {
         async extendTrial (endDate) {
             const newEndDate = Date.parse(`${endDate}T12:00:00.000Z`)
             billingApi.setTrialExpiry(this.team.id, newEndDate).then(async () => {
-                await this.$store.dispatch('account/refreshTeams')
-                await this.$store.dispatch('account/refreshTeam')
+                await useAccountStore().refreshTeams()
+                await useContextStore().refreshTeam()
             }).catch(err => {
                 console.warn(err)
             })
@@ -468,7 +471,7 @@ export default {
             })
 
             await teamApi.updateTeam(this.team.id, { properties })
-            await this.$store.dispatch('account/refreshTeam')
+            await useContextStore().refreshTeam()
             this.editingLimits = false
         }
     }
diff --git a/frontend/src/pages/team/Settings/index.vue b/frontend/src/pages/team/Settings/index.vue
index 4a5c45da2d..616f425d35 100644
--- a/frontend/src/pages/team/Settings/index.vue
+++ b/frontend/src/pages/team/Settings/index.vue
@@ -16,11 +16,14 @@
 </template>
 
 <script>
+import { mapState } from 'pinia'
 import { useRouter } from 'vue-router'
-import { mapState } from 'vuex'
+import { mapState as mapVuexState } from 'vuex'
 
 import usePermissions from '../../../composables/Permissions.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'TeamSettings',
     setup () {
@@ -39,7 +42,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team', 'teamMembership'])
+        ...mapState(useContextStore, ['team', 'teamMembership']),
+        ...mapVuexState('account', ['features'])
     },
     watch: {
         teamMembership: 'checkAccess'
diff --git a/frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsHeader.vue b/frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsHeader.vue
index 19c1f9a359..244478baa8 100644
--- a/frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsHeader.vue
+++ b/frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsHeader.vue
@@ -17,11 +17,11 @@
 <script>
 import { RefreshIcon } from '@heroicons/vue/outline'
 import { mapActions, mapState } from 'pinia'
-import { mapState as mapVuexState } from 'vuex'
 
 import MenuCollapse from '../../.././../../../components/icons/menu-collapse.js'
 import MenuExpand from '../../.././../../../components/icons/menu-expand.js'
 
+import { useContextStore } from '@/stores/context.js'
 import { useProductTablesStore } from '@/stores/product-tables.js'
 
 export default {
@@ -35,7 +35,7 @@ export default {
     },
     emits: ['toggle-collapse'],
     computed: {
-        ...mapVuexState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         ...mapState(useProductTablesStore, ['tableSelection'])
     },
     methods: {
diff --git a/frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsList.vue b/frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsList.vue
index 1fdd7aaded..aca880519d 100644
--- a/frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsList.vue
+++ b/frontend/src/pages/team/Tables/Table/TableExplorer/components/RowsList.vue
@@ -22,17 +22,17 @@
 <script>
 import { mapActions, mapState } from 'pinia'
 import { defineComponent, markRaw } from 'vue'
-import { mapState as mapVuexState } from 'vuex'
 
 import TextCell from './table-cells/text-cell.vue'
 
+import { useContextStore } from '@/stores/context.js'
 import { useProductTablesStore } from '@/stores/product-tables.js'
 
 export default defineComponent({
     name: 'RowsList',
     computed: {
         ...mapState(useProductTablesStore, ['tableSelection', 'isLoading', 'selectedTable']),
-        ...mapVuexState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         columns () {
             return (this.selectedTable?.schema ?? []).map((row) => {
                 return {
diff --git a/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue b/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue
index 1bd5075655..bd665aef75 100644
--- a/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue
+++ b/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/CreateTable.vue
@@ -41,7 +41,6 @@
 <script>
 import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapGetters } from 'vuex'
 
 import TableColumn from './components/TableColumn.vue'
 
@@ -57,7 +56,6 @@ export default defineComponent({
         }
     },
     computed: {
-        ...mapGetters('account', ['team']),
         ...mapState(useProductTablesStore, ['newTable']),
         hasErrors () {
             return Object.values(this.errors).some(v => v != null)
diff --git a/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue b/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue
index 85072e0306..bf38b19423 100644
--- a/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue
+++ b/frontend/src/pages/team/Tables/Table/TableExplorer/drawers/TableSchema.vue
@@ -25,13 +25,14 @@
 </template>
 
 <script>
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapState } from 'vuex'
 
 import Alerts from '../../../../../../services/alerts.js'
 import Dialog from '../../../../../../services/dialog.js'
 
+import { useContextStore } from '@/stores/context.js'
+
 import { useProductTablesStore } from '@/stores/product-tables.js'
 import { useUxDrawersStore } from '@/stores/ux-drawers.js'
 
@@ -44,7 +45,7 @@ export default defineComponent({
         }
     },
     computed: {
-        ...mapState('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     mounted () {
         this.setHeader()
diff --git a/frontend/src/pages/team/Tables/components/ChooseDatabase.vue b/frontend/src/pages/team/Tables/components/ChooseDatabase.vue
index fc15f73fd7..95a6a29f84 100644
--- a/frontend/src/pages/team/Tables/components/ChooseDatabase.vue
+++ b/frontend/src/pages/team/Tables/components/ChooseDatabase.vue
@@ -63,12 +63,13 @@
 
 <script>
 import { CheckIcon, MinusIcon } from '@heroicons/vue/outline'
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapState } from 'vuex'
 
 import MediumTile from '../../../../components/tiles/MediumTile.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 import { useProductTablesStore } from '@/stores/product-tables.js'
 
 export default defineComponent({
@@ -84,7 +85,7 @@ export default defineComponent({
         }
     },
     computed: {
-        ...mapState('account', ['team']),
+        ...mapState(useContextStore, ['team']),
         options () {
             return [
                 {
diff --git a/frontend/src/pages/team/Tables/components/CreateDatabase.vue b/frontend/src/pages/team/Tables/components/CreateDatabase.vue
index b726fdac22..4be700ec4d 100644
--- a/frontend/src/pages/team/Tables/components/CreateDatabase.vue
+++ b/frontend/src/pages/team/Tables/components/CreateDatabase.vue
@@ -3,12 +3,13 @@
 </template>
 
 <script>
-import { mapActions } from 'pinia'
+import { mapActions, mapState } from 'pinia'
 import { defineComponent } from 'vue'
-import { mapGetters } from 'vuex'
 
 import DatabaseForm from './DatabaseForm.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 import { useProductTablesStore } from '@/stores/product-tables.js'
 
 export default defineComponent({
@@ -22,7 +23,7 @@ export default defineComponent({
         return next()
     },
     computed: {
-        ...mapGetters('account', ['team'])
+        ...mapState(useContextStore, ['team'])
     },
     methods: {
         ...mapActions(useProductTablesStore, ['createDatabase']),
diff --git a/frontend/src/pages/team/Tables/index.vue b/frontend/src/pages/team/Tables/index.vue
index 5e4ae5727d..d81f805d07 100644
--- a/frontend/src/pages/team/Tables/index.vue
+++ b/frontend/src/pages/team/Tables/index.vue
@@ -53,6 +53,7 @@ import EmptyState from '../../../components/EmptyState.vue'
 import FeatureUnavailable from '../../../components/banners/FeatureUnavailable.vue'
 import FeatureUnavailableToTeam from '../../../components/banners/FeatureUnavailableToTeam.vue'
 
+import { useAccountStore } from '@/stores/account.js'
 import { useProductTablesStore } from '@/stores/product-tables.js'
 
 export default defineComponent({
@@ -69,7 +70,8 @@ export default defineComponent({
         }
     },
     computed: {
-        ...mapGetters('account', ['featuresCheck', 'team', 'pendingTeamChange']),
+        ...mapState(useAccountStore, ['pendingTeamChange']),
+        ...mapGetters('account', ['featuresCheck']),
         ...mapState(useProductTablesStore, ['databases'])
     },
     watch: {
diff --git a/frontend/src/pages/team/changeType.vue b/frontend/src/pages/team/changeType.vue
index d11c386424..fd68483f5b 100644
--- a/frontend/src/pages/team/changeType.vue
+++ b/frontend/src/pages/team/changeType.vue
@@ -107,6 +107,8 @@ import Alerts from '../../services/alerts.js'
 import Product from '../../services/product.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 
 // eslint-disable-next-line vue/one-component-per-file
 export default {
@@ -141,7 +143,8 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team', 'features']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         ...mapState(useAccountAuthStore, ['user']),
         formValid () {
             const isChangingTeamType = this.input.teamTypeId !== this.team.type.id
@@ -339,8 +342,8 @@ export default {
             }
 
             teamApi.updateTeam(this.team.id, opts).then(async result => {
-                await this.$store.dispatch('account/refreshTeams')
-                await this.$store.dispatch('account/refreshTeam')
+                await useAccountStore().refreshTeams()
+                await useContextStore().refreshTeam()
                 // send posthog event
                 Product.capture('$ff-team-type-changed', {
                     'team-type-id': opts.type,
diff --git a/frontend/src/pages/team/create.vue b/frontend/src/pages/team/create.vue
index 6eff458a56..3fd3a4e57d 100644
--- a/frontend/src/pages/team/create.vue
+++ b/frontend/src/pages/team/create.vue
@@ -98,6 +98,7 @@ import { useHubspotHelper } from '../../composables/Hubspot.js'
 import slugify from '../../utils/slugify.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
 
 export default {
     name: 'CreateTeam',
@@ -170,7 +171,8 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team', 'teams', 'features']),
+        ...mapState(useAccountStore, ['teams']),
+        ...mapVuexState('account', ['features']),
         ...mapState(useAccountAuthStore, ['user']),
         formValid () {
             return this.input.teamTypeId && this.input.name && this.input.slug && !this.pendingSlugCheck && !this.input.slugError && !this.errors.name
@@ -253,8 +255,8 @@ export default {
             }
 
             teamApi.create(opts).then(async result => {
-                await this.$store.dispatch('account/refreshTeams')
-                await this.$store.dispatch('account/setTeam', result)
+                await useAccountStore().refreshTeams()
+                await useAccountStore().setTeam(result)
                 // are we in EE?
                 if (result.billingURL) {
                     this.redirecting = true
diff --git a/frontend/src/pages/team/createApplication.vue b/frontend/src/pages/team/createApplication.vue
index 81446b18db..84065699ae 100644
--- a/frontend/src/pages/team/createApplication.vue
+++ b/frontend/src/pages/team/createApplication.vue
@@ -42,11 +42,14 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import MultiStepApplicationsInstanceForm
     from '../../components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue'
 
+import { useContextStore } from '@/stores/context.js'
+
 export default {
     name: 'CreateApplication',
     components: {
@@ -66,8 +69,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team']),
-        ...mapGetters('account', ['isFreeTeamType'])
+        ...mapState(useContextStore, ['isFreeTeamType']),
+        ...mapVuexState('account', ['features'])
     },
     methods: {
         onApplicationCreated (payload) {
diff --git a/frontend/src/pages/team/createInstance.vue b/frontend/src/pages/team/createInstance.vue
index e375b8ef68..c8276d313a 100644
--- a/frontend/src/pages/team/createInstance.vue
+++ b/frontend/src/pages/team/createInstance.vue
@@ -46,7 +46,8 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'pinia'
+import { mapState as mapVuexState } from 'vuex'
 
 import teamApi from '../../api/team.js'
 import MultiStepApplicationsInstanceForm from '../../components/multi-step-forms/instance/MultiStepApplicationsInstanceForm.vue'
@@ -54,6 +55,7 @@ import MultiStepApplicationsInstanceForm from '../../components/multi-step-forms
 import LocalStorageService from '../../services/storage/local-storage.service.js'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useContextStore } from '@/stores/context.js'
 
 export default {
     name: 'CreateInstance',
@@ -90,8 +92,8 @@ export default {
         }
     },
     computed: {
-        ...mapState('account', ['features', 'team']),
-        ...mapGetters('account', ['blueprints', 'defaultBlueprint', 'defaultUserTeam']),
+        ...mapState(useContextStore, ['team']),
+        ...mapVuexState('account', ['features']),
         isLandingFromExternalLink () {
             return this.$route.name === 'DeployBlueprint'
         },
diff --git a/frontend/src/pages/team/index.vue b/frontend/src/pages/team/index.vue
index 43540d8ff7..4c52e1b621 100644
--- a/frontend/src/pages/team/index.vue
+++ b/frontend/src/pages/team/index.vue
@@ -28,6 +28,8 @@ import { Roles } from '../../utils/roles.js'
 import TeamInstances from './Instances.vue'
 
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
+import { useContextStore } from '@/stores/context.js'
 import { useProductExpertStore } from '@/stores/product-expert.js'
 import { useUxToursStore } from '@/stores/ux-tours.js'
 
@@ -51,7 +53,8 @@ export default {
         }
     },
     computed: {
-        ...mapVuexState('account', ['team', 'teamMembership', 'pendingTeamChange', 'features']),
+        ...mapState(useContextStore, ['team', 'teamMembership']),
+        ...mapVuexState('account', ['features']),
         ...mapGetters('account', ['requiresBilling']),
         ...mapState(useAccountAuthStore, ['user', 'isAdminUser']),
         ...mapState(useUxToursStore, ['shouldPresentTour']),
@@ -72,7 +75,7 @@ export default {
     },
     watch: {
         '$route.params.team_slug' (slug) {
-            this.$store.dispatch('account/setTeam', slug)
+            useAccountStore().setTeam(slug)
         },
         team () {
             this.checkRoute(this.$route)
diff --git a/frontend/src/store/modules/account/index.js b/frontend/src/store/modules/account/index.js
index 76fdac744e..d91c9dba0d 100644
--- a/frontend/src/store/modules/account/index.js
+++ b/frontend/src/store/modules/account/index.js
@@ -1,16 +1,14 @@
-import { getActivePinia } from 'pinia'
+import { getActivePinia, storeToRefs } from 'pinia'
 import { nextTick } from 'vue'
 
-import flowBlueprintsApi from '../../../api/flowBlueprints.js'
 import settingsApi from '../../../api/settings.js'
 import teamApi from '../../../api/team.js'
 import userApi from '../../../api/user.js'
 import { getTeamProperty } from '../../../composables/TeamProperties.js'
 import router from '../../../routes.js'
 
-import product from '../../../services/product.js'
-
 import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useAccountStore } from '@/stores/account.js'
 import { useContextStore } from '@/stores/context.js'
 import { useProductAssistantStore } from '@/stores/product-assistant.js'
 import { useProductBrokersStore } from '@/stores/product-brokers.js'
@@ -31,22 +29,7 @@ const initialState = () => ({
     // Runtime settings
     settings: null,
     // Feature flags
-    features: {},
-    // The active team
-    team: null,
-    // The active user's membership details of the active team
-    teamMembership: null,
-    // The user's teams
-    teams: [],
-    // stores active notifications that require user attention, key'd by notification type (e.g. invites) alongside a payload bucket to store all notifications
-    notifications: {
-        payload: []
-    },
-    invitations: [],
-    //
-    pendingTeamChange: false,
-
-    teamBlueprints: {}
+    features: {}
 })
 
 const meta = {
@@ -58,12 +41,6 @@ const meta = {
         features: {
             storage: 'localStorage',
             clearOnLogout: false
-        },
-        teamMembership: {
-            storage: 'sessionStorage'
-        },
-        team: {
-            storage: 'sessionStorage'
         }
     }
 }
@@ -75,46 +52,24 @@ const getters = {
     settings (state) {
         return state.settings
     },
-    teams (state) {
-        return state.teams
-    },
-    team (state) {
-        return state.team
-    },
-    isFreeTeamType (state) {
-        return !!(state.team?.type?.properties?.billing?.disabled)
-    },
-    teamMembership (state) {
-        return state.teamMembership
-    },
-    pendingTeamChange (state) {
-        return state.pendingTeamChange
-    },
     requiresBilling (state, getters) {
-        const { user } = useAccountAuthStore()
+        const { user: userRef } = storeToRefs(useAccountAuthStore())
+        const { team: teamRef, isTrialAccount: isTrialAccountRef } = storeToRefs(useContextStore())
+        const user = userRef.value
+        const team = teamRef.value
+        const isTrialAccount = isTrialAccountRef.value
         const isNotAdmin = (user && !user.admin)
 
         return isNotAdmin &&
         state.features.billing &&
-        (!state.team?.billing?.unmanaged) &&
-        (!getters.isTrialAccount || state.team?.billing?.trialEnded) &&
-        !state.team?.type?.properties?.billing?.disabled &&
-        !state.team?.billing?.active
+        (!team?.billing?.unmanaged) &&
+        (!isTrialAccount || team?.billing?.trialEnded) &&
+        !team?.type?.properties?.billing?.disabled &&
+        !team?.billing?.active
     },
     isBillingEnabled (state) {
         return !!state.features.billing
     },
-    isTrialAccount (state) {
-        return !!state.team?.billing?.trial
-    },
-    isTrialAccountExpired (state, getters) {
-        return getters.isTrialAccount && state.team?.billing?.trialEnded
-    },
-    defaultUserTeam: (state, getters) => {
-        const { user } = useAccountAuthStore()
-        const defaultTeamId = user?.defaultTeam || getters.teams[0]?.id
-        return state.teams.find(team => team.id === defaultTeamId)
-    },
     canCreateTeam (state, getters) {
         if (useAccountAuthStore().isAdminUser) {
             return true
@@ -123,39 +78,21 @@ const getters = {
         return Object.prototype.hasOwnProperty.call(getters.settings, 'team:create') &&
             getters.settings['team:create']
     },
-    blueprints: state => state.teamBlueprints[state.team?.id] || [],
-    defaultBlueprint: (state, getters) => getters.blueprints?.find(blueprint => blueprint.default),
-
-    notifications: state => state.notifications,
-    notificationsCount: state => state.notifications?.length || 0,
-    unreadNotificationsCount: state => {
-        const unread = state.notifications?.filter(n => !n.read) || []
-        let count = unread.length || 0
-        // check data.meta.counter for any notifications that have been grouped
-        unread.forEach(n => {
-            if (n.data.meta?.counter && typeof n.data.meta.counter === 'number' && n.data.meta.counter > 1) {
-                count += n.data.meta.counter - 1 // decrement by 1 as the first notification is already counted
-            }
-        })
-        return count
-    },
-    hasNotifications: (state, getters) => getters.notificationsCount > 0,
-
-    teamInvitations: state => state.invitations,
-    teamInvitationsCount: state => state.invitations?.length || 0,
-    hasAvailableTeams: state => state.teams.length > 0,
-
     featuresCheck: (state) => {
+        const { teamMembership: teamMembershipRef, team: teamRef } = storeToRefs(useContextStore())
+        const teamMembership = teamMembershipRef.value
+        const team = teamRef.value
+
         const preCheck = {
             // Instances
             // deprecated, use the isFreeTeamType getter
-            isHostedInstancesEnabledForTeam: ((state) => {
-                if (!state.team) {
+            isHostedInstancesEnabledForTeam: (() => {
+                if (!team) {
                     return false
                 }
 
                 // // dashboard users don't receive the team.type in the response payload
-                if (state.teamMembership?.role === 5 && !state.team?.type?.properties) {
+                if (teamMembership?.role === 5 && !team?.type?.properties) {
                     return true
                 }
 
@@ -164,8 +101,8 @@ const getters = {
                 // loop over the different instance types. Reference the team type properties to get the list
                 // of instance types, but use getTeamProperty to check the individual types to take into account
                 // any team level overrides
-                for (const instanceType of Object.keys(state.team.type.properties?.instances) || []) {
-                    if (getTeamProperty(state.team, `instances.${instanceType}.active`)) {
+                for (const instanceType of Object.keys(team.type.properties?.instances) || []) {
+                    if (getTeamProperty(team, `instances.${instanceType}.active`)) {
                         available = true
                         break
                     }
@@ -174,29 +111,29 @@ const getters = {
             })(state),
 
             // Shared Library
-            isSharedLibraryFeatureEnabledForTeam: ((state) => {
-                const flag = state.team?.type?.properties?.features?.['shared-library']
-                return (flag === undefined || flag) || state.team?.type?.properties?.enableAllFeatures
+            isSharedLibraryFeatureEnabledForTeam: (() => {
+                const flag = team?.type?.properties?.features?.['shared-library']
+                return (flag === undefined || flag) || team?.type?.properties?.enableAllFeatures
             })(state),
             isSharedLibraryFeatureEnabledForPlatform: state.features?.['shared-library'],
 
             // Blueprints
-            isBlueprintsFeatureEnabledForTeam: ((state) => {
-                const flag = state.team?.type?.properties?.features?.flowBlueprints
-                return (flag === undefined || flag) || state.team?.type?.properties?.enableAllFeatures
+            isBlueprintsFeatureEnabledForTeam: (() => {
+                const flag = team?.type?.properties?.features?.flowBlueprints
+                return (flag === undefined || flag) || team?.type?.properties?.enableAllFeatures
             })(state),
             isBlueprintsFeatureEnabledForPlatform: !!state.features?.flowBlueprints,
 
             // Custom Catalogs
             isCustomCatalogsFeatureEnabledForPlatform: !!state.features?.customCatalogs,
-            isCustomCatalogsFeatureEnabledForTeam: ((state) => {
-                const flag = state.team?.type?.properties.features?.customCatalogs
-                return (flag === undefined || flag) || state.team?.type?.properties?.enableAllFeatures
+            isCustomCatalogsFeatureEnabledForTeam: (() => {
+                const flag = team?.type?.properties.features?.customCatalogs
+                return (flag === undefined || flag) || team?.type?.properties?.enableAllFeatures
             })(state),
 
             // Private NPM Registry (Custom Nodes)
             isPrivateRegistryFeatureEnabledForPlatform: !!state.features?.npm,
-            isPrivateRegistryFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.npm || state.team?.type?.properties?.enableAllFeatures,
+            isPrivateRegistryFeatureEnabledForTeam: !!team?.type?.properties?.features?.npm || team?.type?.properties?.enableAllFeatures,
 
             // Certified Nodes
             isCertifiedNodesFeatureEnabledForPlatform: !!state.features?.certifiedNodes,
@@ -205,23 +142,23 @@ const getters = {
 
             // Static Assets
             isStaticAssetFeatureEnabledForPlatform: !!state.features?.staticAssets,
-            isStaticAssetsFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.staticAssets || state.team?.type?.properties?.enableAllFeatures,
+            isStaticAssetsFeatureEnabledForTeam: !!team?.type?.properties?.features?.staticAssets || team?.type?.properties?.enableAllFeatures,
 
             // HTTP BearerTokens
             isHTTPBearerTokensFeatureEnabledForPlatform: !!state.settings?.features.httpBearerTokens,
-            isHTTPBearerTokensFeatureEnabledForTeam: !!state.team?.type?.properties.features.teamHttpSecurity || state.team?.type?.properties?.enableAllFeatures,
+            isHTTPBearerTokensFeatureEnabledForTeam: !!team?.type?.properties.features.teamHttpSecurity || team?.type?.properties?.enableAllFeatures,
 
             // BOM
             isBOMFeatureEnabledForPlatform: !!state.features?.bom,
-            isBOMFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.bom || state.team?.type?.properties?.enableAllFeatures,
+            isBOMFeatureEnabledForTeam: !!team?.type?.properties?.features?.bom || team?.type?.properties?.enableAllFeatures,
 
             // Timeline
             isTimelineFeatureEnabledForPlatform: !!state.features?.projectHistory,
-            isTimelineFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.projectHistory || state.team?.type?.properties?.enableAllFeatures,
+            isTimelineFeatureEnabledForTeam: !!team?.type?.properties?.features?.projectHistory || team?.type?.properties?.enableAllFeatures,
 
             // Mqtt Broker
             isMqttBrokerFeatureEnabledForPlatform: !!state.features?.teamBroker,
-            isMqttBrokerFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.teamBroker || state.team?.type?.properties?.enableAllFeatures,
+            isMqttBrokerFeatureEnabledForTeam: !!team?.type?.properties?.features?.teamBroker || team?.type?.properties?.enableAllFeatures,
 
             isExternalMqttBrokerFeatureEnabledForPlatform: !!state.features?.externalBroker,
 
@@ -232,19 +169,19 @@ const getters = {
 
             // Instance Resources
             isInstanceResourcesFeatureEnabledForPlatform: !!state.features?.instanceResources,
-            isInstanceResourcesFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.instanceResources || state.team?.type?.properties?.enableAllFeatures,
+            isInstanceResourcesFeatureEnabledForTeam: !!team?.type?.properties?.features?.instanceResources || team?.type?.properties?.enableAllFeatures,
 
             // Tables
             isTablesFeatureEnabledForPlatform: !!state.features.tables,
-            isTablesFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.tables || state.team?.type?.properties?.enableAllFeatures,
+            isTablesFeatureEnabledForTeam: !!team?.type?.properties?.features?.tables || team?.type?.properties?.enableAllFeatures,
 
             // Generate Snapshot Descriptions with AI
             isGeneratedSnapshotDescriptionFeatureEnabledForPlatform: !!state.features.generatedSnapshotDescription,
-            isGeneratedSnapshotDescriptionFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.generatedSnapshotDescription || state.team?.type?.properties?.enableAllFeatures,
+            isGeneratedSnapshotDescriptionFeatureEnabledForTeam: !!team?.type?.properties?.features?.generatedSnapshotDescription || team?.type?.properties?.enableAllFeatures,
 
             // Applications Role Based Access Control
             isApplicationsRBACFeatureEnabledForPlatform: !!state.features.rbacApplication,
-            isApplicationsRBACFeatureEnabledForTeam: !!state.team?.type?.properties?.features?.rbacApplication || state.team?.type?.properties?.enableAllFeatures,
+            isApplicationsRBACFeatureEnabledForTeam: !!team?.type?.properties?.features?.rbacApplication || team?.type?.properties?.enableAllFeatures,
 
             // Expert Assistant
             isExpertAssistantFeatureEnabledForPlatform: !!state.features.expertAssistant,
@@ -265,8 +202,8 @@ const getters = {
             // external broker must be enabled for platform, and share the same team-level feature flag as the team broker
             isExternalMqttBrokerFeatureEnabled: preCheck.isExternalMqttBrokerFeatureEnabledForPlatform && preCheck.isMqttBrokerFeatureEnabledForTeam,
             devOpsPipelinesFeatureEnabled: preCheck.devOpsPipelinesFeatureEnabledForPlatform,
-            isDeviceGroupsFeatureEnabled: !!state.team?.type?.properties?.features?.deviceGroups || !!state.team?.type?.properties?.enableAllFeatures,
-            isGitIntegrationFeatureEnabled: preCheck.isGitIntegrationFeatureEnabledForPlatform && !!state.team?.type?.properties?.features?.gitIntegration,
+            isDeviceGroupsFeatureEnabled: !!team?.type?.properties?.features?.deviceGroups || !!team?.type?.properties?.enableAllFeatures,
+            isGitIntegrationFeatureEnabled: preCheck.isGitIntegrationFeatureEnabledForPlatform && !!team?.type?.properties?.features?.gitIntegration,
             isInstanceResourcesFeatureEnabled: preCheck.isInstanceResourcesFeatureEnabledForPlatform && preCheck.isInstanceResourcesFeatureEnabledForTeam,
             isTablesFeatureEnabled: preCheck.isTablesFeatureEnabledForPlatform && preCheck.isTablesFeatureEnabledForTeam,
             isGeneratedSnapshotDescriptionEnabled: preCheck.isGeneratedSnapshotDescriptionFeatureEnabledForPlatform && preCheck.isGeneratedSnapshotDescriptionFeatureEnabledForTeam,
@@ -281,42 +218,12 @@ const mutations = {
     setSettings (state, settings) {
         state.settings = settings
         state.features = settings.features || {}
-    },
-    logout (state) {
-        state.teams = []
-        state.team = null
-    },
-    setTeam (state, team) {
-        // update the product session "team" to record all future events against them
-        product.setTeam(team)
-        state.team = team
-    },
-    setTeamMembership (state, membership) {
-        state.teamMembership = membership
-    },
-    setTeams (state, teams) {
-        state.teams = teams
-    },
-    setNotifications (state, notifications) {
-        state.notifications = notifications
-    },
-    setPendingTeamChange (state) {
-        state.pendingTeamChange = true
-    },
-    clearPendingTeamChange (state) {
-        state.pendingTeamChange = false
-    },
-    setTeamBlueprints (state, { teamId, blueprints }) {
-        state.teamBlueprints[teamId] = blueprints
-    },
-    setTeamInvitations (state, invitations) {
-        state.invitations = invitations
     }
 }
 
 // actions
 const actions = {
-    async checkState ({ commit, dispatch }, redirectUrlAfterLogin) {
+    async checkState ({ commit }, redirectUrlAfterLogin) {
         try {
             const settings = await settingsApi.getSettings()
             commit('setSettings', settings)
@@ -339,16 +246,16 @@ const actions = {
             }
 
             // check notifications count
-            await dispatch('getNotifications')
+            await useAccountStore().getNotifications()
             // check notifications count
-            await dispatch('getInvitations')
+            await useAccountStore().getInvitations()
 
             const teams = await teamApi.getTeams()
-            commit('setTeams', teams.teams)
+            useAccountStore().setTeams(teams.teams)
 
             if (teams.count === 0) {
                 useUxLoadingStore().clearAppLoader()
-                commit('setTeam', null)
+                useAccountStore().setTeam(null)
                 if (/^\/team\//.test(router.currentRoute.value.path)) {
                     router.push({ name: 'Home' })
                 }
@@ -380,9 +287,7 @@ const actions = {
                         teamSlug = teamIdMatch[1]
                     }
                     const team = await teamApi.getTeam(teamId || { slug: teamSlug })
-                    const teamMembership = await teamApi.getTeamUserMembership(team.id)
-                    commit('setTeam', team)
-                    commit('setTeamMembership', teamMembership)
+                    await useAccountStore().setTeam(team)
                 }
                 useUxLoadingStore().clearAppLoader()
                 if (redirectUrlAfterLogin) {
@@ -423,23 +328,6 @@ const actions = {
             }
         }
     },
-    async refreshTeam (state) {
-        const currentTeam = state.getters.team
-        if (currentTeam) {
-            const currentSlug = currentTeam.slug
-            const team = await teamApi.getTeam(currentTeam.id)
-            const teamMembership = await teamApi.getTeamUserMembership(team.id)
-            state.commit('setTeam', team)
-            state.commit('setTeamMembership', teamMembership)
-            if (currentSlug !== team.slug) {
-                router.replace({ name: router.currentRoute.value.name, params: { team_slug: team.slug } })
-            }
-        }
-    },
-    async refreshTeams (state) {
-        const teams = await teamApi.getTeams()
-        state.commit('setTeams', teams.teams)
-    },
     async login ({ dispatch }, credentials) {
         try {
             useAccountAuthStore().setLoginInflight()
@@ -458,7 +346,7 @@ const actions = {
             }
         }
     },
-    async logout ({ rootState, dispatch, commit }) {
+    async logout ({ dispatch }) {
         return userApi.logout()
             .then(() => {
                 // Reset Vuex state (existing behaviour)
@@ -468,6 +356,7 @@ const actions = {
                 const pinia = getActivePinia()
                 if (pinia) {
                     useAccountAuthStore().$reset()
+                    useAccountStore().$reset()
                     useUxDialogStore().$reset()
                     useUxLoadingStore().$reset()
                     useUxToursStore().$reset()
@@ -491,68 +380,12 @@ const actions = {
                 window.location = '/'
             })
     },
-    async setTeam (state, team) {
-        const currentTeam = state.getters.team
-        state.commit('setPendingTeamChange')
-        let teamMembership
-        if (typeof team === 'string') {
-            if (!currentTeam || currentTeam.slug !== team) {
-                team = await teamApi.getTeam({ slug: team })
-            } else {
-                state.commit('clearPendingTeamChange')
-                return
-            }
-        } else {
-            if ((!currentTeam && !team) || currentTeam?.id === team?.id) {
-                state.commit('clearPendingTeamChange')
-                return
-            }
-        }
-        if (team?.id) {
-            teamMembership = await teamApi.getTeamUserMembership(team.id)
-        }
-        state.commit('setTeam', team)
-        await state.dispatch('clearOtherStores')
-        state.commit('setTeamMembership', teamMembership)
-        state.commit('clearPendingTeamChange')
-    },
     async refreshSettings (state) {
         const settings = await settingsApi.getSettings()
         state.commit('setSettings', settings)
     },
-    async getTeamBlueprints (state, teamId) {
-        const response = await flowBlueprintsApi.getFlowBlueprintsForTeam(teamId)
-        const blueprints = response.blueprints
-
-        return state.commit('setTeamBlueprints', { teamId, blueprints })
-    },
-    async getNotifications (state) {
-        await userApi.getNotifications()
-            .then((notifications) => {
-                state.commit('setNotifications', notifications.notifications)
-            })
-            .catch(_ => {})
-    },
-    setNotifications (state, notifications) {
-        state.commit('setNotifications', notifications)
-    },
-    async getInvitations (state) {
-        await userApi.getTeamInvitations()
-            .then((invitations) => {
-                state.commit('setTeamInvitations', invitations.invitations)
-            })
-            .catch(_ => {})
-    },
-    clearOtherStores () {
-        useProductTablesStore().clearState()
-    },
     checkIfAuthenticated () {
         return useAccountAuthStore().checkIfAuthenticated()
-    },
-    async refreshTeamMembership ({ commit, state }) {
-        const teamMembership = await teamApi.getTeamUserMembership(state.team.id)
-
-        commit('setTeamMembership', teamMembership)
     }
 }
 
diff --git a/frontend/src/stores/_account_bridge.js b/frontend/src/stores/_account_bridge.js
index 3f55ea241c..c29d442566 100644
--- a/frontend/src/stores/_account_bridge.js
+++ b/frontend/src/stores/_account_bridge.js
@@ -1,27 +1,30 @@
 // Temporary bridge — reads account data from Vuex/Pinia during migration.
 // Delete this file after the account stores are migrated to Pinia.
 
-import { useAccountAuthStore } from './account-auth.js'
+import { storeToRefs } from 'pinia'
+
+import { useAccountAuthStore } from '@/stores/account-auth.js'
 
 export function useAccountBridge () {
-    // Use require() instead of a top-level import to avoid a circular module dependency.
+    // Use require() instead of top-level imports to avoid circular module dependencies.
     // Static imports of store/index.js here would create a cycle:
     // ux-drawers.js → ux-navigation.js → _account_bridge.js → store/index.js → account/index.js → ux-navigation.js
-    // By requiring lazily inside the function body, the Vuex store is fully initialized before this runs.
+    // context.js imports _account_bridge.js statically; requiring context.js lazily here avoids a cycle.
     const store = require('../store/index.js').default
-    const { user } = useAccountAuthStore()
-    const team = store.state.account.team
+    const { useContextStore } = require('@/stores/context.js')
+    const { user } = storeToRefs(useAccountAuthStore())
+    const { team, teamMembership, isTrialAccount, isTrialAccountExpired } = storeToRefs(useContextStore())
     return {
-        user,
-        userId: user?.id || null,
-        team,
-        teamId: team?.id || null,
-        teamSlug: team?.slug || null,
+        user: user.value,
+        userId: user.value?.id || null,
+        team: team.value,
+        teamId: team.value?.id || null,
+        teamSlug: team.value?.slug || null,
         features: store.state.account.features,
-        teamMembership: store.getters['account/teamMembership'] ?? { role: 0 },
+        teamMembership: teamMembership.value ?? { role: 0 },
         featuresCheck: store.getters['account/featuresCheck'],
         requiresBilling: store.getters['account/requiresBilling'],
-        isTrialAccount: store.getters['account/isTrialAccount'] || false,
-        isTrialAccountExpired: store.getters['account/isTrialAccountExpired']
+        isTrialAccount: isTrialAccount.value,
+        isTrialAccountExpired: isTrialAccountExpired.value
     }
 }
diff --git a/frontend/src/stores/account.js b/frontend/src/stores/account.js
new file mode 100644
index 0000000000..f55ec45eee
--- /dev/null
+++ b/frontend/src/stores/account.js
@@ -0,0 +1,116 @@
+import { defineStore } from 'pinia'
+
+import flowBlueprintsApi from '@/api/flowBlueprints.js'
+import teamApi from '@/api/team.js'
+import userApi from '@/api/user.js'
+import product from '@/services/product.js'
+import { useAccountAuthStore } from '@/stores/account-auth.js'
+import { useContextStore } from '@/stores/context.js'
+import { useProductTablesStore } from '@/stores/product-tables.js'
+
+export const useAccountStore = defineStore('account', {
+    state: () => ({
+        teams: [],
+        teamBlueprints: {},
+        pendingTeamChange: false,
+        notifications: [],
+        invitations: []
+    }),
+    getters: {
+        blueprints (state) {
+            const teamId = useContextStore().team?.id
+            return state.teamBlueprints[teamId] || []
+        },
+        defaultBlueprint () { return this.blueprints?.find(blueprint => blueprint.default) },
+        defaultUserTeam: (state) => {
+            const defaultTeamId = useAccountAuthStore().user?.defaultTeam || state.teams[0]?.id
+            return state.teams.find(team => team.id === defaultTeamId)
+        },
+        notificationsCount: state => state.notifications?.length || 0,
+        unreadNotificationsCount: state => {
+            const unread = state.notifications?.filter(n => !n.read) || []
+            let count = unread.length || 0
+            // check data.meta.counter for any notifications that have been grouped
+            unread.forEach(n => {
+                if (n.data.meta?.counter && typeof n.data.meta.counter === 'number' && n.data.meta.counter > 1) {
+                    count += n.data.meta.counter - 1 // decrement by 1 as the first notification is already counted
+                }
+            })
+            return count
+        },
+        hasNotifications () { return this.notificationsCount > 0 },
+        teamInvitations: state => state.invitations,
+        teamInvitationsCount: state => state.invitations?.length || 0,
+        hasAvailableTeams: state => state.teams.length > 0
+    },
+    actions: {
+        setTeams (teams) {
+            this.teams = teams
+        },
+        async setTeam (team) {
+            const context = useContextStore()
+            const currentTeam = context.team
+            this.pendingTeamChange = true
+            let teamMembership
+            if (typeof team === 'string') {
+                if (!currentTeam || currentTeam.slug !== team) {
+                    team = await teamApi.getTeam({ slug: team })
+                } else {
+                    this.pendingTeamChange = false
+                    return
+                }
+            } else {
+                if (!currentTeam && !team) {
+                    this.pendingTeamChange = false
+                    return
+                }
+                if (currentTeam?.id === team?.id) {
+                    // Same team — skip full reload but always refresh membership
+                    if (team?.id) {
+                        context.setTeamMembership(await teamApi.getTeamUserMembership(team.id))
+                    }
+                    this.pendingTeamChange = false
+                    return
+                }
+            }
+            if (team?.id) {
+                teamMembership = await teamApi.getTeamUserMembership(team.id)
+            }
+            product.setTeam(team)
+            context.setTeam(team)
+            this.clearOtherStores()
+            context.setTeamMembership(teamMembership)
+            this.pendingTeamChange = false
+        },
+        async refreshTeams () {
+            const teams = await teamApi.getTeams()
+            this.teams = teams.teams
+        },
+        async getTeamBlueprints (teamId) {
+            const response = await flowBlueprintsApi.getFlowBlueprintsForTeam(teamId)
+            const blueprints = response.blueprints
+
+            this.teamBlueprints[teamId] = blueprints
+        },
+        async getNotifications () {
+            await userApi.getNotifications()
+                .then((notifications) => {
+                    this.notifications = notifications.notifications || []
+                })
+                .catch(_ => {})
+        },
+        setNotifications (notifications) {
+            this.notifications = notifications
+        },
+        async getInvitations () {
+            await userApi.getTeamInvitations()
+                .then((invitations) => {
+                    this.invitations = invitations.invitations
+                })
+                .catch(_ => {})
+        },
+        clearOtherStores () {
+            useProductTablesStore().clearState()
+        }
+    }
+})
diff --git a/frontend/src/stores/context.js b/frontend/src/stores/context.js
index 72ac737b3a..99ec4d18b8 100644
--- a/frontend/src/stores/context.js
+++ b/frontend/src/stores/context.js
@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia'
 
+import teamApi from '../api/team.js'
+import product from '../services/product.js'
+
 import { useAccountBridge } from './_account_bridge.js'
 import { useProductAssistantStore } from './product-assistant.js'
 
@@ -7,9 +10,20 @@ export const useContextStore = defineStore('context', {
     state: () => ({
         route: null,
         instance: null,
-        device: null
+        device: null,
+        team: null,
+        teamMembership: null
     }),
     getters: {
+        isFreeTeamType (state) {
+            return !!(state.team?.type?.properties?.billing?.disabled)
+        },
+        isTrialAccount (state) {
+            return !!state.team?.billing?.trial
+        },
+        isTrialAccountExpired (state) {
+            return this.isTrialAccount && state.team?.billing?.trialEnded
+        },
         expert (state) {
             const account = useAccountBridge()
             const assistant = useProductAssistantStore()
@@ -21,12 +35,12 @@ export const useContextStore = defineStore('context', {
                     palette: null,
                     debugLog: null,
                     userId: account.userId,
-                    teamId: account.teamId,
-                    teamSlug: account.teamSlug,
+                    teamId: state.team?.id || null,
+                    teamSlug: state.team?.slug || null,
                     instanceId: null,
                     deviceId: null,
                     applicationId: null,
-                    isTrialAccount: account.isTrialAccount,
+                    isTrialAccount: this.isTrialAccount,
                     nodeRedVersion: assistant.nodeRedVersion,
                     pageName: null,
                     rawRoute: {},
@@ -73,12 +87,12 @@ export const useContextStore = defineStore('context', {
                 palette,
                 debugLog: assistant.debugLog,
                 userId: account.userId,
-                teamId: account.teamId,
-                teamSlug: account.teamSlug,
+                teamId: state.team?.id || null,
+                teamSlug: state.team?.slug || null,
                 instanceId: instanceId ?? null,
                 deviceId: deviceId ?? null,
                 applicationId: applicationId ?? null,
-                isTrialAccount: account.isTrialAccount,
+                isTrialAccount: this.isTrialAccount,
                 pageName: state.route.name,
                 nodeRedVersion: assistant.nodeRedVersion,
                 rawRoute,
@@ -91,6 +105,34 @@ export const useContextStore = defineStore('context', {
         updateRoute (route) { this.route = route },
         setInstance (instance) { this.instance = instance },
         setDevice (device) { this.device = device },
-        clearInstance () { this.instance = null }
-    }
+        clearInstance () { this.instance = null },
+        setTeam (team) {
+            this.team = team
+        },
+        setTeamMembership (teamMembership) {
+            this.teamMembership = teamMembership
+        },
+        async refreshTeam () {
+            const currentTeam = this.team
+            if (currentTeam) {
+                const currentSlug = currentTeam.slug
+                const team = await teamApi.getTeam(currentTeam.id)
+                const teamMembership = await teamApi.getTeamUserMembership(team.id)
+                product.setTeam(team)
+                this.team = team
+                this.teamMembership = teamMembership
+                if (currentSlug !== team.slug) {
+                    const router = require('@/routes.js').default
+                    router.replace({ name: router.currentRoute.value.name, params: { team_slug: team.slug } })
+                }
+            }
+        },
+        async refreshTeamMembership () {
+            const teamMembership = await teamApi.getTeamUserMembership(this.team.id)
+            this.teamMembership = teamMembership
+        }
+    },
+    persist: [
+        { pick: ['team', 'teamMembership'], storage: sessionStorage }
+    ]
 })
diff --git a/frontend/src/stores/index.js b/frontend/src/stores/index.js
index 5582b1897f..291c78bea8 100644
--- a/frontend/src/stores/index.js
+++ b/frontend/src/stores/index.js
@@ -4,7 +4,6 @@ export { useContextStore } from './context.js'
 export { useProductBrokersStore } from './product-brokers.js'
 export { useProductTablesStore } from './product-tables.js'
 export { useProductAssistantStore } from './product-assistant.js'
-export { useProductExpertInsightsAgentStore } from './product-expert-insights-agent.js'
 export { useProductExpertStore } from './product-expert.js'
 export { useUxDrawersStore } from './ux-drawers.js'
 export { useUxNavigationStore } from './ux-navigation.js'
@@ -12,4 +11,6 @@ export { useUxStore } from './ux.js'
 export { useUxDialogStore } from './ux-dialog.js'
 export { useUxLoadingStore } from './ux-loading.js'
 export { useUxToursStore } from './ux-tours.js'
+export { useProductExpertInsightsAgentStore } from './product-expert-insights-agent.js'
+export { useAccountStore } from './account.js'
 export { useProductExpertSupportAgentStore } from './product-expert-support-agent.js'
diff --git a/test/unit/frontend/stores/account.spec.js b/test/unit/frontend/stores/account.spec.js
new file mode 100644
index 0000000000..b41d554a0b
--- /dev/null
+++ b/test/unit/frontend/stores/account.spec.js
@@ -0,0 +1,355 @@
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('@/api/team.js', () => ({
+    default: {
+        getTeam: vi.fn(),
+        getTeamUserMembership: vi.fn(),
+        getTeams: vi.fn()
+    }
+}))
+
+vi.mock('@/api/flowBlueprints.js', () => ({
+    default: {
+        getFlowBlueprintsForTeam: vi.fn()
+    }
+}))
+
+vi.mock('@/api/user.js', () => ({
+    default: {
+        getNotifications: vi.fn(),
+        getTeamInvitations: vi.fn()
+    }
+}))
+
+vi.mock('@/services/product.js', () => ({
+    default: {
+        setTeam: vi.fn()
+    }
+}))
+
+vi.mock('@/stores/product-tables.js', () => ({
+    useProductTablesStore: () => ({ clearState: vi.fn() })
+}))
+
+vi.mock('@/stores/account-auth.js', () => ({
+    useAccountAuthStore: () => ({ user: { id: 'u1', defaultTeam: 'team-1' } })
+}))
+
+// Shared mutable state used by the context store mock
+const mockContext = {
+    team: null,
+    teamMembership: null,
+    setTeam (team) { this.team = team },
+    setTeamMembership (membership) { this.teamMembership = membership }
+}
+
+vi.mock('@/stores/context.js', () => ({
+    useContextStore: () => mockContext
+}))
+
+// Imported after mocks so vi.mock hoisting resolves correctly
+const { useAccountStore } = await import('@/stores/account.js')
+const teamApi = (await import('@/api/team.js')).default
+const flowBlueprintsApi = (await import('@/api/flowBlueprints.js')).default
+const userApi = (await import('@/api/user.js')).default
+const product = (await import('@/services/product.js')).default
+
+describe('account store', () => {
+    beforeEach(() => {
+        setActivePinia(createPinia())
+        vi.clearAllMocks()
+        // Reset shared context mock state
+        mockContext.team = null
+        mockContext.teamMembership = null
+    })
+
+    describe('initial state', () => {
+        it('initializes with default state', () => {
+            const store = useAccountStore()
+            expect(store.teams).toEqual([])
+            expect(store.teamBlueprints).toEqual({})
+            expect(store.pendingTeamChange).toBe(false)
+            expect(store.notifications).toEqual([])
+            expect(store.invitations).toEqual([])
+        })
+    })
+
+    describe('getters', () => {
+        describe('blueprints', () => {
+            it('returns empty array when context team is null', () => {
+                const store = useAccountStore()
+                expect(store.blueprints).toEqual([])
+            })
+
+            it('returns blueprints for the current team from context', () => {
+                mockContext.team = { id: 'team-1' }
+                const store = useAccountStore()
+                store.teamBlueprints = { 'team-1': [{ id: 'bp-1' }] }
+                expect(store.blueprints).toEqual([{ id: 'bp-1' }])
+            })
+
+            it('returns empty array when no blueprints for current team', () => {
+                mockContext.team = { id: 'team-1' }
+                const store = useAccountStore()
+                store.teamBlueprints = {}
+                expect(store.blueprints).toEqual([])
+            })
+        })
+
+        describe('defaultBlueprint', () => {
+            it('returns undefined when no blueprints', () => {
+                const store = useAccountStore()
+                expect(store.defaultBlueprint).toBeUndefined()
+            })
+
+            it('returns the blueprint marked as default', () => {
+                mockContext.team = { id: 'team-1' }
+                const store = useAccountStore()
+                store.teamBlueprints = {
+                    'team-1': [
+                        { id: 'bp-1', default: false },
+                        { id: 'bp-2', default: true }
+                    ]
+                }
+                expect(store.defaultBlueprint).toEqual({ id: 'bp-2', default: true })
+            })
+        })
+
+        describe('defaultUserTeam', () => {
+            it('returns the team matching the user defaultTeam', () => {
+                const store = useAccountStore()
+                const team1 = { id: 'team-1', name: 'Alpha' }
+                const team2 = { id: 'team-2', name: 'Beta' }
+                store.teams = [team1, team2]
+                // mock returns user.defaultTeam = 'team-1'
+                expect(store.defaultUserTeam).toEqual(team1)
+            })
+
+            it('falls back to undefined when no defaultTeam match', () => {
+                const store = useAccountStore()
+                const team1 = { id: 'team-99', name: 'Other' }
+                store.teams = [team1]
+                // user.defaultTeam = 'team-1' but only 'team-99' exists
+                expect(store.defaultUserTeam).toBeUndefined()
+            })
+        })
+
+        describe('notificationsCount', () => {
+            it('returns 0 when notifications is initial state', () => {
+                const store = useAccountStore()
+                expect(store.notificationsCount).toBe(0)
+            })
+
+            it('returns the length of the notifications array', () => {
+                const store = useAccountStore()
+                store.notifications = [{ id: 1 }, { id: 2 }]
+                expect(store.notificationsCount).toBe(2)
+            })
+        })
+
+        describe('unreadNotificationsCount', () => {
+            it('returns 0 when no notifications', () => {
+                const store = useAccountStore()
+                store.notifications = []
+                expect(store.unreadNotificationsCount).toBe(0)
+            })
+
+            it('counts unread notifications', () => {
+                const store = useAccountStore()
+                store.notifications = [
+                    { id: 1, read: false, data: { meta: {} } },
+                    { id: 2, read: true, data: { meta: {} } }
+                ]
+                expect(store.unreadNotificationsCount).toBe(1)
+            })
+
+            it('adds grouped notification counter values', () => {
+                const store = useAccountStore()
+                store.notifications = [
+                    { id: 1, read: false, data: { meta: { counter: 3 } } }
+                ]
+                // 1 (base) + (3 - 1) = 3
+                expect(store.unreadNotificationsCount).toBe(3)
+            })
+        })
+
+        describe('hasNotifications', () => {
+            it('returns false when empty', () => {
+                const store = useAccountStore()
+                store.notifications = []
+                expect(store.hasNotifications).toBe(false)
+            })
+
+            it('returns true when there are notifications', () => {
+                const store = useAccountStore()
+                store.notifications = [{ id: 1 }]
+                expect(store.hasNotifications).toBe(true)
+            })
+        })
+
+        describe('teamInvitations / teamInvitationsCount', () => {
+            it('returns invitations array', () => {
+                const store = useAccountStore()
+                store.invitations = [{ id: 'inv-1' }]
+                expect(store.teamInvitations).toEqual([{ id: 'inv-1' }])
+                expect(store.teamInvitationsCount).toBe(1)
+            })
+        })
+
+        describe('hasAvailableTeams', () => {
+            it('returns false when teams is empty', () => {
+                const store = useAccountStore()
+                expect(store.hasAvailableTeams).toBe(false)
+            })
+
+            it('returns true when teams exist', () => {
+                const store = useAccountStore()
+                store.teams = [{ id: 'team-1' }]
+                expect(store.hasAvailableTeams).toBe(true)
+            })
+        })
+    })
+
+    describe('actions', () => {
+        describe('setTeams', () => {
+            it('replaces the teams array', () => {
+                const store = useAccountStore()
+                const teams = [{ id: 'team-1' }, { id: 'team-2' }]
+                store.setTeams(teams)
+                expect(store.teams).toEqual(teams)
+            })
+        })
+
+        describe('setTeam', () => {
+            it('refreshes context membership but skips full reload when same team is already set (by id)', async () => {
+                const store = useAccountStore()
+                const team = { id: 'team-1', slug: 'alpha' }
+                const membership = { role: 50 }
+                mockContext.team = team
+                teamApi.getTeamUserMembership.mockResolvedValue(membership)
+
+                await store.setTeam(team)
+
+                expect(teamApi.getTeamUserMembership).toHaveBeenCalledWith(team.id)
+                expect(mockContext.teamMembership).toEqual(membership)
+                // team object itself should NOT be re-set (no product.setTeam call)
+                expect(product.setTeam).not.toHaveBeenCalled()
+            })
+
+            it('does nothing if both current and new team are null', async () => {
+                const store = useAccountStore()
+                await store.setTeam(null)
+                expect(teamApi.getTeamUserMembership).not.toHaveBeenCalled()
+            })
+
+            it('sets team + membership on context and calls product.setTeam', async () => {
+                const store = useAccountStore()
+                const team = { id: 'team-2', slug: 'beta' }
+                const membership = { role: 50 }
+                teamApi.getTeamUserMembership.mockResolvedValue(membership)
+
+                await store.setTeam(team)
+
+                expect(mockContext.team).toEqual(team)
+                expect(mockContext.teamMembership).toEqual(membership)
+                expect(product.setTeam).toHaveBeenCalledWith(team)
+                expect(store.pendingTeamChange).toBe(false)
+            })
+
+            it('fetches team by slug when passed a string', async () => {
+                const store = useAccountStore()
+                const fetchedTeam = { id: 'team-3', slug: 'gamma' }
+                const membership = { role: 50 }
+                teamApi.getTeam.mockResolvedValue(fetchedTeam)
+                teamApi.getTeamUserMembership.mockResolvedValue(membership)
+
+                await store.setTeam('gamma')
+
+                expect(teamApi.getTeam).toHaveBeenCalledWith({ slug: 'gamma' })
+                expect(mockContext.team).toEqual(fetchedTeam)
+            })
+        })
+
+        describe('getTeamBlueprints', () => {
+            it('fetches and stores blueprints for the given team', async () => {
+                const store = useAccountStore()
+                const blueprints = [{ id: 'bp-1' }, { id: 'bp-2' }]
+                flowBlueprintsApi.getFlowBlueprintsForTeam.mockResolvedValue({ blueprints })
+
+                await store.getTeamBlueprints('team-1')
+
+                expect(flowBlueprintsApi.getFlowBlueprintsForTeam).toHaveBeenCalledWith('team-1')
+                expect(store.teamBlueprints['team-1']).toEqual(blueprints)
+            })
+        })
+
+        describe('getNotifications', () => {
+            it('sets notifications from API response', async () => {
+                const store = useAccountStore()
+                const notifications = [{ id: 'n1' }, { id: 'n2' }]
+                userApi.getNotifications.mockResolvedValue({ notifications })
+
+                await store.getNotifications()
+
+                expect(store.notifications).toEqual(notifications)
+            })
+
+            it('sets notifications to empty array when API returns no notifications key', async () => {
+                const store = useAccountStore()
+                userApi.getNotifications.mockResolvedValue({})
+
+                await store.getNotifications()
+
+                expect(store.notifications).toEqual([])
+            })
+
+            it('does not throw on API failure', async () => {
+                const store = useAccountStore()
+                userApi.getNotifications.mockRejectedValue(new Error('network'))
+                await expect(store.getNotifications()).resolves.not.toThrow()
+            })
+        })
+
+        describe('setNotifications', () => {
+            it('directly sets notifications', () => {
+                const store = useAccountStore()
+                const notifications = [{ id: 'n1' }]
+                store.setNotifications(notifications)
+                expect(store.notifications).toEqual(notifications)
+            })
+        })
+
+        describe('getInvitations', () => {
+            it('sets invitations from API response', async () => {
+                const store = useAccountStore()
+                const invitations = [{ id: 'inv-1' }]
+                userApi.getTeamInvitations.mockResolvedValue({ invitations })
+
+                await store.getInvitations()
+
+                expect(store.invitations).toEqual(invitations)
+            })
+
+            it('does not throw on API failure', async () => {
+                const store = useAccountStore()
+                userApi.getTeamInvitations.mockRejectedValue(new Error('network'))
+                await expect(store.getInvitations()).resolves.not.toThrow()
+            })
+        })
+
+        describe('$reset', () => {
+            it('restores default state', async () => {
+                const store = useAccountStore()
+                store.teams = [{ id: 'team-1' }]
+                store.invitations = [{ id: 'inv-1' }]
+
+                store.$reset()
+
+                expect(store.teams).toEqual([])
+                expect(store.invitations).toEqual([])
+                expect(store.pendingTeamChange).toBe(false)
+            })
+        })
+    })
+})
diff --git a/test/unit/frontend/stores/context.spec.js b/test/unit/frontend/stores/context.spec.js
index 8da877cbb2..a2e90e5700 100644
--- a/test/unit/frontend/stores/context.spec.js
+++ b/test/unit/frontend/stores/context.spec.js
@@ -18,52 +18,196 @@ vi.mock('@/stores/_account_bridge.js', () => ({
     })
 }))
 
+vi.mock('@/api/team.js', () => ({
+    default: {
+        getTeam: vi.fn(),
+        getTeamUserMembership: vi.fn()
+    }
+}))
+
+vi.mock('@/routes.js', () => ({
+    default: {
+        replace: vi.fn(),
+        currentRoute: { value: { name: 'TeamRoute', params: {} } }
+    }
+}))
+
+vi.mock('@/services/product.js', () => ({
+    default: {
+        setTeam: vi.fn()
+    }
+}))
+
+const teamApi = (await import('@/api/team.js')).default
+const product = (await import('@/services/product.js')).default
+
 describe('context store', () => {
     beforeEach(() => {
         setActivePinia(createPinia())
+        vi.clearAllMocks()
     })
 
-    it('initializes with null state', () => {
-        const store = useContextStore()
-        expect(store.route).toBeNull()
-        expect(store.instance).toBeNull()
-        expect(store.device).toBeNull()
+    describe('initial state', () => {
+        it('initializes with null state', () => {
+            const store = useContextStore()
+            expect(store.route).toBeNull()
+            expect(store.instance).toBeNull()
+            expect(store.device).toBeNull()
+            expect(store.team).toBeNull()
+            expect(store.teamMembership).toBeNull()
+        })
     })
 
-    it('updateRoute sets the route', () => {
-        const store = useContextStore()
-        const route = { name: 'test', fullPath: '/test', params: {} }
-        store.updateRoute(route)
-        expect(store.route).toEqual(route)
-    })
+    describe('route / instance / device actions', () => {
+        it('updateRoute sets the route', () => {
+            const store = useContextStore()
+            const route = { name: 'test', fullPath: '/test', params: {} }
+            store.updateRoute(route)
+            expect(store.route).toEqual(route)
+        })
 
-    it('setInstance sets the instance', () => {
-        const store = useContextStore()
-        const instance = { id: 1, name: 'Instance' }
-        store.setInstance(instance)
-        expect(store.instance).toEqual(instance)
-    })
+        it('setInstance sets the instance', () => {
+            const store = useContextStore()
+            const instance = { id: 1, name: 'Instance' }
+            store.setInstance(instance)
+            expect(store.instance).toEqual(instance)
+        })
+
+        it('setDevice sets the device', () => {
+            const store = useContextStore()
+            const device = { id: 2, name: 'Device' }
+            store.setDevice(device)
+            expect(store.device).toEqual(device)
+        })
 
-    it('setDevice sets the device', () => {
-        const store = useContextStore()
-        const device = { id: 2, name: 'Device' }
-        store.setDevice(device)
-        expect(store.device).toEqual(device)
+        it('clearInstance sets instance to null', () => {
+            const store = useContextStore()
+            store.setInstance({ id: 1 })
+            store.clearInstance()
+            expect(store.instance).toBeNull()
+        })
     })
 
-    it('clearInstance sets instance to null', () => {
-        const store = useContextStore()
-        store.setInstance({ id: 1 })
-        store.clearInstance()
-        expect(store.instance).toBeNull()
+    describe('team actions', () => {
+        describe('setTeamMembership', () => {
+            it('sets teamMembership', () => {
+                const store = useContextStore()
+                const membership = { role: 50 }
+                store.setTeamMembership(membership)
+                expect(store.teamMembership).toEqual(membership)
+            })
+        })
+
+        describe('refreshTeam', () => {
+            it('does nothing when team is null', async () => {
+                const store = useContextStore()
+                await store.refreshTeam()
+                expect(teamApi.getTeam).not.toHaveBeenCalled()
+            })
+
+            it('fetches fresh team + membership and updates state', async () => {
+                const store = useContextStore()
+                const currentTeam = { id: 'team-1', slug: 'alpha' }
+                const freshTeam = { id: 'team-1', slug: 'alpha' }
+                const membership = { role: 50 }
+                store.team = currentTeam
+                teamApi.getTeam.mockResolvedValue(freshTeam)
+                teamApi.getTeamUserMembership.mockResolvedValue(membership)
+
+                await store.refreshTeam()
+
+                expect(teamApi.getTeam).toHaveBeenCalledWith('team-1')
+                expect(store.team).toEqual(freshTeam)
+                expect(store.teamMembership).toEqual(membership)
+                expect(product.setTeam).toHaveBeenCalledWith(freshTeam)
+            })
+        })
+
+        describe('refreshTeamMembership', () => {
+            it('fetches and updates teamMembership', async () => {
+                const store = useContextStore()
+                store.team = { id: 'team-1' }
+                const membership = { role: 30 }
+                teamApi.getTeamUserMembership.mockResolvedValue(membership)
+
+                await store.refreshTeamMembership()
+
+                expect(teamApi.getTeamUserMembership).toHaveBeenCalledWith('team-1')
+                expect(store.teamMembership).toEqual(membership)
+            })
+        })
     })
 
-    it('expert getter returns safe defaults if route is null', () => {
-        const store = useContextStore()
-        // The expert getter will return defaults if route is null
-        const expert = store.expert
-        expect(expert).toHaveProperty('assistantVersion')
-        expect(expert).toHaveProperty('palette')
-        expect(expert.scope).toBe('ff-app')
+    describe('getters', () => {
+        describe('isFreeTeamType', () => {
+            it('returns false when team is null', () => {
+                const store = useContextStore()
+                expect(store.isFreeTeamType).toBe(false)
+            })
+
+            it('returns false when billing is not disabled', () => {
+                const store = useContextStore()
+                store.team = { type: { properties: { billing: { disabled: false } } } }
+                expect(store.isFreeTeamType).toBe(false)
+            })
+
+            it('returns true when billing.disabled is true', () => {
+                const store = useContextStore()
+                store.team = { type: { properties: { billing: { disabled: true } } } }
+                expect(store.isFreeTeamType).toBe(true)
+            })
+        })
+
+        describe('isTrialAccount', () => {
+            it('returns false when team has no billing', () => {
+                const store = useContextStore()
+                store.team = {}
+                expect(store.isTrialAccount).toBe(false)
+            })
+
+            it('returns true when billing.trial is true', () => {
+                const store = useContextStore()
+                store.team = { billing: { trial: true } }
+                expect(store.isTrialAccount).toBe(true)
+            })
+        })
+
+        describe('isTrialAccountExpired', () => {
+            it('returns false when not a trial account', () => {
+                const store = useContextStore()
+                store.team = { billing: { trial: false } }
+                expect(store.isTrialAccountExpired).toBe(false)
+            })
+
+            it('returns false when trial has not ended', () => {
+                const store = useContextStore()
+                store.team = { billing: { trial: true, trialEnded: false } }
+                expect(store.isTrialAccountExpired).toBe(false)
+            })
+
+            it('returns true when trial has ended', () => {
+                const store = useContextStore()
+                store.team = { billing: { trial: true, trialEnded: true } }
+                expect(store.isTrialAccountExpired).toBe(true)
+            })
+        })
+
+        describe('expert getter', () => {
+            it('returns safe defaults if route is null', () => {
+                const store = useContextStore()
+                const expert = store.expert
+                expect(expert).toHaveProperty('assistantVersion')
+                expect(expert).toHaveProperty('palette')
+                expect(expert.scope).toBe('ff-app')
+            })
+
+            it('includes teamId and teamSlug from context team', () => {
+                const store = useContextStore()
+                store.team = { id: 'team-42', slug: 'my-team' }
+                const expert = store.expert
+                expect(expert.teamId).toBe('team-42')
+                expect(expert.teamSlug).toBe('my-team')
+            })
+        })
     })
 })