From 40e413d9586a7c96024c30d543e295d2ee16a6b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Fri, 4 Nov 2022 14:04:31 +0100
Subject: [PATCH] refactor(editor): Migrate part of the vuex store to pinia
 (#4484)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Added pinia support. Migrated community nodes module.
* ✨ Added ui pinia store, moved some data from root store to it, updated modals to work with pinia stores
* ✨ Added ui pinia store and migrated a part of the root store
* ✨ Migrated `settings` store to pinia
* ✨ Removing vuex store refs from router
* ✨ Migrated `users` module to pinia store
* ⚡ Fixing errors after sync with master
* ⚡ One more error after merge
* ⚡ Created `workflows` pinia store. Moved large part of root store to it. Started updating references.
* ✨ Finished migrating workflows store to pinia
* ⚡ Renaming some getters and actions to make more sense
* ✨ Finished migrating the root store to pinia
* ✨ Migrated ndv store to pinia
* ⚡ Renaming main panel dimensions getter so it doesn't clash with data prop name
* ✔️ Fixing lint errors
* ✨ Migrated `templates` store to pinia
* ✨ Migrated the `nodeTypes`store
* ⚡ Removed unused pieces of code and oold vuex modules
* ✨ Adding vuex calls to pinia store, fi	xing wrong references
* 💄 Removing leftover $store refs
* ⚡ Added legacy getters and mutations to store to support webhooks
* ⚡ Added missing front-end hooks, updated vuex state subscriptions to pinia
* ✔️ Fixing linting errors
* ⚡ Removing vue composition api plugin
* ⚡ Fixing main sidebar state when loading node view
* 🐛 Fixing an error when activating workflows
* 🐛 Fixing isses with workflow settings and executions auto-refresh
* 🐛 Removing duplicate listeners which cause import error
* 🐛 Fixing route authentication
* ⚡ Updating freshly pulled $store refs
* Adding deleted const
* ⚡ Updating store references in ee features. Reseting NodeView credentials update flag when resetting workspace
* ⚡ Adding return type to email submission modal
* ⚡ Making NodeView only react to paste event when active
* 🐛 Fixing signup view errors
* 👌 Addressing PR review comments
* 👌 Addressing new PR comments
* 👌 Updating invite id logic in signup view
---
 package-lock.json                             |  100 +-
 packages/editor-ui/package.json               |    1 +
 packages/editor-ui/src/App.vue                |   55 +-
 packages/editor-ui/src/Interface.ts           |  107 +-
 packages/editor-ui/src/api/communityNodes.ts  |    2 +-
 packages/editor-ui/src/api/curlHelper.ts      |    4 +-
 packages/editor-ui/src/api/settings.ts        |    6 +-
 .../editor-ui/src/api/workflow-webhooks.ts    |    6 +-
 .../editor-ui/src/components/AboutModal.vue   |   14 +-
 .../src/components/ActivationModal.vue        |   60 +-
 .../src/components/BinaryDataDisplay.vue      |   11 +-
 .../src/components/ChangePasswordModal.vue    |    7 +-
 .../editor-ui/src/components/CodeEdit.vue     |   19 +-
 .../CodeNodeEditor/CodeNodeEditor.vue         |    7 +-
 .../completions/base.completions.ts           |   11 +-
 .../completions/jsonField.completions.ts      |   23 +-
 .../completions/require.completions.ts        |   21 +-
 .../src/components/CollectionParameter.vue    |    9 +-
 .../src/components/CommunityPackageCard.vue   |    9 +-
 .../CommunityPackageInstallModal.vue          |    9 +-
 .../CommunityPackageManageConfirmModal.vue    |    9 +-
 .../src/components/ContactPromptModal.vue     |   28 +-
 .../src/components/CredentialCard.vue         |   12 +-
 .../CredentialEdit/CredentialConfig.vue       |   23 +-
 .../CredentialEdit/CredentialEdit.vue         |   40 +-
 .../CredentialEdit/CredentialSharing.ee.vue   |   48 +-
 .../components/CredentialEdit/OauthButton.vue |    7 +-
 .../src/components/CredentialIcon.vue         |   12 +-
 .../src/components/CredentialsSelectModal.vue |   11 +-
 .../src/components/DeleteUserModal.vue        |   31 +-
 .../editor-ui/src/components/Draggable.vue    |   13 +-
 .../src/components/DraggableTarget.vue        |   15 +-
 .../components/DuplicateWorkflowDialog.vue    |   14 +-
 .../src/components/EnterpriseEdition.ee.vue   |    5 +-
 .../src/components/Error/NodeErrorView.vue    |   11 +-
 .../src/components/ExecutionsList.vue         |   34 +-
 .../ExecutionsView/ExecutionPreview.vue       |    7 +-
 .../ExecutionsInfoAccordion.vue               |   35 +-
 .../ExecutionsView/ExecutionsLandingPage.vue  |   19 +-
 .../ExecutionsView/ExecutionsSidebar.vue      |    9 +-
 .../ExecutionsView/ExecutionsView.vue         |   96 +-
 .../src/components/ExpressionEdit.vue         |   23 +-
 .../src/components/FeatureComingSoon.vue      |   28 +-
 .../editor-ui/src/components/GoBackButton.vue |    2 +-
 .../src/components/HoverableNodeIcon.vue      |    7 +-
 .../src/components/ImportCurlModal.vue        |   21 +-
 .../src/components/ImportParameter.vue        |    7 +-
 .../editor-ui/src/components/InputPanel.vue   |   27 +-
 .../src/components/InviteUsersModal.vue       |    5 +-
 packages/editor-ui/src/components/Logo.vue    |    7 +-
 .../ExecutionDetails/ExecutionDetails.vue     |   15 +-
 .../src/components/MainHeader/MainHeader.vue  |   28 +-
 .../src/components/MainHeader/TabBar.vue      |    7 +-
 .../components/MainHeader/WorkflowDetails.vue |   57 +-
 .../editor-ui/src/components/MainSidebar.vue  |   77 +-
 packages/editor-ui/src/components/Modal.vue   |   85 +-
 .../editor-ui/src/components/ModalDrawer.vue  |   22 +-
 .../editor-ui/src/components/ModalRoot.vue    |   38 +-
 .../src/components/NDVDraggablePanels.vue     |   32 +-
 packages/editor-ui/src/components/Node.vue    |   47 +-
 .../src/components/Node/NodeCreation.vue      |    7 +-
 .../Node/NodeCreator/CategorizedItems.vue     |   21 +-
 .../Node/NodeCreator/CategoryItem.vue         |   11 +-
 .../components/Node/NodeCreator/MainPanel.vue |    9 +-
 .../Node/NodeCreator/NodeCreator.vue          |   14 +-
 .../src/components/NodeCredentials.vue        |   30 +-
 .../src/components/NodeDetailsView.vue        |   81 +-
 .../src/components/NodeExecuteButton.vue      |   36 +-
 .../editor-ui/src/components/NodeIcon.vue     |    7 +-
 .../editor-ui/src/components/NodeSettings.vue |   76 +-
 .../src/components/NodeSettingsTabs.vue       |   15 +-
 .../components/OnboardingCallSignupModal.vue  |    5 +-
 .../editor-ui/src/components/OutputPanel.vue  |   35 +-
 .../src/components/ParameterInput.vue         |   35 +-
 .../src/components/ParameterInputExpanded.vue |    7 +-
 .../src/components/ParameterInputFull.vue     |   17 +-
 .../src/components/ParameterInputList.vue     |   15 +-
 .../src/components/ParameterInputWrapper.vue  |   17 +-
 .../src/components/PersonalizationModal.vue   |   36 +-
 .../src/components/PushConnectionTracker.vue  |    9 +-
 .../ResourceLocator/ResourceLocator.vue       |   44 +-
 packages/editor-ui/src/components/RunData.vue |   94 +-
 .../editor-ui/src/components/RunDataJson.vue  |    9 +-
 .../src/components/RunDataJsonActions.vue     |   13 +-
 .../editor-ui/src/components/RunDataTable.vue |   27 +-
 .../src/components/SettingsSidebar.vue        |   18 +-
 packages/editor-ui/src/components/Sticky.vue  |   39 +-
 .../editor-ui/src/components/TagsDropdown.vue |    5 +-
 .../TagsManager/TagsView/TagsView.vue         |    6 +-
 .../editor-ui/src/components/Telemetry.vue    |   32 +-
 .../src/components/TemplateDetails.vue        |   13 +-
 packages/editor-ui/src/components/TimeAgo.vue |    9 +-
 .../editor-ui/src/components/TriggerPanel.vue |   33 +-
 .../editor-ui/src/components/ValueSurvey.vue  |   37 +-
 .../src/components/VariableSelector.vue       |   23 +-
 .../src/components/WorkflowActivator.vue      |   24 +-
 .../editor-ui/src/components/WorkflowCard.vue |   22 +-
 .../src/components/WorkflowSettings.vue       |   60 +-
 .../forms/ResourceFiltersDropdown.vue         |   18 +-
 .../src/components/layouts/PageViewLayout.vue |    8 +-
 .../layouts/ResourcesListLayout.vue           |   23 +-
 .../components/mixins/executionsHelpers.ts    |   15 +-
 .../src/components/mixins/mouseSelect.ts      |   27 +-
 .../src/components/mixins/moveNodeWorkflow.ts |   24 +-
 .../src/components/mixins/newVersions.ts      |    7 +-
 .../src/components/mixins/nodeBase.ts         |   42 +-
 .../src/components/mixins/nodeHelpers.ts      |   57 +-
 .../src/components/mixins/pinData.ts          |    7 +-
 .../src/components/mixins/pushConnection.ts   |   86 +-
 .../src/components/mixins/restApi.ts          |    9 +-
 .../src/components/mixins/showMessage.ts      |   11 +-
 .../src/components/mixins/userHelpers.ts      |    8 +-
 .../src/components/mixins/workflowActivate.ts |   25 +-
 .../src/components/mixins/workflowHelpers.ts  |  144 ++-
 .../src/components/mixins/workflowRun.ts      |   39 +-
 packages/editor-ui/src/constants.ts           |   12 +
 packages/editor-ui/src/main.ts                |    6 +
 .../editor-ui/src/modules/communityNodes.ts   |   87 --
 .../editor-ui/src/modules/credentials.ee.ts   |    6 +-
 packages/editor-ui/src/modules/credentials.ts |   53 +-
 packages/editor-ui/src/modules/ndv.ts         |  170 ---
 packages/editor-ui/src/modules/nodeTypes.ts   |  180 ---
 packages/editor-ui/src/modules/settings.ts    |  243 ----
 packages/editor-ui/src/modules/tags.ts        |   17 +-
 packages/editor-ui/src/modules/templates.ts   |  282 -----
 packages/editor-ui/src/modules/ui.ts          |  376 ------
 packages/editor-ui/src/modules/users.ts       |  227 ----
 packages/editor-ui/src/modules/versions.ts    |   10 +-
 packages/editor-ui/src/modules/workflows.ts   |  115 --
 packages/editor-ui/src/permissions.ts         |    6 +-
 packages/editor-ui/src/plugins/i18n/index.ts  |   17 +-
 .../src/plugins/i18n/locales/en.json          |    1 +
 .../editor-ui/src/plugins/telemetry/index.ts  |    7 +-
 packages/editor-ui/src/router.ts              |   53 +-
 packages/editor-ui/src/store.ts               | 1089 +----------------
 .../editor-ui/src/stores/communityNodes.ts    |   82 ++
 packages/editor-ui/src/stores/n8nRootStore.ts |  109 ++
 packages/editor-ui/src/stores/ndv.ts          |  180 +++
 packages/editor-ui/src/stores/nodeTypes.ts    |  157 +++
 packages/editor-ui/src/stores/settings.ts     |  235 ++++
 packages/editor-ui/src/stores/templates.ts    |  267 ++++
 packages/editor-ui/src/stores/ui.ts           |  385 ++++++
 packages/editor-ui/src/stores/users.ts        |  204 +++
 packages/editor-ui/src/stores/workflows.ts    |  773 ++++++++++++
 .../src/views/ChangePasswordView.vue          |   35 +-
 .../editor-ui/src/views/CredentialsView.vue   |   23 +-
 .../src/views/ForgotMyPasswordView.vue        |   12 +-
 packages/editor-ui/src/views/NodeView.vue     |  708 ++++++-----
 .../editor-ui/src/views/SettingsApiView.vue   |   25 +-
 .../src/views/SettingsCommunityNodesView.vue  |   53 +-
 .../src/views/SettingsFakeDoorView.vue        |   11 +-
 .../src/views/SettingsPersonalView.vue        |   25 +-
 .../editor-ui/src/views/SettingsUsersView.vue |   40 +-
 packages/editor-ui/src/views/SetupView.vue    |   19 +-
 packages/editor-ui/src/views/SigninView.vue   |    7 +-
 packages/editor-ui/src/views/SignupView.vue   |   28 +-
 .../src/views/TemplatesCollectionView.vue     |   17 +-
 .../src/views/TemplatesSearchView.vue         |   88 +-
 .../src/views/TemplatesWorkflowView.vue       |   11 +-
 .../editor-ui/src/views/WorkflowsView.vue     |   32 +-
 160 files changed, 5141 insertions(+), 4378 deletions(-)
 delete mode 100644 packages/editor-ui/src/modules/communityNodes.ts
 delete mode 100644 packages/editor-ui/src/modules/ndv.ts
 delete mode 100644 packages/editor-ui/src/modules/nodeTypes.ts
 delete mode 100644 packages/editor-ui/src/modules/settings.ts
 delete mode 100644 packages/editor-ui/src/modules/templates.ts
 delete mode 100644 packages/editor-ui/src/modules/ui.ts
 delete mode 100644 packages/editor-ui/src/modules/users.ts
 delete mode 100644 packages/editor-ui/src/modules/workflows.ts
 create mode 100644 packages/editor-ui/src/stores/communityNodes.ts
 create mode 100644 packages/editor-ui/src/stores/n8nRootStore.ts
 create mode 100644 packages/editor-ui/src/stores/ndv.ts
 create mode 100644 packages/editor-ui/src/stores/nodeTypes.ts
 create mode 100644 packages/editor-ui/src/stores/settings.ts
 create mode 100644 packages/editor-ui/src/stores/templates.ts
 create mode 100644 packages/editor-ui/src/stores/ui.ts
 create mode 100644 packages/editor-ui/src/stores/users.ts
 create mode 100644 packages/editor-ui/src/stores/workflows.ts

diff --git a/package-lock.json b/package-lock.json
index cbc4105f01..9e18178e79 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9090,6 +9090,11 @@
         "yallist": "^2.1.2"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
+    },
     "node_modules/@vue/eslint-config-typescript": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.2.tgz",
@@ -27057,6 +27062,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.23",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.23.tgz",
+      "integrity": "sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.4",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -35718,6 +35748,31 @@
         "tinycolor2": "^1.1.2"
       }
     },
+    "node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-docgen-api": {
       "version": "4.54.2",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.54.2.tgz",
@@ -38517,6 +38572,7 @@
         "n8n-design-system": "~0.40.0",
         "n8n-workflow": "~0.122.1",
         "normalize-wheel": "^1.0.1",
+        "pinia": "^2.0.22",
         "prismjs": "^1.17.1",
         "quill": "2.0.0-dev.4",
         "quill-autoformat": "^0.1.1",
@@ -42784,7 +42840,7 @@
             "functional-red-black-tree": "^1.0.1",
             "glob-parent": "^6.0.1",
             "globals": "^13.15.0",
-            "globby": "^11.0.2",
+            "globby": "^11.1.0",
             "grapheme-splitter": "^1.0.4",
             "ignore": "^5.2.0",
             "import-fresh": "^3.0.0",
@@ -43016,7 +43072,7 @@
         "@oclif/errors": "^1.3.6",
         "@oclif/parser": "^3.8.8",
         "debug": "^4.3.4",
-        "globby": "^11.0.2",
+        "globby": "^11.1.0",
         "is-wsl": "^2.1.1",
         "tslib": "^2.3.1"
       },
@@ -43042,10 +43098,10 @@
         "clean-stack": "^3.0.1",
         "cli-progress": "^3.10.0",
         "debug": "^4.3.4",
-        "ejs": "^3.1.8",
+        "ejs": "^3.1.6",
         "fs-extra": "^9.1.0",
         "get-package-type": "^0.1.0",
-        "globby": "^11.0.2",
+        "globby": "^11.1.0",
         "hyperlinker": "^1.0.0",
         "indent-string": "^4.0.0",
         "is-wsl": "^2.2.0",
@@ -43262,7 +43318,7 @@
             "@oclif/errors": "^1.3.3",
             "@oclif/parser": "^3.8.0",
             "debug": "^4.1.1",
-            "globby": "^11.0.2",
+            "globby": "^11.0.1",
             "is-wsl": "^2.1.1",
             "tslib": "^2.0.0"
           }
@@ -43855,7 +43911,7 @@
         "css-loader": "^3.6.0",
         "file-loader": "^6.2.0",
         "find-up": "^5.0.0",
-        "fork-ts-checker-webpack-plugin": "^6.0.4",
+        "fork-ts-checker-webpack-plugin": "^4.1.6",
         "glob": "^7.1.6",
         "glob-promise": "^3.4.0",
         "global": "^4.4.0",
@@ -45971,7 +46027,7 @@
         "@typescript-eslint/types": "5.42.0",
         "@typescript-eslint/visitor-keys": "5.42.0",
         "debug": "^4.3.4",
-        "globby": "^11.0.2",
+        "globby": "^11.1.0",
         "is-glob": "^4.0.3",
         "semver": "^7.3.7",
         "tsutils": "^3.21.0"
@@ -46249,6 +46305,11 @@
         }
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.4.5",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+      "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
+    },
     "@vue/eslint-config-typescript": {
       "version": "11.0.2",
       "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.2.tgz",
@@ -47273,7 +47334,7 @@
       "integrity": "sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.21.3",
+        "browserslist": "^4.12.0",
         "caniuse-lite": "^1.0.30001109",
         "normalize-range": "^0.1.2",
         "num2fraction": "^1.2.2",
@@ -49868,7 +49929,7 @@
       "integrity": "sha512-piOX9Go+Z4f9ZiBFLnZ5VrOpBl0h7IGCkiFUN11QTe6LjAvOT3ifL/5TdoizMh99hcGy5SoLyWbapIY/PIb/3A==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.21.3"
+        "browserslist": "^4.21.4"
       }
     },
     "core-js-pure": {
@@ -49936,7 +49997,7 @@
       "requires": {
         "arrify": "^2.0.1",
         "cp-file": "^7.0.0",
-        "globby": "^11.0.2",
+        "globby": "^9.2.0",
         "has-glob": "^1.0.0",
         "junk": "^3.1.0",
         "nested-error-stacks": "^2.1.0",
@@ -58963,6 +59024,7 @@
         "n8n-design-system": "~0.40.0",
         "n8n-workflow": "~0.122.1",
         "normalize-wheel": "^1.0.1",
+        "pinia": "^2.0.22",
         "prismjs": "^1.17.1",
         "quill": "2.0.0-dev.4",
         "quill-autoformat": "^0.1.1",
@@ -61151,6 +61213,15 @@
       "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.23",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.23.tgz",
+      "integrity": "sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.4.4",
+        "vue-demi": "*"
+      }
+    },
     "pinkie": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
@@ -61952,7 +62023,7 @@
         "fs-extra": "^6.0.1",
         "get-stream": "^5.1.0",
         "glob": "^7.1.2",
-        "globby": "^11.0.2",
+        "globby": "^10.0.1",
         "http-call": "^5.1.2",
         "load-json-file": "^6.2.0",
         "pkg-dir": "^4.2.0",
@@ -67643,7 +67714,7 @@
         "consola": "^2.15.3",
         "dotenv": "^16.0.0",
         "dotenv-expand": "^8.0.2",
-        "ejs": "^3.1.8",
+        "ejs": "^3.1.6",
         "fast-glob": "^3.2.11",
         "fs-extra": "^10.0.1",
         "html-minifier-terser": "^6.1.0",
@@ -67820,6 +67891,11 @@
         "tinycolor2": "^1.1.2"
       }
     },
+    "vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A=="
+    },
     "vue-docgen-api": {
       "version": "4.54.2",
       "resolved": "https://registry.npmjs.org/vue-docgen-api/-/vue-docgen-api-4.54.2.tgz",
diff --git a/packages/editor-ui/package.json b/packages/editor-ui/package.json
index 558b33faa6..684bbfe19d 100644
--- a/packages/editor-ui/package.json
+++ b/packages/editor-ui/package.json
@@ -57,6 +57,7 @@
     "n8n-design-system": "~0.41.0",
     "n8n-workflow": "~0.123.0",
     "normalize-wheel": "^1.0.1",
+    "pinia": "^2.0.22",
     "prismjs": "^1.17.1",
     "quill": "2.0.0-dev.4",
     "quill-autoformat": "^0.1.1",
diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index d864af4ce3..80d6b1b6a9 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -6,7 +6,7 @@
 			id="app"
 			:class="{
 				[$style.container]: true,
-				[$style.sidebarCollapsed]: sidebarMenuCollapsed
+				[$style.sidebarCollapsed]: uiStore.sidebarMenuCollapsed
 			}"
 		>
 			<div id="header" :class="$style.header">
@@ -35,11 +35,17 @@ import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from './constants';
 import mixins from 'vue-typed-mixins';
 import { showMessage } from './components/mixins/showMessage';
 import { IUser } from './Interface';
-import { mapGetters } from 'vuex';
 import { userHelpers } from './components/mixins/userHelpers';
 import { loadLanguage } from './plugins/i18n';
 import { restApi } from '@/components/mixins/restApi';
 import { globalLinkActions } from '@/components/mixins/globalLinkActions';
+import { mapStores } from 'pinia';
+import { useUIStore } from './stores/ui';
+import { useSettingsStore } from './stores/settings';
+import { useUsersStore } from './stores/users';
+import { useRootStore } from './stores/n8nRootStore';
+import { useTemplatesStore } from './stores/templates';
+import { useNodeTypesStore } from './stores/nodeTypes';
 
 export default mixins(
 	showMessage,
@@ -54,11 +60,16 @@ export default mixins(
 		Modals,
 	},
 	computed: {
-		...mapGetters('settings', ['isHiringBannerEnabled', 'isTemplatesEnabled', 'isTemplatesEndpointReachable', 'isUserManagementEnabled', 'showSetupPage']),
-		...mapGetters('users', ['currentUser']),
-		...mapGetters('ui', ['sidebarMenuCollapsed']),
+		...mapStores(
+				useNodeTypesStore,
+				useRootStore,
+				useSettingsStore,
+				useTemplatesStore,
+				useUIStore,
+				useUsersStore,
+			),
 		defaultLocale (): string {
-			return this.$store.getters.defaultLocale;
+			return this.rootStore.defaultLocale;
 		},
 	},
 	data() {
@@ -69,7 +80,7 @@ export default mixins(
 	methods: {
 		async initSettings(): Promise<void> {
 			try {
-				await this.$store.dispatch('settings/getSettings');
+				await this.settingsStore.getSettings();
 			} catch (e) {
 				this.$showToast({
 					title: this.$locale.baseText('startupError'),
@@ -81,23 +92,22 @@ export default mixins(
 				throw e;
 			}
 		},
-		async loginWithCookie(): Promise<void> {
+		loginWithCookie(): void {
 			try {
-				await this.$store.dispatch('users/loginWithCookie');
+				this.usersStore.loginWithCookie();
 			} catch (e) {}
 		},
 		async initTemplates(): Promise<void> {
-			if (!this.isTemplatesEnabled) {
+			if (!this.settingsStore.isTemplatesEnabled) {
 				return;
 			}
-
 			try {
-				await this.$store.dispatch('settings/testTemplatesEndpoint');
-			} catch (e) {
+				await this.settingsStore.testTemplatesEndpoint();
+		} catch (e) {
 			}
 		},
 		logHiringBanner() {
-			if (this.isHiringBannerEnabled && this.$route.name !== VIEWS.DEMO) {
+			if (this.settingsStore.isHiringBannerEnabled && this.$route.name !== VIEWS.DEMO) {
 				console.log(HIRING_BANNER); // eslint-disable-line no-console
 			}
 		},
@@ -105,20 +115,20 @@ export default mixins(
 			await this.initSettings();
 			await Promise.all([this.loginWithCookie(), this.initTemplates()]);
 		},
-		trackPage() {
-			this.$store.commit('ui/setCurrentView', this.$route.name);
+		trackPage(): void {
+			this.uiStore.currentView = this.$route.name || '';
 			if (this.$route && this.$route.meta && this.$route.meta.templatesEnabled) {
-				this.$store.commit('templates/setSessionId');
+				this.templatesStore.setSessionId();
 			}
 			else {
-				this.$store.commit('templates/resetSessionId'); // reset telemetry session id when user leaves template pages
+				this.templatesStore.resetSessionId(); // reset telemetry session id when user leaves template pages
 			}
 
 			this.$telemetry.page(this.$route);
 		},
 		authenticate() {
 			// redirect to setup page. user should be redirected to this only once
-			if (this.isUserManagementEnabled && this.showSetupPage) {
+			if (this.settingsStore.isUserManagementEnabled && this.settingsStore.showSetupPage) {
 				if (this.$route.name === VIEWS.SETUP) {
 					return;
 				}
@@ -132,7 +142,7 @@ export default mixins(
 			}
 
 			// if cannot access page and not logged in, ask to sign in
-			const user = this.currentUser as IUser | null;
+			const user = this.usersStore.currentUser;
 			if (!user) {
 				const redirect =
 					this.$route.query.redirect ||
@@ -154,7 +164,7 @@ export default mixins(
 			this.$router.replace({ name: VIEWS.HOMEPAGE });
 		},
 		redirectIfNecessary() {
-			const redirect = this.$route.meta && typeof this.$route.meta.getRedirect === 'function' && this.$route.meta.getRedirect(this.$store);
+			const redirect = this.$route.meta && typeof this.$route.meta.getRedirect === 'function' && this.$route.meta.getRedirect();
 			if (redirect) {
 				this.$router.replace(redirect);
 			}
@@ -176,10 +186,11 @@ export default mixins(
 		this.loading = false;
 
 		this.trackPage();
+		// TODO: Un-comment once front-end hooks are updated to work with pinia store
 		this.$externalHooks().run('app.mount');
 
 		if (this.defaultLocale !== 'en') {
-			void this.$store.dispatch('nodeTypes/getNodeTranslationHeaders');
+			await this.nodeTypesStore.getNodeTranslationHeaders();
 		}
 	},
 	watch: {
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 50ca56e3cd..03d113d93e 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -1,3 +1,4 @@
+import { IMenuItem } from 'n8n-design-system';
 import {
 	jsPlumbInstance,
 	DragOptions,
@@ -33,6 +34,7 @@ import {
 	ILoadOptions,
 	INodeCredentials,
 	INodeListSearchItems,
+	NodeParameterValueType,
 } from 'n8n-workflow';
 import { FAKE_DOOR_FEATURES } from './constants';
 
@@ -152,8 +154,8 @@ export type IJsPlumbInstance = Omit<jsPlumbInstance, 'addEndpoint' | 'draggable'
 
 export interface IUpdateInformation {
 	name: string;
-	key: string;
-	value: string | number | { [key: string]: string | number | boolean }; // with null makes problems in NodeSettings.vue
+	key?: string;
+	value: string | number | { [key: string]: string | number | boolean } | NodeParameterValueType | INodeParameters; // with null makes problems in NodeSettings.vue
 	node?: string;
 	oldValue?: string | number;
 }
@@ -887,6 +889,47 @@ export interface INodeMetadata {
 	parametersLastUpdatedAt?: number;
 }
 
+export interface WorkflowsState {
+	activeExecutions: IExecutionsCurrentSummaryExtended[];
+	activeWorkflows: string[];
+	activeWorkflowExecution: IExecutionsSummary | null;
+	currentWorkflowExecutions: IExecutionsSummary[];
+	activeExecutionId: string | null;
+	executingNode: string | null;
+	executionWaitingForWebhook: boolean;
+	finishedExecutionsCount: number;
+	nodeMetadata: NodeMetadataMap;
+	subWorkflowExecutionError: Error | null;
+	workflow: IWorkflowDb;
+	workflowExecutionData: IExecutionResponse | null;
+	workflowExecutionPairedItemMappings: {[itemId: string]: Set<string>};
+	workflowsById: IWorkflowsMap;
+}
+
+export interface RootState {
+	baseUrl: string;
+	defaultLocale: string;
+	endpointWebhook: string;
+	endpointWebhookTest: string;
+	pushConnectionActive: boolean;
+	timezone: string;
+	executionTimeout: number;
+	maxExecutionTimeout: number;
+	versionCli: string;
+	oauthCallbackUrls: object;
+	n8nMetadata: {
+		[key: string]: string | number | undefined;
+	};
+	sessionId: string;
+	urlBaseWebhook: string;
+	urlBaseEditor: string;
+	instanceId: string;
+	isNpmAvailable: boolean;
+}
+
+export interface NodeMetadataMap {
+	[nodeName: string]: INodeMetadata;
+}
 export interface IRootState {
 	activeExecutions: IExecutionsCurrentSummaryExtended[];
 	activeWorkflows: string[];
@@ -924,12 +967,12 @@ export interface IRootState {
 	workflowsById: IWorkflowsMap;
 	sidebarMenuItems: IMenuItem[];
 	instanceId: string;
-	nodeMetadata: {[nodeName: string]: INodeMetadata};
+	nodeMetadata: NodeMetadataMap;
 	isNpmAvailable: boolean;
 	subworkflowExecutionError: Error | null;
 }
 
-export interface ICommunityPackageMap {
+export interface CommunityPackageMap {
 	[name: string]: PublicInstalledPackage;
 }
 
@@ -964,6 +1007,7 @@ export interface IModalState {
 }
 
 export type IRunDataDisplayMode = 'table' | 'json' | 'binary';
+export type nodePanelType = 'input' | 'output';
 
 export interface TargetItem {
 	nodeName: string;
@@ -1023,6 +1067,37 @@ export interface IUiState {
 	executionSidebarAutoRefresh: boolean;
 }
 
+export interface UIState {
+	activeActions: string[];
+	activeCredentialType: string | null;
+	sidebarMenuCollapsed: boolean;
+	modalStack: string[];
+	modals: {
+		[key: string]: IModalState;
+	};
+	isPageLoading: boolean;
+	currentView: string;
+	mainPanelPosition: number;
+	fakeDoorFeatures: IFakeDoor[];
+	draggable: {
+		isDragging: boolean;
+		type: string;
+		data: string;
+		canDrop: boolean;
+		stickyPosition: null | XYPosition;
+	};
+	stateIsDirty: boolean;
+	lastSelectedNode: string | null;
+	lastSelectedNodeOutputIndex: number | null;
+	nodeViewOffsetPosition: XYPosition;
+	nodeViewMoveInProgress: boolean;
+	selectedNodes: INodeUi[];
+	sidebarMenuItems: IMenuItem[];
+	nodeViewInitialized: boolean;
+	addFirstStepOnLoad: boolean;
+	executionSidebarAutoRefresh: boolean;
+}
+
 export type ILogLevel = 'info' | 'debug' | 'warn' | 'error' | 'verbose';
 
 export type IFakeDoor = {
@@ -1059,6 +1134,9 @@ export interface ISettingsState {
 		path: string;
 	};
 	onboardingCallPromptEnabled: boolean;
+	saveDataErrorExecution: string;
+	saveDataSuccessExecution: string;
+	saveManualExecutions: boolean;
 }
 
 export interface INodeTypesState {
@@ -1109,11 +1187,9 @@ export interface IWorkflowsState {
 	[name: string]: IWorkflowDb;
 }
 
-export interface IWorkflowsState {}
-
-export interface ICommunityNodesState {
+export interface CommunityNodesState {
 	availablePackageCount: number;
-	installedPackages: ICommunityPackageMap;
+	installedPackages: CommunityPackageMap;
 }
 
 export interface IRestApiContext {
@@ -1149,8 +1225,8 @@ export interface IOnboardingCallPromptResponse {
 
 export interface IOnboardingCallPrompt {
 	title: string;
-	body: string;
-	index: number;
+	description: string;
+	toast_sequence_number: number;
 }
 
 export interface ITab {
@@ -1182,3 +1258,14 @@ export interface IResourceLocatorReqParams {
 export interface IResourceLocatorResultExpanded extends INodeListSearchItems {
 	linkAlt?: string;
 }
+
+export interface CurlToJSONResponse {
+	"parameters.url": string;
+	"parameters.authentication": string;
+	"parameters.method": string;
+	"parameters.sendHeaders": boolean;
+	"parameters.headerParameters.parameters.0.name": string;
+	"parameters.headerParameters.parameters.0.value": string;
+	"parameters.sendQuery": boolean;
+	"parameters.sendBody": boolean;
+}
diff --git a/packages/editor-ui/src/api/communityNodes.ts b/packages/editor-ui/src/api/communityNodes.ts
index 4fe841053d..3e2d116e01 100644
--- a/packages/editor-ui/src/api/communityNodes.ts
+++ b/packages/editor-ui/src/api/communityNodes.ts
@@ -15,6 +15,6 @@ export async function uninstallPackage(context: IRestApiContext, name: string):
 	return await makeRestApiRequest(context, 'DELETE', '/nodes', { name });
 }
 
-export async function updatePackage(context: IRestApiContext, name: string): Promise<void> {
+export async function updatePackage(context: IRestApiContext, name: string): Promise<PublicInstalledPackage> {
 	return await makeRestApiRequest(context, 'PATCH', '/nodes', { name });
 }
diff --git a/packages/editor-ui/src/api/curlHelper.ts b/packages/editor-ui/src/api/curlHelper.ts
index a0f0d98a5e..cbdd1ac6c7 100644
--- a/packages/editor-ui/src/api/curlHelper.ts
+++ b/packages/editor-ui/src/api/curlHelper.ts
@@ -1,6 +1,6 @@
-import {IRestApiContext} from "@/Interface";
+import {CurlToJSONResponse, IRestApiContext} from "@/Interface";
 import {makeRestApiRequest} from "@/api/helpers";
 
-export function getCurlToJson(context: IRestApiContext,  curlCommand: string): Promise<{ curlCommand: string | null }> {
+export function getCurlToJson(context: IRestApiContext,  curlCommand: string): Promise<CurlToJSONResponse> {
 	return makeRestApiRequest(context, 'POST', '/curl-to-json', { curlCommand });
 }
diff --git a/packages/editor-ui/src/api/settings.ts b/packages/editor-ui/src/api/settings.ts
index 0165a5356a..f7917ef9e6 100644
--- a/packages/editor-ui/src/api/settings.ts
+++ b/packages/editor-ui/src/api/settings.ts
@@ -1,4 +1,4 @@
-import { IRestApiContext, IN8nPrompts, IN8nValueSurveyData, IN8nUISettings } from '../Interface';
+import { IRestApiContext, IN8nPrompts, IN8nValueSurveyData, IN8nUISettings, IN8nPromptResponse } from '../Interface';
 import { makeRestApiRequest, get, post } from './helpers';
 import { N8N_IO_BASE_URL, NPM_COMMUNITY_NODE_SEARCH_API_URL  } from '@/constants';
 
@@ -10,11 +10,11 @@ export async function getPromptsData(instanceId: string, userId: string): Promis
 	return await get(N8N_IO_BASE_URL, '/prompts', {}, {'n8n-instance-id': instanceId, 'n8n-user-id': userId});
 }
 
-export async function submitContactInfo(instanceId: string, userId: string, email: string): Promise<void> {
+export async function submitContactInfo(instanceId: string, userId: string, email: string): Promise<IN8nPromptResponse> {
 	return await post(N8N_IO_BASE_URL, '/prompt', { email }, {'n8n-instance-id': instanceId, 'n8n-user-id': userId});
 }
 
-export async function submitValueSurvey(instanceId: string, userId: string, params: IN8nValueSurveyData): Promise<IN8nPrompts> {
+export async function submitValueSurvey(instanceId: string, userId: string, params: IN8nValueSurveyData): Promise<IN8nPromptResponse> {
 	return await post(N8N_IO_BASE_URL, '/value-survey', params, {'n8n-instance-id': instanceId, 'n8n-user-id': userId});
 }
 
diff --git a/packages/editor-ui/src/api/workflow-webhooks.ts b/packages/editor-ui/src/api/workflow-webhooks.ts
index 04176dcf5b..236d72deb6 100644
--- a/packages/editor-ui/src/api/workflow-webhooks.ts
+++ b/packages/editor-ui/src/api/workflow-webhooks.ts
@@ -1,11 +1,11 @@
-import { IOnboardingCallPromptResponse, IUser } from "@/Interface";
+import { IOnboardingCallPrompt, IOnboardingCallPromptResponse, IUser } from "@/Interface";
 import { get, post } from "./helpers";
 
 const N8N_API_BASE_URL = 'https://api.n8n.io/api';
 const ONBOARDING_PROMPTS_ENDPOINT = '/prompts/onboarding';
 const CONTACT_EMAIL_SUBMISSION_ENDPOINT = '/accounts/onboarding';
 
-export async function fetchNextOnboardingPrompt(instanceId: string, currentUer: IUser): Promise<IOnboardingCallPromptResponse> {
+export async function fetchNextOnboardingPrompt(instanceId: string, currentUer: IUser): Promise<IOnboardingCallPrompt> {
 	return await get(
 		N8N_API_BASE_URL,
 		ONBOARDING_PROMPTS_ENDPOINT,
@@ -35,7 +35,7 @@ export async function applyForOnboardingCall(instanceId: string, currentUer: IUs
 	}
 }
 
-export async function submitEmailOnSignup(instanceId: string, currentUer: IUser, email: string, agree: boolean): Promise<string> {
+export async function submitEmailOnSignup(instanceId: string, currentUer: IUser, email: string | undefined, agree: boolean): Promise<string> {
 	return await post(
 		N8N_API_BASE_URL,
 		CONTACT_EMAIL_SUBMISSION_ENDPOINT,
diff --git a/packages/editor-ui/src/components/AboutModal.vue b/packages/editor-ui/src/components/AboutModal.vue
index 8c57926878..211f4d6010 100644
--- a/packages/editor-ui/src/components/AboutModal.vue
+++ b/packages/editor-ui/src/components/AboutModal.vue
@@ -13,7 +13,7 @@
 						<n8n-text>{{ $locale.baseText('about.n8nVersion') }}</n8n-text>
 					</el-col>
 					<el-col :span="16">
-						<n8n-text>{{ versionCli }}</n8n-text>
+						<n8n-text>{{ rootStore.versionCli }}</n8n-text>
 					</el-col>
 				</el-row>
 				<el-row>
@@ -39,7 +39,7 @@
 						<n8n-text>{{ $locale.baseText('about.instanceID') }}</n8n-text>
 					</el-col>
 					<el-col :span="16">
-						<n8n-text>{{ instanceId }}</n8n-text>
+						<n8n-text>{{ rootStore.instanceId }}</n8n-text>
 					</el-col>
 				</el-row>
 			</div>
@@ -55,9 +55,11 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { mapGetters } from 'vuex';
 import Modal from './Modal.vue';
 import { ABOUT_MODAL_KEY } from '../constants';
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default Vue.extend({
 	name: 'About',
@@ -71,8 +73,10 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		...mapGetters('settings', ['versionCli']),
-		...mapGetters(['instanceId']),
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+		),
 	},
 	methods: {
 		closeDialog() {
diff --git a/packages/editor-ui/src/components/ActivationModal.vue b/packages/editor-ui/src/components/ActivationModal.vue
index 52776d7dda..000ada2e72 100644
--- a/packages/editor-ui/src/components/ActivationModal.vue
+++ b/packages/editor-ui/src/components/ActivationModal.vue
@@ -37,9 +37,13 @@
 import Vue from 'vue';
 
 import Modal from '@/components/Modal.vue';
-import { WORKFLOW_ACTIVE_MODAL_KEY, EXECUTIONS_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, LOCAL_STORAGE_ACTIVATION_FLAG, VIEWS } from '../constants';
+import { WORKFLOW_ACTIVE_MODAL_KEY, WORKFLOW_SETTINGS_MODAL_KEY, LOCAL_STORAGE_ACTIVATION_FLAG, VIEWS } from '../constants';
 import { getActivatableTriggerNodes, getTriggerNodeServiceName } from './helpers';
 import { INodeTypeDescription } from 'n8n-workflow';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default Vue.extend({
 	name: 'ActivationModal',
@@ -58,8 +62,8 @@ export default Vue.extend({
 	},
 	methods: {
 		async showExecutionsList () {
-			const activeExecution = this.$store.getters['workflows/getActiveWorkflowExecution'];
-			const currentWorkflow = this.$store.getters.workflowId;
+			const activeExecution = this.workflowsStore.activeWorkflowExecution;
+			const currentWorkflow = this.workflowsStore.workflowId;
 
 			if (activeExecution) {
 				this.$router.push({
@@ -69,10 +73,10 @@ export default Vue.extend({
 			} else {
 				this.$router.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } }).catch(() => {});
 			}
-			this.$store.commit('ui/closeModal', WORKFLOW_ACTIVE_MODAL_KEY);
+			this.uiStore.closeModal(WORKFLOW_ACTIVE_MODAL_KEY);
 		},
 		async showSettings() {
-			this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+			this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
 		},
 		handleCheckboxChange (checkboxValue: boolean) {
 			this.checked = checkboxValue;
@@ -80,8 +84,13 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
 		triggerContent (): string {
-			const foundTriggers = getActivatableTriggerNodes(this.$store.getters.workflowTriggerNodes);
+			const foundTriggers = getActivatableTriggerNodes(this.workflowsStore.workflowTriggerNodes);
 			if (!foundTriggers.length) {
 				return '';
 			}
@@ -92,27 +101,28 @@ export default Vue.extend({
 
 			const trigger = foundTriggers[0];
 
-			const triggerNodeType = this.$store.getters['nodeTypes/getNodeType'](trigger.type, trigger.typeVersion) as INodeTypeDescription;
-			if (triggerNodeType.activationMessage) {
-				return triggerNodeType.activationMessage;
-			}
+			const triggerNodeType = this.nodeTypesStore.getNodeType(trigger.type, trigger.typeVersion);
+				if (triggerNodeType) {
+					if (triggerNodeType.activationMessage) {
+						return triggerNodeType.activationMessage;
+					}
 
-			const serviceName = getTriggerNodeServiceName(triggerNodeType);
-			if (trigger.webhookId) {
-				return this.$locale.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
-					interpolate: {
-						serviceName,
-					},
-				});
-			} else if (triggerNodeType.polling) {
-				return this.$locale.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', {
-					interpolate: {
-						serviceName,
-					},
-				});
-			} else {
-				return this.$locale.baseText('activationModal.yourTriggerWillNowFire');
+				const serviceName = getTriggerNodeServiceName(triggerNodeType);
+				if (trigger.webhookId) {
+					return this.$locale.baseText('activationModal.yourWorkflowWillNowListenForEvents', {
+						interpolate: {
+							serviceName,
+						},
+					});
+				} else if (triggerNodeType.polling) {
+					return this.$locale.baseText('activationModal.yourWorkflowWillNowRegularlyCheck', {
+						interpolate: {
+							serviceName,
+						},
+					});
+				}
 			}
+			return this.$locale.baseText('activationModal.yourTriggerWillNowFire');
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue
index 0bc125b75c..2c9d63a510 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplay.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue
@@ -32,6 +32,8 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 
 import mixins from 'vue-typed-mixins';
 import { restApi } from '@/components/mixins/restApi';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export default mixins(
 	nodeHelpers,
@@ -47,6 +49,9 @@ export default mixins(
 			'windowVisible', // boolean
 		],
 		computed: {
+			...mapStores(
+				useWorkflowsStore,
+			),
 			binaryData (): IBinaryData | null {
 				const binaryData = this.getBinaryData(this.workflowRunData, this.displayData.node, this.displayData.runIndex, this.displayData.outputIndex);
 
@@ -72,12 +77,12 @@ export default mixins(
 			},
 
 			workflowRunData (): IRunData | null {
-				const workflowExecution = this.$store.getters.getWorkflowExecution;
+				const workflowExecution = this.workflowsStore.getWorkflowExecution;
 				if (workflowExecution === null) {
 					return null;
 				}
-				const executionData: IRunExecutionData = workflowExecution.data;
-				return executionData.resultData.runData;
+				const executionData = workflowExecution.data;
+				return executionData? executionData.resultData.runData : null;
 			},
 
 		},
diff --git a/packages/editor-ui/src/components/ChangePasswordModal.vue b/packages/editor-ui/src/components/ChangePasswordModal.vue
index d8a71d93b9..26a361e2a6 100644
--- a/packages/editor-ui/src/components/ChangePasswordModal.vue
+++ b/packages/editor-ui/src/components/ChangePasswordModal.vue
@@ -31,6 +31,8 @@ import Modal from "./Modal.vue";
 import Vue from "vue";
 import { IFormInputs } from "@/Interface";
 import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
+import { mapStores } from "pinia";
+import { useUsersStore } from "@/stores/users";
 
 export default mixins(showMessage).extend({
 	components: { Modal },
@@ -50,6 +52,9 @@ export default mixins(showMessage).extend({
 			CHANGE_PASSWORD_MODAL_KEY,
 		};
 	},
+	computed: {
+		...mapStores(useUsersStore),
+	},
 	mounted() {
 		this.config = [
 			{
@@ -115,7 +120,7 @@ export default mixins(showMessage).extend({
 		async onSubmit(values: {[key: string]: string}) {
 			try {
 				this.loading = true;
-				await this.$store.dispatch('users/updateCurrentUserPassword', values);
+				await this.usersStore.updateCurrentUserPassword(values);
 
 				this.$showMessage({
 					type: 'success',
diff --git a/packages/editor-ui/src/components/CodeEdit.vue b/packages/editor-ui/src/components/CodeEdit.vue
index 30aba386fd..62fee3168b 100644
--- a/packages/editor-ui/src/components/CodeEdit.vue
+++ b/packages/editor-ui/src/components/CodeEdit.vue
@@ -32,6 +32,10 @@ import {
 	PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 } from '@/constants';
 import { CodeEditor } from './forms';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useNDVStore } from '@/stores/ndv';
 
 export default mixins(
 	genericHelpers,
@@ -42,6 +46,13 @@ export default mixins(
 		CodeEditor,
 	},
 	props: ['codeAutocomplete', 'parameter', 'path', 'type', 'value', 'readonly'],
+	computed: {
+		...mapStores(
+			useNDVStore,
+			useRootStore,
+			useWorkflowsStore,
+		),
+	},
 	methods: {
 		loadAutocompleteData(): string[] {
 			if (['function', 'functionItem'].includes(this.codeAutocomplete)) {
@@ -50,16 +61,16 @@ export default mixins(
 				const mode = 'manual';
 				let runIndex = 0;
 
-				const executedWorkflow: IExecutionResponse | null = this.$store.getters.getWorkflowExecution;
+				const executedWorkflow = this.workflowsStore.getWorkflowExecution;
 				const workflow = this.getCurrentWorkflow();
-				const activeNode: INodeUi | null = this.$store.getters['ndv/activeNode'];
+				const activeNode: INodeUi | null = this.ndvStore.activeNode;
 				const parentNode = workflow.getParentNodes(activeNode!.name, inputName, 1);
 				const nodeConnection = workflow.getNodeConnectionIndexes(activeNode!.name, parentNode[0]) || {
 					sourceIndex: 0,
 					destinationIndex: 0,
 				};
 
-				const executionData = this.$store.getters.getWorkflowExecution as IExecutionResponse | null;
+				const executionData = this.workflowsStore.getWorkflowExecution;
 
 				let runExecutionData: IRunExecutionData;
 				if (!executionData || !executionData.data) {
@@ -89,7 +100,7 @@ export default mixins(
 					$resumeWebhookUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 				};
 
-				const dataProxy = new WorkflowDataProxy(workflow, runExecutionData, runIndex, itemIndex, activeNode!.name, connectionInputData || [], {}, mode, this.$store.getters.timezone, additionalProxyKeys);
+				const dataProxy = new WorkflowDataProxy(workflow, runExecutionData, runIndex, itemIndex, activeNode!.name, connectionInputData || [], {}, mode, this.rootStore.timezone, additionalProxyKeys);
 				const proxy = dataProxy.getDataProxy();
 
 				const autoCompleteItems = [
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
index 9dc2a6050e..d014afb2ab 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
+++ b/packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
@@ -17,6 +17,8 @@ import { workflowHelpers } from '../mixins/workflowHelpers'; // for json field c
 import { codeNodeEditorEventBus } from '@/event-bus/code-node-editor-event-bus';
 import { CODE_NODE_TYPE } from '@/constants';
 import { ALL_ITEMS_PLACEHOLDER, EACH_ITEM_PLACEHOLDER } from './constants';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default mixins(linterExtension, completerExtension, workflowHelpers).extend({
 	name: 'code-node-editor',
@@ -47,6 +49,9 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 		},
 	},
 	computed: {
+		...mapStores(
+			useRootStore,
+		),
 		content(): string {
 			if (!this.editor) return '';
 
@@ -119,7 +124,7 @@ export default mixins(linterExtension, completerExtension, workflowHelpers).exte
 				}
 
 				this.$telemetry.track('User autocompleted code', {
-					instance_id: this.$store.getters.instanceId,
+					instance_id: this.rootStore.instanceId,
 					node_type: CODE_NODE_TYPE,
 					field_name: this.mode === 'runOnceForAllItems' ? 'jsCodeAllItems' : 'jsCodeEachItem',
 					field_type: 'code',
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/base.completions.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/base.completions.ts
index c0d1b91564..0fd02e4439 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completions/base.completions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completions/base.completions.ts
@@ -4,6 +4,8 @@ import { addVarType } from '../utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { INodeUi } from '@/Interface';
 import type { CodeNodeEditorMixin } from '../types';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 function getAutocompletableNodeNames(nodes: INodeUi[]) {
 	return nodes
@@ -12,6 +14,11 @@ function getAutocompletableNodeNames(nodes: INodeUi[]) {
 }
 
 export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
+	computed: {
+		...mapStores(
+			useWorkflowsStore,
+		),
+	},
 	methods: {
 		/**
 		 * - Complete `$` to `$execution $input $prevNode $runIndex $workflow $now $today
@@ -58,7 +65,7 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
 			const options: Completion[] = TOP_LEVEL_COMPLETIONS_IN_BOTH_MODES.map(addVarType);
 
 			options.push(
-				...getAutocompletableNodeNames(this.$store.getters.allNodes).map((nodeName) => {
+				...getAutocompletableNodeNames(this.workflowsStore.allNodes).map((nodeName) => {
 					return {
 						label: `$('${nodeName}')`,
 						type: 'variable',
@@ -96,7 +103,7 @@ export const baseCompletions = (Vue as CodeNodeEditorMixin).extend({
 
 			if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
 
-			const options: Completion[] = getAutocompletableNodeNames(this.$store.getters.allNodes).map(
+			const options: Completion[] = getAutocompletableNodeNames(this.workflowsStore.allNodes).map(
 				(nodeName) => {
 					return {
 						label: `$('${nodeName}')`,
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts
index 949b1ae83d..0ecbd2151a 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completions/jsonField.completions.ts
@@ -3,8 +3,17 @@ import { isAllowedInDotNotation, escape, toVariableOption } from '../utils';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { IDataObject, IPinData, IRunData } from 'n8n-workflow';
 import type { CodeNodeEditorMixin } from '../types';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
 
 export const jsonFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
+	computed: {
+		...mapStores(
+			useNDVStore,
+			useWorkflowsStore,
+		),
+	},
 	methods: {
 		/**
 		 * - Complete `x.first().json.` to `.field`.
@@ -206,11 +215,13 @@ export const jsonFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
 
 		getInputNodeName() {
 			try {
-				const activeNode = this.$store.getters['ndv/activeNode'];
-				const workflow = this.getCurrentWorkflow();
-				const input = workflow.connectionsByDestinationNode[activeNode.name];
+				const activeNode = this.ndvStore.activeNode;
+				if (activeNode) {
+					const workflow = this.getCurrentWorkflow();
+					const input = workflow.connectionsByDestinationNode[activeNode.name];
 
-				return input.main[0][0].node;
+					return input.main[0][0].node;
+				}
 			} catch (_) {
 				return null;
 			}
@@ -263,7 +274,7 @@ export const jsonFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
 		getJsonOutput(quotedNodeName: string, options?: { accessor?: string; index?: number }) {
 			const nodeName = quotedNodeName.replace(/['"]/g, '');
 
-			const pinData: IPinData | undefined = this.$store.getters.pinData;
+			const pinData: IPinData | undefined = this.workflowsStore.getPinData;
 
 			const nodePinData = pinData && pinData[nodeName];
 
@@ -279,7 +290,7 @@ export const jsonFieldCompletions = (Vue as CodeNodeEditorMixin).extend({
 				} catch (_) {}
 			}
 
-			const runData: IRunData | null = this.$store.getters.getWorkflowRunData;
+			const runData: IRunData | null = this.workflowsStore.getWorkflowRunData;
 
 			const nodeRunData = runData && runData[nodeName];
 
diff --git a/packages/editor-ui/src/components/CodeNodeEditor/completions/require.completions.ts b/packages/editor-ui/src/components/CodeNodeEditor/completions/require.completions.ts
index ae104c57d9..c9cccc174f 100644
--- a/packages/editor-ui/src/components/CodeNodeEditor/completions/require.completions.ts
+++ b/packages/editor-ui/src/components/CodeNodeEditor/completions/require.completions.ts
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { AUTOCOMPLETABLE_BUILT_IN_MODULES } from '../constants';
 import type { Completion, CompletionContext, CompletionResult } from '@codemirror/autocomplete';
 import type { CodeNodeEditorMixin } from '../types';
+import { useSettingsStore } from '@/stores/settings';
 
 export const requireCompletions = (Vue as CodeNodeEditorMixin).extend({
 	methods: {
@@ -14,22 +15,26 @@ export const requireCompletions = (Vue as CodeNodeEditorMixin).extend({
 			if (!preCursor || (preCursor.from === preCursor.to && !context.explicit)) return null;
 
 			const options: Completion[] = [];
-
-			const allowedModules = this.$store.getters['settings/allowedModules'];
+			const settingsStore = useSettingsStore();
+			const allowedModules = settingsStore.allowedModules;
 
 			const toOption = (moduleName: string) => ({
 				label: `require('${moduleName}');`,
 				type: 'variable',
 			});
 
-			if (allowedModules?.builtIn?.includes('*')) {
-				options.push(...AUTOCOMPLETABLE_BUILT_IN_MODULES.map(toOption));
-			} else if (allowedModules?.builtIn?.length > 0) {
-				options.push(...allowedModules.builtIn.map(toOption));
+			if (allowedModules.builtIn) {
+				if (allowedModules.builtIn.includes('*')) {
+					options.push(...AUTOCOMPLETABLE_BUILT_IN_MODULES.map(toOption));
+				} else if (allowedModules?.builtIn?.length > 0) {
+					options.push(...allowedModules.builtIn.map(toOption));
+				}
 			}
 
-			if (allowedModules?.external?.length > 0) {
-				options.push(...allowedModules.external.map(toOption));
+			if (allowedModules.external) {
+				if (allowedModules?.external?.length > 0) {
+					options.push(...allowedModules.external.map(toOption));
+				}
 			}
 
 			return {
diff --git a/packages/editor-ui/src/components/CollectionParameter.vue b/packages/editor-ui/src/components/CollectionParameter.vue
index 1832e2f0f0..ebc87dcfcf 100644
--- a/packages/editor-ui/src/components/CollectionParameter.vue
+++ b/packages/editor-ui/src/components/CollectionParameter.vue
@@ -49,6 +49,8 @@ import { get } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
 import {Component} from "vue";
+import { mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv';
 
 export default mixins(
 	nodeHelpers,
@@ -72,6 +74,9 @@ export default mixins(
 			};
 		},
 		computed: {
+			...mapStores(
+				useNDVStore,
+			),
 			getPlaceholderText (): string {
 				const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
 				return placeholder ? placeholder : this.$locale.baseText('collectionParameter.choose');
@@ -93,8 +98,8 @@ export default mixins(
 					return this.displayNodeParameter(option as INodeProperties);
 				});
 			},
-			node (): INodeUi {
-				return this.$store.getters['ndv/activeNode'];
+			node (): INodeUi | null {
+				return this.ndvStore.activeNode;
 			},
 			// Returns all the options which did not get added already
 			parameterOptions (): Array<INodePropertyOptions | INodeProperties> {
diff --git a/packages/editor-ui/src/components/CommunityPackageCard.vue b/packages/editor-ui/src/components/CommunityPackageCard.vue
index 2ff205016b..6a4ca080e8 100644
--- a/packages/editor-ui/src/components/CommunityPackageCard.vue
+++ b/packages/editor-ui/src/components/CommunityPackageCard.vue
@@ -55,7 +55,9 @@
 </template>
 
 <script lang="ts">
+import { useUIStore } from '@/stores/ui';
 import { PublicInstalledPackage } from 'n8n-workflow';
+import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
 import {
 	NPM_PACKAGE_DOCS_BASE_URL,
@@ -91,6 +93,9 @@ export default mixins(
 			],
 		};
 	},
+	computed: {
+		...mapStores(useUIStore),
+	},
 	methods: {
 		async onAction(value: string) {
 			switch (value) {
@@ -102,14 +107,14 @@ export default mixins(
 					window.open(`${NPM_PACKAGE_DOCS_BASE_URL}${this.communityPackage.packageName}`, '_blank');
 					break;
 				case COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL:
-					this.$store.dispatch('ui/openCommunityPackageUninstallConfirmModal', this.communityPackage.packageName);
+					this.uiStore.openCommunityPackageUninstallConfirmModal(this.communityPackage.packageName);
 					break;
 				default:
 					break;
 			}
 		},
 		onUpdateClick() {
-			this.$store.dispatch('ui/openCommunityPackageUpdateConfirmModal', this.communityPackage.packageName);
+			this.uiStore.openCommunityPackageUpdateConfirmModal(this.communityPackage.packageName);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
index 6d97457118..bcc6fa7d1f 100644
--- a/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageInstallModal.vue
@@ -92,6 +92,8 @@ import {
 } from '../constants';
 import mixins from 'vue-typed-mixins';
 import { showMessage } from './mixins/showMessage';
+import { mapStores } from 'pinia';
+import { useCommunityNodesStore } from '@/stores/communityNodes';
 
 export default mixins(
 	showMessage,
@@ -114,6 +116,9 @@ export default mixins(
 			COMMUNITY_NODES_RISKS_DOCS_URL,
 		};
 	},
+	computed: {
+		...mapStores(useCommunityNodesStore),
+	},
 	methods: {
 		openNPMPage() {
 			this.$telemetry.track('user clicked cnr browse button', { source: 'cnr install modal' });
@@ -127,9 +132,9 @@ export default mixins(
 					this.$telemetry.track('user started cnr package install', { input_string: this.packageName, source: 'cnr settings page' });
 					this.infoTextErrorMessage = '';
 					this.loading = true;
-					await this.$store.dispatch('communityNodes/installPackage', this.packageName);
+					await this.communityNodesStore.installPackage(this.packageName);
 					// TODO: We need to fetch a fresh list of installed packages until proper response is implemented on the back-end
-					await this.$store.dispatch('communityNodes/fetchInstalledPackages');
+					await this.communityNodesStore.fetchInstalledPackages();
 					this.loading = false;
 					this.modalBus.$emit('close');
 					this.$showMessage({
diff --git a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
index dad324648d..b910b6d647 100644
--- a/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
+++ b/packages/editor-ui/src/components/CommunityPackageManageConfirmModal.vue
@@ -37,6 +37,8 @@ import mixins from 'vue-typed-mixins';
 import Modal from './Modal.vue';
 import { COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '../constants';
 import { showMessage } from './mixins/showMessage';
+import { mapStores } from 'pinia';
+import { useCommunityNodesStore } from '@/stores/communityNodes';
 
 export default mixins(showMessage).extend({
 	name: 'CommunityPackageManageConfirmModal',
@@ -65,8 +67,9 @@ export default mixins(showMessage).extend({
 		};
 	},
 	computed: {
+		...mapStores(useCommunityNodesStore),
 		activePackage() {
-			return this.$store.getters['communityNodes/getInstalledPackageByName'](this.activePackageName);
+			return this.communityNodesStore.getInstalledPackageByName(this.activePackageName);
 		},
 		getModalContent() {
 			if (this.mode === COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL) {
@@ -120,7 +123,7 @@ export default mixins(showMessage).extend({
 					package_author_email: this.activePackage.authorEmail,
 				});
 				this.loading = true;
-				await this.$store.dispatch('communityNodes/uninstallPackage', this.activePackageName);
+				await this.communityNodesStore.uninstallPackage(this.activePackageName);
 				this.$showMessage({
 					title: this.$locale.baseText('settings.communityNodes.messages.uninstall.success.title'),
 					type: 'success',
@@ -144,7 +147,7 @@ export default mixins(showMessage).extend({
 				});
 				this.loading = true;
 				const updatedVersion = this.activePackage.updateAvailable;
-				await this.$store.dispatch('communityNodes/updatePackage', this.activePackageName);
+				await this.communityNodesStore.updatePackage(this.activePackageName);
 				this.$showMessage({
 					title: this.$locale.baseText('settings.communityNodes.messages.update.success.title'),
 					message: this.$locale.baseText('settings.communityNodes.messages.update.success.message', {
diff --git a/packages/editor-ui/src/components/ContactPromptModal.vue b/packages/editor-ui/src/components/ContactPromptModal.vue
index afae4b59aa..208694187c 100644
--- a/packages/editor-ui/src/components/ContactPromptModal.vue
+++ b/packages/editor-ui/src/components/ContactPromptModal.vue
@@ -35,12 +35,14 @@
 <script lang="ts">
 import Vue from 'vue';
 import mixins from 'vue-typed-mixins';
-import { mapGetters } from 'vuex';
 
 import { IN8nPromptResponse } from '@/Interface';
 import { VALID_EMAIL_REGEX } from '@/constants';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import Modal from './Modal.vue';
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default mixins(workflowHelpers).extend({
 	components: { Modal },
@@ -53,19 +55,20 @@ export default mixins(workflowHelpers).extend({
 		};
 	},
 	computed: {
-		...mapGetters({
-			promptsData: 'settings/getPromptsData',
-		}),
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+		),
 		title(): string {
-			if (this.promptsData && this.promptsData.title) {
-				return this.promptsData.title;
+			if (this.settingsStore.promptsData && this.settingsStore.promptsData.title) {
+				return this.settingsStore.promptsData.title;
 			}
 
 			return 'You’re a power user 💪';
 		},
 		description(): string {
-			if (this.promptsData && this.promptsData.message) {
-				return this.promptsData.message;
+			if (this.settingsStore.promptsData && this.settingsStore.promptsData.message) {
+				return this.settingsStore.promptsData.message;
 			}
 
 			return 'Your experience with n8n can help us improve — for you and our entire community.';
@@ -78,21 +81,18 @@ export default mixins(workflowHelpers).extend({
 		closeDialog(): void {
 			if (!this.isEmailValid) {
 				this.$telemetry.track('User closed email modal', {
-					instance_id: this.$store.getters.instanceId,
+					instance_id: this.rootStore.instanceId,
 					email: null,
 				});
 			}
 		},
 		async send() {
 			if (this.isEmailValid) {
-				const response: IN8nPromptResponse = await this.$store.dispatch(
-					'settings/submitContactInfo',
-					this.email,
-				);
+				const response = await this.settingsStore.submitContactInfo(this.email) as IN8nPromptResponse;
 
 				if (response.updated) {
 					this.$telemetry.track('User closed email modal', {
-						instance_id: this.$store.getters.instanceId,
+						instance_id: this.rootStore.instanceId,
 						email: this.email,
 					});
 					this.$showMessage({
diff --git a/packages/editor-ui/src/components/CredentialCard.vue b/packages/editor-ui/src/components/CredentialCard.vue
index f138e22b71..0f593172aa 100644
--- a/packages/editor-ui/src/components/CredentialCard.vue
+++ b/packages/editor-ui/src/components/CredentialCard.vue
@@ -46,8 +46,10 @@ import {EnterpriseEditionFeature} from '@/constants';
 import {showMessage} from "@/components/mixins/showMessage";
 import CredentialIcon from '@/components/CredentialIcon.vue';
 import {getCredentialPermissions, IPermissions} from "@/permissions";
-import {mapGetters} from "vuex";
 import dateformat from "dateformat";
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useUsersStore } from '@/stores/users';
 
 export const CREDENTIAL_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
@@ -86,8 +88,12 @@ export default mixins(
 		},
 	},
 	computed: {
+		...mapStores(
+			useUIStore,
+			useUsersStore,
+		),
 		currentUser (): IUser {
-			return this.$store.getters['users/currentUser'];
+			return this.usersStore.currentUser || {} as IUser;
 		},
 		credentialType(): ICredentialType {
 			return this.$store.getters['credentials/getCredentialTypeByName'](this.data.type);
@@ -114,7 +120,7 @@ export default mixins(
 	},
 	methods: {
 		async onClick() {
-			this.$store.dispatch('ui/openExistingCredential', { id: this.data.id});
+			this.uiStore.openExistingCredential(this.data.id);
 		},
 		async onAction(action: string) {
 			if (action === CREDENTIAL_LIST_ITEM_ACTIONS.OPEN) {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index 8fd637d3ba..70da5ade5b 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -102,6 +102,11 @@ import { addCredentialTranslation } from '@/plugins/i18n';
 import mixins from 'vue-typed-mixins';
 import { BUILTIN_CREDENTIALS_DOCS_URL, EnterpriseEditionFeature } from '@/constants';
 import { IPermissions } from "@/permissions";
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useNDVStore } from '@/stores/ndv';
 
 export default mixins(restApi).extend({
 	name: 'CredentialConfig',
@@ -160,9 +165,9 @@ export default mixins(restApi).extend({
 		};
 	},
 	async beforeMount() {
-		if (this.$store.getters.defaultLocale === 'en') return;
+		if (this.rootStore.defaultLocale === 'en') return;
 
-		this.$store.commit('setActiveCredentialType', this.credentialType.name);
+		this.uiStore.activeCredentialType = this.credentialType.name;
 
 		const key = `n8n-nodes-base.credentials.${this.credentialType.name}`;
 
@@ -172,10 +177,16 @@ export default mixins(restApi).extend({
 
 		addCredentialTranslation(
 			{ [this.credentialType.name]: credTranslation },
-			this.$store.getters.defaultLocale,
+			this.rootStore.defaultLocale,
 		);
 	},
 	computed: {
+		...mapStores(
+			useNDVStore,
+			useRootStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
 		appName(): string {
 			if (!this.credentialType) {
 				return '';
@@ -195,7 +206,7 @@ export default mixins(restApi).extend({
 		},
 		documentationUrl(): string {
 			const type = this.credentialType as ICredentialType;
-			const activeNode = this.$store.getters['ndv/activeNode'];
+			const activeNode = this.ndvStore.activeNode;
 			const isCommunityNode = activeNode ? isCommunityPackageName(activeNode.type) : false;
 
 			if (!type || !type.documentationUrl) {
@@ -219,7 +230,7 @@ export default mixins(restApi).extend({
 				this.parentTypes.includes('oAuth2Api')
 					? 'oauth2'
 					: 'oauth1';
-			return this.$store.getters.oauthCallbackUrls[oauthType];
+			return this.rootStore.oauthCallbackUrls[oauthType as keyof {}];
 		},
 		showOAuthSuccessBanner(): boolean {
 			return this.isOAuthType && this.requiredPropertiesFilled && this.isOAuthConnected && !this.authError;
@@ -234,7 +245,7 @@ export default mixins(restApi).extend({
 				docs_link: this.documentationUrl,
 				credential_type: this.credentialTypeName,
 				source: 'modal',
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 			});
 		},
 	},
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
index 2619b6d323..87690a47e7 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -109,6 +109,7 @@ import {
 	ICredentialsDecryptedResponse,
 	ICredentialsResponse,
 	IFakeDoor,
+	IUser,
 } from '@/Interface';
 
 import {
@@ -123,7 +124,6 @@ import {
 	INodeProperties,
 	INodeTypeDescription,
 	ITelemetryTrackProperties,
-	IUser,
 	NodeHelpers,
 } from 'n8n-workflow';
 import CredentialIcon from '../CredentialIcon.vue';
@@ -141,10 +141,15 @@ import InlineNameEdit from '../InlineNameEdit.vue';
 import {EnterpriseEditionFeature} from "@/constants";
 import {IDataObject} from "n8n-workflow";
 import FeatureComingSoon from '../FeatureComingSoon.vue';
-import {mapGetters} from "vuex";
 import {getCredentialPermissions, IPermissions} from "@/permissions";
 import { IMenuItem } from 'n8n-design-system';
 import { BaseTextKey } from '@/plugins/i18n';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
 
 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
@@ -236,7 +241,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		this.$externalHooks().run('credentialsEdit.credentialModalOpened', {
 			credentialType: this.credentialTypeName,
 			isEditingCredential: this.mode === 'edit',
-			activeNode: this.$store.getters['ndv/activeNode'],
+			activeNode: this.ndvStore.activeNode,
 		});
 
 		setTimeout(() => {
@@ -253,7 +258,16 @@ export default mixins(showMessage, nodeHelpers).extend({
 		this.loading = false;
 	},
 	computed: {
-		...mapGetters('users', ['currentUser']),
+		...mapStores(
+				useNDVStore,
+				useSettingsStore,
+				useUIStore,
+				useUsersStore,
+				useWorkflowsStore,
+			),
+		currentUser(): IUser {
+			return this.usersStore.currentUser || {} as IUser;
+		},
 		currentCredential(): ICredentialsResponse | null {
 			if (!this.credentialId) {
 				return null;
@@ -387,7 +401,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			return true;
 		},
 		credentialsFakeDoorFeatures(): IFakeDoor[] {
-			return this.$store.getters['ui/getFakeDoorByLocation']('credentialsModal');
+			return this.uiStore.getFakeDoorByLocation('credentialsModal');
 		},
 		credentialPermissions(): IPermissions {
 			if (this.loading) {
@@ -431,7 +445,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return items;
 		},
 		isSharingAvailable(): boolean {
-			return this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing) === true;
+			return this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing);
 		},
 	},
 	methods: {
@@ -561,13 +575,13 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.activeTab = tab;
 			const tabName: string = tab.replaceAll('coming-soon/', '');
 			const credType: string = this.credentialType ? this.credentialType.name : '';
-			const activeNode: INode | null = this.$store.getters['ndv/activeNode'];
+			const activeNode: INode | null = this.ndvStore.activeNode;
 
 			this.$telemetry.track('User viewed credential tab', {
 				credential_type: credType,
 				node_type: activeNode ? activeNode.type : null,
 				tab: tabName,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 				credential_id: this.credentialId,
 				sharing_enabled: EnterpriseEditionFeature.Sharing,
 			});
@@ -715,7 +729,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			let sharedWith: IUser[] | undefined;
 			let ownedBy: IUser | undefined;
-			if (this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
+			if (this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
 				sharedWith = this.credentialData.sharedWith as unknown as IUser[];
 				ownedBy = this.credentialData.ownedBy as unknown as IUser;
 			}
@@ -765,7 +779,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 				const trackProperties: ITelemetryTrackProperties = {
 					credential_type: credentialDetails.type,
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					credential_id: credential.id,
 					is_complete: !!this.requiredPropertiesFilled,
 					is_new: isNewCredential,
@@ -777,8 +791,8 @@ export default mixins(showMessage, nodeHelpers).extend({
 					trackProperties.is_valid = !!this.testedSuccessfully;
 				}
 
-				if (this.$store.getters['ndv/activeNode']) {
-					trackProperties.node_type = this.$store.getters['ndv/activeNode'].type;
+				if (this.ndvStore.activeNode) {
+					trackProperties.node_type = this.ndvStore.activeNode.type;
 				}
 
 				if (this.authError && this.authError !== '') {
@@ -821,7 +835,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.$telemetry.track('User created credentials', {
 				credential_type: credentialDetails.type,
 				credential_id: credential.id,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 			});
 
 			return credential;
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
index 15a12970d8..d8575f548c 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue
@@ -15,7 +15,7 @@
 			v-if="credentialPermissions.updateSharing"
 			size="large"
 			:users="usersList"
-			:currentUserId="currentUser.id"
+			:currentUserId="usersStore.currentUser.id"
 			:placeholder="$locale.baseText('credentialEdit.credentialSharing.select.placeholder')"
 			@input="onAddSharee"
 		>
@@ -25,7 +25,7 @@
 		</n8n-user-select>
 		<n8n-users-list
 			:users="sharedWithList"
-			:currentUserId="currentUser.id"
+			:currentUserId="usersStore.currentUser.id"
 			:delete-label="$locale.baseText('credentialEdit.credentialSharing.list.delete')"
 			:readonly="!credentialPermissions.updateSharing"
 			@delete="onRemoveSharee"
@@ -34,11 +34,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import { mapGetters } from 'vuex';
 import {IUser} from "@/Interface";
 import mixins from "vue-typed-mixins";
 import {showMessage} from "@/components/mixins/showMessage";
+import { mapStores } from 'pinia';
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(
 	showMessage,
@@ -46,10 +46,10 @@ export default mixins(
 	name: 'CredentialSharing',
 	props: ['credential', 'credentialId', 'credentialData', 'sharedWith', 'credentialPermissions'],
 	computed: {
-		...mapGetters('users', ['allUsers', 'currentUser']),
+		...mapStores(useUsersStore),
 		usersList(): IUser[] {
-			return this.allUsers.filter((user: IUser) => {
-				const isCurrentUser = user.id === this.currentUser.id;
+			return this.usersStore.allUsers.filter((user: IUser) => {
+				const isCurrentUser = user.id === this.usersStore.currentUser?.id;
 				const isAlreadySharedWithUser = (this.credentialData.sharedWith || []).find((sharee: IUser) => sharee.id === user.id);
 
 				return !isCurrentUser && !isAlreadySharedWithUser;
@@ -58,7 +58,7 @@ export default mixins(
 		sharedWithList(): IUser[] {
 			return [
 				{
-					...(this.credential ? this.credential.ownedBy : this.currentUser),
+					...(this.credential ? this.credential.ownedBy : this.usersStore.currentUser),
 					isOwner: true,
 				},
 			].concat(this.credentialData.sharedWith || []);
@@ -69,30 +69,30 @@ export default mixins(
 	},
 	methods: {
 		async onAddSharee(userId: string) {
-			const { id, firstName, lastName, email } = this.$store.getters['users/getUserById'](userId);
-			const sharee = { id, firstName, lastName, email };
-
+			const sharee =  this.usersStore.getUserById(userId);
 			this.$emit('change', (this.credentialData.sharedWith || []).concat(sharee));
 		},
 		async onRemoveSharee(userId: string) {
-			const user = this.$store.getters['users/getUserById'](userId);
+			const user = this.usersStore.getUserById(userId);
 
-			const confirm = await this.confirmMessage(
-				this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.message', { interpolate: { name: user.fullName } }),
-				this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.title'),
-				null,
-				this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.confirmButtonText'),
-				this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.cancelButtonText'),
-			);
+			if (user) {
+				const confirm = await this.confirmMessage(
+					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.message', { interpolate: { name: user.fullName || '' } }),
+					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.title'),
+					null,
+					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.confirmButtonText'),
+					this.$locale.baseText('credentialEdit.credentialSharing.list.delete.confirm.cancelButtonText'),
+				);
 
-			if (confirm) {
-				this.$emit('change', this.credentialData.sharedWith.filter((sharee: IUser) => {
-					return sharee.id !== user.id;
-				}));
+				if (confirm) {
+					this.$emit('change', this.credentialData.sharedWith.filter((sharee: IUser) => {
+						return sharee.id !== user.id;
+					}));
+				}
 			}
 		},
 		async loadUsers() {
-			await this.$store.dispatch('users/fetchUsers');
+			await this.usersStore.fetchUsers();
 		},
 	},
 	mounted() {
diff --git a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
index aa0b81b514..e64137caf6 100644
--- a/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/OauthButton.vue
@@ -17,6 +17,8 @@
 </template>
 
 <script lang="ts">
+import { useRootStore } from '@/stores/n8nRootStore';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 import mixins from 'vue-typed-mixins';
 
@@ -27,8 +29,11 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useRootStore,
+		),
 		basePath(): string {
-			return this.$store.getters.getBaseUrl;
+			return this.rootStore.baseUrl;
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/CredentialIcon.vue b/packages/editor-ui/src/components/CredentialIcon.vue
index 491c2d6ea4..084c311873 100644
--- a/packages/editor-ui/src/components/CredentialIcon.vue
+++ b/packages/editor-ui/src/components/CredentialIcon.vue
@@ -7,7 +7,10 @@
 </template>
 
 <script lang="ts">
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 
 export default Vue.extend({
@@ -17,6 +20,10 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useRootStore,
+		),
 		credentialWithIcon(): ICredentialType | null {
 			return this.credentialTypeName ? this.getCredentialWithIcon(this.credentialTypeName) : null;
 		},
@@ -26,15 +33,14 @@ export default Vue.extend({
 				return null;
 			}
 
-			const restUrl = this.$store.getters.getRestUrl;
+			const restUrl = this.rootStore.getRestUrl;
 
 			return `${restUrl}/credential-icon/${this.credentialWithIcon.name}`;
 		},
 		relevantNode(): INodeTypeDescription | null	 {
 			if (this.credentialWithIcon && this.credentialWithIcon.icon && this.credentialWithIcon.icon.startsWith('node:')) {
 				const nodeType = this.credentialWithIcon.icon.replace('node:', '');
-
-				return this.$store.getters['nodeTypes/getNodeType'](nodeType);
+				return this.nodeTypesStore.getNodeType(nodeType);
 			}
 
 			const nodesWithAccess = this.$store.getters['credentials/getNodesWithAccess'](this.credentialTypeName);
diff --git a/packages/editor-ui/src/components/CredentialsSelectModal.vue b/packages/editor-ui/src/components/CredentialsSelectModal.vue
index b8e68f59c8..44cdf6323b 100644
--- a/packages/editor-ui/src/components/CredentialsSelectModal.vue
+++ b/packages/editor-ui/src/components/CredentialsSelectModal.vue
@@ -56,6 +56,9 @@ import mixins from 'vue-typed-mixins';
 import Modal from './Modal.vue';
 import { CREDENTIAL_SELECT_MODAL_KEY } from '../constants';
 import { externalHooks } from '@/components/mixins/externalHooks';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export default mixins(externalHooks).extend({
 	name: 'CredentialsSelectModal',
@@ -85,6 +88,10 @@ export default mixins(externalHooks).extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useUIStore,
+			useWorkflowsStore,
+		),
 		...mapGetters('credentials', ['allCredentialTypes']),
 	},
 	methods: {
@@ -93,13 +100,13 @@ export default mixins(externalHooks).extend({
 		},
 		openCredentialType () {
 			this.modalBus.$emit('close');
-			this.$store.dispatch('ui/openNewCredential', { type: this.selected });
+			this.uiStore.openNewCredential(this.selected);
 
 			const telemetryPayload = {
 				credential_type: this.selected,
 				source: 'primary_menu',
 				new_credential: true,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 			};
 
 			this.$telemetry.track('User opened Credential modal', telemetryPayload);
diff --git a/packages/editor-ui/src/components/DeleteUserModal.vue b/packages/editor-ui/src/components/DeleteUserModal.vue
index adbae07c12..0b02ccf03c 100644
--- a/packages/editor-ui/src/components/DeleteUserModal.vue
+++ b/packages/editor-ui/src/components/DeleteUserModal.vue
@@ -20,10 +20,10 @@
 					<div :class="$style.optionInput" v-if="operation === 'transfer'">
 						<n8n-input-label :label="$locale.baseText('settings.users.userToTransferTo')">
 							<n8n-user-select
-								:users="allUsers"
+								:users="usersStore.allUsers"
 								:value="transferId"
 								:ignoreIds="ignoreIds"
-								:currentUserId="currentUserId"
+								:currentUserId="usersStore.currentUserId"
 								@input="setTransferId"
 							/>
 						</n8n-input-label>
@@ -53,7 +53,8 @@ import { showMessage } from "@/components/mixins/showMessage";
 import Modal from "./Modal.vue";
 import Vue from "vue";
 import { IUser } from "../Interface";
-import { mapGetters } from "vuex";
+import { mapStores } from "pinia";
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(showMessage).extend({
 	components: {
@@ -79,13 +80,12 @@ export default mixins(showMessage).extend({
 		};
 	},
 	computed: {
-		...mapGetters('users', ['allUsers', 'currentUserId']),
-		userToDelete(): IUser {
-			const getUserById = this.$store.getters['users/getUserById'];
-			return getUserById(this.activeId);
+		...mapStores(useUsersStore),
+		userToDelete(): IUser | null {
+			return this.usersStore.getUserById(this.activeId);
 		},
 		isPending(): boolean {
-			return this.userToDelete && !this.userToDelete.firstName;
+			return this.userToDelete ? this.userToDelete && !this.userToDelete.firstName : false;
 		},
 		title(): string {
 			const user = this.userToDelete && (this.userToDelete.fullName || this.userToDelete.email) || '';
@@ -133,16 +133,17 @@ export default mixins(showMessage).extend({
 					params.transferId = this.transferId;
 				}
 
-				await this.$store.dispatch('users/deleteUser', params);
+				await this.usersStore.deleteUser(params);
 
 				let message = '';
 				if (this.transferId) {
-					const getUserById = this.$store.getters['users/getUserById'];
-					const transferUser: IUser = getUserById(this.transferId);
-					message = this.$locale.baseText(
-						'settings.users.transferredToUser',
-						{ interpolate: { user: transferUser.fullName || '' }},
-					);
+					const transferUser: IUser | null = this.usersStore.getUserById(this.transferId);
+					if (transferUser) {
+						message = this.$locale.baseText(
+							'settings.users.transferredToUser',
+							{ interpolate: { user: transferUser.fullName || '' }},
+						);
+					}
 				}
 
 				this.$showMessage({
diff --git a/packages/editor-ui/src/components/Draggable.vue b/packages/editor-ui/src/components/Draggable.vue
index da82788e3f..33405f7ca0 100644
--- a/packages/editor-ui/src/components/Draggable.vue
+++ b/packages/editor-ui/src/components/Draggable.vue
@@ -21,6 +21,8 @@
 
 <script lang="ts">
 import { XYPosition } from '@/Interface';
+import { useNDVStore } from '@/stores/ndv';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 
 // @ts-ignore
@@ -66,11 +68,14 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useNDVStore,
+		),
 		canDrop(): boolean {
-			return this.$store.getters['ndv/canDraggableDrop'];
+			return this.ndvStore.canDraggableDrop;
 		},
 		stickyPosition(): XYPosition | null {
-			return this.$store.getters['ndv/draggableStickyPos'];
+			return this.ndvStore.draggableStickyPos;
 		},
 	},
 	methods: {
@@ -111,7 +116,7 @@ export default Vue.extend({
 				this.isDragging = true;
 
 				const data = this.targetDataKey && this.draggingEl ? this.draggingEl.dataset.value : (this.data || '');
-				this.$store.commit('ndv/draggableStartDragging', {type: this.type, data });
+				this.ndvStore.draggableStartDragging({type: this.type, data: data || '' });
 
 				this.$emit('dragstart', this.draggingEl);
 				document.body.style.cursor = 'grabbing';
@@ -141,7 +146,7 @@ export default Vue.extend({
 				this.$emit('dragend', this.draggingEl);
 				this.isDragging = false;
 				this.draggingEl = null;
-				this.$store.commit('ndv/draggableStopDragging');
+				this.ndvStore.draggableStopDragging();
 			}, 0);
 		},
 	},
diff --git a/packages/editor-ui/src/components/DraggableTarget.vue b/packages/editor-ui/src/components/DraggableTarget.vue
index 46c0bdcf52..c2762cc92d 100644
--- a/packages/editor-ui/src/components/DraggableTarget.vue
+++ b/packages/editor-ui/src/components/DraggableTarget.vue
@@ -5,6 +5,8 @@
 </template>
 
 <script lang="ts">
+import { useNDVStore } from '@/stores/ndv';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 
 export default Vue.extend({
@@ -37,11 +39,14 @@ export default Vue.extend({
 		window.removeEventListener('mouseup', this.onMouseUp);
 	},
 	computed: {
+		...mapStores(
+			useNDVStore,
+		),
 		isDragging(): boolean {
-			return this.$store.getters['ndv/isDraggableDragging'];
+			return this.ndvStore.isDraggableDragging;
 		},
 		draggableType(): string {
-			return this.$store.getters['ndv/draggableType'];
+			return this.ndvStore.draggableType;
 		},
 		droppable(): boolean {
 			return !this.disabled && this.isDragging && this.draggableType === this.type;
@@ -60,20 +65,20 @@ export default Vue.extend({
 				this.hovering = e.clientX >= dim.left && e.clientX <= dim.right && e.clientY >= dim.top && e.clientY <= dim.bottom;
 
 				if (!this.disabled && this.sticky && this.hovering) {
-					this.$store.commit('ndv/setDraggableStickyPos', [dim.left + this.stickyOffset, dim.top + this.stickyOffset]);
+					this.ndvStore.setDraggableStickyPos([dim.left + this.stickyOffset, dim.top + this.stickyOffset]);
 				}
 			}
 		},
 		onMouseUp(e: MouseEvent) {
 			if (this.activeDrop) {
-				const data = this.$store.getters['ndv/draggableData'];
+				const data = this.ndvStore.draggableData;
 				this.$emit('drop', data);
 			}
 		},
 	},
 	watch: {
 		activeDrop(active) {
-			this.$store.commit('ndv/setDraggableCanDrop', active);
+			this.ndvStore.setDraggableCanDrop(active);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index 054422c4d9..9c1ef33c57 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -16,7 +16,7 @@
 					:maxlength="MAX_WORKFLOW_NAME_LENGTH"
 				/>
 				<TagsDropdown
-					v-if="areTagsEnabled"
+					v-if="settingsStore.areTagsEnabled"
 					:createEnabled="true"
 					:currentTagIds="currentTagIds"
 					:eventBus="dropdownBus"
@@ -46,9 +46,10 @@ import { workflowHelpers } from "@/components/mixins/workflowHelpers";
 import { showMessage } from "@/components/mixins/showMessage";
 import TagsDropdown from "@/components/TagsDropdown.vue";
 import Modal from "./Modal.vue";
-import { mapGetters } from "vuex";
 import {restApi} from "@/components/mixins/restApi";
-import {IWorkflowDb} from "@/Interface";
+import { mapStores } from "pinia";
+import { useSettingsStore } from "@/stores/settings";
+import { useWorkflowsStore } from "@/stores/workflows";
 
 export default mixins(showMessage, workflowHelpers, restApi).extend({
 	components: { TagsDropdown, Modal },
@@ -68,11 +69,14 @@ export default mixins(showMessage, workflowHelpers, restApi).extend({
 		};
 	},
 	async mounted() {
-		this.name = await this.$store.dispatch('workflows/getDuplicateCurrentWorkflowName', this.data.name);
+		this.name = await this.workflowsStore.getDuplicateCurrentWorkflowName(this.data.name);
 		this.$nextTick(() => this.focusOnNameInput());
 	},
 	computed: {
-		...mapGetters('settings', ['areTagsEnabled']),
+		...mapStores(
+			useSettingsStore,
+			useWorkflowsStore,
+		),
 	},
 	watch: {
 		isActive(active) {
diff --git a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
index 8c27410ecc..09c12e20b6 100644
--- a/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
+++ b/packages/editor-ui/src/components/EnterpriseEdition.ee.vue
@@ -8,6 +8,8 @@
 <script lang="ts">
 import Vue from 'vue';
 import {EnterpriseEditionFeature} from "@/constants";
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
 
 export default Vue.extend({
 	name: 'EnterpriseEdition',
@@ -18,9 +20,10 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(useSettingsStore),
 		canAccess(): boolean {
 			return this.features.reduce((acc: boolean, feature) => {
-				return acc && !!this.$store.getters['settings/isEnterpriseFeatureEnabled'](feature);
+				return acc && !!this.settingsStore.isEnterpriseFeatureEnabled(feature as EnterpriseEditionFeature);
 			}, true);
 		},
 	},
diff --git a/packages/editor-ui/src/components/Error/NodeErrorView.vue b/packages/editor-ui/src/components/Error/NodeErrorView.vue
index 8819deba34..5c45478755 100644
--- a/packages/editor-ui/src/components/Error/NodeErrorView.vue
+++ b/packages/editor-ui/src/components/Error/NodeErrorView.vue
@@ -109,6 +109,9 @@ import {
 	INodeTypeDescription,
 } from 'n8n-workflow';
 import { sanitizeHtml } from '@/utils';
+import { mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(
 	copyPaste,
@@ -122,15 +125,19 @@ export default mixins(
 		VueJsonPretty,
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+		),
 		displayCause(): boolean {
 			return JSON.stringify(this.error.cause).length < MAX_DISPLAY_DATA_SIZE;
 		},
 		parameters (): INodeProperties[] {
-			const node = this.$store.getters['ndv/activeNode'];
+			const node = this.ndvStore.activeNode;
 			if (!node) {
 				return [];
 			}
-			const nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
+			const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 
 			if (nodeType === null) {
 				return [];
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index c6974788e5..65f35aef38 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -203,6 +203,9 @@ import {
 } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export default mixins(
 	externalHooks,
@@ -249,7 +252,7 @@ export default mixins(
 		this.handleAutoRefreshToggle();
 
 		this.$externalHooks().run('executionsList.openDialog');
-		this.$telemetry.track('User opened Executions log', { workflow_id: this.$store.getters.workflowId });
+		this.$telemetry.track('User opened Executions log', { workflow_id: this.workflowsStore.workflowId });
 	},
 	beforeDestroy() {
 		if (this.autoRefreshInterval) {
@@ -258,6 +261,10 @@ export default mixins(
 		}
 	},
 	computed: {
+		...mapStores(
+			useUIStore,
+			useWorkflowsStore,
+		),
 		statuses () {
 			return [
 				{
@@ -283,7 +290,7 @@ export default mixins(
 			];
 		},
 		activeExecutions (): IExecutionsCurrentSummaryExtended[] {
-			return this.$store.getters.getActiveExecutions;
+			return this.workflowsStore.activeExecutions;
 		},
 		combinedExecutions (): IExecutionsSummary[] {
 			const returnData: IExecutionsSummary[] = [];
@@ -408,27 +415,28 @@ export default mixins(
 				await this.restApi().deleteExecutions(sendData);
 				let removedCurrentlyLoadedExecution = false;
 				let removedActiveExecution = false;
-				const currentWorkflow: string = this.$store.getters.workflowId;
-				const activeExecution: IExecutionsSummary = this.$store.getters['workflows/getActiveWorkflowExecution'];
+				const currentWorkflow: string = this.workflowsStore.workflowId;
+				const activeExecution: IExecutionsSummary | null = this.workflowsStore.activeWorkflowExecution;
 				// Also update current workflow executions view if needed
 				for (const selectedId of Object.keys(this.selectedItems)) {
-					const execution: IExecutionsSummary = this.$store.getters['workflows/getExecutionDataById'](selectedId);
+					const execution: IExecutionsSummary | undefined = this.workflowsStore.getExecutionDataById(selectedId);
 					if (execution && execution.workflowId === currentWorkflow) {
-						this.$store.commit('workflows/deleteExecution', execution);
+						this.workflowsStore.deleteExecution(execution);
 						removedCurrentlyLoadedExecution = true;
 					}
-					if (execution.id === activeExecution.id) {
+					if ((execution !== undefined && activeExecution !== null) && execution.id === activeExecution.id) {
 						removedActiveExecution = true;
 					}
 				}
 				// Also update route if needed
 				if (removedCurrentlyLoadedExecution) {
-					const currentWorkflowExecutions: IExecutionsSummary[] = this.$store.getters['workflows/currentWorkflowExecutions'];
+					const currentWorkflowExecutions: IExecutionsSummary[] = this.workflowsStore.currentWorkflowExecutions;
 					if (currentWorkflowExecutions.length === 0) {
-						this.$store.commit('workflows/setActiveWorkflowExecution', null);
+						this.workflowsStore.activeWorkflowExecution = null;
+
 						this.$router.push({ name: VIEWS.EXECUTION_HOME, params: { name: currentWorkflow } });
 					} else if (removedActiveExecution) {
-						this.$store.commit('workflows/setActiveWorkflowExecution', currentWorkflowExecutions[0]);
+						this.workflowsStore.activeWorkflowExecution = currentWorkflowExecutions[0];
 						this.$router.push({
 							name: VIEWS.EXECUTION_PREVIEW,
 							params: { name: currentWorkflow, executionId: currentWorkflowExecutions[0].id },
@@ -468,7 +476,7 @@ export default mixins(
 			this.retryExecution(commandData.row, loadWorkflow);
 
 			this.$telemetry.track('User clicked retry execution button', {
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 				execution_id: commandData.row.id,
 				retry_type: loadWorkflow ? 'current' : 'original',
 			});
@@ -497,7 +505,7 @@ export default mixins(
 				}
 			}
 
-			this.$store.commit('setActiveExecutions', activeExecutions);
+			this.workflowsStore.activeExecutions = activeExecutions;
 		},
 		async loadAutoRefresh () : Promise<void> {
 			const filter = this.workflowFilterPast;
@@ -517,7 +525,7 @@ export default mixins(
 				}
 			}
 
-			this.$store.commit('setActiveExecutions', results[1]);
+			this.workflowsStore.activeExecutions = results[1];
 
 			// execution IDs are typed as string, int conversion is necessary so we can order.
 			const alreadyPresentExecutionIds = this.finishedExecutions.map(exec => parseInt(exec.id, 10));
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index 1eda3d9a20..b8bb9beb22 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -65,6 +65,8 @@ import { showMessage } from '../mixins/showMessage';
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
 import { executionHelpers, IExecutionUIData } from '../mixins/executionsHelpers';
 import { VIEWS } from '../../constants';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
 
 export default mixins(restApi, showMessage, executionHelpers).extend({
 	name: 'execution-preview',
@@ -77,11 +79,14 @@ export default mixins(restApi, showMessage, executionHelpers).extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useUIStore,
+		),
 		executionUIDetails(): IExecutionUIData | null {
 			return this.activeExecution ? this.getExecutionUIDetails(this.activeExecution) : null;
 		},
 		sidebarCollapsed(): boolean {
-			return this.$store.getters['ui/sidebarMenuCollapsed'];
+			return this.uiStore.sidebarMenuCollapsed;
 		},
 	},
 	methods: {
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
index 4a6e4de60a..fb550d4d38 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsInfoAccordion.vue
@@ -26,6 +26,11 @@
 </template>
 
 <script lang="ts">
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useSettingsStore } from '@/stores/settings';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { mapStores } from 'pinia';
 import { PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 import { deepCopy, IWorkflowSettings } from 'n8n-workflow';
 import mixins from 'vue-typed-mixins';
@@ -60,9 +65,9 @@ export default mixins(workflowHelpers).extend({
 		};
 	},
 	mounted() {
-		this.defaultValues.saveFailedExecutions = this.$store.getters.saveDataErrorExecution;
-		this.defaultValues.saveSuccessfulExecutions = this.$store.getters.saveDataSuccessExecution;
-		this.defaultValues.saveManualExecutions = this.$store.getters.saveManualExecutions;
+		this.defaultValues.saveFailedExecutions = this.settingsStore.saveDataErrorExecution;
+		this.defaultValues.saveSuccessfulExecutions = this.settingsStore.saveDataSuccessExecution;
+		this.defaultValues.saveManualExecutions = this.settingsStore.saveManualExecutions;
 		this.updateSettings(this.workflowSettings);
 	},
 	watch: {
@@ -71,7 +76,13 @@ export default mixins(workflowHelpers).extend({
 		},
 	},
 	computed: {
-			accordionItems(): Object[] {
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
+		accordionItems(): Object[] {
 			return [
 				{
 					id: 'productionExecutions',
@@ -115,7 +126,7 @@ export default mixins(workflowHelpers).extend({
 			}
 		},
 		workflowSettings(): IWorkflowSettings {
-			const workflowSettings = deepCopy(this.$store.getters.workflowSettings);
+			const workflowSettings = deepCopy(this.workflowsStore.workflowSettings);
 			return workflowSettings;
 		},
 		accordionIcon(): { icon: string, color: string }|null {
@@ -125,16 +136,16 @@ export default mixins(workflowHelpers).extend({
 			return null;
 		},
 		currentWorkflowId(): string {
-			return this.$store.getters.workflowId;
+			return this.workflowsStore.workflowId;
 		},
 		isNewWorkflow(): boolean {
 			return !this.currentWorkflowId || (this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID || this.currentWorkflowId === 'new');
 		},
 		workflowName(): string {
-			return this.$store.getters.workflowName;
+			return this.workflowsStore.workflowName;
 		},
 		currentWorkflowTagIds(): string[] {
-			return this.$store.getters.workflowTags;
+			return this.workflowsStore.workflowTags;
 		},
 	},
 	methods: {
@@ -146,17 +157,17 @@ export default mixins(workflowHelpers).extend({
 		onAccordionClick(event: MouseEvent): void {
 			if (event.target instanceof HTMLAnchorElement) {
 				event.preventDefault();
-				this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+				this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
 			}
 		},
 		onItemTooltipClick(item: string, event: MouseEvent): void {
 			if (item === 'productionExecutions' && event.target instanceof HTMLAnchorElement) {
 				event.preventDefault();
-				this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+				this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
 			}
 		},
 		openWorkflowSettings(event: MouseEvent): void {
-			this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+			this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
 		},
 		async onSaveWorkflowClick(event: MouseEvent): void {
 			let currentId = undefined;
@@ -166,7 +177,7 @@ export default mixins(workflowHelpers).extend({
 				currentId = this.$route.params.name;
 			}
 			const saved = await this.saveCurrentWorkflow({ id: currentId, name: this.workflowName, tags: this.currentWorkflowTagIds });
-			if (saved) this.$store.dispatch('settings/fetchPromptsData');
+			if (saved) this.settingsStore.fetchPromptsData();
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
index 192bb6493c..5706a733d8 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsLandingPage.vue
@@ -27,7 +27,9 @@
 
 <script lang="ts">
 import { PLACEHOLDER_EMPTY_WORKFLOW_ID, VIEWS } from '@/constants';
-import { IExecutionsSummary } from '@/Interface';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 import ExecutionsInfoAccordion from './ExecutionsInfoAccordion.vue';
 
@@ -37,24 +39,25 @@ export default Vue.extend({
 		ExecutionsInfoAccordion,
 	},
 	computed: {
+		...mapStores(
+			useUIStore,
+			useWorkflowsStore,
+		),
 		executionCount(): number {
-			return (this.$store.getters['workflows/currentWorkflowExecutions'] as IExecutionsSummary[]).length;
+			return this.workflowsStore.currentWorkflowExecutions.length;
 		},
 		containsTrigger(): boolean {
-			return this.$store.getters.workflowTriggerNodes.length > 0;
-		},
-		currentWorkflowId(): string {
-			return this.$store.getters.workflowId;
+			return this.workflowsStore.workflowTriggerNodes.length > 0;
 		},
 	},
 	methods: {
 		onSetupFirstStep(event: MouseEvent): void {
-			this.$store.commit('ui/setAddFirstStepOnLoad', true);
+			this.uiStore.addFirstStepOnLoad = true;
 			const workflowRoute = this.getWorkflowRoute();
 			this.$router.push(workflowRoute);
 		},
 		getWorkflowRoute(): { name: string, params: {}} {
-			const workflowId = this.currentWorkflowId || this.$route.params.name;
+			const workflowId = this.workflowsStore.workflowId || this.$route.params.name;
 			if (workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
 				return { name: VIEWS.NEW_WORKFLOW, params: {} };
 			} else {
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
index 813e7066b4..232a070795 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsSidebar.vue
@@ -90,6 +90,8 @@ import { IExecutionsSummary } from "@/Interface";
 import { Route } from 'vue-router';
 import Vue from 'vue';
 import { PropType } from 'vue';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
 
 export default Vue.extend({
 	name: 'executions-sidebar',
@@ -122,6 +124,9 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useUIStore,
+		),
 		statusFilterApplied(): boolean {
 			return this.filter.status !== '';
 		},
@@ -143,7 +148,7 @@ export default Vue.extend({
     },
 	},
 	mounted() {
-		this.autoRefresh = this.$store.getters['ui/isExecutionSidebarAutoRefreshOn'];
+		this.autoRefresh = this.uiStore.executionSidebarAutoRefresh === true;
 		if (this.autoRefresh) {
 			this.autoRefreshInterval = setInterval(() => this.onRefresh(), 4000);
 		}
@@ -179,7 +184,7 @@ export default Vue.extend({
 			this.$emit('reloadExecutions');
 		},
 		onAutoRefreshToggle(): void {
-			this.$store.commit('ui/setExecutionsSidebarAutoRefresh', this.autoRefresh);
+			this.uiStore.executionSidebarAutoRefresh = this.autoRefresh;
 			if (this.autoRefreshInterval) {
 				// Clear any previously existing intervals (if any - there shouldn't)
 				clearInterval(this.autoRefreshInterval);
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
index d211bd1fd7..cb2599fcaa 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue
@@ -37,6 +37,11 @@ import { range as _range } from 'lodash';
 import { debounceHelper } from '../mixins/debounce';
 import { getNodeViewTab } from '../helpers';
 import { workflowHelpers } from '../mixins/workflowHelpers';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(restApi, showMessage, executionHelpers, debounceHelper, workflowHelpers).extend({
 	name: 'executions-page',
@@ -51,6 +56,12 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 		};
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useSettingsStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
 		hidePreview(): boolean {
 			const nothingToShow = this.executions.length === 0 && this.filterApplied;
 			const activeNotPresent = this.filterApplied && (this.executions as IExecutionsSummary[]).find(ex => ex.id === this.activeExecution.id) === undefined;
@@ -66,13 +77,13 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			return this.filter.status !== '';
 		},
 		workflowDataNotLoaded(): boolean {
-			return this.$store.getters.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID && this.$store.getters.workflowName === '';
+			return this.workflowsStore.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID && this.workflowsStore.workflowName === '';
 		},
 		loadedFinishedExecutionsCount(): number {
-			return (this.$store.getters['workflows/getAllLoadedFinishedExecutions'] as IExecutionsSummary[]).length;
+			return this.workflowsStore.getAllLoadedFinishedExecutions.length;
 		},
 		totalFinishedExecutionsCount(): number {
-			return this.$store.getters['workflows/getTotalFinishedExecutionsCount'];
+			return this.workflowsStore.getTotalFinishedExecutionsCount;
 		},
 	},
 	watch:{
@@ -81,9 +92,9 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			this.initView(workflowChanged);
 
 			if (to.params.executionId) {
-				const execution = this.$store.getters['workflows/getExecutionDataById'](to.params.executionId);
+				const execution = this.workflowsStore.getExecutionDataById(to.params.executionId);
 				if (execution) {
-					this.$store.commit('workflows/setActiveWorkflowExecution', execution);
+					this.workflowsStore.activeWorkflowExecution = execution;
 				}
 			}
 		},
@@ -92,7 +103,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 		const nextTab = getNodeViewTab(to);
 		// When leaving for a page that's not a workflow view tab, ask to save changes
 		if (!nextTab) {
-			const result = this.$store.getters.getStateIsDirty;
+			const result = this.uiStore.stateIsDirty;
 			if (result) {
 				const confirmModal = await this.confirmModal(
 					this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
@@ -105,11 +116,11 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 
 				if (confirmModal === MODAL_CONFIRMED) {
 					const saved = await this.saveCurrentWorkflow({}, false);
-					if (saved) this.$store.dispatch('settings/fetchPromptsData');
-					this.$store.commit('setStateDirty', false);
+					if (saved) this.settingsStore.fetchPromptsData();
+					this.uiStore.stateIsDirty = false;
 					next();
 				} else if (confirmModal === MODAL_CANCEL) {
-					this.$store.commit('setStateDirty', false);
+					this.uiStore.stateIsDirty = false;
 					next();
 				} else if (confirmModal === MODAL_CLOSE) {
 					next(false);
@@ -122,8 +133,8 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 	},
 	async mounted() {
 		this.loading = true;
-		const workflowUpdated = this.$route.params.name !== this.$store.getters.workflowId;
-		const onNewWorkflow = this.$route.params.name === 'new' && this.$store.getters.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID;
+		const workflowUpdated = this.$route.params.name !== this.workflowsStore.workflowId;
+		const onNewWorkflow = this.$route.params.name === 'new' && this.workflowsStore.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID;
 		const shouldUpdate = workflowUpdated && !onNewWorkflow;
 		await this.initView(shouldUpdate);
 		if (!shouldUpdate) {
@@ -134,11 +145,11 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 	methods: {
 		async initView(loadWorkflow: boolean) : Promise<void> {
 			if (loadWorkflow) {
-				if (this.$store.getters['nodeTypes/allNodeTypes'].length === 0) {
-					await this.$store.dispatch('nodeTypes/getNodeTypes');
+				if (this.nodeTypesStore.allNodeTypes.length === 0) {
+					await this.nodeTypesStore.getNodeTypes();
 				}
 				await this.openWorkflow(this.$route.params.name);
-				this.$store.commit('ui/setNodeViewInitialized', false);
+				this.uiStore.nodeViewInitialized = false;
 				this.setExecutions();
 				if (this.activeExecution) {
 					this.$router.push({
@@ -193,7 +204,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 					currentExecutions.push(newExecution);
 				}
 			}
-			this.$store.commit('workflows/setCurrentWorkflowExecutions', currentExecutions);
+			this.workflowsStore.currentWorkflowExecutions = currentExecutions;
 			this.loadingMore = false;
 		},
 		async onDeleteCurrentExecution(): Promise<void> {
@@ -203,13 +214,13 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				await this.setExecutions();
 				// Select first execution in the list after deleting the current one
 				if (this.executions.length > 0) {
-					this.$store.commit('workflows/setActiveWorkflowExecution', this.executions[0]);
+					this.workflowsStore.activeWorkflowExecution = this.executions[0];
 					this.$router.push({
 						name: VIEWS.EXECUTION_PREVIEW,
 						params: { name: this.currentWorkflow, executionId: this.executions[0].id },
 					}).catch(()=>{});;
 				} else { // If there are no executions left, show empty state and clear active execution from the store
-					this.$store.commit('workflows/setActiveWorkflowExecution', null);
+					this.workflowsStore.activeWorkflowExecution = null;
 					this.$router.push({ name: VIEWS.EXECUTION_HOME, params: { name: this.currentWorkflow } });
 				}
 			} catch (error) {
@@ -233,7 +244,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 		},
 		async setExecutions(): Promise<void> {
 			const workflowExecutions = await this.loadExecutions();
-			this.$store.commit('workflows/setCurrentWorkflowExecutions', workflowExecutions);
+			this.workflowsStore.currentWorkflowExecutions = workflowExecutions;
 			this.setActiveExecution();
 		},
 		async loadAutoRefresh(): Promise<void> {
@@ -284,12 +295,12 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			}
 
 			existingExecutions = existingExecutions.filter(execution => !gaps.includes(parseInt(execution.id, 10)) && lastId >= parseInt(execution.id, 10));
-			this.$store.commit('workflows/setCurrentWorkflowExecutions', existingExecutions);
+			this.workflowsStore.currentWorkflowExecutions = existingExecutions;
 			if (updatedActiveExecution !== null) {
-				this.$store.commit('workflows/setActiveWorkflowExecution', updatedActiveExecution);
+				this.workflowsStore.activeWorkflowExecution = updatedActiveExecution;
 			} else {
 				const activeNotInTheList = existingExecutions.find(ex => ex.id === this.activeExecution.id) === undefined;
-				if (activeNotInTheList) {
+				if (activeNotInTheList && this.executions.length > 0) {
 					this.$router.push({
 					name: VIEWS.EXECUTION_PREVIEW,
 					params: { name: this.currentWorkflow, executionId: this.executions[0].id },
@@ -303,7 +314,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			}
 			try {
 				const executions: IExecutionsSummary[] =
-					await this.$store.dispatch('workflows/loadCurrentWorkflowExecutions', this.filter);
+					await this.workflowsStore.loadCurrentWorkflowExecutions(this.filter);
 				return executions;
 			} catch (error) {
 				this.$showError(
@@ -316,14 +327,14 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 		setActiveExecution(): void {
 			const activeExecutionId = this.$route.params.executionId;
 			if (activeExecutionId) {
-				const execution = this.$store.getters['workflows/getExecutionDataById'](activeExecutionId);
+				const execution = this.workflowsStore.getExecutionDataById(activeExecutionId);
 				if (execution) {
-					this.$store.commit('workflows/setActiveWorkflowExecution', execution);
+					this.workflowsStore.activeWorkflowExecution = execution;
 				}
 			}
 			// If there is no execution in the route, select the first one
-			if (this.$store.getters['workflows/getActiveWorkflowExecution'] === null && this.executions.length > 0) {
-				this.$store.commit('workflows/setActiveWorkflowExecution', this.executions[0]);
+			if (this.workflowsStore.activeWorkflowExecution === null && this.executions.length > 0) {
+				this.workflowsStore.activeWorkflowExecution = this.executions[0];
 				this.$router.push({
 					name: VIEWS.EXECUTION_PREVIEW,
 					params: { name: this.currentWorkflow, executionId: this.executions[0].id },
@@ -353,19 +364,20 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				}
 				await this.addNodes(data.nodes, data.connections);
 
-				this.$store.commit('setActive', data.active || false);
-				this.$store.commit('setWorkflowId', workflowId);
-				this.$store.commit('setWorkflowName', { newName: data.name, setStateDirty: false });
-				this.$store.commit('setWorkflowSettings', data.settings || {});
-				this.$store.commit('setWorkflowPinData', data.pinData || {});
+				this.workflowsStore.setActive(data.active || false);
+				this.workflowsStore.setWorkflowId(workflowId);
+				this.workflowsStore.setWorkflowName({ newName: data.name, setStateDirty: false });
+				this.workflowsStore.setWorkflowSettings(data.settings || {});
+				this.workflowsStore.setWorkflowPinData(data.pinData || {});
 				const tags = (data.tags || []) as ITag[];
-				this.$store.commit('tags/upsertTags', tags);
 				const tagIds = tags.map((tag) => tag.id);
-				this.$store.commit('setWorkflowTagIds', tagIds || []);
-				this.$store.commit('setWorkflowHash', data.hash);
+				this.workflowsStore.setWorkflowTagIds(tagIds || []);
+				this.workflowsStore.setWorkflowHash(data.hash);
+
+				this.$store.commit('tags/upsertTags', tags);
 
 				this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name });
-				this.$store.commit('setStateDirty', false);
+				this.uiStore.stateIsDirty = false;
 		},
 		async addNodes(nodes: INodeUi[], connections?: IConnections) {
 			if (!nodes || !nodes.length) {
@@ -380,7 +392,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 					node.id = uuid();
 				}
 
-				nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
+				nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 
 				// Make sure that some properties always exist
 				if (!node.hasOwnProperty('disabled')) {
@@ -409,7 +421,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 					}
 				}
 
-				this.$store.commit('addNode', node);
+				this.workflowsStore.addNode(node);
 			});
 
 			// Load the connections
@@ -438,7 +450,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 									},
 								] as [IConnection, IConnection];
 
-								this.$store.commit('addConnection', { connection: connectionData, setStateDirty: false });
+								this.workflowsStore.addConnection({ connection: connectionData, setStateDirty: false });
 							});
 						}
 					}
@@ -446,7 +458,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			}
 		},
 		async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
-			const allNodes: INodeTypeDescription[] = this.$store.getters['nodeTypes/allNodeTypes'];
+			const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
 
 			const nodesToBeFetched: INodeTypeNameVersion[] = [];
 			allNodes.forEach(node => {
@@ -463,12 +475,12 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 
 			if (nodesToBeFetched.length > 0) {
 				// Only call API if node information is actually missing
-				await this.$store.dispatch('nodeTypes/getNodesInformation', nodesToBeFetched);
+				await this.nodeTypesStore.getNodesInformation(nodesToBeFetched);
 			}
 		},
 		async loadActiveWorkflows(): Promise<void> {
 			const activeWorkflows = await this.restApi().getActiveWorkflows();
-			this.$store.commit('setActiveWorkflows', activeWorkflows);
+			this.workflowsStore.activeWorkflows = activeWorkflows;
 		},
 		async onRetryExecution(payload: { execution: IExecutionsSummary, command: string }) {
 			const loadWorkflow = payload.command === 'current-workflow';
@@ -482,7 +494,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 			this.loadAutoRefresh();
 
 			this.$telemetry.track('User clicked retry execution button', {
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 				execution_id: payload.execution.id,
 				retry_type: loadWorkflow ? 'current' : 'original',
 			});
diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index 2e7b384dc8..5379eb1a05 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -54,6 +54,9 @@ import { genericHelpers } from '@/components/mixins/genericHelpers';
 import mixins from 'vue-typed-mixins';
 import { hasExpressionMapping } from './helpers';
 import { debounceHelper } from './mixins/debounce';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
 
 export default mixins(
 	externalHooks,
@@ -78,6 +81,12 @@ export default mixins(
 			latestValue: '',
 		};
 	},
+	computed: {
+		...mapStores(
+			useNDVStore,
+			useWorkflowsStore,
+		),
+	},
 	methods: {
 		valueChanged (value: string, forceUpdate = false) {
 			this.latestValue = value;
@@ -120,11 +129,11 @@ export default mixins(
 				node_name: string;
 			} = {
 				event_version: '2',
-				node_type_dest: this.$store.getters['ndv/activeNode'].type,
+				node_type_dest: this.ndvStore.activeNode? this.ndvStore.activeNode.type : '',
 				parameter_name_dest: this.parameter.displayName,
 				is_immediate_input: false,
 				variable_expression: eventData.variable,
-				node_name: this.$store.getters['ndv/activeNode'].name,
+				node_name: this.ndvStore.activeNode? this.ndvStore.activeNode.name : '',
 			};
 
 			if (eventData.variable) {
@@ -142,9 +151,9 @@ export default mixins(
 
 				if (splitVar[0].startsWith('$node')) {
 					const sourceNodeName = splitVar[0].split('"')[1];
-					trackProperties.node_type_source = this.$store.getters.getNodeByName(sourceNodeName).type;
-					const nodeConnections: Array<Array<{ node: string }>> = this.$store.getters.outgoingConnectionsByNodeName(sourceNodeName).main;
-					trackProperties.is_immediate_input = (nodeConnections && nodeConnections[0] && !!nodeConnections[0].find(({ node }) => node === this.$store.getters['ndv/activeNode'].name)) ? true : false;
+					trackProperties.node_type_source = this.workflowsStore.getNodeByName(sourceNodeName)?.type;
+					const nodeConnections: Array<Array<{ node: string }>> = this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main;
+					trackProperties.is_immediate_input = (nodeConnections && nodeConnections[0] && !!nodeConnections[0].find(({ node }) => node === this.ndvStore.activeNode?.name || '')) ? true : false;
 
 					if (splitVar[1].startsWith('parameter')) {
 						trackProperties.parameter_name_source = splitVar[1].split('"')[1];
@@ -173,9 +182,9 @@ export default mixins(
 			if (!newValue) {
 				const telemetryPayload = {
 					empty_expression: (this.value === '=') || (this.value === '={{}}') || !this.value,
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					source: this.eventSource,
-					session_id: this.$store.getters['ndv/ndvSessionId'],
+					session_id: this.ndvStore.sessionId,
 					has_parameter: this.value.includes('$parameter'),
 					has_mapping: hasExpressionMapping(this.value),
 				};
diff --git a/packages/editor-ui/src/components/FeatureComingSoon.vue b/packages/editor-ui/src/components/FeatureComingSoon.vue
index 618d7fc3c3..84124b5f48 100644
--- a/packages/editor-ui/src/components/FeatureComingSoon.vue
+++ b/packages/editor-ui/src/components/FeatureComingSoon.vue
@@ -28,6 +28,11 @@
 
 <script lang="ts">
 import {IFakeDoor} from '@/Interface';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useSettingsStore } from '@/stores/settings';
+import { useUIStore } from '@/stores/ui';
+import { useUsersStore } from '@/stores/users';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 
 export default Vue.extend({
@@ -43,23 +48,28 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+		),
 		userId(): string {
-			return this.$store.getters['users/currentUserId'];
-		},
-		versionCli(): string {
-			return this.$store.getters['settings/versionCli'];
+			return this.usersStore.currentUserId || '';
 		},
 		instanceId(): string {
-			return this.$store.getters.instanceId;
+			return this.rootStore.instanceId;
 		},
-		featureInfo(): IFakeDoor {
-			return this.$store.getters['ui/getFakeDoorById'](this.featureId);
+		featureInfo(): IFakeDoor | undefined {
+			return this.uiStore.getFakeDoorById(this.featureId);
 		},
 	},
 	methods: {
 		openLinkPage() {
-			window.open(`${this.featureInfo.linkURL}&u=${this.instanceId}#${this.userId}&v=${this.versionCli}`, '_blank');
-			this.$telemetry.track('user clicked feature waiting list button', {feature: this.featureId});
+			if (this.featureInfo) {
+				window.open(`${this.featureInfo.linkURL}&u=${this.instanceId}#${this.userId}&v=${this.rootStore.versionCli}`, '_blank');
+				this.$telemetry.track('user clicked feature waiting list button', {feature: this.featureId});
+			}
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/GoBackButton.vue b/packages/editor-ui/src/components/GoBackButton.vue
index e01e5d9612..80044c100b 100644
--- a/packages/editor-ui/src/components/GoBackButton.vue
+++ b/packages/editor-ui/src/components/GoBackButton.vue
@@ -10,7 +10,7 @@ import { VIEWS } from '@/constants';
 import Vue from 'vue';
 
 export default Vue.extend({
-	name: 'TemplateList',
+	name: 'GoBackButton',
 	data() {
 		return {
 			routeHasHistory: false,
diff --git a/packages/editor-ui/src/components/HoverableNodeIcon.vue b/packages/editor-ui/src/components/HoverableNodeIcon.vue
index f78df6803f..a31b32f5f0 100644
--- a/packages/editor-ui/src/components/HoverableNodeIcon.vue
+++ b/packages/editor-ui/src/components/HoverableNodeIcon.vue
@@ -42,6 +42,8 @@ import Vue from 'vue';
 
 import { ITemplatesNode } from '@/Interface';
 import { INodeTypeDescription } from 'n8n-workflow';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 interface NodeIconData {
 	type: string;
@@ -72,6 +74,9 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useRootStore,
+		),
 		fontStyleData(): object {
 			return {
 				'max-width': this.size + 'px',
@@ -115,7 +120,7 @@ export default Vue.extend({
 				return (nodeType as ITemplatesNode).iconData;
 			}
 
-			const restUrl = this.$store.getters.getRestUrl;
+			const restUrl = this.rootStore.getRestUrl;
 
 			if (nodeType.icon) {
 				const [type, path] = nodeType.icon.split(':');
diff --git a/packages/editor-ui/src/components/ImportCurlModal.vue b/packages/editor-ui/src/components/ImportCurlModal.vue
index 388019f7cc..7b8cade157 100644
--- a/packages/editor-ui/src/components/ImportCurlModal.vue
+++ b/packages/editor-ui/src/components/ImportCurlModal.vue
@@ -50,6 +50,9 @@ import {
 import { showMessage } from './mixins/showMessage';
 import mixins from 'vue-typed-mixins';
 import { INodeUi } from '@/Interface';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useNDVStore } from '@/stores/ndv';
 
 export default mixins(showMessage).extend({
 	name: 'ImportCurlModal',
@@ -64,8 +67,12 @@ export default mixins(showMessage).extend({
 		};
 	},
 	computed: {
-		node(): INodeUi {
-			return this.$store.getters['ndv/activeNode'];
+		...mapStores(
+			useNDVStore,
+			useUIStore,
+		),
+		node(): INodeUi | null {
+			return this.ndvStore.activeNode;
 		},
 	},
 	methods: {
@@ -80,8 +87,7 @@ export default mixins(showMessage).extend({
 			if (curlCommand === '') return;
 
 			try {
-				const parameters = await this.$store.dispatch('ui/getCurlToJson', curlCommand);
-
+				const parameters = await this.uiStore.getCurlToJson(curlCommand);
 				const url = parameters['parameters.url'];
 
 				const invalidProtocol = CURL_IMPORT_NOT_SUPPORTED_PROTOCOLS.find((p) =>
@@ -89,7 +95,8 @@ export default mixins(showMessage).extend({
 				);
 
 				if (!invalidProtocol) {
-					this.$store.dispatch('ui/setHttpNodeParameters', {
+					this.uiStore.setHttpNodeParameters({
+						name: IMPORT_CURL_MODAL_KEY,
 						parameters: JSON.stringify(parameters),
 					});
 
@@ -114,7 +121,7 @@ export default mixins(showMessage).extend({
 
 				this.sendTelemetry({ success: false, invalidProtocol: false });
 			} finally {
-				this.$store.dispatch('ui/setCurlCommand', { command: this.curlCommand });
+				this.uiStore.setCurlCommand({ name: IMPORT_CURL_MODAL_KEY, command: this.curlCommand });
 			}
 		},
 		showProtocolErrorWithSupportedNode(protocol: string, node: string): void {
@@ -168,7 +175,7 @@ export default mixins(showMessage).extend({
 		},
 	},
 	mounted() {
-		this.curlCommand = this.$store.getters['ui/getCurlCommand'];
+		this.curlCommand = this.uiStore.getCurlCommand || '';
 		setTimeout(() => {
 			(this.$refs.input as HTMLTextAreaElement).focus();
 		});
diff --git a/packages/editor-ui/src/components/ImportParameter.vue b/packages/editor-ui/src/components/ImportParameter.vue
index 82e0c102ce..5dee146874 100644
--- a/packages/editor-ui/src/components/ImportParameter.vue
+++ b/packages/editor-ui/src/components/ImportParameter.vue
@@ -12,6 +12,8 @@
 
 <script lang="ts">
 import { IMPORT_CURL_MODAL_KEY } from '@/constants';
+import { useUIStore } from '@/stores/ui';
+import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
 import { showMessage } from './mixins/showMessage';
 
@@ -23,9 +25,12 @@ export default mixins(showMessage).extend({
 			default: false,
 		},
 	},
+	computed: {
+		...mapStores(useUIStore),
+	},
 	methods: {
 		onImportCurlClicked() {
-			this.$store.dispatch('ui/openModal', IMPORT_CURL_MODAL_KEY);
+			this.uiStore.openModal(IMPORT_CURL_MODAL_KEY);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/InputPanel.vue b/packages/editor-ui/src/components/InputPanel.vue
index 8e2341a268..6d585e2e2e 100644
--- a/packages/editor-ui/src/components/InputPanel.vue
+++ b/packages/editor-ui/src/components/InputPanel.vue
@@ -76,6 +76,10 @@ import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import WireMeUp from './WireMeUp.vue';
 import { CRON_NODE_TYPE, INTERVAL_NODE_TYPE, LOCAL_STORAGE_MAPPING_FLAG, MANUAL_TRIGGER_NODE_TYPE, SCHEDULE_TRIGGER_NODE_TYPE, START_NODE_TYPE } from '@/constants';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(
 	workflowHelpers,
@@ -111,8 +115,13 @@ export default mixins(
 		};
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useWorkflowsStore,
+		),
 		focusedMappableInput(): string {
-			return this.$store.getters['ndv/focusedMappableInput'];
+			return this.ndvStore.focusedMappableInput;
 		},
 		isUserOnboarded(): boolean {
 			return window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) === 'true';
@@ -129,8 +138,8 @@ export default mixins(
 			if (!this.workflowRunning) {
 				return false;
 			}
-			const triggeredNode = this.$store.getters.executedNode;
-			const executingNode = this.$store.getters.executingNode;
+			const triggeredNode = this.workflowsStore.executedNode;
+			const executingNode = this.workflowsStore.executingNode;
 			if (this.activeNode && triggeredNode === this.activeNode.name && this.activeNode.name !== executingNode) {
 				return true;
 			}
@@ -141,16 +150,16 @@ export default mixins(
 			return false;
 		},
 		workflowRunning (): boolean {
-			return this.$store.getters.isActionActive('workflowRunning');
+			return this.uiStore.isActionActive('workflowRunning');
 		},
 		currentWorkflow(): Workflow {
 			return this.workflow as Workflow;
 		},
 		activeNode (): INodeUi | null {
-			return this.$store.getters['ndv/activeNode'];
+			return this.ndvStore.activeNode;
 		},
 		currentNode (): INodeUi | null {
-			return this.$store.getters.getNodeByName(this.currentNodeName);
+			return this.workflowsStore.getNodeByName(this.currentNodeName);
 		},
 		connectedCurrentNodeOutputs(): number[] | undefined {
 			const search = this.parentNodes.find(({name}) => name === this.currentNodeName);
@@ -174,7 +183,7 @@ export default mixins(
 		activeNodeType () : INodeTypeDescription | null {
 			if (!this.activeNode) return null;
 
-			return this.$store.getters['nodeTypes/getNodeType'](this.activeNode.type, this.activeNode.typeVersion);
+			return this.nodeTypesStore.getNodeType(this.activeNode.type, this.activeNode.typeVersion);
 		},
 		isMultiInputNode (): boolean {
 			return this.activeNodeType !== null && this.activeNodeType.inputs.length > 1;
@@ -214,7 +223,7 @@ export default mixins(
 			if (this.activeNode) {
 				this.$telemetry.track('User clicked ndv button', {
 					node_type: this.activeNode.type,
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
 					pane: 'input',
 					type: 'executePrevious',
@@ -238,7 +247,7 @@ export default mixins(
 			if (this.activeNode) {
 				this.$telemetry.track('User clicked ndv link', {
 					node_type: this.activeNode.type,
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
 					pane: 'input',
 					type: 'not-connected-help',
diff --git a/packages/editor-ui/src/components/InviteUsersModal.vue b/packages/editor-ui/src/components/InviteUsersModal.vue
index d52ebd1ae5..ae82b21732 100644
--- a/packages/editor-ui/src/components/InviteUsersModal.vue
+++ b/packages/editor-ui/src/components/InviteUsersModal.vue
@@ -32,6 +32,8 @@ import Vue from "vue";
 import { IFormInputs, IInviteResponse } from "@/Interface";
 import { VALID_EMAIL_REGEX, INVITE_USER_MODAL_KEY } from "@/constants";
 import { ROLE } from "@/modules/userHelpers";
+import { mapStores } from "pinia";
+import { useUsersStore } from "@/stores/users";
 
 const NAME_EMAIL_FORMAT_REGEX = /^.* <(.*)>$/;
 
@@ -101,6 +103,7 @@ export default mixins(showMessage).extend({
 		];
 	},
 	computed: {
+		...mapStores(useUsersStore),
 		emailsCount(): number {
 			return this.emails.split(',').filter((email: string) => !!email.trim()).length;
 		},
@@ -156,7 +159,7 @@ export default mixins(showMessage).extend({
 					throw new Error(this.$locale.baseText('settings.users.noUsersToInvite'));
 				}
 
-				const invited: IInviteResponse[] = await this.$store.dispatch('users/inviteUsers', emails);
+				const invited: IInviteResponse[] = await this.usersStore.inviteUsers(emails);
 				const invitedEmails = invited.reduce((accu, {user, error}) => {
 					if (error) {
 						accu.error.push(user.email);
diff --git a/packages/editor-ui/src/components/Logo.vue b/packages/editor-ui/src/components/Logo.vue
index 0ce2afda0c..ad94d7edb9 100644
--- a/packages/editor-ui/src/components/Logo.vue
+++ b/packages/editor-ui/src/components/Logo.vue
@@ -7,12 +7,17 @@
 </template>
 
 <script lang="ts">
+import { useRootStore } from '@/stores/n8nRootStore';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 
 export default Vue.extend({
 	computed: {
+		...mapStores(
+			useRootStore,
+		),
 		basePath(): string {
-			return this.$store.getters.getBaseUrl;
+			return this.rootStore.baseUrl;
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
index d3f920cd70..12dcb93b03 100644
--- a/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/ExecutionDetails/ExecutionDetails.vue
@@ -43,12 +43,14 @@
 <script lang="ts">
 import mixins from "vue-typed-mixins";
 
-import { IExecutionResponse } from "../../../Interface";
+import { IExecutionResponse, IExecutionsSummary } from "../../../Interface";
 
 import { titleChange } from "@/components/mixins/titleChange";
 
 import ShortenName from "@/components/ShortenName.vue";
 import ReadOnly from "@/components/MainHeader/ExecutionDetails/ReadOnly.vue";
+import { mapStores } from "pinia";
+import { useWorkflowsStore } from "@/stores/workflows";
 
 export default mixins(titleChange).extend({
 	name: "ExecutionDetails",
@@ -57,24 +59,27 @@ export default mixins(titleChange).extend({
 		ReadOnly,
 	},
 	computed: {
+		...mapStores(
+			useWorkflowsStore,
+		),
 		executionId(): string | undefined {
 			return this.$route.params.id;
 		},
 		executionFinished(): boolean {
-			const fullExecution = this.$store.getters.getWorkflowExecution;
+			const fullExecution = this.workflowsStore.getWorkflowExecution;
 
 			return !!fullExecution && fullExecution.finished;
 		},
 		executionWaiting(): boolean {
-			const fullExecution = this.$store.getters.getWorkflowExecution;
+			const fullExecution = this.workflowsStore.getWorkflowExecution as IExecutionsSummary;
 
 			return !!fullExecution && !!fullExecution.waitTill;
 		},
 		workflowExecution(): IExecutionResponse | null {
-			return this.$store.getters.getWorkflowExecution;
+			return this.workflowsStore.getWorkflowExecution;
 		},
 		workflowName(): string {
-			return this.$store.getters.workflowName;
+			return this.workflowsStore.workflowName;
 		},
 	},
 	methods: {
diff --git a/packages/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
index dfa589776c..bf20c19a8e 100644
--- a/packages/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div :class="{'main-header': true, expanded: !sidebarMenuCollapsed}">
+		<div :class="{'main-header': true, expanded: !this.uiStore.sidebarMenuCollapsed}">
 			<div v-show="!hideMenuBar" class="top-menu">
 				<ExecutionDetails v-if="isExecutionPage" />
 				<WorkflowDetails v-else />
@@ -12,7 +12,6 @@
 
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
-import { mapGetters } from 'vuex';
 import { pushConnection } from '@/components/mixins/pushConnection';
 import WorkflowDetails from '@/components/MainHeader/WorkflowDetails.vue';
 import ExecutionDetails from '@/components/MainHeader/ExecutionDetails/ExecutionDetails.vue';
@@ -21,6 +20,9 @@ import { MAIN_HEADER_TABS, PLACEHOLDER_EMPTY_WORKFLOW_ID, STICKY_NODE_TYPE, VIEW
 import { IExecutionsSummary, INodeUi, ITabBarItem } from '@/Interface';
 import { workflowHelpers } from '../mixins/workflowHelpers';
 import { Route } from 'vue-router';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useNDVStore } from '@/stores/ndv';
 
 export default mixins(
 	pushConnection,
@@ -36,13 +38,14 @@ export default mixins(
 			return {
 				activeHeaderTab: MAIN_HEADER_TABS.WORKFLOW,
 				workflowToReturnTo: '',
-				dirtyState: this.$store.getters.getStateIsDirty,
+				dirtyState: false,
 			};
 		},
 		computed: {
-			...mapGetters('ui', [
-				'sidebarMenuCollapsed',
-			]),
+			...mapStores(
+				useNDVStore,
+				useUIStore,
+			),
 			tabBarItems(): ITabBarItem[] {
 				return [
 					{ value: MAIN_HEADER_TABS.WORKFLOW, label: this.$locale.baseText('generic.workflow') },
@@ -53,25 +56,26 @@ export default mixins(
 				return this.$route.name === VIEWS.EXECUTION;
 			},
 			activeNode (): INodeUi | null {
-				return this.$store.getters['ndv/activeNode'];
+				return this.ndvStore.activeNode;
 			},
 			hideMenuBar(): boolean {
 				return Boolean(this.activeNode && this.activeNode.type !== STICKY_NODE_TYPE);
 			},
 			workflowName (): string {
-				return this.$store.getters.workflowName;
+				return this.workflowsStore.workflowName;
 			},
 			currentWorkflow (): string {
-				return this.$route.params.name || this.$store.getters.workflowId;
+				return this.$route.params.name || this.workflowsStore.workflowId;
 			},
 			onWorkflowPage(): boolean {
 				return this.$route.meta && (this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true);
 			},
 			activeExecution(): IExecutionsSummary {
-				return this.$store.getters['workflows/getActiveWorkflowExecution'];
+				return this.workflowsStore.activeWorkflowExecution as IExecutionsSummary;
 			},
 		},
 		mounted() {
+			this.dirtyState = this.uiStore.stateIsDirty;
 			this.syncTabsWithRoute(this.$route);
 			// Initialize the push connection
 			this.pushConnect();
@@ -109,13 +113,13 @@ export default mixins(
 						} else {
 							if (this.$route.name !== VIEWS.NEW_WORKFLOW) {
 								this.$router.push({ name: VIEWS.NEW_WORKFLOW });
-								this.$store.commit('setStateDirty', this.dirtyState);
+								this.uiStore.stateIsDirty = this.dirtyState;
 							}
 						}
 						this.activeHeaderTab = MAIN_HEADER_TABS.WORKFLOW;
 						break;
 					case MAIN_HEADER_TABS.EXECUTIONS:
-						this.dirtyState = this.$store.getters.getStateIsDirty;
+						this.dirtyState = this.uiStore.stateIsDirty;
 						this.workflowToReturnTo = this.currentWorkflow;
 						const routeWorkflowId = this.currentWorkflow === PLACEHOLDER_EMPTY_WORKFLOW_ID ? 'new' : this.currentWorkflow;
 						if (this.activeExecution) {
diff --git a/packages/editor-ui/src/components/MainHeader/TabBar.vue b/packages/editor-ui/src/components/MainHeader/TabBar.vue
index 3534335c5b..fc292a934d 100644
--- a/packages/editor-ui/src/components/MainHeader/TabBar.vue
+++ b/packages/editor-ui/src/components/MainHeader/TabBar.vue
@@ -12,6 +12,8 @@
 import Vue, { PropType } from 'vue';
 import { ITabBarItem } from '@/Interface';
 import { MAIN_HEADER_TABS } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
 
 export default Vue.extend({
 	name: 'tab-bar',
@@ -31,8 +33,11 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useUIStore,
+		),
 		mainSidebarCollapsed(): boolean {
-			return this.$store.getters['ui/sidebarMenuCollapsed'];
+			return this.uiStore.sidebarMenuCollapsed;
 		},
 	},
 	methods: {
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 51799a181c..e36adebc5f 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -23,7 +23,7 @@
 			</template>
 		</BreakpointsObserver>
 
-		<span v-if="areTagsEnabled" class="tags">
+		<span v-if="settingsStore.areTagsEnabled" class="tags">
 			<div
 				v-if="isTagsEditEnabled">
 				<TagsDropdown
@@ -105,6 +105,11 @@ import { IWorkflowDataUpdate, IWorkflowToShare } from "@/Interface";
 import { saveAs } from 'file-saver';
 import { titleChange } from "../mixins/titleChange";
 import type { MessageBoxInputData } from 'element-ui/types/message-box';
+import { mapStores } from "pinia";
+import { useUIStore } from "@/stores/ui";
+import { useSettingsStore } from "@/stores/settings";
+import { useWorkflowsStore } from "@/stores/workflows";
+import { useRootStore } from "@/stores/n8nRootStore";
 
 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -138,24 +143,32 @@ export default mixins(workflowHelpers, titleChange).extend({
 		};
 	},
 	computed: {
-		...mapGetters({
-			isWorkflowActive: "isActive",
-			workflowName: "workflowName",
-			isDirty: "getStateIsDirty",
-			currentWorkflowTagIds: "workflowTags",
-		}),
-		...mapGetters('settings', ['areTagsEnabled']),
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
+		isWorkflowActive(): boolean {
+			return this.workflowsStore.isWorkflowActive;
+		},
+		workflowName(): string {
+			return this.workflowsStore.workflowName;
+		},
+		isDirty(): boolean {
+			return this.uiStore.stateIsDirty;
+		},
+		currentWorkflowTagIds(): string[] {
+			return this.workflowsStore.workflowTags;
+		},
 		isNewWorkflow(): boolean {
 			return !this.currentWorkflowId || (this.currentWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID || this.currentWorkflowId === 'new');
 		},
 		isWorkflowSaving(): boolean {
-			return this.$store.getters.isActionActive("workflowSaving");
+			return this.uiStore.isActionActive('workflowSaving');
 		},
 		currentWorkflowId(): string {
-			return this.$store.getters.workflowId;
-		},
-		workflowName (): string {
-			return this.$store.getters.workflowName;
+			return this.workflowsStore.workflowId;
 		},
 		onWorkflowPage(): boolean {
 			return this.$route.meta && (this.$route.meta.nodeView || this.$route.meta.keepWorkflowAlive === true);
@@ -209,7 +222,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 				currentId = this.$route.params.name;
 			}
 			const saved = await this.saveCurrentWorkflow({ id: currentId, name: this.workflowName, tags: this.currentWorkflowTagIds });
-			if (saved) this.$store.dispatch('settings/fetchPromptsData');
+			if (saved) await this.settingsStore.fetchPromptsData();
 		},
 		onTagsEditEnable() {
 			this.$data.appliedTagIds = this.currentWorkflowTagIds;
@@ -314,12 +327,12 @@ export default mixins(workflowHelpers, titleChange).extend({
 		async onWorkflowMenuSelect(action: string): Promise<void> {
 			switch (action) {
 				case WORKFLOW_MENU_ACTIONS.DUPLICATE: {
-					await this.$store.dispatch('ui/openModalWithData', {
+					this.uiStore.openModalWithData({
 						name: DUPLICATE_MODAL_KEY,
 						data: {
-							id: this.$store.getters.workflowId,
-							name: this.$store.getters.workflowName,
-							tags: this.$store.getters.workflowTags,
+							id: this.workflowsStore.workflowId,
+							name: this.workflowsStore.workflowName,
+							tags: this.workflowsStore.workflowTags,
 						},
 					});
 					break;
@@ -334,7 +347,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 					const exportData: IWorkflowToShare = {
 						...data,
 						meta: {
-							instanceId: this.$store.getters.instanceId,
+							instanceId: this.rootStore.instanceId,
 						},
 						tags: (tags || []).map(tagId => {
 							const {usageCount, ...tag} = this.$store.getters["tags/getTagById"](tagId);
@@ -347,7 +360,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 						type: 'application/json;charset=utf-8',
 					});
 
-					let workflowName = this.$store.getters.workflowName || 'unsaved_workflow';
+					let workflowName = this.workflowName || 'unsaved_workflow';
 					workflowName = workflowName.replace(/[^a-z0-9]/gi, '_');
 
 					this.$telemetry.track('User exported workflow', { workflow_id: workflowData.id });
@@ -376,7 +389,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 					break;
 				}
 				case WORKFLOW_MENU_ACTIONS.SETTINGS: {
-					this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+					this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
 					break;
 				}
 				case WORKFLOW_MENU_ACTIONS.DELETE: {
@@ -404,7 +417,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 						);
 						return;
 					}
-					this.$store.commit('setStateDirty', false);
+					this.uiStore.stateIsDirty = false;
 					// Reset tab title since workflow is deleted.
 					this.$titleReset();
 					this.$showMessage({
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 2552b51162..7864161c1e 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -31,7 +31,7 @@
 						<!-- This dropdown is only enabled when sidebar is collapsed -->
 						<el-dropdown :disabled="!isCollapsed" placement="right-end" trigger="click" @command="onUserActionToggle">
 							<div :class="{[$style.avatar]: true, ['clickable']: isCollapsed }">
-								<n8n-avatar :firstName="currentUser.firstName" :lastName="currentUser.lastName" size="small" />
+								<n8n-avatar :firstName="usersStore.currentUser.firstName" :lastName="usersStore.currentUser.lastName" size="small" />
 								<el-dropdown-menu slot="dropdown">
 									<el-dropdown-item command="settings">{{ $locale.baseText('settings') }}</el-dropdown-item>
 									<el-dropdown-item command="logout">{{ $locale.baseText('auth.signout') }}</el-dropdown-item>
@@ -40,7 +40,7 @@
 						</el-dropdown>
 					</div>
 					<div :class="{ ['ml-2xs']: true, [$style.userName]: true, [$style.expanded]: fullyExpanded }">
-						<n8n-text size="small" :bold="true" color="text-dark">{{currentUser.fullName}}</n8n-text>
+						<n8n-text size="small" :bold="true" color="text-dark">{{usersStore.currentUser.fullName}}</n8n-text>
 					</div>
 					<div :class="{ [$style.userActions]: true, [$style.expanded]: fullyExpanded }">
 						<n8n-action-dropdown :items="userMenuItems" placement="top-start" @select="onUserActionToggle" />
@@ -78,12 +78,17 @@ import {
 	VERSIONS_MODAL_KEY,
 	EXECUTIONS_MODAL_KEY,
 	VIEWS,
-	WORKFLOW_OPEN_MODAL_KEY,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 } from '@/constants';
 import { userHelpers } from './mixins/userHelpers';
 import { debounceHelper } from './mixins/debounce';
 import Vue from 'vue';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default mixins(
 	genericHelpers,
@@ -105,36 +110,34 @@ export default mixins(
 		data () {
 			return {
 				// @ts-ignore
-				basePath: this.$store.getters.getBaseUrl,
+				basePath: '',
 				fullyExpanded: false,
 			};
 		},
 		computed: {
-			...mapGetters('ui', {
-				isCollapsed: 'sidebarMenuCollapsed',
-				isNodeView: 'isNodeView',
-			}),
+			...mapStores(
+				useRootStore,
+				useSettingsStore,
+				useUIStore,
+				useUsersStore,
+				useWorkflowsStore,
+			),
 			...mapGetters('versions', [
 				'hasVersionUpdates',
 				'nextVersions',
 			]),
-			...mapGetters('users', [
-				'canUserAccessSidebarUserInfo',
-				'currentUser',
-			]),
-			...mapGetters('settings', [
-				'isTemplatesEnabled',
-				'isUserManagementEnabled',
-			]),
+			isCollapsed(): boolean {
+				return this.uiStore.sidebarMenuCollapsed;
+			},
 			canUserAccessSettings(): boolean {
 				const accessibleRoute = this.findFirstAccessibleSettingsRoute();
 				return accessibleRoute !== null;
 			},
 			showUserArea(): boolean {
-				return this.isUserManagementEnabled && this.canUserAccessSidebarUserInfo && this.currentUser;
+				return this.settingsStore.isUserManagementEnabled && this.usersStore.canUserAccessSidebarUserInfo && this.usersStore.currentUser !== null;
 			},
 			workflowExecution (): IExecutionResponse | null {
-				return this.$store.getters.getWorkflowExecution;
+				return this.workflowsStore.getWorkflowExecution;
 			},
 			userMenuItems (): object[] {
 				return [
@@ -150,7 +153,7 @@ export default mixins(
 			},
  			mainMenuItems (): IMenuItem[] {
 				const items: IMenuItem[] = [];
-				const injectedItems = this.$store.getters.sidebarMenuItems as IMenuItem[];
+				const injectedItems =  this.uiStore.sidebarMenuItems;
 
 				if (injectedItems && injectedItems.length > 0) {
 					for(const item of injectedItems) {
@@ -182,7 +185,7 @@ export default mixins(
 						icon: 'box-open',
 						label: this.$locale.baseText('mainSidebar.templates'),
 						position: 'top',
-						available: this.isTemplatesEnabled,
+						available: this.settingsStore.isTemplatesEnabled,
 						activateOnRouteNames: [ VIEWS.TEMPLATES ],
 					},
 					{
@@ -204,7 +207,7 @@ export default mixins(
 						icon: 'cog',
 						label: this.$locale.baseText('settings'),
 						position: 'bottom',
-						available: this.canUserAccessSettings && this.currentUser,
+						available: this.canUserAccessSettings && this.usersStore.currentUser !== null,
 						activateOnRouteNames: [ VIEWS.USERS_SETTINGS, VIEWS.API_SETTINGS, VIEWS.PERSONAL_SETTINGS ],
 					},
 					{
@@ -266,13 +269,14 @@ export default mixins(
 			},
 		},
 		async mounted() {
+			this.basePath = this.rootStore.baseUrl;
 			if (this.$refs.user) {
 				this.$externalHooks().run('mainSidebar.mounted', { userRef: this.$refs.user });
 			}
-			if (window.innerWidth < 900 || this.isNodeView) {
-				this.$store.commit('ui/collapseSidebarMenu');
+			if (window.innerWidth < 900 || this.uiStore.isNodeView) {
+				this.uiStore.sidebarMenuCollapsed = true;
 			} else {
-				this.$store.commit('ui/expandSidebarMenu');
+				this.uiStore.sidebarMenuCollapsed = false;
 			}
 			await Vue.nextTick();
 			this.fullyExpanded = !this.isCollapsed;
@@ -285,7 +289,7 @@ export default mixins(
 		},
 		methods: {
 			trackHelpItemClick (itemType: string) {
-				this.$telemetry.track('User clicked help resource', { type: itemType, workflow_id: this.$store.getters.workflowId });
+				this.$telemetry.track('User clicked help resource', { type: itemType, workflow_id: this.workflowsStore.workflowId });
 			},
 			async onUserActionToggle(action: string) {
 				switch (action) {
@@ -301,8 +305,7 @@ export default mixins(
 			},
 			async onLogout() {
 				try {
-					await this.$store.dispatch('users/logout');
-
+					await this.usersStore.logout();
 					const route = this.$router.resolve({ name: VIEWS.SIGNIN });
 					window.open(route.href, '_self');
 				} catch (e) {
@@ -310,7 +313,7 @@ export default mixins(
 				}
 			},
 			toggleCollapse () {
-				this.$store.commit('ui/toggleSidebarMenuCollapse');
+				this.uiStore.toggleSidebarMenuCollapse();
 				// When expanding, delay showing some element to ensure smooth animation
 				if (!this.isCollapsed) {
 					setTimeout(() => {
@@ -321,7 +324,7 @@ export default mixins(
 				}
 			},
 			openUpdatesPanel() {
-				this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
+				this.uiStore.openModal(VERSIONS_MODAL_KEY);
 			},
 			async handleSelect (key: string) {
 				switch (key) {
@@ -344,7 +347,7 @@ export default mixins(
 						break;
 					}
 					case 'executions': {
-						this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
+						this.uiStore.openModal(EXECUTIONS_MODAL_KEY);
 						break;
 					}
 					case 'settings': {
@@ -359,7 +362,7 @@ export default mixins(
 					}
 					case 'about': {
 						this.trackHelpItemClick('about');
-						this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
+						this.uiStore.openModal(ABOUT_MODAL_KEY);
 						break;
 					}
 					case 'quickstart':
@@ -373,7 +376,7 @@ export default mixins(
 				}
 			},
 			async createNewWorkflow (): Promise<void> {
-				const result = this.$store.getters.getStateIsDirty;
+				const result = this.uiStore.stateIsDirty;
 				if(result) {
 					const confirmModal = await this.confirmModal(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
@@ -385,7 +388,7 @@ export default mixins(
 					);
 					if (confirmModal === MODAL_CONFIRMED) {
 						const saved = await this.saveCurrentWorkflow({}, false);
-						if (saved) this.$store.dispatch('settings/fetchPromptsData');
+						if (saved) await this.settingsStore.fetchPromptsData();
 						if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
 							this.$root.$emit('newWorkflow');
 						} else {
@@ -396,11 +399,11 @@ export default mixins(
 							type: 'success',
 						});
 					} else if (confirmModal === MODAL_CANCEL) {
-						this.$store.commit('setStateDirty', false);
+						this.uiStore.stateIsDirty = false;
 						if (this.$router.currentRoute.name === VIEWS.NEW_WORKFLOW) {
 							this.$root.$emit('newWorkflow');
 						} else {
-							this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
+							this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
 							this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 						}
 						this.$showMessage({
@@ -412,7 +415,7 @@ export default mixins(
 					}
 				} else {
 					if (this.$router.currentRoute.name !== VIEWS.NEW_WORKFLOW) {
-						this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
+						this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
 						this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 					}
 					this.$showMessage({
@@ -447,7 +450,7 @@ export default mixins(
 			},
 			checkWidthAndAdjustSidebar (width: number) {
 				if (width < 900) {
-					this.$store.commit('ui/collapseSidebarMenu');
+					this.uiStore.sidebarMenuCollapsed = true;
 					Vue.nextTick(() => {
 						this.fullyExpanded = !this.isCollapsed;
 					});
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 45bc558027..b3e7bd39a1 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -1,6 +1,6 @@
 <template>
 	<el-dialog
-		:visible="visible"
+		:visible="uiStore.isModalOpen(this.$props.name)"
 		:before-close="closeDialog"
 		:class="{'dialog-wrapper': true, [$style.center]: center, scrollable: scrollable}"
 		:width="width"
@@ -38,6 +38,8 @@
 
 <script lang="ts">
 import Vue from "vue";
+import { useUIStore } from '@/stores/ui';
+import { mapStores } from "pinia";
 
 export default Vue.extend({
 	name: "Modal",
@@ -118,7 +120,7 @@ export default Vue.extend({
 			});
 
 			this.$props.eventBus.$on('closeAll', () => {
-				this.closeAllDialogs();
+				this.uiStore.closeAllModals();
 			});
 		}
 
@@ -130,51 +132,8 @@ export default Vue.extend({
 	beforeDestroy() {
 		window.removeEventListener('keydown', this.onWindowKeydown);
 	},
-	methods: {
-		onWindowKeydown(event: KeyboardEvent) {
-			if (!this.isActive) {
-				return;
-			}
-
-			if (event && event.keyCode === 13) {
-				this.handleEnter();
-			}
-		},
-		handleEnter() {
-			if (this.isActive) {
-				this.$emit('enter');
-			}
-		},
-		closeAllDialogs() {
-			this.$store.commit('ui/closeAllModals');
-		},
-		async closeDialog() {
-			if (this.beforeClose) {
-				const shouldClose = await this.beforeClose();
-				if (shouldClose === false) { // must be strictly false to stop modal from closing
-					return;
-				}
-			}
-
-			this.$store.commit('ui/closeModal', this.$props.name);
-		},
-		getCustomClass() {
-			let classes = this.$props.customClass || '';
-
-			if (this.$props.classic) {
-				classes = `${classes} classic`;
-			}
-
-			return classes;
-		},
-	},
 	computed: {
-		isActive(): boolean {
-			return this.$store.getters['ui/isModalActive'](this.$props.name);
-		},
-		visible(): boolean {
-			return this.$store.getters['ui/isModalOpen'](this.$props.name);
-		},
+		...mapStores(useUIStore),
 		styles() {
 			const styles: {[prop: string]: string} = {};
 			if (this.height) {
@@ -195,6 +154,40 @@ export default Vue.extend({
 			return styles;
 		},
 	},
+	methods: {
+		onWindowKeydown(event: KeyboardEvent) {
+			if (!this.uiStore.isModalActive(this.$props.name)) {
+				return;
+			}
+
+			if (event && event.keyCode === 13) {
+				this.handleEnter();
+			}
+		},
+		handleEnter() {
+			if (this.uiStore.isModalActive(this.$props.name)) {
+				this.$emit('enter');
+			}
+		},
+		async closeDialog() {
+			if (this.beforeClose) {
+				const shouldClose = await this.beforeClose();
+				if (shouldClose === false) { // must be strictly false to stop modal from closing
+					return;
+				}
+			}
+			this.uiStore.closeModal(this.$props.name);
+		},
+		getCustomClass() {
+			let classes = this.$props.customClass || '';
+
+			if (this.$props.classic) {
+				classes = `${classes} classic`;
+			}
+
+			return classes;
+		},
+	},
 });
 </script>
 
diff --git a/packages/editor-ui/src/components/ModalDrawer.vue b/packages/editor-ui/src/components/ModalDrawer.vue
index 3854b72f95..af031bf15b 100644
--- a/packages/editor-ui/src/components/ModalDrawer.vue
+++ b/packages/editor-ui/src/components/ModalDrawer.vue
@@ -1,7 +1,7 @@
 <template>
 	<el-drawer
 		:direction="direction"
-		:visible="visible"
+		:visible="uiStore.isModalOpen(this.$props.name)"
 		:size="width"
 		:before-close="close"
 		:modal="modal"
@@ -19,6 +19,8 @@
 </template>
 
 <script lang="ts">
+import { useUIStore } from "@/stores/ui";
+import { mapStores } from "pinia";
 import Vue from "vue";
 
 export default Vue.extend({
@@ -65,9 +67,12 @@ export default Vue.extend({
 	beforeDestroy() {
 		window.removeEventListener('keydown', this.onWindowKeydown);
 	},
+	computed: {
+		...mapStores(useUIStore),
+	},
 	methods: {
 		onWindowKeydown(event: KeyboardEvent) {
-			if (!this.isActive) {
+			if (!this.uiStore.isModalActive(this.$props.name)) {
 				return;
 			}
 
@@ -76,7 +81,7 @@ export default Vue.extend({
 			}
 		},
 		handleEnter() {
-			if (this.isActive) {
+			if (this.uiStore.isModalActive(this.$props.name)) {
 				this.$emit('enter');
 			}
 		},
@@ -87,16 +92,7 @@ export default Vue.extend({
 					return;
 				}
 			}
-
-			this.$store.commit('ui/closeModal', this.$props.name);
-		},
-	},
-	computed: {
-		isActive(): boolean {
-			return this.$store.getters['ui/isModalActive'](this.$props.name);
-		},
-		visible(): boolean {
-			return this.$store.getters['ui/isModalOpen'](this.$props.name);
+			this.uiStore.closeModal(this.$props.name);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/ModalRoot.vue b/packages/editor-ui/src/components/ModalRoot.vue
index df8aec877f..c4f1b40484 100644
--- a/packages/editor-ui/src/components/ModalRoot.vue
+++ b/packages/editor-ui/src/components/ModalRoot.vue
@@ -1,40 +1,36 @@
 <template>
 	<div
-			v-if="isOpen(name) || keepAlive"
+			v-if="uiStore.isModalOpen(name) || keepAlive"
 	>
 		<slot
 			:modalName="name"
-			:active="isActive(name)"
-			:open="isOpen(name)"
-			:activeId="getActiveId(name)"
-			:mode="getMode(name)"
-			:data="getData(name)"
+			:active="uiStore.isModalActive(name)"
+			:open="uiStore.isModalOpen(name)"
+			:activeId="uiStore.getModalActiveId(name)"
+			:mode="uiStore.getModalMode(name)"
+			:data="uiStore.getModalData(name)"
 		></slot>
 	</div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
+import { useUIStore } from '@/stores/ui';
+import { mapStores } from "pinia";
 
 export default Vue.extend({
 	name: "ModalRoot",
-	props: ["name", "keepAlive"],
-	methods: {
-		isActive(name: string) {
-			return this.$store.getters['ui/isModalActive'](name);
+	props: {
+		name: {
+			type: String,
+			required: true,
 		},
-		isOpen(name: string) {
-			return this.$store.getters['ui/isModalOpen'](name);
-		},
-		getData(name: string) {
-			return this.$store.getters['ui/getModalData'](name);
-		},
-		getMode(name: string) {
-			return this.$store.getters['ui/getModalMode'](name);
-		},
-		getActiveId(name: string) {
-			return this.$store.getters['ui/getModalActiveId'](name);
+		keepAlive: {
+			type: Boolean,
 		},
 	},
+	computed: {
+		...mapStores(useUIStore),
+	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/NDVDraggablePanels.vue b/packages/editor-ui/src/components/NDVDraggablePanels.vue
index 309deaf0dd..4bf9b75242 100644
--- a/packages/editor-ui/src/components/NDVDraggablePanels.vue
+++ b/packages/editor-ui/src/components/NDVDraggablePanels.vue
@@ -49,6 +49,9 @@ import {
 } from '@/constants';
 import mixins from 'vue-typed-mixins';
 import { debounceHelper } from './mixins/debounce';
+import { mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv';
+import { nodePanelType } from '@/Interface';
 
 
 const SIDE_MARGIN = 24;
@@ -116,32 +119,35 @@ export default mixins(debounceHelper).extend({
 		window.removeEventListener('resize', this.setTotalWidth);
 	},
 	computed: {
+		...mapStores(
+			useNDVStore,
+		),
 		mainPanelDimensions(): {
 			relativeWidth: number,
 			relativeLeft: number,
 			relativeRight: number
 			} {
-			return this.$store.getters['ndv/mainPanelDimensions'](this.currentNodePaneType);
+			return this.ndvStore.getMainPanelDimensions(this.currentNodePaneType as nodePanelType);
 		},
-		supportedResizeDirections() {
+		supportedResizeDirections(): string[] {
 			const supportedDirections = ['right'];
 
 			if(this.isDraggable) supportedDirections.push('left');
 			return supportedDirections;
 		},
-		currentNodePaneType() {
+		currentNodePaneType(): string {
 			if(!this.hasInputSlot) return 'inputless';
 			if(!this.isDraggable) return 'dragless';
 			if(this.nodeType === null) return 'unknown';
 			return get(this, 'nodeType.parameterPane') || 'regular';
 		},
-		hasInputSlot() {
+		hasInputSlot(): boolean {
 			return this.$slots.input !== undefined;
 		},
 		inputPanelMargin(): number {
 			return this.pxToRelativeWidth(SIDE_PANELS_MARGIN);
 		},
-		minWindowWidth() {
+		minWindowWidth(): number {
 			return 2 * (SIDE_MARGIN + SIDE_PANELS_MARGIN) + MIN_PANEL_WIDTH;
 		},
 		minimumLeftPosition(): number {
@@ -196,7 +202,7 @@ export default mixins(debounceHelper).extend({
 			const currentRelativeLeftDelta = this.calculatedPositions.outputPanelRelativeLeft - panelMinLeft;
 			return currentRelativeLeftDelta > 0 ? currentRelativeLeftDelta : 0;
 		},
-		hasDoubleWidth() {
+		hasDoubleWidth(): boolean {
 			return get(this, 'nodeType.parameterPane') === 'wide';
 		},
 		fixedPanelWidth(): number {
@@ -244,7 +250,7 @@ export default mixins(debounceHelper).extend({
 		setMainPanelWidth(relativeWidth?: number) {
 			const mainPanelRelativeWidth = relativeWidth || this.pxToRelativeWidth(initialMainPanelWidth[this.currentNodePaneType]);
 
-			this.$store.commit('ndv/setMainPanelDimensions', {
+			this.ndvStore.setMainPanelDimensions({
 				panelType: this.currentNodePaneType,
 				dimensions: {
 					relativeWidth: mainPanelRelativeWidth,
@@ -260,7 +266,7 @@ export default mixins(debounceHelper).extend({
 			const isInputless = this.currentNodePaneType === 'inputless';
 
 			if(isMinLeft) {
-				this.$store.commit('ndv/setMainPanelDimensions', {
+				this.ndvStore.setMainPanelDimensions({
 					panelType: this.currentNodePaneType,
 					dimensions: {
 						relativeLeft: this.minimumLeftPosition,
@@ -271,18 +277,18 @@ export default mixins(debounceHelper).extend({
 			}
 
 			if(isMaxRight) {
-				this.$store.commit('ndv/setMainPanelDimensions', {
-					panelType: this.currentNodePaneType,
+				this.ndvStore.setMainPanelDimensions({
+					panelType: this.currentNodePaneType as nodePanelType,
 					dimensions: {
 						relativeLeft: 1 - this.mainPanelDimensions.relativeWidth - this.maximumRightPosition,
-						relativeRight: this.maximumRightPosition,
+						relativeRight: this.maximumRightPosition as number,
 					},
 				});
 				return;
 			}
 
-			this.$store.commit('ndv/setMainPanelDimensions', {
-				panelType: this.currentNodePaneType,
+			this.ndvStore.setMainPanelDimensions({
+				panelType: this.currentNodePaneType as nodePanelType,
 				dimensions: {
 					relativeLeft: isInputless ? this.minimumLeftPosition : mainPanelRelativeLeft,
 					relativeRight: mainPanelRelativeRight,
diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 53720bb9ed..4f7a9b9723 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -111,8 +111,13 @@ import mixins from 'vue-typed-mixins';
 
 import { get } from 'lodash';
 import { getStyleTokenValue, getTriggerNodeServiceName } from './helpers';
-import { INodeUi, XYPosition } from '@/Interface';
+import { IExecutionsSummary, INodeUi, XYPosition } from '@/Interface';
 import { debounceHelper } from './mixins/debounce';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(
 	externalHooks,
@@ -128,6 +133,12 @@ export default mixins(
 		NodeIcon,
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
 		isDuplicatable(): boolean {
 			if(!this.nodeType) return true;
 			return this.nodeType.maxNodes === undefined || this.sameTypeNodes.length < this.nodeType.maxNodes;
@@ -136,7 +147,7 @@ export default mixins(
 			return this.nodeType?.group.includes('schedule') === true;
 		},
 		nodeRunData(): ITaskData[] {
-			return this.$store.getters.getWorkflowResultDataByNodeName(this.data.name);
+			return this.workflowsStore.getWorkflowResultDataByNodeName(this.data?.name || '') || [];
 		},
 		hasIssues (): boolean {
 			if (this.hasPinData) return false;
@@ -154,7 +165,7 @@ export default mixins(
 			return workflowResultDataNode.length;
 		},
 		canvasOffsetPosition() {
-			return this.$store.getters.getNodeViewOffsetPosition;
+			return this.uiStore.nodeViewOffsetPosition;
 		},
 		getTriggerNodeTooltip (): string | undefined {
 			if (this.nodeType !== null && this.nodeType.hasOwnProperty('eventTriggerDescription')) {
@@ -179,11 +190,11 @@ export default mixins(
 			return !!(this.nodeType && this.nodeType.polling);
 		},
 		isExecuting (): boolean {
-			return this.$store.getters.executingNode === this.data.name;
+			return this.workflowsStore.executingNode === this.data.name;
 		},
 		isSingleActiveTriggerNode (): boolean {
-			const nodes = this.$store.getters.workflowTriggerNodes.filter((node: INodeUi) => {
-				const nodeType =  this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
+			const nodes = this.workflowsStore.workflowTriggerNodes.filter((node: INodeUi) => {
+				const nodeType =  this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 				return nodeType && nodeType.eventTriggerDescription !== '' && !node.disabled;
 			});
 
@@ -193,7 +204,7 @@ export default mixins(
 			return this.data.type === MANUAL_TRIGGER_NODE_TYPE;
 		},
 		isTriggerNode (): boolean {
-			return this.$store.getters['nodeTypes/isTriggerNode'](this.data.type);
+			return this.nodeTypesStore.isTriggerNode(this.data?.type || '');
 		},
 		isTriggerNodeTooltipEmpty () : boolean {
 			return this.nodeType !== null ? this.nodeType.eventTriggerDescription === '' : false;
@@ -202,13 +213,13 @@ export default mixins(
 			return this.node && this.node.disabled;
 		},
 		nodeType (): INodeTypeDescription | null {
-			return this.data && this.$store.getters['nodeTypes/getNodeType'](this.data.type, this.data.typeVersion);
+			return this.data && this.nodeTypesStore.getNodeType(this.data.type, this.data.typeVersion);
 		},
 		node (): INodeUi | undefined { // same as this.data but reactive..
-			return this.$store.getters.nodesByName[this.name] as INodeUi | undefined;
+			return this.workflowsStore.nodesByName[this.name] as INodeUi | undefined;
 		},
 		sameTypeNodes (): INodeUi[] {
-			return this.$store.getters.allNodes.filter((node: INodeUi) => node.type === this.data.type);
+			return this.workflowsStore.allNodes.filter((node: INodeUi) => node.type === this.data.type);
 		},
 		nodeClass (): object {
 			return {
@@ -261,7 +272,7 @@ export default mixins(
 			return this.data.name;
 		},
 		waiting (): string | undefined {
-			const workflowExecution = this.$store.getters.getWorkflowExecution;
+			const workflowExecution = this.workflowsStore.getWorkflowExecution as IExecutionsSummary;
 
 			if (workflowExecution && workflowExecution.waitTill) {
 				const lastNodeExecuted = get(workflowExecution, 'data.resultData.lastNodeExecuted');
@@ -285,7 +296,7 @@ export default mixins(
 			return;
 		},
 		workflowRunning (): boolean {
-			return this.$store.getters.isActionActive('workflowRunning');
+			return this.uiStore.isActionActive('workflowRunning');
 		},
 		nodeStyle (): object {
 			let borderColor = getStyleTokenValue('--color-foreground-xdark');
@@ -312,7 +323,7 @@ export default mixins(
 			return returnStyles;
 		},
 		isSelected (): boolean {
-			return this.$store.getters.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name);
+			return this.uiStore.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name) !== undefined;
 		},
 		shiftOutputCount (): boolean {
 			return !!(this.nodeType && this.nodeType.outputs.length > 2);
@@ -408,14 +419,14 @@ export default mixins(
 		},
 		disableNode () {
 			this.disableNodes([this.data]);
-			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'disable', workflow_id: this.$store.getters.workflowId });
+			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'disable', workflow_id: this.workflowsStore.workflowId });
 		},
 		executeNode () {
 			this.$emit('runWorkflow', this.data.name, 'Node.executeNode');
-			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'execute', workflow_id: this.$store.getters.workflowId });
+			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'execute', workflow_id: this.workflowsStore.workflowId });
 		},
 		deleteNode () {
-			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'delete', workflow_id: this.$store.getters.workflowId });
+			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'delete', workflow_id: this.workflowsStore.workflowId });
 
 			Vue.nextTick(() => {
 				// Wait a tick else vue causes problems because the data is gone
@@ -423,7 +434,7 @@ export default mixins(
 			});
 		},
 		duplicateNode () {
-			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'duplicate', workflow_id: this.$store.getters.workflowId });
+			this.$telemetry.track('User clicked node hover button', { node_type: this.data.type, button_name: 'duplicate', workflow_id: this.workflowsStore.workflowId });
 			Vue.nextTick(() => {
 				// Wait a tick else vue causes problems because the data is gone
 				this.$emit('duplicateNode', this.data.name);
@@ -444,7 +455,7 @@ export default mixins(
 		},
 
 		setNodeActive () {
-			this.$store.commit('ndv/setActiveNodeName', this.data.name);
+			this.ndvStore.activeNodeName = this.data ? this.data.name : '';
 			this.pinDataDiscoveryTooltipVisible = false;
 		},
 		touchStart () {
diff --git a/packages/editor-ui/src/components/Node/NodeCreation.vue b/packages/editor-ui/src/components/Node/NodeCreation.vue
index b830cef238..693d25ce14 100644
--- a/packages/editor-ui/src/components/Node/NodeCreation.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreation.vue
@@ -20,6 +20,8 @@
 import Vue from "vue";
 import * as CanvasHelpers from "@/views/canvasHelpers";
 import {DEFAULT_STICKY_HEIGHT, DEFAULT_STICKY_WIDTH, STICKY_NODE_TYPE} from "@/constants";
+import { mapStores } from "pinia";
+import { useUIStore } from "@/stores/ui";
 
 export default Vue.extend({
 	name: 'node-creation',
@@ -41,6 +43,9 @@ export default Vue.extend({
 			showStickyButton: false,
 		};
 	},
+	computed: {
+		...mapStores(useUIStore),
+	},
 	methods: {
 		onCreateMenuHoverIn(mouseinEvent: MouseEvent) {
 			const buttonsWrapper = mouseinEvent.target as Element;
@@ -73,7 +78,7 @@ export default Vue.extend({
 				(document.activeElement as HTMLElement).blur();
 			}
 
-			const offset: [number, number] = [...(this.$store.getters.getNodeViewOffsetPosition as [number, number])];
+			const offset: [number, number] = [...(this.uiStore.nodeViewOffsetPosition)];
 
 			const position = CanvasHelpers.getMidCanvasPosition(this.nodeViewScale, offset);
 			position[0] -= DEFAULT_STICKY_WIDTH / 2;
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
index 37ab34721d..13c78ee3ce 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue
@@ -92,6 +92,10 @@ import { matchesNodeType, matchesSelectType } from './helpers';
 import { BaseTextKey } from '@/plugins/i18n';
 import { intersection } from '@/utils';
 import { sublimeSearch } from './sortUtils';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(externalHooks, globalLinkActions).extend({
 	name: 'CategorizedItems',
@@ -146,6 +150,11 @@ export default mixins(externalHooks, globalLinkActions).extend({
 		this.unregisterCustomAction('showAllNodeCreatorNodes');
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useRootStore,
+			useWorkflowsStore,
+		),
 		activeSubcategory(): INodeCreateElement | null {
 			return this.activeSubcategoryHistory[this.activeSubcategoryHistory.length - 1] || null;
 		},
@@ -156,10 +165,10 @@ export default mixins(externalHooks, globalLinkActions).extend({
 			return this.$store.getters['nodeCreator/selectedType'];
 		},
 		categoriesWithNodes(): ICategoriesWithNodes {
-			return this.$store.getters['nodeTypes/categoriesWithNodes'];
+			return this.nodeTypesStore.categoriesWithNodes;
 		},
 		categorizedItems(): INodeCreateElement[] {
-			return this.$store.getters['nodeTypes/categorizedItems'];
+			return this.nodeTypesStore.categorizedItems;
 		},
 		activeSubcategoryTitle(): string {
 			if(!this.activeSubcategory || !this.activeSubcategory.properties) return '';
@@ -178,7 +187,7 @@ export default mixins(externalHooks, globalLinkActions).extend({
 			return this.nodeFilter.toLowerCase().trim();
 		},
 		defaultLocale (): string {
-			return this.$store.getters.defaultLocale;
+			return this.rootStore.defaultLocale;
 		},
 		filteredNodeTypes(): INodeCreateElement[] {
 			const filter = this.searchFilter;
@@ -337,7 +346,7 @@ export default mixins(externalHooks, globalLinkActions).extend({
 				newValue,
 				selectedType: this.selectedType,
 				filteredNodes: this.filteredNodeTypes,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 			});
 		},
 	},
@@ -444,7 +453,7 @@ export default mixins(externalHooks, globalLinkActions).extend({
 				);
 			} else {
 				this.activeCategory = [...this.activeCategory, category];
-				this.$telemetry.trackNodesPanel('nodeCreateList.onCategoryExpanded', { category_name: category, workflow_id: this.$store.getters.workflowId });
+				this.$telemetry.trackNodesPanel('nodeCreateList.onCategoryExpanded', { category_name: category, workflow_id: this.workflowsStore.workflowId });
 			}
 
 			this.activeIndex = this.categorized.findIndex(
@@ -456,7 +465,7 @@ export default mixins(externalHooks, globalLinkActions).extend({
 			this.$store.commit('nodeCreator/setShowTabs', false);
 			this.activeSubcategoryIndex = 0;
 			this.activeSubcategoryHistory.push(selected);
-			this.$telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', { selected, workflow_id: this.$store.getters.workflowId });
+			this.$telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', { selected, workflow_id: this.workflowsStore.workflowId });
 		},
 
 		onSubcategoryClose() {
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue b/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
index 1e824808da..f3d6af11ea 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue
@@ -18,6 +18,8 @@ import camelcase from 'lodash.camelcase';
 import { CategoryName } from '@/plugins/i18n';
 import { INodeCreateElement, ICategoriesWithNodes } from '@/Interface';
 import { NODE_TYPE_COUNT_MAPPER } from '@/constants';
+import { mapStores } from 'pinia';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 
 export default Vue.extend({
@@ -27,20 +29,23 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+		),
 		selectedType(): "Regular" | "Trigger" | "All" {
 			return this.$store.getters['nodeCreator/selectedType'];
 		},
 		categoriesWithNodes(): ICategoriesWithNodes {
-			return this.$store.getters['nodeTypes/categoriesWithNodes'];
+			return this.nodeTypesStore.categoriesWithNodes;
 		},
 		categorizedItems(): INodeCreateElement[] {
-			return this.$store.getters['nodeTypes/categorizedItems'];
+			return this.nodeTypesStore.categorizedItems;
 		},
 		categoryName() {
 			return camelcase(this.item.category);
 		},
 		nodesCount(): number {
-			const currentCategory = this.categoriesWithNodes[this.item.category];
+			const currentCategory= (this.categoriesWithNodes as ICategoriesWithNodes)[this.item.category];
 			const subcategories = Object.keys(currentCategory);
 
 			// We need to sum subcategories count for the curent nodeType view
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
index ad445fb6a3..cd1efa2500 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue
@@ -33,6 +33,8 @@ import { ALL_NODE_FILTER, TRIGGER_NODE_FILTER, OTHER_TRIGGER_NODES_SUBCATEGORY,
 import CategorizedItems from './CategorizedItems.vue';
 import TypeSelector from './TypeSelector.vue';
 import { INodeCreateElement } from '@/Interface';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export default mixins(externalHooks).extend({
 	name: 'NodeCreateList',
@@ -55,6 +57,9 @@ export default mixins(externalHooks).extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useWorkflowsStore,
+		),
 		selectedType(): string {
 			return this.$store.getters['nodeCreator/selectedType'];
 		},
@@ -68,7 +73,7 @@ export default mixins(externalHooks).extend({
 			this.$telemetry.trackNodesPanel('nodeCreateList.selectedTypeChanged', {
 				old_filter: oldValue,
 				new_filter: newValue,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 			});
 		},
 	},
@@ -80,7 +85,7 @@ export default mixins(externalHooks).extend({
 	destroyed() {
 		this.$store.commit('nodeCreator/setSelectedType', ALL_NODE_FILTER);
 		this.$externalHooks().run('nodeCreateList.destroyed');
-		this.$telemetry.trackNodesPanel('nodeCreateList.destroyed', { workflow_id: this.$store.getters.workflowId });
+		this.$telemetry.trackNodesPanel('nodeCreateList.destroyed', { workflow_id: this.workflowsStore.workflowId });
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
index 9215cd3077..f1cdf4873a 100644
--- a/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
+++ b/packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<aside :class="{'node-creator-scrim': true, expanded: !sidebarMenuCollapsed, active: showScrim}" />
+		<aside :class="{'node-creator-scrim': true, expanded: !uiStore.sidebarMenuCollapsed, active: showScrim}" />
 
 		<slide-transition>
 			<div
@@ -29,6 +29,9 @@ import { INodeTypeDescription } from 'n8n-workflow';
 import SlideTransition from '../../transitions/SlideTransition.vue';
 
 import MainPanel from './MainPanel.vue';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default Vue.extend({
 	name: 'NodeCreator',
@@ -42,14 +45,15 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useUIStore,
+		),
 		showScrim(): boolean {
 			return this.$store.getters['nodeCreator/showScrim'];
 		},
-		sidebarMenuCollapsed(): boolean {
-			return this.$store.getters['ui/sidebarMenuCollapsed'];
-		},
 		visibleNodeTypes(): INodeTypeDescription[] {
-			return this.$store.getters['nodeTypes/visibleNodeTypes'];
+			return this.nodeTypesStore.visibleNodeTypes;
 		},
 		searchItems(): INodeCreateElement[] {
 			const sorted = [...this.visibleNodeTypes];
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index 7304846104..b55e8bc78e 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -63,6 +63,7 @@ import {
 	ICredentialsResponse,
 	INodeUi,
 	INodeUpdatePropertiesInformation,
+	IUser,
 } from '@/Interface';
 import {
 	ICredentialType,
@@ -81,6 +82,11 @@ import { mapGetters } from "vuex";
 
 import mixins from 'vue-typed-mixins';
 import {getCredentialPermissions} from "@/permissions";
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useUsersStore } from '@/stores/users';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(
 	genericHelpers,
@@ -103,11 +109,19 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapGetters('users', ['currentUser']),
+		...mapStores(
+			useNodeTypesStore,
+			useUIStore,
+			useUsersStore,
+			useWorkflowsStore,
+		),
 		...mapGetters('credentials', {
 			allCredentialsByType: 'allCredentialsByType',
 			getCredentialTypeByName: 'getCredentialTypeByName',
 		}),
+		currentUser (): IUser {
+			return this.usersStore.currentUser || {} as IUser;
+		},
 		credentialTypesNode (): string[] {
 			return this.credentialTypesNodeDescription
 				.map((credentialTypeDescription) => credentialTypeDescription.name);
@@ -125,7 +139,7 @@ export default mixins(
 
 			if (credType) return [credType];
 
-			const activeNodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
+			const activeNodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 			if (activeNodeType && activeNodeType.credentials) {
 				return activeNodeType.credentials;
 			}
@@ -220,8 +234,8 @@ export default mixins(
 		onCredentialSelected (credentialType: string, credentialId: string | null | undefined) {
 			if (credentialId === this.NEW_CREDENTIALS_TEXT) {
 				this.listenForNewCredentials(credentialType);
-				this.$store.dispatch('ui/openNewCredential', { type: credentialType });
-				this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: true, workflow_id: this.$store.getters.workflowId });
+				this.uiStore.openNewCredential(credentialType);
+				this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: true, workflow_id: this.workflowsStore.workflowId });
 				return;
 			}
 
@@ -231,7 +245,7 @@ export default mixins(
 					credential_type: credentialType,
 					node_type: this.node.type,
 					...(this.hasProxyAuth(this.node) ? { is_service_specific: true } : {}),
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					credential_id: credentialId,
 				},
 			);
@@ -244,7 +258,7 @@ export default mixins(
 			// if credentials has been string or neither id matched nor name matched uniquely
 			if (oldCredentials.id === null || (oldCredentials.id && !this.$store.getters['credentials/getCredentialByIdAndType'](oldCredentials.id, credentialType))) {
 				// update all nodes in the workflow with the same old/invalid credentials
-				this.$store.commit('replaceInvalidWorkflowCredentials', {
+				this.workflowsStore.replaceInvalidWorkflowCredentials({
 					credentials: selected,
 					invalid: oldCredentials,
 					type: credentialType,
@@ -316,9 +330,9 @@ export default mixins(
 
 		editCredential(credentialType: string): void {
 			const { id } = this.node.credentials[credentialType];
-			this.$store.dispatch('ui/openExistingCredential', { id });
+			this.uiStore.openExistingCredential(id);
 
-			this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: false, workflow_id: this.$store.getters.workflowId });
+			this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: false, workflow_id: this.workflowsStore.workflowId });
 
 			this.listenForNewCredentials(credentialType);
 		},
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 2d22d5978c..340fa06cd5 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -141,6 +141,11 @@ import {
 import { workflowActivate } from './mixins/workflowActivate';
 import { pinData } from "@/components/mixins/pinData";
 import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useUIStore } from '@/stores/ui';
 
 export default mixins(
 	externalHooks,
@@ -182,8 +187,7 @@ export default mixins(
 		};
 	},
 	mounted() {
-		this.$store.commit('ndv/setNDVSessionId');
-
+		this.ndvStore.setNDVSessionId;
 		dataPinningEventBus.$on('data-pinning-discovery', ({ isTooltipVisible }: { isTooltipVisible: boolean }) => {
 			this.pinDataDiscoveryTooltipVisible = isTooltipVisible;
 		});
@@ -192,12 +196,17 @@ export default mixins(
 		dataPinningEventBus.$off('data-pinning-discovery');
 	},
 	computed: {
-		...mapGetters(['executionWaitingForWebhook']),
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
 		sessionId(): string {
-			return this.$store.getters['ndv/ndvSessionId'];
+			return this.ndvStore.sessionId;
 		},
 		workflowRunning(): boolean {
-			return this.$store.getters.isActionActive('workflowRunning');
+			return this.uiStore.isActionActive('workflowRunning');
 		},
 		showTriggerWaitingWarning(): boolean {
 			return (
@@ -205,25 +214,25 @@ export default mixins(
 				!!this.activeNodeType &&
 				!this.activeNodeType.group.includes('trigger') &&
 				this.workflowRunning &&
-				this.executionWaitingForWebhook
+				this.workflowsStore.executionWaitingForWebhook
 			);
 		},
 		activeNode(): INodeUi | null {
-			return this.$store.getters['ndv/activeNode'];
+			return this.ndvStore.activeNode;
 		},
 		inputNodeName(): string | undefined {
 			return this.selectedInput || this.parentNode;
 		},
 		inputNode(): INodeUi | null {
 			if (this.inputNodeName) {
-				return this.$store.getters.getNodeByName(this.inputNodeName);
+				return this.workflowsStore.getNodeByName(this.inputNodeName);
 			}
 
 			return null;
 		},
 		activeNodeType(): INodeTypeDescription | null {
 			if (this.activeNode) {
-				return this.$store.getters['nodeTypes/getNodeType'](this.activeNode.type, this.activeNode.typeVersion);
+				return this.nodeTypesStore.getNodeType(this.activeNode.type, this.activeNode.typeVersion);
 			}
 			return null;
 		},
@@ -257,11 +266,11 @@ export default mixins(
 		},
 		isActiveStickyNode(): boolean {
 			return (
-				!!this.$store.getters['ndv/activeNode'] && this.$store.getters['ndv/activeNode'].type === STICKY_NODE_TYPE
+				!!this.ndvStore.activeNode && this.ndvStore.activeNode .type === STICKY_NODE_TYPE
 			);
 		},
 		workflowExecution(): IExecutionResponse | null {
-			return this.$store.getters.getWorkflowExecution;
+			return this.workflowsStore.getWorkflowExecution;
 		},
 		workflowRunData(): IRunData | null {
 			if (this.workflowExecution === null) {
@@ -340,13 +349,13 @@ export default mixins(
 			return `${BASE_NODE_SURVEY_URL}${this.activeNodeType.name}`;
 		},
 		outputPanelEditMode(): { enabled: boolean; value: string; } {
-			return this.$store.getters['ndv/outputPanelEditMode'];
+			return this.ndvStore.outputPanelEditMode;
 		},
 		isWorkflowRunning(): boolean {
-			return this.$store.getters.isActionActive('workflowRunning');
+			return this.uiStore.isActionActive('workflowRunning');
 		},
 		isExecutionWaitingForWebhook(): boolean {
-			return this.$store.getters.executionWaitingForWebhook;
+			return this.workflowsStore.executionWaitingForWebhook;
 		},
 		blockUi(): boolean {
 			return this.isWorkflowRunning || this.isExecutionWaitingForWebhook;
@@ -364,7 +373,7 @@ export default mixins(
 				this.avgInputRowHeight = 0;
 
 				setTimeout(() => {
-					this.$store.commit('ndv/setNDVSessionId');
+					this.ndvStore.setNDVSessionId;
 				}, 0);
 				this.$externalHooks().run('dataDisplay.nodeTypeChanged', {
 					nodeSubtitle: this.getNodeSubtitle(node, this.activeNodeType, this.getCurrentWorkflow()),
@@ -374,24 +383,24 @@ export default mixins(
 
 				setTimeout(() => {
 					if (this.activeNode) {
-						const outogingConnections = this.$store.getters.outgoingConnectionsByNodeName(
+						const outgoingConnections = this.workflowsStore.outgoingConnectionsByNodeName(
 							this.activeNode.name,
 						) as INodeConnections;
 
 						this.$telemetry.track('User opened node modal', {
 							node_type: this.activeNodeType ? this.activeNodeType.name : '',
-							workflow_id: this.$store.getters.workflowId,
+							workflow_id: this.workflowsStore.workflowId,
 							session_id: this.sessionId,
 							parameters_pane_position: this.mainPanelPosition,
 							input_first_connector_runs: this.maxInputRun,
 							output_first_connector_runs: this.maxOutputRun,
 							selected_view_inputs: this.isTriggerNode
 								? 'trigger'
-								: this.$store.getters['ndv/inputPanelDisplayMode'],
-							selected_view_outputs: this.$store.getters['ndv/outputPanelDisplayMode'],
+								: this.ndvStore.inputPanelDisplayMode,
+							selected_view_outputs: this.ndvStore.outputPanelDisplayMode,
 							input_connectors: this.parentNodes.length,
 							output_connectors:
-								outogingConnections && outogingConnections.main && outogingConnections.main.length,
+								outgoingConnections && outgoingConnections.main && outgoingConnections.main.length,
 							input_displayed_run_index: this.inputRun,
 							output_displayed_run_index: this.outputRun,
 							data_pinning_tooltip_presented: this.pinDataDiscoveryTooltipVisible,
@@ -413,12 +422,12 @@ export default mixins(
 		},
 		inputNodeName(nodeName: string | undefined) {
 			setTimeout(() => {
-				this.$store.commit('ndv/setInputNodeName', nodeName);
+				this.ndvStore.setInputNodeName(nodeName);
 			}, 0);
 		},
 		inputRun() {
 			setTimeout(() => {
-				this.$store.commit('ndv/setInputRunIndex', this.inputRun);
+				this.ndvStore.setInputRunIndex(this.inputRun);
 			}, 0);
 		},
 	},
@@ -428,7 +437,7 @@ export default mixins(
 				return;
 			}
 			if (e === null) {
-				this.$store.commit('ndv/setHoveringItem', null);
+				this.ndvStore.setHoveringItem(null);
 				return;
 			}
 
@@ -438,11 +447,11 @@ export default mixins(
 				outputIndex: e.outputIndex,
 				itemIndex: e.itemIndex,
 			};
-			this.$store.commit('ndv/setHoveringItem', item);
+			this.ndvStore.setHoveringItem(item);
 		},
 		onOutputItemHover(e: {itemIndex: number, outputIndex: number} | null) {
 			if (e === null || !this.activeNode) {
-				this.$store.commit('ndv/setHoveringItem', null);
+				this.ndvStore.setHoveringItem(null);
 				return;
 			}
 
@@ -452,7 +461,7 @@ export default mixins(
 				outputIndex: e.outputIndex,
 				itemIndex: e.itemIndex,
 			};
-			this.$store.commit('ndv/setHoveringItem', item);
+			this.ndvStore.setHoveringItem(item);
 		},
 		onInputTableMounted(e: { avgRowHeight: number }) {
 			this.avgInputRowHeight = e.avgRowHeight;
@@ -461,7 +470,7 @@ export default mixins(
 			this.avgOutputRowHeight = e.avgRowHeight;
 		},
 		onWorkflowActivate() {
-			this.$store.commit('ndv/setActiveNodeName', null);
+			this.ndvStore.activeNodeName = null;
 			setTimeout(() => {
 				this.activateCurrentWorkflow('ndv');
 			}, 1000);
@@ -471,7 +480,7 @@ export default mixins(
 			if (this.activeNode) {
 				this.$telemetry.track('User clicked ndv link', {
 					node_type: this.activeNode.type,
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
 					pane: 'main',
 					type: 'i-wish-this-node-would',
@@ -493,7 +502,7 @@ export default mixins(
 				end_position: e.position,
 				node_type: this.activeNodeType ? this.activeNodeType.name : '',
 				session_id: this.sessionId,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 			});
 			this.mainPanelPosition = e.position;
 		},
@@ -567,21 +576,23 @@ export default mixins(
 						return;
 					}
 
-					this.$store.commit('pinData', { node: this.activeNode, data: jsonParse(value) });
+					if (this.activeNode) {
+						this.workflowsStore.pinData({ node: this.activeNode, data: jsonParse(value) });
+					}
 				}
 
-				this.$store.commit('ndv/setOutputPanelEditModeEnabled', false);
+				this.ndvStore.setOutputPanelEditModeEnabled(false);
 			}
 
 			this.$externalHooks().run('dataDisplay.nodeEditingFinished');
 			this.$telemetry.track('User closed node modal', {
 				node_type: this.activeNodeType ? this.activeNodeType.name : '',
 				session_id: this.sessionId,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 			});
 			this.triggerWaitingWarningEnabled = false;
-			this.$store.commit('ndv/setActiveNodeName', null);
-			this.$store.commit('ndv/resetNDVSessionId');
+			this.ndvStore.activeNodeName = null;
+			this.ndvStore.resetNDVSessionId();
 		},
 		onRunOutputIndexChange(run: number) {
 			this.runOutputIndex = run;
@@ -610,7 +621,7 @@ export default mixins(
 			this.$telemetry.track('User changed ndv input dropdown', {
 				node_type: this.activeNode ? this.activeNode.type : '',
 				session_id: this.sessionId,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 				selection_value: index,
 				input_node_type: this.inputNode ? this.inputNode.type : '',
 			});
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index ec07a63bb9..962a7d6b57 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -23,6 +23,10 @@ import mixins from 'vue-typed-mixins';
 import { workflowRun } from './mixins/workflowRun';
 import { pinData } from './mixins/pinData';
 import { dataPinningEventBus } from '@/event-bus/data-pinning-event-bus';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(
 	workflowRun,
@@ -54,25 +58,30 @@ export default mixins(
 		},
 	},
 	computed: {
-		node (): INodeUi {
-			return this.$store.getters.getNodeByName(this.nodeName);
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useWorkflowsStore,
+		),
+		node (): INodeUi | null {
+			return this.workflowsStore.getNodeByName(this.nodeName);
 		},
 		nodeType (): INodeTypeDescription | null {
 			if (this.node) {
-				return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
+				return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
 			}
 			return null;
 		},
 		nodeRunning (): boolean {
-			const triggeredNode = this.$store.getters.executedNode;
-			const executingNode = this.$store.getters.executingNode;
+			const triggeredNode = this.workflowsStore.executedNode;
+			const executingNode = this.workflowsStore.executingNode;
 			return this.workflowRunning && (executingNode === this.node.name || triggeredNode === this.node.name);
 		},
 		workflowRunning (): boolean {
-			return this.$store.getters.isActionActive('workflowRunning');
+			return this.uiStore.isActionActive('workflowRunning');
 		},
 		isTriggerNode (): boolean {
-			return this.$store.getters['nodeTypes/isTriggerNode'](this.node.type);
+			return this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
 		isManualTriggerNode (): boolean {
 			return Boolean(this.nodeType && this.nodeType.name === MANUAL_TRIGGER_NODE_TYPE);
@@ -87,8 +96,8 @@ export default mixins(
 			return Boolean(this.nodeType && this.nodeType.name === WEBHOOK_NODE_TYPE);
 		},
 		isListeningForEvents(): boolean {
-			const waitingOnWebhook = this.$store.getters.executionWaitingForWebhook as boolean;
-			const executedNode = this.$store.getters.executedNode as string | undefined;
+			const waitingOnWebhook = this.workflowsStore.executionWaitingForWebhook;
+			const executedNode = this.workflowsStore.executedNode;
 
 			return (
 				this.node &&
@@ -114,7 +123,8 @@ export default mixins(
 			}
 
 			if (this.isTriggerNode && this.hasIssues) {
-				if (this.$store.getters['ndv/activeNode'] && this.$store.getters['ndv/activeNode'].name !== this.nodeName) {
+				const activeNode = this.ndvStore.activeNode;
+				if (activeNode && activeNode.name !== this.nodeName) {
 					return this.$locale.baseText('ndv.execute.fixPrevious');
 				}
 
@@ -154,7 +164,7 @@ export default mixins(
 	methods: {
 		async stopWaitingForWebhook () {
 			try {
-				await this.restApi().removeTestWebhook(this.$store.getters.workflowId);
+				await this.restApi().removeTestWebhook(this.workflowsStore.workflowId);
 			} catch (error) {
 				this.$showError(
 					error,
@@ -182,14 +192,14 @@ export default mixins(
 
 					if (shouldUnpinAndExecute) {
 						dataPinningEventBus.$emit('data-unpinning', { source: 'unpin-and-execute-modal' });
-						this.$store.commit('unpinData', { node: this.node });
+						this.workflowsStore.unpinData({ node: this.node });
 					}
 				}
 
 				if (!this.hasPinData || shouldUnpinAndExecute) {
 					const telemetryPayload = {
 						node_type: this.nodeType ? this.nodeType.name : null,
-						workflow_id: this.$store.getters.workflowId,
+						workflow_id: this.workflowsStore.workflowId,
 						source: this.telemetrySource,
 					};
 					this.$telemetry.track('User clicked execute node button', telemetryPayload);
diff --git a/packages/editor-ui/src/components/NodeIcon.vue b/packages/editor-ui/src/components/NodeIcon.vue
index 6e9c4dfcbd..b162c06162 100644
--- a/packages/editor-ui/src/components/NodeIcon.vue
+++ b/packages/editor-ui/src/components/NodeIcon.vue
@@ -15,7 +15,9 @@
 
 <script lang="ts">
 import { IVersionNode } from '@/Interface';
+import { useRootStore } from '@/stores/n8nRootStore';
 import { INodeTypeDescription } from 'n8n-workflow';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 
 interface NodeIconSource {
@@ -47,6 +49,9 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useRootStore,
+		),
 		type (): string {
 			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
 			let iconType = 'unknown';
@@ -68,7 +73,7 @@ export default Vue.extend({
 		},
 		iconSource () : NodeIconSource {
 			const nodeType = this.nodeType as INodeTypeDescription | IVersionNode | null;
-			const restUrl = this.$store.getters.getRestUrl;
+			const restUrl = this.rootStore.getRestUrl;
 			const iconSource = {} as NodeIconSource;
 
 			if (nodeType) {
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 71f3dc8c5d..f3a1f65544 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -152,6 +152,11 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
 import { isCommunityPackageName } from './helpers';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(externalHooks, nodeHelpers).extend({
 	name: 'NodeSettings',
@@ -165,8 +170,14 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		NodeExecuteButton,
 	},
 	computed: {
-		isCurlImportModalOpen() {
-			return this.$store.getters['ui/isModalOpen'](IMPORT_CURL_MODAL_KEY);
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
+		isCurlImportModalOpen(): boolean {
+			return this.uiStore.isModalOpen(IMPORT_CURL_MODAL_KEY);
 		},
 		nodeTypeName(): string {
 			if (this.nodeType) {
@@ -201,8 +212,8 @@ export default mixins(externalHooks, nodeHelpers).extend({
 				'background-color': this.node.color,
 			};
 		},
-		node(): INodeUi {
-			return this.$store.getters['ndv/activeNode'];
+		node(): INodeUi | null {
+			return this.ndvStore.activeNode;
 		},
 		parametersSetting(): INodeProperties[] {
 			return this.parameters.filter((item) => {
@@ -222,13 +233,13 @@ export default mixins(externalHooks, nodeHelpers).extend({
 			return this.nodeType.properties;
 		},
 		outputPanelEditMode(): { enabled: boolean; value: string } {
-			return this.$store.getters['ndv/outputPanelEditMode'];
+			return this.ndvStore.outputPanelEditMode;
 		},
 		isCommunityNode(): boolean {
 			return isCommunityPackageName(this.node.type);
 		},
 		isTriggerNode(): boolean {
-			return this.$store.getters['nodeTypes/isTriggerNode'](this.node.type);
+			return this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
 	},
 	props: {
@@ -366,7 +377,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		},
 		isCurlImportModalOpen(newValue, oldValue) {
 			if (newValue === false) {
-				let parameters = this.$store.getters['ui/getHttpNodeParameters'];
+				let parameters = this.uiStore.getHttpNodeParameters || '';
 
 				if (!parameters) return;
 
@@ -382,7 +393,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 						value: parameters,
 					});
 
-					this.$store.dispatch('ui/setHttpNodeParameters', { parameters: '' });
+					this.uiStore.setHttpNodeParameters({ name: IMPORT_CURL_MODAL_KEY, parameters: '' });
 				} catch (_) {}
 			}
 		},
@@ -452,12 +463,14 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		},
 		credentialSelected(updateInformation: INodeUpdatePropertiesInformation) {
 			// Update the values on the node
-			this.$store.commit('updateNodeProperties', updateInformation);
+			this.workflowsStore.updateNodeProperties(updateInformation);
 
-			const node = this.$store.getters.getNodeByName(updateInformation.name);
+			const node = this.workflowsStore.getNodeByName(updateInformation.name);
 
-			// Update the issues
-			this.updateNodeCredentialIssues(node);
+			if (node) {
+				// Update the issues
+				this.updateNodeCredentialIssues(node);
+			}
 
 			this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
 		},
@@ -481,7 +494,12 @@ export default mixins(externalHooks, nodeHelpers).extend({
 			// Save the node name before we commit the change because
 			// we need the old name to rename the node properly
 			const nodeNameBefore = parameterData.node || this.node.name;
-			const node = this.$store.getters.getNodeByName(nodeNameBefore);
+			const node = this.workflowsStore.getNodeByName(nodeNameBefore);
+
+			if (node === null) {
+				return;
+			}
+
 			if (parameterData.name === 'name') {
 				// Name of node changed so we have to set also the new node name as active
 
@@ -494,10 +512,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 				this.$emit('valueChanged', sendData);
 			} else if (parameterData.name === 'parameters') {
 
-				const nodeType = this.$store.getters['nodeTypes/getNodeType'](
-					node.type,
-					node.typeVersion,
-				) as INodeTypeDescription | null;
+				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 				if (!nodeType) {
 					return;
 				}
@@ -573,23 +588,21 @@ export default mixins(externalHooks, nodeHelpers).extend({
 					}
 				}
 
-				// Update the data in vuex
-				const updateInformation = {
-					name: node.name,
-					value: nodeParameters,
-				};
+				if (nodeParameters) {
+					const updateInformation: IUpdateInformation = {
+						name: node.name,
+						value: nodeParameters,
+					};
 
-				this.$store.commit('setNodeParameters', updateInformation);
+					this.workflowsStore.setNodeParameters(updateInformation);
 
-				this.updateNodeParameterIssues(node, nodeType);
-				this.updateNodeCredentialIssues(node);
+					this.updateNodeParameterIssues(node, nodeType);
+					this.updateNodeCredentialIssues(node);
+				}
 			} else if (parameterData.name.startsWith('parameters.')) {
 				// A node parameter changed
 
-				const nodeType = this.$store.getters['nodeTypes/getNodeType'](
-					node.type,
-					node.typeVersion,
-				) as INodeTypeDescription | null;
+				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 				if (!nodeType) {
 					return;
 				}
@@ -657,7 +670,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 					value: nodeParameters,
 				};
 
-				this.$store.commit('setNodeParameters', updateInformation);
+				this.workflowsStore.setNodeParameters(updateInformation);
 
 				this.$externalHooks().run('nodeSettings.valueChanged', {
 					parameterPath,
@@ -680,7 +693,8 @@ export default mixins(externalHooks, nodeHelpers).extend({
 					key: parameterData.name,
 					value: newValue,
 				};
-				this.$store.commit('setNodeValue', updateInformation);
+
+				this.workflowsStore.setNodeValue(updateInformation);
 			}
 		},
 		/**
diff --git a/packages/editor-ui/src/components/NodeSettingsTabs.vue b/packages/editor-ui/src/components/NodeSettingsTabs.vue
index 83eda6fd64..0034841706 100644
--- a/packages/editor-ui/src/components/NodeSettingsTabs.vue
+++ b/packages/editor-ui/src/components/NodeSettingsTabs.vue
@@ -6,7 +6,10 @@
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { BUILTIN_NODES_DOCS_URL, COMMUNITY_NODES_INSTALLATION_DOCS_URL, NPM_PACKAGE_DOCS_BASE_URL } from '@/constants';
 import { INodeUi, ITab } from '@/Interface';
+import { useNDVStore } from '@/stores/ndv';
+import { useWorkflowsStore } from '@/stores/workflows';
 import { INodeTypeDescription } from 'n8n-workflow';
+import { mapStores } from 'pinia';
 
 import mixins from 'vue-typed-mixins';
 import { isCommunityPackageName } from './helpers';
@@ -26,8 +29,12 @@ export default mixins(
 		},
 	},
 	computed: {
-		activeNode(): INodeUi {
-			return this.$store.getters['ndv/activeNode'];
+		...mapStores(
+			useNDVStore,
+			useWorkflowsStore,
+		),
+		activeNode(): INodeUi | null {
+			return this.ndvStore.activeNode;
 		},
 		documentationUrl (): string {
 			const nodeType = this.nodeType as INodeTypeDescription | null;
@@ -113,7 +120,7 @@ export default mixins(
 				this.$externalHooks().run('dataDisplay.onDocumentationUrlClick', { nodeType: this.nodeType as INodeTypeDescription, documentationUrl: this.documentationUrl });
 				this.$telemetry.track('User clicked ndv link', {
 					node_type: this.activeNode.type,
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
 					pane: 'main',
 					type: 'docs',
@@ -121,7 +128,7 @@ export default mixins(
 			}
 
 			if(tab === 'settings' && this.nodeType) {
-				this.$telemetry.track('User viewed node settings', { node_type: (this.nodeType as INodeTypeDescription).name, workflow_id: this.$store.getters.workflowId });
+				this.$telemetry.track('User viewed node settings', { node_type: (this.nodeType as INodeTypeDescription).name, workflow_id: this.workflowsStore.workflowId });
 			}
 
 			if (tab === 'settings' || tab === 'params') {
diff --git a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
index aa57f26dff..7bda99bde2 100644
--- a/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
+++ b/packages/editor-ui/src/components/OnboardingCallSignupModal.vue
@@ -55,6 +55,8 @@ import Modal from './Modal.vue';
 
 import mixins from 'vue-typed-mixins';
 import { showMessage } from './mixins/showMessage';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
 
 export default mixins(
 	showMessage,
@@ -75,6 +77,7 @@ export default mixins(
 		};
 	},
 	computed: {
+		...mapStores(useUIStore),
 		isEmailValid(): boolean {
 			return VALID_EMAIL_REGEX.test(String(this.email).toLowerCase());
 		},
@@ -90,7 +93,7 @@ export default mixins(
 			this.okToClose = false;
 
 			try {
-				await this.$store.dispatch('ui/applyForOnboardingCall', { email: this.email });
+				await this.uiStore.applyForOnboardingCall(this.email);
 				this.$showMessage({
 					type: 'success',
 					title: this.$locale.baseText('onboardingCallSignupSucess.title'),
diff --git a/packages/editor-ui/src/components/OutputPanel.vue b/packages/editor-ui/src/components/OutputPanel.vue
index 83c83909f9..53f835d1e6 100644
--- a/packages/editor-ui/src/components/OutputPanel.vue
+++ b/packages/editor-ui/src/components/OutputPanel.vue
@@ -86,6 +86,11 @@ import RunData, { EnterEditModeArgs } from './RunData.vue';
 import RunInfo from './RunInfo.vue';
 import { pinData } from "@/components/mixins/pinData";
 import mixins from 'vue-typed-mixins';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 type RunDataRef = Vue & { enterEditMode: (args: EnterEditModeArgs) => void };
 
@@ -116,17 +121,23 @@ export default mixins(
 		},
 	},
 	computed: {
-		node(): INodeUi {
-			return this.$store.getters['ndv/activeNode'];
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
+		node(): INodeUi | null {
+			return this.ndvStore.activeNode;
 		},
 		nodeType (): INodeTypeDescription | null {
 			if (this.node) {
-				return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
+				return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
 			}
 			return null;
 		},
 		isTriggerNode (): boolean {
-			return this.$store.getters['nodeTypes/isTriggerNode'](this.node.type);
+			return this.nodeTypesStore.isTriggerNode(this.node.type);
 		},
 		isPollingTypeNode (): boolean {
 			return !!(this.nodeType && this.nodeType.polling);
@@ -135,14 +146,14 @@ export default mixins(
 			return !!(this.nodeType && this.nodeType.group.includes('schedule'));
 		},
 		isNodeRunning(): boolean {
-			const executingNode = this.$store.getters.executingNode;
+			const executingNode = this.workflowsStore.executingNode;
 			return this.node && executingNode === this.node.name;
 		},
 		workflowRunning (): boolean {
-			return this.$store.getters.isActionActive('workflowRunning');
+			return this.uiStore.isActionActive('workflowRunning');
 		},
 		workflowExecution(): IExecutionResponse | null {
-			return this.$store.getters.getWorkflowExecution;
+			return this.workflowsStore.getWorkflowExecution;
 		},
 		workflowRunData(): IRunData | null {
 			if (this.workflowExecution === null) {
@@ -155,7 +166,7 @@ export default mixins(
 			return executionData.resultData.runData;
 		},
 		hasNodeRun(): boolean {
-			if (this.$store.getters.subworkflowExecutionError) return true;
+			if (this.workflowsStore.subWorkflowExecutionError) return true;
 
 			return Boolean(
 				this.node && this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name),
@@ -199,7 +210,7 @@ export default mixins(
 			if (!this.node) {
 				return false;
 			}
-			const updatedAt = this.$store.getters.getParametersLastUpdated(this.node.name);
+			const updatedAt = this.workflowsStore.getParametersLastUpdate(this.node.name);
 			if (!updatedAt || !this.runTaskData) {
 				return false;
 			}
@@ -207,7 +218,7 @@ export default mixins(
 			return updatedAt > runAt;
 		},
 		outputPanelEditMode(): { enabled: boolean; value: string; } {
-			return this.$store.getters['ndv/outputPanelEditMode'];
+			return this.ndvStore.outputPanelEditMode;
 		},
 		canPinData(): boolean {
 			return this.isPinDataNodeType && !this.isReadOnly;
@@ -221,7 +232,7 @@ export default mixins(
 				});
 
 				this.$telemetry.track('User clicked ndv link', {
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
 					node_type: this.node.type,
 					pane: 'output',
@@ -239,7 +250,7 @@ export default mixins(
 			this.$emit('openSettings');
 			this.$telemetry.track('User clicked ndv link', {
 				node_type: this.node.type,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 				session_id: this.sessionId,
 				pane: 'output',
 				type: 'settings',
diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 0baa0d4d33..8cc801f8d1 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -339,6 +339,10 @@ import { mapGetters } from 'vuex';
 import { CODE_NODE_TYPE } from '@/constants';
 import { PropType } from 'vue';
 import { debounceHelper } from './mixins/debounce';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(
 	externalHooks,
@@ -472,6 +476,11 @@ export default mixins(
 			},
 		},
 		computed: {
+			...mapStores(
+				useNodeTypesStore,
+				useNDVStore,
+				useWorkflowsStore,
+			),
 			...mapGetters('credentials', ['allCredentialTypes']),
 			expressionDisplayValue(): string {
 				if (this.activeDrop || this.forceShowExpression) {
@@ -499,7 +508,7 @@ export default mixins(
 				}
 
 				// Get the resolved parameter values of the current node
-				const currentNodeParameters = this.$store.getters['ndv/activeNode'].parameters;
+				const currentNodeParameters = this.ndvStore.activeNode?.parameters;
 				try {
 					const resolvedNodeParameters = this.resolveParameter(currentNodeParameters);
 
@@ -514,7 +523,7 @@ export default mixins(
 				}
 			},
 			node (): INodeUi | null {
-				return this.$store.getters['ndv/activeNode'];
+				return this.ndvStore.activeNode;
 			},
 			displayTitle (): string {
 				const interpolation = { interpolate: { shortPath: this.shortPath } };
@@ -742,12 +751,14 @@ export default mixins(
 			},
 			credentialSelected (updateInformation: INodeUpdatePropertiesInformation) {
 				// Update the values on the node
-				this.$store.commit('updateNodeProperties', updateInformation);
+				this.workflowsStore.updateNodeProperties(updateInformation);
 
-				const node = this.$store.getters.getNodeByName(updateInformation.name);
+				const node = this.workflowsStore.getNodeByName(updateInformation.name);
 
-				// Update the issues
-				this.updateNodeCredentialIssues(node);
+				if (node) {
+					// Update the issues
+					this.updateNodeCredentialIssues(node);
+				}
 
 				this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
 			},
@@ -784,12 +795,12 @@ export default mixins(
 				// Get the resolved parameter values of the current node
 
 				try {
-					const currentNodeParameters = (this.$store.getters['ndv/activeNode'] as INodeUi).parameters;
+					const currentNodeParameters = (this.ndvStore.activeNode as INodeUi).parameters;
 					const resolvedNodeParameters = this.resolveParameter(currentNodeParameters) as INodeParameters;
 					const loadOptionsMethod = this.getArgument('loadOptionsMethod') as string | undefined;
 					const loadOptions = this.getArgument('loadOptions') as ILoadOptions | undefined;
 
-					const options = await this.$store.dispatch('nodeTypes/getNodeParameterOptions',
+					const options = await this.nodeTypesStore.getNodeParameterOptions(
 						{
 							nodeTypeAndVersion: {
 								name: this.node.type,
@@ -827,8 +838,8 @@ export default mixins(
 						parameter_name: this.parameter.displayName,
 						parameter_field_type: this.parameter.type,
 						new_expression: !this.isValueExpression,
-						workflow_id: this.$store.getters.workflowId,
-						session_id: this.$store.getters['ndv/ndvSessionId'],
+						workflow_id: this.workflowsStore.workflowId,
+						session_id: this.ndvStore.sessionId,
 						source: this.eventSource || 'ndv',
 					});
 				}
@@ -956,11 +967,11 @@ export default mixins(
 
 				if (this.parameter.name === 'operation' || this.parameter.name === 'mode') {
 					this.$telemetry.track('User set node operation or mode', {
-						workflow_id: this.$store.getters.workflowId,
+						workflow_id: this.workflowsStore.workflowId,
 						node_type: this.node && this.node.type,
 						resource: this.node && this.node.parameters.resource,
 						is_custom: value === CUSTOM_API_CALL_KEY,
-						session_id: this.$store.getters['ndv/ndvSessionId'],
+						session_id: this.ndvStore.sessionId,
 						parameter: this.parameter.name,
 					});
 				}
diff --git a/packages/editor-ui/src/components/ParameterInputExpanded.vue b/packages/editor-ui/src/components/ParameterInputExpanded.vue
index 64462d3153..aa4f5902d7 100644
--- a/packages/editor-ui/src/components/ParameterInputExpanded.vue
+++ b/packages/editor-ui/src/components/ParameterInputExpanded.vue
@@ -54,6 +54,8 @@ import Vue, { PropType } from 'vue';
 import ParameterInputWrapper from './ParameterInputWrapper.vue';
 import { isValueExpression } from './helpers';
 import { INodeParameterResourceLocator, INodeProperties } from 'n8n-workflow';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export default Vue.extend({
 	name: 'parameter-input-expanded',
@@ -85,6 +87,9 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useWorkflowsStore,
+		),
 		showRequiredErrors(): boolean {
 			if (!this.$props.parameter.required) {
 				return false;
@@ -136,7 +141,7 @@ export default Vue.extend({
 			this.$telemetry.track('User clicked credential modal docs link', {
 				docs_link: this.documentationUrl,
 				source: 'field',
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 			});
 		},
 	},
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index c64ff82ae3..05cf663f55 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -79,6 +79,8 @@ import { hasOnlyListMode } from '@/components/ResourceLocator/helpers';
 import { INodeParameters, INodeProperties, INodePropertyMode } from 'n8n-workflow';
 import { isResourceLocatorValue } from '@/typeGuards';
 import { BaseTextKey } from "@/plugins/i18n";
+import { mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv';
 
 export default mixins(
 	showMessage,
@@ -135,8 +137,11 @@ export default mixins(
 			];
 		},
 		computed: {
+			...mapStores(
+				useNDVStore,
+			),
 			node (): INodeUi | null {
-				return this.$store.getters['ndv/activeNode'];
+				return this.ndvStore.activeNode;
 			},
 			hint (): string | null {
 				return this.$locale.nodeText().hint(this.parameter, this.path);
@@ -154,10 +159,10 @@ export default mixins(
 				return this.isResourceLocator ? !hasOnlyListMode(this.parameter): true;
 			},
 			isInputDataEmpty (): boolean {
-				return this.$store.getters['ndv/getNDVDataIsEmpty']('input');
+				return this.ndvStore.isDNVDataEmpty('input');
 			},
 			displayMode(): IRunDataDisplayMode {
-				return this.$store.getters['ndv/inputPanelDisplayMode'];
+				return this.ndvStore.inputPanelDisplayMode;
 			},
 			showMappingTooltip (): boolean {
 				return this.focused && this.isInputTypeString && !this.isInputDataEmpty && window.localStorage.getItem(LOCAL_STORAGE_MAPPING_FLAG) !== 'true';
@@ -167,13 +172,13 @@ export default mixins(
 			onFocus() {
 				this.focused = true;
 				if (!this.parameter.noDataExpression) {
-					this.$store.commit('ndv/setMappableNDVInputFocus', this.parameter.displayName);
+					this.ndvStore.setMappableNDVInputFocus(this.parameter.displayName);
 				}
 			},
 			onBlur() {
 				this.focused = false;
 				if (!this.parameter.noDataExpression) {
-					this.$store.commit('ndv/setMappableNDVInputFocus', '');
+					this.ndvStore.setMappableNDVInputFocus('');
 				}
 			},
 			onMenuExpanded(expanded: boolean) {
@@ -250,7 +255,7 @@ export default mixins(
 							window.localStorage.setItem(LOCAL_STORAGE_MAPPING_FLAG, 'true');
 						}
 
-						this.$store.commit('ndv/setMappingTelemetry', {
+						this.ndvStore.setMappingTelemetry({
 							dest_node_type: this.node.type,
 							dest_parameter: this.path,
 							dest_parameter_mode: typeof prevValue === 'string' && prevValue.startsWith('=')? 'expression': 'fixed',
diff --git a/packages/editor-ui/src/components/ParameterInputList.vue b/packages/editor-ui/src/components/ParameterInputList.vue
index 7d91ed798f..7d86da2924 100644
--- a/packages/editor-ui/src/components/ParameterInputList.vue
+++ b/packages/editor-ui/src/components/ParameterInputList.vue
@@ -119,6 +119,9 @@ import { get, set } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
 import {Component} from "vue";
+import { mapState, mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(
 	workflowHelpers,
@@ -141,6 +144,10 @@ export default mixins(
 			'isReadOnly',
 		],
 		computed: {
+			...mapStores(
+				useNodeTypesStore,
+				useNDVStore,
+			),
 			nodeTypeVersion(): number | null {
 				if (this.node) {
 					return this.node.typeVersion;
@@ -159,8 +166,8 @@ export default mixins(
 			filteredParameterNames (): string[] {
 				return this.filteredParameters.map(parameter => parameter.name);
 			},
-			node (): INodeUi {
-				return this.$store.getters['ndv/activeNode'];
+			node (): INodeUi | null {
+				return this.ndvStore.activeNode;
 			},
 			indexToShowSlotAt (): number {
 				let index = 0;
@@ -179,7 +186,7 @@ export default mixins(
 		methods: {
 			getCredentialsDependencies() {
 				const dependencies = new Set();
-				const nodeType = this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion) as INodeTypeDescription | undefined;
+				const nodeType = this.nodeTypesStore.getNodeType(this.node?.type || '', this.node?.typeVersion);
 
 				// Get names of all fields that credentials rendering depends on (using displayOptions > show)
 				if(nodeType && nodeType.credentials) {
@@ -323,7 +330,7 @@ export default mixins(
 					if (!newValue.includes(parameter)) {
 						const parameterData = {
 							name: `${this.path}.${parameter}`,
-							node: this.$store.getters['ndv/activeNode'].name,
+							node: this.ndvStore.activeNode?.name || '',
 							value: undefined,
 						};
 						this.$emit('valueChanged', parameterData);
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 2a2d8fcb2d..7260e6e19d 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -37,6 +37,8 @@ import { INodeProperties, INodePropertyMode, IRunData, isResourceLocatorValue, N
 import { INodeUi, IUiState, IUpdateInformation, TargetItem } from '@/Interface';
 import { workflowHelpers } from './mixins/workflowHelpers';
 import { isValueExpression } from './helpers';
+import { mapStores } from 'pinia';
+import { useNDVStore } from '@/stores/ndv';
 
 export default mixins(
 	showMessage,
@@ -97,11 +99,14 @@ export default mixins(
 			},
 		},
 		computed: {
+			...mapStores(
+				useNDVStore,
+			),
 			isValueExpression () {
 				return isValueExpression(this.parameter, this.value);
 			},
 			activeNode(): INodeUi | null {
-				return this.$store.getters['ndv/activeNode'];
+				return this.ndvStore.activeNode;
 			},
 			selectedRLMode(): INodePropertyMode | undefined {
 				if (typeof this.value !== 'object' ||this.parameter.type !== 'resourceLocator' || !isResourceLocatorValue(this.value)) {
@@ -126,17 +131,17 @@ export default mixins(
 				return this.hint;
 			},
 			targetItem(): TargetItem | null {
-				return this.$store.getters['ndv/hoveringItem'];
+				return this.ndvStore.hoveringItem;
 			},
 			expressionValueComputed (): string | null {
-				const inputNodeName: string | undefined = this.$store.getters['ndv/ndvInputNodeName'];
+				const inputNodeName: string | undefined = this.ndvStore.ndvInputNodeName;
 				const value = isResourceLocatorValue(this.value)? this.value.value: this.value;
 				if (this.activeNode === null || !this.isValueExpression || typeof value !== 'string') {
 					return null;
 				}
 
-				const inputRunIndex: number | undefined = this.$store.getters['ndv/ndvInputRunIndex'];
-				const inputBranchIndex: number | undefined = this.$store.getters['ndv/ndvInputBranchIndex'];
+				const inputRunIndex: number | undefined = this.ndvStore.ndvInputRunIndex;
+				const inputBranchIndex: number | undefined = this.ndvStore.ndvInputBranchIndex;
 
 				let computedValue: NodeParameterValue;
 				try {
@@ -157,7 +162,7 @@ export default mixins(
 			},
 			expressionOutput(): string | null {
 				if (this.isValueExpression && this.expressionValueComputed) {
-					const inputData = this.$store.getters['ndv/ndvInputData'];
+					const inputData = this.ndvStore.ndvInputData;
 					if (!inputData || (inputData && inputData.length <= 1)) {
 						return this.expressionValueComputed;
 					}
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index f5f64a00ad..b521ce6b98 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -17,7 +17,7 @@
 	>
 		<template v-slot:content>
 			<div v-if="submitted" :class="$style.submittedContainer">
-				<img :class="$style.demoImage" :src="baseUrl + 'suggestednodes.png'" />
+				<img :class="$style.demoImage" :src="rootStore.baseUrl + 'suggestednodes.png'" />
 				<n8n-text>{{ $locale.baseText('personalizationModal.lookOutForThingsMarked') }}</n8n-text>
 			</div>
 			<div :class="$style.container" v-else>
@@ -50,7 +50,6 @@ import mixins from 'vue-typed-mixins';
 const SURVEY_VERSION = 'v3';
 
 import {
-	CODING_SKILL_KEY,
 	COMPANY_SIZE_100_499,
 	COMPANY_SIZE_1000_OR_MORE,
 	COMPANY_SIZE_20_OR_LESS,
@@ -116,11 +115,15 @@ import {
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
 import Modal from './Modal.vue';
-import { IFormInputs, IPersonalizationLatestVersion } from '@/Interface';
+import { IFormInputs, IPersonalizationLatestVersion, IPersonalizationSurveyAnswersV3, IUser } from '@/Interface';
 import Vue from 'vue';
-import { mapGetters } from 'vuex';
 import { getAccountAge } from '@/modules/userHelpers';
 import { GenericValue } from 'n8n-workflow';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(showMessage, workflowHelpers).extend({
 	components: { Modal },
@@ -138,15 +141,12 @@ export default mixins(showMessage, workflowHelpers).extend({
 		};
 	},
 	computed: {
-		...mapGetters({
-			baseUrl: 'getBaseUrl',
-		}),
-		...mapGetters('users', [
-			'currentUser',
-		]),
-		...mapGetters('settings', [
-			'isOnboardingCallPromptFeatureEnabled',
-		]),
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+		),
 		survey() {
 			const survey: IFormInputs = [
 				{
@@ -470,12 +470,12 @@ export default mixins(showMessage, workflowHelpers).extend({
 					...values,
 					version: SURVEY_VERSION,
 					personalization_survey_submitted_at: new Date().toISOString(),
-					personalization_survey_n8n_version: this.$store.getters.versionCli,
+					personalization_survey_n8n_version: this.rootStore.versionCli,
 				};
 
 				this.$externalHooks().run('personalizationModal.onSubmit', survey);
 
-				await this.$store.dispatch('users/submitPersonalizationSurvey', survey);
+				await this.usersStore.submitPersonalizationSurvey(survey as IPersonalizationSurveyAnswersV3);
 
 				if (Object.keys(values).length === 0) {
 					this.closeDialog();
@@ -490,8 +490,8 @@ export default mixins(showMessage, workflowHelpers).extend({
 			this.$data.isSaving = false;
 		},
 		async fetchOnboardingPrompt() {
-			if (this.isOnboardingCallPromptFeatureEnabled && getAccountAge(this.currentUser) <= ONBOARDING_PROMPT_TIMEBOX) {
-				const onboardingResponse = await this.$store.dispatch('ui/getNextOnboardingPrompt');
+			if (this.settingsStore.onboardingCallPromptEnabled && getAccountAge(this.usersStore.currentUser || {} as IUser) <= ONBOARDING_PROMPT_TIMEBOX) {
+				const onboardingResponse = await this.uiStore.getNextOnboardingPrompt();
 				const promptTimeout = onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;
 
 				if (onboardingResponse.title && onboardingResponse.description) {
@@ -509,7 +509,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 									title: onboardingResponse.title,
 									description: onboardingResponse.description,
 								});
-								this.$store.commit('ui/openModal', ONBOARDING_CALL_SIGNUP_MODAL_KEY, {root: true});
+								this.uiStore.openModal(ONBOARDING_CALL_SIGNUP_MODAL_KEY);
 							},
 						});
 					}, promptTimeout);
diff --git a/packages/editor-ui/src/components/PushConnectionTracker.vue b/packages/editor-ui/src/components/PushConnectionTracker.vue
index ebe4cbab42..aaf8afa217 100644
--- a/packages/editor-ui/src/components/PushConnectionTracker.vue
+++ b/packages/editor-ui/src/components/PushConnectionTracker.vue
@@ -1,6 +1,6 @@
 <template>
 	<span>
-		<div class="push-connection-lost primary-color" v-if="!pushConnectionActive">
+		<div class="push-connection-lost primary-color" v-if="!rootStore.pushConnectionActive">
 			<n8n-tooltip placement="bottom-end" >
 				<div slot="content" v-html="$locale.baseText('pushConnectionTracker.cannotConnectToServer')"></div>
 				<span>
@@ -13,13 +13,16 @@
 </template>
 
 <script lang="ts">
+import { useRootStore } from "@/stores/n8nRootStore";
+import { mapStores } from "pinia";
 import Vue from "vue";
-import { mapGetters } from "vuex";
 
 export default Vue.extend({
 	name: "PushConnectionTracker",
 	computed: {
-		...mapGetters(["pushConnectionActive"]),
+		...mapStores(
+			useRootStore,
+		),
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
index d0535690e9..d9c3b5cbbb 100644
--- a/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/editor-ui/src/components/ResourceLocator/ResourceLocator.vue
@@ -172,6 +172,12 @@ import { workflowHelpers } from '../mixins/workflowHelpers';
 import { nodeHelpers } from '../mixins/nodeHelpers';
 import { getAppNameFromNodeName } from '../helpers';
 import { isResourceLocatorValue } from '@/typeGuards';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 interface IResourceLocatorQuery {
 	results: INodeListSearchItems[];
@@ -248,7 +254,6 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 	},
 	data() {
 		return {
-			mainPanelMutationSubscription: () => {},
 			showResourceDropdown: false,
 			searchFilter: '',
 			cachedResponses: {} as { [key: string]: IResourceLocatorQuery },
@@ -257,13 +262,20 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useRootStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
 		appName(): string {
 			if (!this.node) {
 				return '';
 			}
 
-			const nodeType = this.$store.getters['nodeTypes/getNodeType'](this.node.type);
-			return getAppNameFromNodeName(nodeType.displayName);
+			const nodeType = this.nodeTypesStore.getNodeType(this.node.type);
+			return getAppNameFromNodeName(nodeType?.displayName || '');
 		},
 		selectedMode(): string {
 			if (typeof this.value !== 'object') { // legacy mode
@@ -280,7 +292,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			return this.selectedMode === 'list';
 		},
 		hasCredential(): boolean {
-			const node = this.$store.getters['ndv/activeNode'] as INodeUi | null;
+			const node = this.ndvStore.activeNode;
 			if (!node) {
 				return false;
 			}
@@ -425,24 +437,21 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 	mounted() {
 		this.$on('refreshList', this.refreshList);
 		window.addEventListener('resize', this.setWidth);
-		this.mainPanelMutationSubscription = this.$store.subscribe(this.setWidthOnMainPanelResize);
+		useNDVStore().$subscribe((mutation, state) => {
+			// Update the width when main panel dimension change
+			this.setWidth();
+		});
 		setTimeout(() => {
 			this.setWidth();
 		}, 0);
 	},
 	beforeDestroy() {
-		// Unsubscribe
-		this.mainPanelMutationSubscription();
 		window.removeEventListener('resize', this.setWidth);
 	},
 	methods: {
 		setWidth() {
 			this.width = (this.$refs.container as HTMLElement).offsetWidth;
 		},
-		setWidthOnMainPanelResize(mutation: { type: string }) {
-			// Update the width when main panel dimension change
-			if(mutation.type === 'ndv/setMainPanelDimensions') this.setWidth();
-		},
 		getLinkAlt(entity: string) {
 			if (this.selectedMode === 'list' && entity) {
 				return this.$locale.baseText('resourceLocator.openSpecificResource', { interpolate: { entity, appName: this.appName } });
@@ -480,7 +489,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 			return parameter.typeOptions[argumentName];
 		},
 		openCredential(): void {
-			const node = this.$store.getters['ndv/activeNode'] as INodeUi | null;
+			const node = this.ndvStore.activeNode;
 			if (!node || !node.credentials) {
 				return;
 			}
@@ -489,7 +498,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 				return;
 			}
 			const id = node.credentials[credentialKey].id;
-			this.$store.dispatch('ui/openExistingCredential', { id });
+			this.uiStore.openExistingCredential(id);
 		},
 		findModeByName(name: string): INodePropertyMode | null {
 			if (this.parameter.modes) {
@@ -533,8 +542,8 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 		},
 		trackEvent(event: string, params?: {[key: string]: string}): void {
 			this.$telemetry.track(event, {
-				instance_id: this.$store.getters.instanceId,
-				workflow_id: this.$store.getters.workflowId,
+				instance_id: this.rootStore.instanceId,
+				workflow_id: this.workflowsStore.workflowId,
 				node_type: this.node && this.node.type,
 				resource: this.node && this.node.parameters && this.node.parameters.resource,
 				operation: this.node && this.node.parameters && this.node.parameters.operation,
@@ -618,10 +627,7 @@ export default mixins(debounceHelper, workflowHelpers, nodeHelpers).extend({
 					...(paginationToken ? { paginationToken } : {}),
 				};
 
-				const response: INodeListSearchResult = await this.$store.dispatch(
-					'nodeTypes/getResourceLocatorResults',
-					requestParams,
-				);
+				const response = await this.nodeTypesStore.getResourceLocatorResults(requestParams);
 
 				this.setResponse(paramsKey, {
 					results: (cachedResponse ? cachedResponse.results : []).concat(response.results),
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 6c21b8e0bc..0fce00bc88 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -145,7 +145,7 @@
 						:value="editMode.value"
 						:options="{ scrollBeyondLastLine: false }"
 						type="json"
-						@input="$store.commit('ndv/setOutputPanelEditModeValue', $event)"
+						@input="ndvStore.setOutputPanelEditModeValue($event)"
 					/>
 				</div>
 				<div :class="$style['edit-mode-footer']">
@@ -344,6 +344,7 @@ import {
 	IBinaryDisplayData,
 	IExecutionResponse,
 	INodeUi,
+	INodeUpdatePropertiesInformation,
 	IRunDataDisplayMode,
 	ITab,
 } from '@/Interface';
@@ -373,6 +374,10 @@ import { clearJsonKey, executionDataToJson, stringSizeInBytes } from './helpers'
 import RunDataTable from './RunDataTable.vue';
 import RunDataJson from '@/components/RunDataJson.vue';
 import { isEmpty } from '@/utils';
+import { useWorkflowsStore } from "@/stores/workflows";
+import { mapStores } from "pinia";
+import { useNDVStore } from "@/stores/ndv";
+import { useNodeTypesStore } from "@/stores/nodeTypes";
 
 export type EnterEditModeArgs = {
 	origin: 'editIconButton' | 'insertTestDataLink',
@@ -475,8 +480,8 @@ export default mixins(
 					this.showPinDataDiscoveryTooltip(this.jsonData);
 				}
 			}
-			this.$store.commit('ndv/setNDVBranchIndex', {
-				pane: this.paneType,
+			this.ndvStore.setNDVBranchIndex({
+				pane: this.paneType as "input" | "output",
 				branchIndex: this.currentOutputIndex,
 			});
 		},
@@ -486,8 +491,13 @@ export default mixins(
 			this.eventBus.$off('data-unpinning', this.onDataUnpinning);
 		},
 		computed: {
-			activeNode(): INodeUi {
-				return this.$store.getters['ndv/activeNode'];
+			...mapStores(
+				useNodeTypesStore,
+				useNDVStore,
+				useWorkflowsStore,
+			),
+			activeNode(): INodeUi | null {
+				return this.ndvStore.activeNode;
 			},
 			dataPinningDocsUrl(): string {
 				return DATA_PINNING_DOCS_URL;
@@ -496,19 +506,19 @@ export default mixins(
 				return DATA_EDITING_DOCS_URL;
 			},
 			displayMode(): IRunDataDisplayMode {
-				return this.$store.getters['ndv/getPanelDisplayMode'](this.paneType);
+				return this.ndvStore.getPanelDisplayMode(this.paneType as "input" | "output");
 			},
 			node(): INodeUi | null {
 				return (this.nodeUi as INodeUi | null) || null;
 			},
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
-					return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
+					return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
 				}
 				return null;
 			},
 			isTriggerNode (): boolean {
-				return this.$store.getters['nodeTypes/isTriggerNode'](this.node.type);
+				return this.nodeTypesStore.isTriggerNode(this.node.type);
 			},
 			canPinData (): boolean {
 				return !this.isPaneTypeInput &&
@@ -532,7 +542,7 @@ export default mixins(
 				return Boolean(!this.isExecuting && this.node && (this.workflowRunData && this.workflowRunData.hasOwnProperty(this.node.name) || this.hasPinData));
 			},
 			subworkflowExecutionError(): Error | null {
-				return this.$store.getters.subworkflowExecutionError;
+				return this.workflowsStore.subWorkflowExecutionError;
 			},
 			hasSubworkflowExecutionError(): boolean {
 				return Boolean(this.subworkflowExecutionError);
@@ -541,7 +551,7 @@ export default mixins(
 				return Boolean(this.node && this.workflowRunData && this.workflowRunData[this.node.name] && this.workflowRunData[this.node.name][this.runIndex] && this.workflowRunData[this.node.name][this.runIndex].error);
 			},
 			workflowExecution (): IExecutionResponse | null {
-				return this.$store.getters.getWorkflowExecution;
+				return this.workflowsStore.getWorkflowExecution;
 			},
 			workflowRunData (): IRunData | null {
 				if (this.workflowExecution === null) {
@@ -680,7 +690,7 @@ export default mixins(
 			editMode(): { enabled: boolean; value: string; } {
 				return this.isPaneTypeInput
 					? { enabled: false, value: '' }
-					: this.$store.getters['ndv/outputPanelEditMode'];
+					: this.ndvStore.outputPanelEditMode;
 			},
 			isPaneTypeInput(): boolean {
 				return this.paneType === 'input';
@@ -700,9 +710,9 @@ export default mixins(
 			},
 			onClickDataPinningDocsLink() {
 				this.$telemetry.track('User clicked ndv link', {
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
-					node_type: this.activeNode.type,
+					node_type: this.activeNode?.type,
 					pane: 'output',
 					type: 'data-pinning-docs',
 				});
@@ -742,11 +752,11 @@ export default mixins(
 					? inputData
 					: TEST_PIN_DATA;
 
-				this.$store.commit('ndv/setOutputPanelEditModeEnabled', true);
-				this.$store.commit('ndv/setOutputPanelEditModeValue', JSON.stringify(data, null, 2));
+				this.ndvStore.setOutputPanelEditModeEnabled(true);
+				this.ndvStore.setOutputPanelEditModeValue(JSON.stringify(data, null, 2));
 
 				this.$telemetry.track('User opened ndv edit state', {
-					node_type: this.activeNode.type,
+					node_type: this.activeNode?.type,
 					click_type: origin === 'editIconButton' ? 'button' : 'link',
 					session_id: this.sessionId,
 					run_index: this.runIndex,
@@ -756,8 +766,8 @@ export default mixins(
 				});
 			},
 			onClickCancelEdit() {
-				this.$store.commit('ndv/setOutputPanelEditModeEnabled', false);
-				this.$store.commit('ndv/setOutputPanelEditModeValue', '');
+				this.ndvStore.setOutputPanelEditModeEnabled(false);
+				this.ndvStore.setOutputPanelEditModeValue('');
 				this.onExitEditMode({ type: 'cancel' });
 			},
 			onClickSaveEdit() {
@@ -775,8 +785,8 @@ export default mixins(
 					return;
 				}
 
-				this.$store.commit('ndv/setOutputPanelEditModeEnabled', false);
-				this.$store.commit('pinData', { node: this.node, data: clearJsonKey(value) });
+				this.ndvStore.setOutputPanelEditModeEnabled(false);
+				this.workflowsStore.pinData({ node: this.node, data: clearJsonKey(value) as INodeExecutionData[] });
 
 				this.onDataPinningSuccess({ source: 'save-edit' });
 
@@ -784,7 +794,7 @@ export default mixins(
 			},
 			onExitEditMode({ type }: { type: 'save' | 'cancel' }) {
 				this.$telemetry.track('User closed ndv edit state', {
-					node_type: this.activeNode.type,
+					node_type: this.activeNode?.type,
 					session_id: this.sessionId,
 					run_index: this.runIndex,
 					view: this.displayMode,
@@ -795,7 +805,7 @@ export default mixins(
 				{ source }: { source: 'banner-link' | 'pin-icon-click' | 'unpin-and-execute-modal' },
 			) {
 				this.$telemetry.track('User unpinned ndv data', {
-					node_type: this.activeNode.type,
+					node_type: this.activeNode?.type,
 					session_id: this.sessionId,
 					run_index: this.runIndex,
 					source,
@@ -849,11 +859,11 @@ export default mixins(
 
 				if (this.hasPinData) {
 					this.onDataUnpinning({ source });
-					this.$store.commit('unpinData', { node: this.node });
+					this.workflowsStore.unpinData({ node: this.node });
 					return;
 				}
 
-				const data = executionDataToJson(this.rawInputData);
+				const data = executionDataToJson(this.rawInputData) as INodeExecutionData[];
 
 				if (!this.isValidPinDataSize(data)) {
 					this.onDataPinningError({ errorType: 'data-too-large', source: 'pin-icon-click' });
@@ -862,7 +872,7 @@ export default mixins(
 
 				this.onDataPinningSuccess({ source: 'pin-icon-click' });
 
-				this.$store.commit('pinData', { node: this.node, data });
+				this.workflowsStore.pinData({ node: this.node, data });
 
 				if (this.maxRunIndex > 0) {
 					this.$showToast({
@@ -898,7 +908,7 @@ export default mixins(
 				this.showData = true;
 				this.$telemetry.track('User clicked ndv button', {
 					node_type: this.activeNode.type,
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
 					pane: this.paneType,
 					type: 'showTooMuchData',
@@ -912,8 +922,8 @@ export default mixins(
 			},
 			onCurrentPageChange() {
 				this.$telemetry.track('User changed ndv page', {
-					node_type: this.activeNode.type,
-					workflow_id: this.$store.getters.workflowId,
+					node_type: this.activeNode?.type,
+					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
 					pane: this.paneType,
 					page_selected: this.currentPage,
@@ -929,8 +939,8 @@ export default mixins(
 				}
 
 				this.$telemetry.track('User changed ndv page size', {
-					node_type: this.activeNode.type,
-					workflow_id: this.$store.getters.workflowId,
+					node_type: this.activeNode?.type,
+					workflow_id: this.workflowsStore.workflowId,
 					session_id: this.sessionId,
 					pane: this.paneType,
 					page_selected: this.currentPage,
@@ -940,7 +950,7 @@ export default mixins(
 			},
 			onDisplayModeChange(displayMode: IRunDataDisplayMode) {
 				const previous = this.displayMode;
-				this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: displayMode});
+				this.ndvStore.setPanelDisplayMode({pane: this.paneType as "input" | "output", mode: displayMode});
 
 				const dataContainer = this.$refs.dataContainer;
 				if (dataContainer) {
@@ -958,7 +968,7 @@ export default mixins(
 						previous_view: previous,
 						new_view: displayMode,
 						node_type: this.activeNode.type,
-						workflow_id: this.$store.getters.workflowId,
+						workflow_id: this.workflowsStore.workflowId,
 						session_id: this.sessionId,
 						pane: this.paneType,
 					});
@@ -1012,10 +1022,10 @@ export default mixins(
 				this.refreshDataSize();
 				this.closeBinaryDataDisplay();
 				if (this.binaryData.length > 0) {
-					this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: 'binary'});
+					this.ndvStore.setPanelDisplayMode({pane: this.paneType as "input" | "output", mode: 'binary'});
 				}
 				else if (this.displayMode === 'binary') {
-					this.$store.commit('ndv/setPanelDisplayMode', {pane: this.paneType, mode: 'table'});
+					this.ndvStore.setPanelDisplayMode({pane: this.paneType as "input" | "output", mode: 'table'});
 				}
 			},
 			closeBinaryDataDisplay () {
@@ -1023,7 +1033,7 @@ export default mixins(
 				this.binaryDataDisplayData = null;
 			},
 			clearExecutionData () {
-				this.$store.commit('setWorkflowExecutionData', null);
+				this.workflowsStore.setWorkflowExecutionData(null);
 				this.updateNodesExecutionIssues();
 			},
 			isDownloadable (index: number, key: string): boolean {
@@ -1093,15 +1103,15 @@ export default mixins(
 						name: this.node.name,
 						properties: {
 							disabled: !this.node.disabled,
-						},
-					};
+						} as IDataObject,
+					} as INodeUpdatePropertiesInformation;
 
-					this.$store.commit('updateNodeProperties', updateInformation);
+					this.workflowsStore.updateNodeProperties(updateInformation);
 				}
 			},
 			goToErroredNode() {
 				if (this.node) {
-					this.$store.commit('ndv/setActiveNodeName', this.node.name);
+					this.ndvStore.activeNodeName = this.node.name;
 				}
 			},
 		},
@@ -1112,7 +1122,7 @@ export default mixins(
 			inputData:{
 				handler(data: INodeExecutionData[]) {
 					if(this.paneType && data){
-						this.$store.commit('ndv/setNDVPanelDataIsEmpty', { panel: this.paneType, isEmpty: data.every(item => isEmpty(item.json)) });
+						this.ndvStore.setNDVPanelDataIsEmpty({ panel: this.paneType as "input" | "output", isEmpty: data.every(item => isEmpty(item.json)) });
 					}
 				},
 				immediate: true,
@@ -1135,8 +1145,8 @@ export default mixins(
 				}
 			},
 			currentOutputIndex(branchIndex: number) {
-				this.$store.commit('ndv/setNDVBranchIndex', {
-					pane: this.paneType,
+				this.ndvStore.setNDVBranchIndex({
+					pane: this.paneType as "input" | "output",
 					branchIndex,
 				});
 			},
diff --git a/packages/editor-ui/src/components/RunDataJson.vue b/packages/editor-ui/src/components/RunDataJson.vue
index 3472f9206c..bc9b8b41bc 100644
--- a/packages/editor-ui/src/components/RunDataJson.vue
+++ b/packages/editor-ui/src/components/RunDataJson.vue
@@ -66,6 +66,8 @@ import { convertPath, executionDataToJson, isString, isStringNumber } from "@/co
 import { INodeUi } from "@/Interface";
 import { shorten } from './helpers';
 import { externalHooks } from "@/components/mixins/externalHooks";
+import { mapStores } from "pinia";
+import { useNDVStore } from "@/stores/ndv";
 
 const runDataJsonActions = () => import('@/components/RunDataJsonActions.vue');
 
@@ -137,6 +139,9 @@ export default mixins(externalHooks).extend({
 		}
 	},
 	computed: {
+		...mapStores(
+			useNDVStore,
+		),
 		jsonData(): IDataObject[] {
 			return executionDataToJson(this.inputData as INodeExecutionData[]);
 		},
@@ -165,13 +170,13 @@ export default mixins(externalHooks).extend({
 				this.draggingPath = el.dataset.path;
 			}
 
-			this.$store.commit('ndv/resetMappingTelemetry');
+			this.ndvStore.resetMappingTelemetry();
 		},
 		onDragEnd(el: HTMLElement) {
 			this.draggingPath = null;
 
 			setTimeout(() => {
-				const mappingTelemetry = this.$store.getters['ndv/mappingTelemetry'];
+				const mappingTelemetry = this.ndvStore.mappingTelemetry;
 				const telemetryPayload = {
 					src_node_type: this.node.type,
 					src_field_name: el.dataset.name || '',
diff --git a/packages/editor-ui/src/components/RunDataJsonActions.vue b/packages/editor-ui/src/components/RunDataJsonActions.vue
index 1cd7ca27d9..883ed23217 100644
--- a/packages/editor-ui/src/components/RunDataJsonActions.vue
+++ b/packages/editor-ui/src/components/RunDataJsonActions.vue
@@ -35,6 +35,9 @@ import { pinData } from "@/components/mixins/pinData";
 import { nodeHelpers } from "@/components/mixins/nodeHelpers";
 import { genericHelpers } from "@/components/mixins/genericHelpers";
 import { clearJsonKey, convertPath, executionDataToJson } from "@/components/helpers";
+import { mapStores } from "pinia";
+import { useWorkflowsStore } from "@/stores/workflows";
+import { useNDVStore } from "@/stores/ndv";
 
 type JsonPathData = {
 	path: string;
@@ -83,8 +86,12 @@ export default mixins(
 		},
 	},
 	computed: {
-		activeNode(): INodeUi {
-			return this.$store.getters['ndv/activeNode'];
+		...mapStores(
+			useNDVStore,
+			useWorkflowsStore,
+		),
+		activeNode(): INodeUi | null {
+			return this.ndvStore.activeNode;
 		},
 		normalisedJsonPath(): string {
 			const isNotSelected = this.selectedJsonPath === nonExistingJsonPath;
@@ -189,7 +196,7 @@ export default mixins(
 				run_index: this.runIndex,
 				view: 'json',
 				copy_type: copyType,
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 				pane: this.paneType,
 				in_execution_log: this.isReadOnly,
 			});
diff --git a/packages/editor-ui/src/components/RunDataTable.vue b/packages/editor-ui/src/components/RunDataTable.vue
index fa9546f08f..e7be285f8c 100644
--- a/packages/editor-ui/src/components/RunDataTable.vue
+++ b/packages/editor-ui/src/components/RunDataTable.vue
@@ -152,14 +152,18 @@
 </template>
 
 <script lang="ts">
-import { INodeUi, IRootState, ITableData, NDVState } from '@/Interface';
+/* eslint-disable prefer-spread */
+import { INodeUi, ITableData, NDVState } from '@/Interface';
 import { getPairedItemId } from '@/pairedItemUtils';
 import Vue, { PropType } from 'vue';
 import mixins from 'vue-typed-mixins';
 import { GenericValue, IDataObject, INodeExecutionData } from 'n8n-workflow';
-import Draggable from '@/components/Draggable.vue';
-import { shorten } from '@/components/helpers';
-import { externalHooks } from '@/components/mixins/externalHooks';
+import Draggable from './Draggable.vue';
+import { shorten } from './helpers';
+import { externalHooks } from './mixins/externalHooks';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
 
 const MAX_COLUMNS_LIMIT = 40;
 
@@ -217,11 +221,15 @@ export default mixins(externalHooks).extend({
 		}
 	},
 	computed: {
+		...mapStores(
+			useNDVStore,
+			useWorkflowsStore,
+		),
 		hoveringItem(): NDVState['hoveringItem'] {
-			return this.$store.getters['ndv/hoveringItem'];
+			return this.ndvStore.hoveringItem;
 		},
-		pairedItemMappings(): IRootState['workflowExecutionPairedItemMappings'] {
-			return this.$store.getters['workflowExecutionPairedItemMappings'];
+		pairedItemMappings(): {[itemId: string]: Set<string>} {
+			return this.workflowsStore.workflowExecutionPairedItemMappings;
 		},
 		tableData(): ITableData {
 			return this.convertToTable(this.inputData);
@@ -360,8 +368,7 @@ export default mixins(externalHooks).extend({
 		},
 		onDragStart() {
 			this.draggedColumn = true;
-
-			this.$store.commit('ndv/resetMappingTelemetry');
+			this.ndvStore.resetMappingTelemetry();
 		},
 		onCellDragStart(el: HTMLElement) {
 			if (el && el.dataset.value) {
@@ -384,7 +391,7 @@ export default mixins(externalHooks).extend({
 		},
 		onDragEnd(column: string, src: string, depth = '0') {
 			setTimeout(() => {
-				const mappingTelemetry = this.$store.getters['ndv/mappingTelemetry'];
+				const mappingTelemetry = this.ndvStore.mappingTelemetry;
 				const telemetryPayload = {
 					src_node_type: this.node.type,
 					src_field_name: column,
diff --git a/packages/editor-ui/src/components/SettingsSidebar.vue b/packages/editor-ui/src/components/SettingsSidebar.vue
index 098a8500dc..d8354c9bca 100644
--- a/packages/editor-ui/src/components/SettingsSidebar.vue
+++ b/packages/editor-ui/src/components/SettingsSidebar.vue
@@ -12,7 +12,7 @@
 			<template #menuSuffix>
 				<div :class="$style.versionContainer">
 					<n8n-link @click="onVersionClick" size="small">
-						{{ $locale.baseText('settings.version') }} {{ versionCli }}
+						{{ $locale.baseText('settings.version') }} {{ rootStore.versionCli }}
 					</n8n-link>
 				</div>
 			</template>
@@ -29,6 +29,10 @@ import { pushConnection } from "@/components/mixins/pushConnection";
 import { IFakeDoor } from '@/Interface';
 import { IMenuItem } from 'n8n-design-system';
 import { BaseTextKey } from '@/plugins/i18n';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default mixins(
 	userHelpers,
@@ -36,9 +40,13 @@ export default mixins(
 ).extend({
 	name: 'SettingsSidebar',
 	computed: {
-		...mapGetters('settings', ['versionCli']),
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useUIStore,
+		),
 		settingsFakeDoorFeatures(): IFakeDoor[] {
-			return this.$store.getters['ui/getFakeDoorByLocation']('settings');
+			return this.uiStore.getFakeDoorByLocation('settings');
 		},
 		sidebarMenuItems(): IMenuItem[] {
 
@@ -113,13 +121,13 @@ export default mixins(
 			return this.canUserAccessRouteByName(VIEWS.API_SETTINGS);
 		},
 		onVersionClick() {
-			this.$store.dispatch('ui/openModal', ABOUT_MODAL_KEY);
+			this.uiStore.openModal(ABOUT_MODAL_KEY);
 		},
 		onReturn() {
 			this.$router.push({name: VIEWS.HOMEPAGE});
 		},
 		openUpdatesPanel() {
-			this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
+			this.uiStore.openModal(VERSIONS_MODAL_KEY);
 		},
 		async handleSelect (key: string) {
 			switch (key) {
diff --git a/packages/editor-ui/src/components/Sticky.vue b/packages/editor-ui/src/components/Sticky.vue
index a8bc832543..a8cefcfd03 100644
--- a/packages/editor-ui/src/components/Sticky.vue
+++ b/packages/editor-ui/src/components/Sticky.vue
@@ -50,12 +50,18 @@ import { nodeBase } from '@/components/mixins/nodeBase';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { getStyleTokenValue, isNumber, isString } from './helpers';
-import { INodeUi, XYPosition } from '@/Interface';
+import { INodeUi, INodeUpdatePropertiesInformation, IUpdateInformation, XYPosition } from '@/Interface';
 
 import {
+	IDataObject,
 	INodeTypeDescription,
 } from 'n8n-workflow';
 import { QUICKSTART_NOTE_NAME } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).extend({
 	name: 'Sticky',
@@ -68,6 +74,12 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		},
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
 		defaultText (): string {
 			if (!this.nodeType) {
 				return '';
@@ -78,13 +90,13 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			return content && isString(content.default) ? content.default : '';
 		},
 		isSelected (): boolean {
-			return this.$store.getters.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name);
+			return this.uiStore.getSelectedNodes.find((node: INodeUi) => node.name === this.data.name) !== undefined;
 		},
 		nodeType (): INodeTypeDescription | null {
-			return this.data && this.$store.getters['nodeTypes/getNodeType'](this.data.type, this.data.typeVersion);
+			return this.data && this.nodeTypesStore.getNodeType(this.data.type, this.data.typeVersion);
 		},
-		node (): INodeUi | undefined { // same as this.data but reactive..
-			return this.$store.getters.nodesByName[this.name] as INodeUi | undefined;
+		node (): INodeUi | null { // same as this.data but reactive..
+			return this.workflowsStore.getNodeByName(this.name);
 		},
 		position (): XYPosition {
 			if (this.node) {
@@ -124,7 +136,7 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 			return !(this.hideActions || this.isReadOnly || this.workflowRunning || this.isResizing);
 		},
 		workflowRunning (): boolean {
-			return this.$store.getters.isActionActive('workflowRunning');
+			return this.uiStore.isActionActive('workflowRunning');
 		},
 	},
 	data () {
@@ -142,10 +154,10 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		},
 		onEdit(edit: boolean) {
 			if (edit && !this.isActive && this.node) {
-				this.$store.commit('ndv/setActiveNodeName', this.node.name);
+				this.ndvStore.activeNodeName = this.node.name;
 			}
 			else if (this.isActive && !edit) {
-				this.$store.commit('ndv/setActiveNodeName', null);
+				this.ndvStore.activeNodeName = null;
 			}
 		},
 		onMarkdownClick ( link:HTMLAnchorElement, event: Event ) {
@@ -191,12 +203,13 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 					width: isNumber(params.width) ? params.width : this.node.parameters.width,
 				};
 
-				const updateInformation = {
+				const updateInformation: IUpdateInformation = {
+					key: this.node.id,
 					name: this.node.name,
 					value: nodeParameters,
 				};
 
-				this.$store.commit('setNodeParameters', updateInformation);
+				this.workflowsStore.setNodeParameters(updateInformation);
 			}
 		},
 		setPosition(position: XYPosition) {
@@ -204,14 +217,14 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 				return;
 			}
 
-			const updateInformation = {
+			const updateInformation: INodeUpdatePropertiesInformation = {
 				name: this.node.name,
 				properties: {
-					position,
+					position: { position },
 				},
 			};
 
-			this.$store.commit('updateNodeProperties', updateInformation);
+			this.workflowsStore.updateNodeProperties(updateInformation);
 		},
 		touchStart () {
 			if (this.isTouchDevice === true && this.isMacOs === false && this.isTouchActive === false) {
diff --git a/packages/editor-ui/src/components/TagsDropdown.vue b/packages/editor-ui/src/components/TagsDropdown.vue
index e22f85b278..d6bcef257c 100644
--- a/packages/editor-ui/src/components/TagsDropdown.vue
+++ b/packages/editor-ui/src/components/TagsDropdown.vue
@@ -60,6 +60,8 @@ import { ITag } from "@/Interface";
 import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from "@/constants";
 
 import { showMessage } from "@/components/mixins/showMessage";
+import { mapStores } from "pinia";
+import { useUIStore } from "@/stores/ui";
 
 const MANAGE_KEY = "__manage";
 const CREATE_KEY = "__create";
@@ -113,6 +115,7 @@ export default mixins(showMessage).extend({
 		this.$store.dispatch("tags/fetchAll");
 	},
 	computed: {
+		...mapStores(useUIStore),
 		...mapGetters("tags", ["allTags", "isLoading", "hasTags"]),
 		options(): ITag[] {
 			return this.allTags
@@ -156,7 +159,7 @@ export default mixins(showMessage).extend({
 			);
 			if (ops === MANAGE_KEY) {
 				this.$data.filter = "";
-				this.$store.dispatch("ui/openModal", TAGS_MANAGER_MODAL_KEY);
+				this.uiStore.openModal(TAGS_MANAGER_MODAL_KEY);
 			} else if (ops === CREATE_KEY) {
 				this.onCreate();
 			} else {
diff --git a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
index d4a42fc26b..9cc0d277ef 100644
--- a/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
+++ b/packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue
@@ -32,6 +32,8 @@ import { ITag, ITagRow } from "@/Interface";
 import TagsTableHeader from "@/components/TagsManager/TagsView/TagsTableHeader.vue";
 import TagsTable from "@/components/TagsManager/TagsView/TagsTable.vue";
 import { mapGetters } from 'vuex';
+import { mapStores } from "pinia";
+import { useUsersStore } from "@/stores/users";
 
 const matches = (name: string, filter: string) => name.toLowerCase().trim().includes(filter.toLowerCase().trim());
 
@@ -51,7 +53,7 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		...mapGetters('users', ['canUserDeleteTags']),
+		...mapStores(useUsersStore),
 		isCreateEnabled(): boolean {
 			return (this.$props.tags || []).length === 0 || this.$data.createEnabled;
 		},
@@ -69,7 +71,7 @@ export default Vue.extend({
 					disable: disabled && tag.id !== this.deleteId && tag.id !== this.$data.updateId,
 					update: disabled && tag.id === this.$data.updateId,
 					delete: disabled && tag.id === this.$data.deleteId,
-					canDelete: this.canUserDeleteTags,
+					canDelete: this.usersStore.canUserDeleteTags,
 				}));
 
 			return this.isCreateEnabled
diff --git a/packages/editor-ui/src/components/Telemetry.vue b/packages/editor-ui/src/components/Telemetry.vue
index 29d95855ac..19a8ce9c07 100644
--- a/packages/editor-ui/src/components/Telemetry.vue
+++ b/packages/editor-ui/src/components/Telemetry.vue
@@ -3,10 +3,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
+import { ITelemetrySettings } from 'n8n-workflow';
+import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
-
-import { mapGetters } from 'vuex';
 import { externalHooks } from './mixins/externalHooks';
 
 export default mixins(externalHooks).extend({
@@ -17,12 +19,20 @@ export default mixins(externalHooks).extend({
 		};
 	},
 	computed: {
-		...mapGetters('settings', ['telemetry']),
-		...mapGetters('users', ['currentUserId']),
-		...mapGetters(['instanceId']),
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useUsersStore,
+		),
+		currentUserId(): string {
+			return this.usersStore.currentUserId || '';
+		},
 		isTelemetryEnabledOnRoute(): boolean {
 			return this.$route.meta && this.$route.meta.telemetry ? !this.$route.meta.telemetry.disabled: true;
 		},
+		telemetry(): ITelemetrySettings {
+			return this.settingsStore.telemetry;
+		},
 	},
 	mounted() {
 		this.init();
@@ -40,15 +50,15 @@ export default mixins(externalHooks).extend({
 			this.$telemetry.init(
 				telemetrySettings,
 				{
-					instanceId: this.instanceId,
+					instanceId: this.rootStore.instanceId,
 					userId: this.currentUserId,
 					store: this.$store,
-					versionCli: this.$store.getters['settings/versionCli'],
+					versionCli: this.rootStore.versionCli,
 				},
 			);
 
 			this.$externalHooks().run('telemetry.currentUserIdChanged', {
-				instanceId: this.instanceId,
+				instanceId: this.rootStore.instanceId,
 				userId: this.currentUserId,
 			});
 
@@ -60,9 +70,9 @@ export default mixins(externalHooks).extend({
 			this.init();
 		},
 		currentUserId(userId) {
-			this.$telemetry.identify(this.instanceId, userId);
+			this.$telemetry.identify(this.rootStore.instanceId, userId);
 			this.$externalHooks().run('telemetry.currentUserIdChanged', {
-				instanceId: this.instanceId,
+				instanceId: this.rootStore.instanceId,
 				userId,
 			});
 		},
diff --git a/packages/editor-ui/src/components/TemplateDetails.vue b/packages/editor-ui/src/components/TemplateDetails.vue
index 185665f952..292136feda 100644
--- a/packages/editor-ui/src/components/TemplateDetails.vue
+++ b/packages/editor-ui/src/components/TemplateDetails.vue
@@ -20,7 +20,7 @@
 		</template-details-block>
 
 		<template-details-block
-			v-if="!loading && template.categories.length > 0"
+			v-if="!loading && template?.categories.length > 0"
 			:title="$locale.baseText('template.details.categories')"
 		>
 			<n8n-tags :tags="template.categories" @click="redirectToCategory" />
@@ -52,6 +52,8 @@ import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue';
 import NodeIcon from '@/components/NodeIcon.vue';
 import { abbreviateNumber, filterTemplateNodes } from '@/components/helpers';
 import { ITemplatesNode, ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
+import { mapStores } from 'pinia';
+import { useTemplatesStore } from '@/stores/templates';
 export default Vue.extend({
 	name: 'TemplateDetails',
 	props: {
@@ -69,15 +71,20 @@ export default Vue.extend({
 		NodeIcon,
 		TemplateDetailsBlock,
 	},
+	computed: {
+		...mapStores(
+			useTemplatesStore,
+		),
+	},
 	methods: {
 		abbreviateNumber,
 		filterTemplateNodes,
 		redirectToCategory(id: string) {
-			this.$store.commit('templates/resetSessionId');
+			this.templatesStore.resetSessionId();
 			this.$router.push(`/templates?categories=${id}`);
 		},
 		redirectToSearchPage(node: ITemplatesNode) {
-			this.$store.commit('templates/resetSessionId');
+			this.templatesStore.resetSessionId();
 			this.$router.push(`/templates?search=${node.displayName}`);
 		},
 	},
diff --git a/packages/editor-ui/src/components/TimeAgo.vue b/packages/editor-ui/src/components/TimeAgo.vue
index 1ed601ab9e..6373d08d61 100644
--- a/packages/editor-ui/src/components/TimeAgo.vue
+++ b/packages/editor-ui/src/components/TimeAgo.vue
@@ -9,6 +9,8 @@ import { format, LocaleFunc, register } from 'timeago.js';
 import { convertToHumanReadableDate } from './helpers';
 import Vue from 'vue';
 import { mapGetters } from 'vuex';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default Vue.extend({
 	name: 'TimeAgo',
@@ -48,7 +50,12 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		...mapGetters(['defaultLocale']),
+		...mapStores(
+			useRootStore,
+		),
+		defaultLocale(): string {
+			return this.rootStore.defaultLocale;
+		},
 		format(): string {
 			const text = format(this.date, this.defaultLocale);
 
diff --git a/packages/editor-ui/src/components/TriggerPanel.vue b/packages/editor-ui/src/components/TriggerPanel.vue
index 716db8de20..84a8bf2255 100644
--- a/packages/editor-ui/src/components/TriggerPanel.vue
+++ b/packages/editor-ui/src/components/TriggerPanel.vue
@@ -108,6 +108,11 @@ import NodeIcon from './NodeIcon.vue';
 import { copyPaste } from './mixins/copyPaste';
 import { showMessage } from '@/components/mixins/showMessage';
 import Vue from 'vue';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNDVStore } from '@/stores/ndv';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 	name: 'TriggerPanel',
@@ -125,12 +130,18 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 		},
 	},
 	computed: {
+		...mapStores(
+			useNodeTypesStore,
+			useNDVStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
 		node(): INodeUi | null {
-			return this.$store.getters.getNodeByName(this.nodeName);
+			return this.workflowsStore.getNodeByName(this.nodeName);
 		},
 		nodeType(): INodeTypeDescription | null {
 			if (this.node) {
-				return this.$store.getters['nodeTypes/getNodeType'](this.node.type, this.node.typeVersion);
+				return this.nodeTypesStore.getNodeType(this.node.type, this.node.typeVersion);
 			}
 
 			return null;
@@ -195,8 +206,8 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 			return Boolean(this.nodeType && this.nodeType.polling);
 		},
 		isListeningForEvents(): boolean {
-			const waitingOnWebhook = this.$store.getters.executionWaitingForWebhook as boolean;
-			const executedNode = this.$store.getters.executedNode as string | undefined;
+			const waitingOnWebhook = this.workflowsStore.executionWaitingForWebhook as boolean;
+			const executedNode = this.workflowsStore.executedNode as string | undefined;
 			return (
 				!!this.node &&
 				!this.node.disabled &&
@@ -206,15 +217,15 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 			);
 		},
 		workflowRunning(): boolean {
-			return this.$store.getters.isActionActive('workflowRunning');
+			return this.uiStore.isActionActive('workflowRunning');
 		},
 		isActivelyPolling(): boolean {
-			const triggeredNode = this.$store.getters.executedNode;
+			const triggeredNode = this.workflowsStore.executedNode;
 
 			return this.workflowRunning && this.isPollingNode && this.nodeName === triggeredNode;
 		},
 		isWorkflowActive(): boolean {
-			return this.$store.getters.isActive;
+			return this.workflowsStore.isWorkflowActive;
 		},
 		header(): string {
 			const serviceName = this.nodeType ? getTriggerNodeServiceName(this.nodeType) : '';
@@ -369,15 +380,15 @@ export default mixins(workflowHelpers, copyPaste, showMessage).extend({
 					this.$emit('activate');
 				} else if (target.dataset.key === 'executions') {
 					this.$telemetry.track('User clicked ndv link', {
-						workflow_id: this.$store.getters.workflowId,
+						workflow_id: this.workflowsStore.workflowId,
 						session_id: this.sessionId,
 						pane: 'input',
 						type: 'open-executions-log',
 					});
-					this.$store.commit('ndv/setActiveNodeName', null);
-					this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
+					this.ndvStore.activeNodeName = null;
+					this.uiStore.openModal(EXECUTIONS_MODAL_KEY);
 				} else if (target.dataset.key === 'settings') {
-					this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+					this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
 				}
 			}
 		},
diff --git a/packages/editor-ui/src/components/ValueSurvey.vue b/packages/editor-ui/src/components/ValueSurvey.vue
index 2e0038a910..f940a9a060 100644
--- a/packages/editor-ui/src/components/ValueSurvey.vue
+++ b/packages/editor-ui/src/components/ValueSurvey.vue
@@ -64,6 +64,9 @@ import ModalDrawer from './ModalDrawer.vue';
 import mixins from 'vue-typed-mixins';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import Vue from 'vue';
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 const DEFAULT_TITLE = `How likely are you to recommend n8n to a friend or colleague?`;
 const GREAT_FEEDBACK_TITLE = `Great to hear! Can we reach out to see how we can make n8n even better for you?`;
@@ -79,12 +82,16 @@ export default mixins(workflowHelpers).extend({
 		isActive(isActive) {
 			if (isActive) {
 				this.$telemetry.track('User shown value survey', {
-					instance_id: this.$store.getters.instanceId,
+					instance_id: this.rootStore.instanceId,
 				});
 			}
 		},
 	},
 	computed: {
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+		),
 		getTitle(): string {
 			if (this.form.value !== '') {
 				if (Number(this.form.value) > 7) {
@@ -115,13 +122,13 @@ export default mixins(workflowHelpers).extend({
 		closeDialog(): void {
 			if (this.form.value === '') {
 				this.$telemetry.track('User responded value survey score', {
-					instance_id: this.$store.getters.instanceId,
+					instance_id: this.rootStore.instanceId,
 					nps: '',
 				});
 			}
 			if (this.form.value !== '' && this.form.email === '') {
 				this.$telemetry.track('User responded value survey email', {
-					instance_id: this.$store.getters.instanceId,
+					instance_id: this.rootStore.instanceId,
 					email: '',
 				});
 			}
@@ -133,31 +140,25 @@ export default mixins(workflowHelpers).extend({
 			this.form.value = value;
 			this.showButtons = false;
 
-			const response: IN8nPromptResponse = await this.$store.dispatch(
-				'settings/submitValueSurvey',
-				{ value: this.form.value },
-			);
+			const response: IN8nPromptResponse | undefined = await this.settingsStore.submitValueSurvey({ value: this.form.value });
 
-			if (response.updated) {
+			if (response && response.updated) {
 				this.$telemetry.track('User responded value survey score', {
-					instance_id: this.$store.getters.instanceId,
+					instance_id: this.rootStore.instanceId,
 					nps: this.form.value,
 				});
 			}
 		},
 		async send() {
 			if (this.isEmailValid) {
-				const response: IN8nPromptResponse = await this.$store.dispatch(
-					'settings/submitValueSurvey',
-					{
-						email: this.form.email,
-						value: this.form.value,
-					},
-				);
+				const response: IN8nPromptResponse | undefined = await this.settingsStore.submitValueSurvey({
+					email: this.form.email,
+					value: this.form.value,
+				});
 
-				if (response.updated) {
+				if (response && response.updated) {
 					this.$telemetry.track('User responded value survey email', {
-						instance_id: this.$store.getters.instanceId,
+						instance_id: this.rootStore.instanceId,
 						email: this.form.email,
 					});
 					this.$showMessage({
diff --git a/packages/editor-ui/src/components/VariableSelector.vue b/packages/editor-ui/src/components/VariableSelector.vue
index 10cc87dd5e..0fed0bbc0d 100644
--- a/packages/editor-ui/src/components/VariableSelector.vue
+++ b/packages/editor-ui/src/components/VariableSelector.vue
@@ -40,6 +40,10 @@ import {
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useNDVStore } from '@/stores/ndv';
 
 // Node types that should not be displayed in variable selector
 const SKIPPED_NODE_TYPES = [
@@ -64,6 +68,11 @@ export default mixins(
 			};
 		},
 		computed: {
+			...mapStores(
+				useNDVStore,
+				useRootStore,
+				useWorkflowsStore,
+			),
 			extendAll (): boolean {
 				if (this.variableFilter) {
 					return true;
@@ -406,7 +415,7 @@ export default mixins(
 				const runIndex = 0;
 				const returnData: IVariableSelectorOption[] = [];
 
-				const activeNode: INodeUi | null = this.$store.getters['ndv/activeNode'];
+				const activeNode: INodeUi | null = this.ndvStore.activeNode;
 
 				if (activeNode === null) {
 					return returnData;
@@ -431,7 +440,7 @@ export default mixins(
 					$resumeWebhookUrl: PLACEHOLDER_FILLED_AT_EXECUTION_TIME,
 				};
 
-				const dataProxy = new WorkflowDataProxy(workflow, runExecutionData, runIndex, itemIndex, nodeName, connectionInputData, {}, 'manual', this.$store.getters.timezone, additionalKeys);
+				const dataProxy = new WorkflowDataProxy(workflow, runExecutionData, runIndex, itemIndex, nodeName, connectionInputData, {}, 'manual', this.rootStore.timezone, additionalKeys);
 				const proxy = dataProxy.getDataProxy();
 
 				// @ts-ignore
@@ -486,15 +495,15 @@ export default mixins(
 			getFilterResults (filterText: string, itemIndex: number): IVariableSelectorOption[] {
 				const inputName = 'main';
 
-				const activeNode: INodeUi | null = this.$store.getters['ndv/activeNode'];
+				const activeNode: INodeUi | null = this.ndvStore.activeNode;
 
 				if (activeNode === null) {
 					return [];
 				}
 
-				const executionData = this.$store.getters.getWorkflowExecution as IExecutionResponse | null;
+				const executionData = this.workflowsStore.getWorkflowExecution;
 				let parentNode = this.workflow.getParentNodes(activeNode.name, inputName, 1);
-				let runData = this.$store.getters.getWorkflowRunData as IRunData | null;
+				let runData = this.workflowsStore.getWorkflowRunData;
 
 				if (runData === null) {
 					runData = {};
@@ -543,7 +552,7 @@ export default mixins(
 						},
 					];
 					parentNode.forEach((parentNodeName) => {
-						const pinData = this.$store.getters['pinDataByNodeName'](parentNodeName);
+						const pinData = this.workflowsStore.pinDataByNodeName(parentNodeName);
 
 						if (pinData) {
 							const output = this.getNodePinDataOutput(parentNodeName, pinData, filterText, true);
@@ -677,7 +686,7 @@ export default mixins(
 
 					if (upstreamNodes.includes(nodeName)) {
 						// If the node is an upstream node add also the output data which can be referenced
-						const pinData = this.$store.getters['pinDataByNodeName'](nodeName);
+						const pinData = this.workflowsStore.pinDataByNodeName(nodeName);
 						tempOutputData = pinData
 							? this.getNodePinDataOutput(nodeName, pinData, filterText)
 							: this.getNodeRunDataOutput(nodeName, runData, filterText, itemIndex);
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index 82fe720da5..1e19cecf3b 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -35,10 +35,10 @@
 
 import { showMessage } from '@/components/mixins/showMessage';
 import { workflowActivate } from '@/components/mixins/workflowActivate';
-
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { mapStores } from 'pinia';
 import mixins from 'vue-typed-mixins';
-import { mapGetters } from "vuex";
-
 import { getActivatableTriggerNodes } from './helpers';
 
 export default mixins(
@@ -53,14 +53,18 @@ export default mixins(
 				'workflowId',
 			],
 			computed: {
-				...mapGetters({
-					dirtyState: "getStateIsDirty",
-				}),
+				...mapStores(
+					useUIStore,
+					useWorkflowsStore,
+				),
+				getStateIsDirty (): boolean {
+					return this.uiStore.stateIsDirty;
+				},
 				nodesIssuesExist (): boolean {
-					return this.$store.getters.nodesIssuesExist;
+					return this.workflowsStore.nodesIssuesExist;
 				},
 				isWorkflowActive (): boolean {
-					const activeWorkflows = this.$store.getters.getActiveWorkflows;
+					const activeWorkflows =  this.workflowsStore.activeWorkflows;
 					return activeWorkflows.includes(this.workflowId);
 				},
 				couldNotBeStarted (): boolean {
@@ -73,7 +77,7 @@ export default mixins(
 					return '#13ce66';
 				},
 				isCurrentWorkflow(): boolean {
-					return this.$store.getters['workflowId'] === this.workflowId;
+					return this.workflowsStore.workflowId === this.workflowId;
 				},
 				disabled(): boolean {
 					const isNewWorkflow = !this.workflowId;
@@ -84,7 +88,7 @@ export default mixins(
 					return false;
 				},
 				containsTrigger(): boolean {
-					const foundTriggers = getActivatableTriggerNodes(this.$store.getters.workflowTriggerNodes);
+					const foundTriggers = getActivatableTriggerNodes(this.workflowsStore.workflowTriggerNodes);
 					return foundTriggers.length > 0;
 				},
 			},
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 4af6ba0336..8e0f7c8063 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -12,7 +12,7 @@
 				<n8n-text color="text-light" size="small">
 					<span v-show="data">{{$locale.baseText('workflows.item.updated')}} <time-ago :date="data.updatedAt" /> | </span>
 					<span v-show="data" class="mr-2xs">{{$locale.baseText('workflows.item.created')}} {{ formattedCreatedAtDate }} </span>
-					<span v-if="areTagsEnabled && data.tags && data.tags.length > 0" v-show="data">
+					<span v-if="settingsStore.areTagsEnabled && data.tags && data.tags.length > 0" v-show="data">
 					<n8n-tags
 						:tags="data.tags"
 						:truncateAt="3"
@@ -62,6 +62,11 @@ import dateformat from "dateformat";
 import { restApi } from '@/components/mixins/restApi';
 import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import Vue from "vue";
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export const WORKFLOW_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
@@ -103,11 +108,14 @@ export default mixins(
 		},
 	},
 	computed: {
+		...mapStores(
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+			useWorkflowsStore,
+		),
 		currentUser (): IUser {
-			return this.$store.getters['users/currentUser'];
-		},
-		areTagsEnabled(): boolean {
-			return this.$store.getters['settings/areTagsEnabled'];
+			return this.usersStore.currentUser || {} as IUser;
 		},
 		credentialPermissions(): IPermissions {
 			return getWorkflowPermissions(this.currentUser, this.data, this.$store);
@@ -162,7 +170,7 @@ export default mixins(
 			if (action === WORKFLOW_LIST_ITEM_ACTIONS.OPEN) {
 				await this.onClick();
 			} else if (action === WORKFLOW_LIST_ITEM_ACTIONS.DUPLICATE) {
-				await this.$store.dispatch('ui/openModalWithData', {
+				this.uiStore.openModalWithData({
 					name: DUPLICATE_MODAL_KEY,
 					data: {
 						id: this.data.id,
@@ -188,7 +196,7 @@ export default mixins(
 
 				try {
 					await this.restApi().deleteWorkflow(this.data.id);
-					this.$store.commit('deleteWorkflow', this.data.id);
+					this.workflowsStore.deleteWorkflow(this.data.id);
 				} catch (error) {
 					this.$showError(
 						error,
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index dec679ab61..7555261078 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -220,10 +220,12 @@ import { restApi } from '@/components/mixins/restApi';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
 import {
+	IN8nUISettings,
 	ITimeoutHMS,
 	IWorkflowDataUpdate,
 	IWorkflowSettings,
 	IWorkflowShortResponse,
+	WorkflowCallerPolicyDefaultOption,
 } from '@/Interface';
 import Modal from './Modal.vue';
 import { PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY } from '../constants';
@@ -232,6 +234,10 @@ import mixins from 'vue-typed-mixins';
 
 import { mapGetters } from "vuex";
 import { deepCopy } from "n8n-workflow";
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useSettingsStore } from '@/stores/settings';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export default mixins(
 	externalHooks,
@@ -274,8 +280,8 @@ export default mixins(
 			timezones: [] as Array<{ key: string, value: string }>,
 			workflowSettings: {} as IWorkflowSettings,
 			workflows: [] as IWorkflowShortResponse[],
-			executionTimeout: this.$store.getters.executionTimeout,
-			maxExecutionTimeout: this.$store.getters.maxExecutionTimeout,
+			executionTimeout: 0,
+			maxExecutionTimeout: 0,
 			timeoutHMS: { hours: 0, minutes: 0, seconds: 0 } as ITimeoutHMS,
 			modalBus: new Vue(),
 			WORKFLOW_SETTINGS_MODAL_KEY,
@@ -283,13 +289,25 @@ export default mixins(
 	},
 
 	computed: {
-		...mapGetters(['workflowName', 'workflowId']),
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useWorkflowsStore,
+		),
+		workflowName(): string {
+			return this.workflowsStore.workflowName;
+		},
+		workflowId(): string {
+			return this.workflowsStore.workflowId;
+		},
 		isWorkflowSharingEnabled(): boolean {
-			return this.$store.getters['settings/isWorkflowSharingEnabled'];
+			return this.settingsStore.isWorkflowSharingEnabled;
 		},
 	},
-
 	async mounted () {
+		this.executionTimeout = this.rootStore.executionTimeout;
+		this.maxExecutionTimeout = this.rootStore.maxExecutionTimeout;
+
 		if (!this.workflowId || this.workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
 			this.$showMessage({
 				title: 'No workflow active',
@@ -301,11 +319,11 @@ export default mixins(
 			return;
 		}
 
-		this.defaultValues.saveDataErrorExecution = this.$store.getters.saveDataErrorExecution;
-		this.defaultValues.saveDataSuccessExecution = this.$store.getters.saveDataSuccessExecution;
-		this.defaultValues.saveManualExecutions = this.$store.getters.saveManualExecutions;
-		this.defaultValues.timezone = this.$store.getters.timezone;
-		this.defaultValues.workflowCallerPolicy = this.$store.getters['settings/workflowCallerPolicyDefaultOption'];
+		this.defaultValues.saveDataErrorExecution = this.settingsStore.saveDataErrorExecution;
+		this.defaultValues.saveDataSuccessExecution = this.settingsStore.saveDataSuccessExecution;
+		this.defaultValues.saveManualExecutions = this.settingsStore.saveManualExecutions;
+		this.defaultValues.timezone = this.rootStore.timezone;
+		this.defaultValues.workflowCallerPolicy = this.settingsStore.workflowCallerPolicyDefaultOption;
 
 		this.isLoading = true;
 		const promises = [];
@@ -323,7 +341,7 @@ export default mixins(
 			this.$showError(error, 'Problem loading settings', 'The following error occurred loading the data:');
 		}
 
-		const workflowSettings = deepCopy(this.$store.getters.workflowSettings);
+		const workflowSettings = deepCopy(this.workflowsStore.workflowSettings) as IWorkflowSettings;
 
 		if (workflowSettings.timezone === undefined) {
 			workflowSettings.timezone = 'DEFAULT';
@@ -338,16 +356,16 @@ export default mixins(
 			workflowSettings.saveExecutionProgress = 'DEFAULT';
 		}
 		if (workflowSettings.saveManualExecutions === undefined) {
-			workflowSettings.saveManualExecutions = 'DEFAULT';
+			workflowSettings.saveManualExecutions = this.defaultValues.saveManualExecutions;
 		}
 		if (workflowSettings.callerPolicy === undefined) {
-			workflowSettings.callerPolicy = this.defaultValues.workflowCallerPolicy;
+			workflowSettings.callerPolicy = this.defaultValues.workflowCallerPolicy as WorkflowCallerPolicyDefaultOption;
 		}
 		if (workflowSettings.executionTimeout === undefined) {
-			workflowSettings.executionTimeout = this.$store.getters.executionTimeout;
+			workflowSettings.executionTimeout = this.rootStore.executionTimeout;
 		}
 		if (workflowSettings.maxExecutionTimeout === undefined) {
-			workflowSettings.maxExecutionTimeout = this.$store.getters.maxExecutionTimeout;
+			workflowSettings.maxExecutionTimeout = this.rootStore.maxExecutionTimeout;
 		}
 
 		Vue.set(this, 'workflowSettings', workflowSettings);
@@ -355,7 +373,7 @@ export default mixins(
 		this.isLoading = false;
 
 		this.$externalHooks().run('workflowSettings.dialogVisibleChanged', { dialogVisible: true });
-		this.$telemetry.track('User opened workflow settings', { workflow_id: this.$store.getters.workflowId });
+		this.$telemetry.track('User opened workflow settings', { workflow_id: this.workflowsStore.workflowId });
 	},
 	methods: {
 		onCallerIdsInput(str: string) {
@@ -589,11 +607,11 @@ export default mixins(
 			delete data.settings!.maxExecutionTimeout;
 
 			this.isLoading = true;
-			data.hash = this.$store.getters.workflowHash;
+			data.hash = this.workflowsStore.workflowHash;
 
 			try {
 				const workflow = await this.restApi().updateWorkflow(this.$route.params.name, data);
-				this.$store.commit('setWorkflowHash', workflow.hash);
+				this.workflowsStore.setWorkflowHash(workflow.hash || '');
 			} catch (error) {
 				this.$showError(
 					error,
@@ -611,9 +629,9 @@ export default mixins(
 				}
 			}
 
-			const oldSettings = deepCopy(this.$store.getters.workflowSettings);
+			const oldSettings = deepCopy(this.workflowsStore.workflowSettings);
 
-			this.$store.commit('setWorkflowSettings', localWorkflowSettings);
+			this.workflowsStore.setWorkflowSettings(localWorkflowSettings);
 
 			this.isLoading = false;
 
@@ -625,7 +643,7 @@ export default mixins(
 			this.closeDialog();
 
 			this.$externalHooks().run('workflowSettings.saveSettings', { oldSettings });
-			this.$telemetry.track('User updated workflow settings', { workflow_id: this.$store.getters.workflowId });
+			this.$telemetry.track('User updated workflow settings', { workflow_id: this.workflowsStore.workflowId });
 		},
 		toggleTimeout() {
 			this.workflowSettings.executionTimeout = this.workflowSettings.executionTimeout === -1 ? 0 : -1;
diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
index 695b3ba677..c741529172 100644
--- a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
+++ b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -32,7 +32,7 @@
 				/>
 				<n8n-user-select
 					:users="ownedByUsers"
-					:currentUserId="currentUser.id"
+					:currentUserId="usersStore.currentUser.id"
 					:value="value.ownedBy"
 					size="small"
 					@input="setKeyValue('ownedBy', $event)"
@@ -48,7 +48,7 @@
 				/>
 				<n8n-user-select
 					:users="sharedWithUsers"
-					:currentUserId="currentUser.id"
+					:currentUserId="usersStore.currentUser.id"
 					:value="value.sharedWith"
 					size="small"
 					@input="setKeyValue('sharedWith', $event)"
@@ -66,8 +66,9 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import {EnterpriseEditionFeature} from "@/constants";
-import {IResource} from "@/components/layouts/ResourcesListLayout.vue";
 import {IUser} from "@/Interface";
+import { mapStores } from 'pinia';
+import { useUsersStore } from '@/stores/users';
 
 export type IResourceFiltersType = Record<string, boolean | string | string[]>;
 
@@ -95,17 +96,12 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		currentUser(): IUser {
-			return this.$store.getters['users/currentUser'];
-		},
-		allUsers(): IUser[] {
-			return this.$store.getters['users/allUsers'];
-		},
+		...mapStores(useUsersStore),
 		ownedByUsers(): IUser[] {
-			return this.allUsers.map((user) => user.id === this.value.sharedWith ? { ...user, disabled: true } : user);
+			return this.usersStore.allUsers.map((user) => user.id === this.value.sharedWith ? { ...user, disabled: true } : user);
 		},
 		sharedWithUsers(): IUser[] {
-			return this.allUsers.map((user) => user.id === this.value.ownedBy ? { ...user, disabled: true } : user);
+			return this.usersStore.allUsers.map((user) => user.id === this.value.ownedBy ? { ...user, disabled: true } : user);
 		},
 		filtersLength(): number {
 			let length = 0;
diff --git a/packages/editor-ui/src/components/layouts/PageViewLayout.vue b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
index c4a13755ee..28912f319e 100644
--- a/packages/editor-ui/src/components/layouts/PageViewLayout.vue
+++ b/packages/editor-ui/src/components/layouts/PageViewLayout.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="[$style.wrapper, !sidebarMenuCollapsed && $style.expandedSidebar]">
+	<div :class="[$style.wrapper, !this.uiStore.sidebarMenuCollapsed && $style.expandedSidebar]">
 		<div :class="$style.container">
 			<aside :class="$style.aside" v-if="$slots.aside">
 				<slot name="aside" />
@@ -12,6 +12,8 @@
 </template>
 
 <script lang="ts">
+import { useUIStore } from '@/stores/ui';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 
 export default Vue.extend({
@@ -22,9 +24,7 @@ export default Vue.extend({
 		};
 	},
 	computed: {
-		sidebarMenuCollapsed(): boolean {
-			return this.$store.getters['ui/sidebarMenuCollapsed'];
-		},
+		...mapStores(useUIStore),
 	},
 });
 </script>
diff --git a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
index 4742e00996..5f34048c2b 100644
--- a/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
+++ b/packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
@@ -32,8 +32,8 @@
 				<slot name="empty">
 					<n8n-action-box
 						emoji="👋"
-						:heading="$locale.baseText(currentUser.firstName ? `${resourceKey}.empty.heading` : `${resourceKey}.empty.heading.userNotSetup`, {
-							interpolate: { name: currentUser.firstName }
+						:heading="$locale.baseText(usersStore.currentUser.firstName ? `${resourceKey}.empty.heading` : `${resourceKey}.empty.heading.userNotSetup`, {
+							interpolate: { name: usersStore.currentUser.firstName }
 						})"
 						:description="$locale.baseText(`${resourceKey}.empty.description`)"
 						:buttonText="$locale.baseText(`${resourceKey}.empty.button`)"
@@ -130,6 +130,9 @@ import Vue, {PropType} from "vue";
 import {debounceHelper} from '@/components/mixins/debounce';
 import ResourceOwnershipSelect from "@/components/forms/ResourceOwnershipSelect.ee.vue";
 import ResourceFiltersDropdown from "@/components/forms/ResourceFiltersDropdown.vue";
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
 
 export interface IResource {
 	id: string;
@@ -204,20 +207,18 @@ export default mixins(
 		};
 	},
 	computed: {
-		currentUser(): IUser {
-			return this.$store.getters['users/currentUser'];
-		},
-		allUsers(): IUser[] {
-			return this.$store.getters['users/allUsers'];
-		},
+		...mapStores(
+			useSettingsStore,
+			useUsersStore,
+		),
 		subviewResources(): IResource[] {
 			if (!this.shareable) {
 				return this.resources as IResource[];
 			}
 
 			return (this.resources as IResource[]).filter((resource) => {
-				if (this.isOwnerSubview && this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
-					return !!(resource.ownedBy && resource.ownedBy.id === this.currentUser.id);
+				if (this.isOwnerSubview && this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
+					return !!(resource.ownedBy && resource.ownedBy.id === this.usersStore.currentUser?.id);
 				}
 
 				return true;
@@ -268,7 +269,7 @@ export default mixins(
 		},
 		resourcesNotOwned(): IResource[] {
 			return (this.resources as IResource[]).filter((resource) => {
-				return resource.ownedBy && resource.ownedBy.id !== this.currentUser.id;
+				return resource.ownedBy && resource.ownedBy.id !== this.usersStore.currentUser?.id;
 			});
 		},
 	},
diff --git a/packages/editor-ui/src/components/mixins/executionsHelpers.ts b/packages/editor-ui/src/components/mixins/executionsHelpers.ts
index 7591fda98b..70aaa5e5a0 100644
--- a/packages/editor-ui/src/components/mixins/executionsHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/executionsHelpers.ts
@@ -1,5 +1,7 @@
 import { IExecutionsSummary } from "@/Interface";
+import { useWorkflowsStore } from "@/stores/workflows";
 import dateFormat from "dateformat";
+import { mapStores } from "pinia";
 import mixins from "vue-typed-mixins";
 import { genericHelpers } from "./genericHelpers";
 
@@ -12,20 +14,23 @@ export interface IExecutionUIData {
 
 export const executionHelpers = mixins(genericHelpers).extend({
 	computed: {
+		...mapStores(
+			useWorkflowsStore,
+		),
 		executionId(): string {
 			return this.$route.params.executionId;
 		},
 		workflowName (): string {
-			return this.$store.getters.workflowName;
+			return this.workflowsStore.workflowName;
 		},
 		currentWorkflow (): string {
-			return this.$route.params.name || this.$store.getters.workflowId;
+			return this.$route.params.name || this.workflowsStore.workflowId;
 		},
 		executions(): IExecutionsSummary[] {
-			return this.$store.getters['workflows/currentWorkflowExecutions'];
+			return this.workflowsStore.currentWorkflowExecutions;
 		},
-		activeExecution(): IExecutionsSummary {
-			return this.$store.getters['workflows/getActiveWorkflowExecution'];
+		activeExecution(): IExecutionsSummary | null {
+			return this.workflowsStore.activeWorkflowExecution;
 		},
 	},
 	methods: {
diff --git a/packages/editor-ui/src/components/mixins/mouseSelect.ts b/packages/editor-ui/src/components/mixins/mouseSelect.ts
index 0ee605b9c2..fdea3ff59f 100644
--- a/packages/editor-ui/src/components/mixins/mouseSelect.ts
+++ b/packages/editor-ui/src/components/mixins/mouseSelect.ts
@@ -5,6 +5,9 @@ import mixins from 'vue-typed-mixins';
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { getMousePosition, getRelativePosition, HEADER_HEIGHT, INNER_SIDEBAR_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_EXPANDED } from '@/views/canvasHelpers';
 import { VIEWS } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export const mouseSelect = mixins(
 	deviceSupportHelpers,
@@ -19,6 +22,10 @@ export const mouseSelect = mixins(
 		this.createSelectBox();
 	},
 	computed: {
+		...mapStores(
+			useUIStore,
+			useWorkflowsStore,
+		),
 		isDemo (): boolean {
 			return this.$route.name === VIEWS.DEMO;
 		},
@@ -49,10 +56,10 @@ export const mouseSelect = mixins(
 		},
 		getMousePositionWithinNodeView (event: MouseEvent | TouchEvent): XYPosition {
 			const [x, y] = getMousePosition(event);
+			const sidebarOffset = this.isDemo ? 0 : this.uiStore.sidebarMenuCollapsed ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED;
 			const headerOffset = this.isDemo ? 0 : HEADER_HEIGHT;
-			const sidebarOffset = this.isDemo ? 0 : this.$store.getters['ui/sidebarMenuCollapsed'] ? SIDEBAR_WIDTH : SIDEBAR_WIDTH_EXPANDED;
 			// @ts-ignore
-			return getRelativePosition(x - sidebarOffset, y - headerOffset, this.nodeViewScale, this.$store.getters.getNodeViewOffsetPosition);
+			return getRelativePosition(x - sidebarOffset, y - headerOffset, this.nodeViewScale, this.uiStore.nodeViewOffsetPosition);
 		},
 		showSelectBox (event: MouseEvent) {
 			const [x, y] = this.getMousePositionWithinNodeView(event);
@@ -105,7 +112,7 @@ export const mouseSelect = mixins(
 			const selectionBox = this.getSelectionBox(event);
 
 			// Go through all nodes and check if they are selected
-			this.$store.getters.allNodes.forEach((node: INodeUi) => {
+			this.workflowsStore.allNodes.forEach((node: INodeUi) => {
 				// TODO: Currently always uses the top left corner for checking. Should probably use the center instead
 				if (node.position[0] < selectionBox.x || node.position[0] > (selectionBox.x + selectionBox.width)) {
 					return;
@@ -125,7 +132,7 @@ export const mouseSelect = mixins(
 				return;
 			}
 
-			if (this.$store.getters.isActionActive('dragActive')) {
+			if (this.uiStore.isActionActive('dragActive')) {
 				// If a node does currently get dragged we do not activate the selection
 				return;
 			}
@@ -161,7 +168,7 @@ export const mouseSelect = mixins(
 			});
 
 			if (selectedNodes.length === 1) {
-				this.$store.commit('setLastSelectedNode', selectedNodes[0].name);
+				this.uiStore.lastSelectedNode = selectedNodes[0].name;
 			}
 
 			this.hideSelectBox();
@@ -178,21 +185,21 @@ export const mouseSelect = mixins(
 			this.updateSelectBox(e);
 		},
 		nodeDeselected (node: INodeUi) {
-			this.$store.commit('removeNodeFromSelection', node);
+			this.uiStore.removeNodeFromSelection(node);
 			// @ts-ignore
 			this.instance.removeFromDragSelection(node.id);
 		},
 		nodeSelected (node: INodeUi) {
-			this.$store.commit('addSelectedNode', node);
+			this.uiStore.addSelectedNode(node);
 			// @ts-ignore
 			this.instance.addToDragSelection(node.id);
 		},
 		deselectAllNodes () {
 			// @ts-ignore
 			this.instance.clearDragSelection();
-			this.$store.commit('resetSelectedNodes');
-			this.$store.commit('setLastSelectedNode', null);
-			this.$store.commit('setLastSelectedNodeOutputIndex', null);
+			this.uiStore.resetSelectedNodes();
+			this.uiStore.lastSelectedNode = null;
+			this.uiStore.lastSelectedNodeOutputIndex = null;
 			// @ts-ignore
 			this.lastSelectedConnection = null;
 			// @ts-ignore
diff --git a/packages/editor-ui/src/components/mixins/moveNodeWorkflow.ts b/packages/editor-ui/src/components/mixins/moveNodeWorkflow.ts
index dacf5884fd..0884215d94 100644
--- a/packages/editor-ui/src/components/mixins/moveNodeWorkflow.ts
+++ b/packages/editor-ui/src/components/mixins/moveNodeWorkflow.ts
@@ -3,6 +3,8 @@ import mixins from 'vue-typed-mixins';
 import normalizeWheel from 'normalize-wheel';
 import { deviceSupportHelpers } from '@/components/mixins/deviceSupportHelpers';
 import { getMousePosition } from '@/views/canvasHelpers';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
 
 export const moveNodeWorkflow = mixins(
 	deviceSupportHelpers,
@@ -12,16 +14,18 @@ export const moveNodeWorkflow = mixins(
 			moveLastPosition: [0, 0],
 		};
 	},
-
+	computed: {
+		...mapStores(useUIStore),
+	},
 	methods: {
 		moveWorkflow (e: MouseEvent) {
-			const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;
+			const offsetPosition = this.uiStore.nodeViewOffsetPosition;
 
 			const [x, y] = getMousePosition(e);
 
 			const nodeViewOffsetPositionX = offsetPosition[0] + (x - this.moveLastPosition[0]);
 			const nodeViewOffsetPositionY = offsetPosition[1] + (y - this.moveLastPosition[1]);
-			this.$store.commit('setNodeViewOffsetPosition', {newOffset: [nodeViewOffsetPositionX, nodeViewOffsetPositionY]});
+			this.uiStore.nodeViewOffsetPosition = [nodeViewOffsetPositionX, nodeViewOffsetPositionY];
 
 			// Update the last position
 			this.moveLastPosition[0] = x;
@@ -34,12 +38,12 @@ export const moveNodeWorkflow = mixins(
 				return;
 			}
 
-			if (this.$store.getters.isActionActive('dragActive')) {
+			if (this.uiStore.isActionActive('dragActive')) {
 				// If a node does currently get dragged we do not activate the selection
 				return;
 			}
 
-			this.$store.commit('setNodeViewMoveInProgress', true);
+			this.uiStore.nodeViewMoveInProgress = true;
 
 			const [x, y] = getMousePosition(e);
 
@@ -50,7 +54,7 @@ export const moveNodeWorkflow = mixins(
 			this.$el.addEventListener('mousemove', this.mouseMoveNodeWorkflow);
 		},
 		mouseUpMoveWorkflow (e: MouseEvent) {
-			if (this.$store.getters.isNodeViewMoveInProgress === false) {
+			if (this.uiStore.nodeViewMoveInProgress === false) {
 				// If it is not active return directly.
 				// Else normal node dragging will not work.
 				return;
@@ -59,7 +63,7 @@ export const moveNodeWorkflow = mixins(
 			// @ts-ignore
 			this.$el.removeEventListener('mousemove', this.mouseMoveNodeWorkflow);
 
-			this.$store.commit('setNodeViewMoveInProgress', false);
+			this.uiStore.nodeViewMoveInProgress = false;
 
 			// Nothing else to do. Simply leave the node view at the current offset
 		},
@@ -69,7 +73,7 @@ export const moveNodeWorkflow = mixins(
 				return;
 			}
 
-			if (this.$store.getters.isActionActive('dragActive')) {
+			if (this.uiStore.isActionActive('dragActive')) {
 				return;
 			}
 
@@ -86,10 +90,10 @@ export const moveNodeWorkflow = mixins(
 		},
 		wheelMoveWorkflow (e: WheelEvent) {
 			const normalized = normalizeWheel(e);
-			const offsetPosition = this.$store.getters.getNodeViewOffsetPosition;
+			const offsetPosition = this.uiStore.nodeViewOffsetPosition;
 			const nodeViewOffsetPositionX = offsetPosition[0] - (e.shiftKey ? normalized.pixelY : normalized.pixelX);
 			const nodeViewOffsetPositionY = offsetPosition[1] - (e.shiftKey ? normalized.pixelX : normalized.pixelY);
-			this.$store.commit('setNodeViewOffsetPosition', {newOffset: [nodeViewOffsetPositionX, nodeViewOffsetPositionY]});
+			this.uiStore.nodeViewOffsetPosition = [nodeViewOffsetPositionX, nodeViewOffsetPositionY];
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/mixins/newVersions.ts b/packages/editor-ui/src/components/mixins/newVersions.ts
index dbb721a632..5df15a668a 100644
--- a/packages/editor-ui/src/components/mixins/newVersions.ts
+++ b/packages/editor-ui/src/components/mixins/newVersions.ts
@@ -4,10 +4,15 @@ import {
 	IVersion,
 } from '../../Interface';
 import { VERSIONS_MODAL_KEY } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
 
 export const newVersions = mixins(
 	showMessage,
 ).extend({
+	computed: {
+		...mapStores(useUIStore),
+	},
 	methods: {
 		async checkForNewVersions() {
 			const enabled = this.$store.getters['versions/areNotificationsEnabled'];
@@ -31,7 +36,7 @@ export const newVersions = mixins(
 					title: 'Critical update available',
 					message,
 					onClick: () => {
-						this.$store.dispatch('ui/openModal', VERSIONS_MODAL_KEY);
+						this.uiStore.openModal(VERSIONS_MODAL_KEY);
 					},
 					closeOnClick: true,
 					customClass: 'clickable',
diff --git a/packages/editor-ui/src/components/mixins/nodeBase.ts b/packages/editor-ui/src/components/mixins/nodeBase.ts
index df114d3a2e..3d3a6d0eee 100644
--- a/packages/editor-ui/src/components/mixins/nodeBase.ts
+++ b/packages/editor-ui/src/components/mixins/nodeBase.ts
@@ -9,7 +9,10 @@ import {
 	INodeTypeDescription,
 } from 'n8n-workflow';
 import { getStyleTokenValue } from '../helpers';
-import { readonly } from 'vue';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from "@/stores/workflows";
+import { useNodeTypesStore } from "@/stores/nodeTypes";
 
 export const nodeBase = mixins(
 	deviceSupportHelpers,
@@ -26,11 +29,16 @@ export const nodeBase = mixins(
 		}
 	},
 	computed: {
-		data (): INodeUi {
-			return this.$store.getters.getNodeByName(this.name);
+		...mapStores(
+			useNodeTypesStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
+		data (): INodeUi | null {
+			return this.workflowsStore.getNodeByName(this.name);
 		},
 		nodeId (): string {
-			return this.data.id;
+			return this.data?.id  || '';
 		},
 	},
 	props: {
@@ -242,7 +250,7 @@ export const nodeBase = mixins(
 					// @ts-ignore
 					this.dragging = true;
 
-					const isSelected = this.$store.getters.isNodeSelected(this.data.name);
+					const isSelected = this.uiStore.isNodeSelected(this.data.name);
 					const nodeName = this.data.name;
 					if (this.data.type === STICKY_NODE_TYPE && !isSelected) {
 						setTimeout(() => {
@@ -255,17 +263,17 @@ export const nodeBase = mixins(
 						// undefined. So check if the currently dragged node is selected and if not clear
 						// the drag-selection.
 						this.instance.clearDragSelection();
-						this.$store.commit('resetSelectedNodes');
+						this.uiStore.resetSelectedNodes();
 					}
 
-					this.$store.commit('addActiveAction', 'dragActive');
+					this.uiStore.addActiveAction('dragActive');
 					return true;
 				},
 				stop: (params: { e: MouseEvent }) => {
 					// @ts-ignore
 					this.dragging = false;
-					if (this.$store.getters.isActionActive('dragActive')) {
-						const moveNodes = this.$store.getters.getSelectedNodes.slice();
+					if (this.uiStore.isActionActive('dragActive')) {
+						const moveNodes = this.uiStore.getSelectedNodes.slice();
 						const selectedNodeNames = moveNodes.map((node: INodeUi) => node.name);
 						if (!selectedNodeNames.includes(this.data.name)) {
 							// If the current node is not in selected add it to the nodes which
@@ -297,7 +305,7 @@ export const nodeBase = mixins(
 								},
 							};
 
-							this.$store.commit('updateNodeProperties', updateInformation);
+							this.workflowsStore.updateNodeProperties(updateInformation);
 						});
 
 						this.$emit('moved', node);
@@ -307,10 +315,10 @@ export const nodeBase = mixins(
 			});
 		},
 		__addNode (node: INodeUi) {
-			let nodeTypeData = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
+			let nodeTypeData = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 			if (!nodeTypeData) {
 				// If node type is not know use by default the base.noOp data to display it
-				nodeTypeData = this.$store.getters['nodeTypes/getNodeType'](NO_OP_NODE_TYPE) as INodeTypeDescription;
+				nodeTypeData = this.nodeTypesStore.getNodeType(NO_OP_NODE_TYPE);
 			}
 
 			this.__addInputEndpoints(node, nodeTypeData);
@@ -319,8 +327,8 @@ export const nodeBase = mixins(
 		},
 		touchEnd(e: MouseEvent) {
 			if (this.isTouchDevice) {
-				if (this.$store.getters.isActionActive('dragActive')) {
-					this.$store.commit('removeActiveAction', 'dragActive');
+				if (this.uiStore.isActionActive('dragActive')) {
+					this.uiStore.removeActiveAction('dragActive');
 				}
 			}
 		},
@@ -334,14 +342,14 @@ export const nodeBase = mixins(
 			}
 
 			if (!this.isTouchDevice) {
-				if (this.$store.getters.isActionActive('dragActive')) {
-					this.$store.commit('removeActiveAction', 'dragActive');
+				if (this.uiStore.isActionActive('dragActive')) {
+					this.uiStore.removeActiveAction('dragActive');
 				} else {
 					if (!this.isCtrlKeyPressed(e)) {
 						this.$emit('deselectAllNodes');
 					}
 
-					if (this.$store.getters.isNodeSelected(this.data.name)) {
+					if (this.uiStore.isNodeSelected(this.data.name)) {
 						this.$emit('deselectNode', this.name);
 					} else {
 						this.$emit('nodeSelected', this.name);
diff --git a/packages/editor-ui/src/components/mixins/nodeHelpers.ts b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
index 110691c994..2b38f25076 100644
--- a/packages/editor-ui/src/components/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/nodeHelpers.ts
@@ -22,11 +22,14 @@ import {
 	ITaskDataConnections,
 	INode,
 	INodePropertyOptions,
+	IDataObject,
 } from 'n8n-workflow';
 
 import {
 	ICredentialsResponse,
 	INodeUi,
+	INodeUpdatePropertiesInformation,
+	IUser,
 } from '@/Interface';
 
 import { restApi } from '@/components/mixins/restApi';
@@ -37,12 +40,22 @@ import mixins from 'vue-typed-mixins';
 import { mapGetters } from 'vuex';
 import { isObjectLiteral } from '@/utils';
 import {getCredentialPermissions} from "@/permissions";
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export const nodeHelpers = mixins(
 	restApi,
 )
 	.extend({
 		computed: {
+			...mapStores(
+				useNodeTypesStore,
+				useSettingsStore,
+				useWorkflowsStore,
+			),
 			...mapGetters('credentials', [ 'getCredentialTypeByName', 'getCredentialsByType' ]),
 		},
 		methods: {
@@ -76,7 +89,7 @@ export const nodeHelpers = mixins(
 
 			// Returns all the issues of the node
 			getNodeIssues (nodeType: INodeTypeDescription | null, node: INodeUi, ignoreIssues?: string[]): INodeIssues | null {
-				const pinDataNodeNames = Object.keys(this.$store.getters.pinData || {});
+				const pinDataNodeNames = Object.keys(this.workflowsStore.getPinData || {});
 
 				let nodeIssues: INodeIssues | null = null;
 				ignoreIssues = ignoreIssues || [];
@@ -125,7 +138,7 @@ export const nodeHelpers = mixins(
 			// Set the status on all the nodes which produced an error so that it can be
 			// displayed in the node-view
 			hasNodeExecutionIssues (node: INodeUi): boolean {
-				const workflowResultData: IRunData = this.$store.getters.getWorkflowRunData;
+				const workflowResultData: IRunData = this.workflowsStore.getWorkflowRunData;
 
 				if (workflowResultData === null || !workflowResultData.hasOwnProperty(node.name)) {
 					return false;
@@ -159,10 +172,10 @@ export const nodeHelpers = mixins(
 
 			// Updates the execution issues.
 			updateNodesExecutionIssues () {
-				const nodes = this.$store.getters.allNodes;
+				const nodes = this.workflowsStore.allNodes;
 
 				for (const node of nodes) {
-					this.$store.commit('setNodeIssue', {
+					this.workflowsStore.setNodeIssue({
 						node: node.name,
 						type: 'execution',
 						value: this.hasNodeExecutionIssues(node) ? true : null,
@@ -179,17 +192,17 @@ export const nodeHelpers = mixins(
 					newIssues = fullNodeIssues.credentials!;
 				}
 
-				this.$store.commit('setNodeIssue', {
+				this.workflowsStore.setNodeIssue({
 					node: node.name,
 					type: 'credentials',
 					value: newIssues,
-				} as INodeIssueData);
+				});
 			},
 
 			// Updates the parameter-issues of the node
 			updateNodeParameterIssues(node: INodeUi, nodeType?: INodeTypeDescription): void {
 				if (nodeType === undefined) {
-					nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
+					nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 				}
 
 				if (nodeType === null) {
@@ -205,11 +218,11 @@ export const nodeHelpers = mixins(
 					newIssues = fullNodeIssues.parameters!;
 				}
 
-				this.$store.commit('setNodeIssue', {
+				this.workflowsStore.setNodeIssue({
 					node: node.name,
 					type: 'parameters',
 					value: newIssues,
-				} as INodeIssueData);
+				});
 			},
 
 			// Returns all the credential-issues of the node
@@ -220,7 +233,7 @@ export const nodeHelpers = mixins(
 				}
 
 				if (!nodeType) {
-					nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
+					nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 				}
 
 				if (!nodeType?.credentials) {
@@ -313,9 +326,11 @@ export const nodeHelpers = mixins(
 							};
 						}
 
+						const usersStore = useUsersStore();
+						const currentUser = usersStore.currentUser || {} as IUser;
 						userCredentials = this.$store.getters['credentials/getCredentialsByType'](credentialTypeDescription.name)
 							.filter((credential: ICredentialsResponse) => {
-								const permissions = getCredentialPermissions(this.$store.getters['users/currentUser'], credential, this.$store);
+								const permissions = getCredentialPermissions(currentUser, credential, this.$store);
 								return permissions.use;
 							});
 
@@ -337,7 +352,7 @@ export const nodeHelpers = mixins(
 						}
 
 						if (nameMatches.length === 0) {
-							if (this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
+							if (this.settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
 								foundIssues[credentialTypeDescription.name] = [this.$locale.baseText('nodeIssues.credentials.notAvailable')];
 							} else {
 								foundIssues[credentialTypeDescription.name] = [this.$locale.baseText('nodeIssues.credentials.doNotExist', { interpolate: { name: selectedCredentials.name, type: credentialDisplayName } }), this.$locale.baseText('nodeIssues.credentials.doNotExist.hint')];
@@ -358,13 +373,13 @@ export const nodeHelpers = mixins(
 
 			// Updates the node credential issues
 			updateNodesCredentialsIssues () {
-				const nodes = this.$store.getters.allNodes;
+				const nodes = this.workflowsStore.allNodes;
 				let issues: INodeIssues | null;
 
 				for (const node of nodes) {
 					issues = this.getNodeCredentialIssues(node);
 
-					this.$store.commit('setNodeIssue', {
+					this.workflowsStore.setNodeIssue({
 						node: node.name,
 						type: 'credentials',
 						value: issues === null ? null : issues.credentials,
@@ -377,10 +392,10 @@ export const nodeHelpers = mixins(
 					return [];
 				}
 
-				if (this.$store.getters.getWorkflowExecution === null) {
+				if (this.workflowsStore.getWorkflowExecution === null) {
 					return [];
 				}
-				const executionData: IRunExecutionData = this.$store.getters.getWorkflowExecution.data;
+				const executionData = this.workflowsStore.getWorkflowExecution.data;
 				if (!executionData || !executionData.resultData) { // unknown status
 					return [];
 				}
@@ -437,13 +452,13 @@ export const nodeHelpers = mixins(
 						name: node.name,
 						properties: {
 							disabled: !node.disabled,
-						},
-					};
+						} as IDataObject,
+					} as INodeUpdatePropertiesInformation;
 
-					this.$telemetry.track('User set node enabled status', { node_type: node.type, is_enabled: node.disabled, workflow_id: this.$store.getters.workflowId });
+					this.$telemetry.track('User set node enabled status', { node_type: node.type, is_enabled: node.disabled, workflow_id: this.workflowsStore.workflowId });
 
-					this.$store.commit('updateNodeProperties', updateInformation);
-					this.$store.commit('clearNodeExecutionData', node.name);
+					this.workflowsStore.updateNodeProperties(updateInformation);
+					this.workflowsStore.clearNodeExecutionData(node.name);
 					this.updateNodeParameterIssues(node);
 					this.updateNodeCredentialIssues(node);
 				}
diff --git a/packages/editor-ui/src/components/mixins/pinData.ts b/packages/editor-ui/src/components/mixins/pinData.ts
index 1bfe9cc1e1..0fa14e6cf6 100644
--- a/packages/editor-ui/src/components/mixins/pinData.ts
+++ b/packages/editor-ui/src/components/mixins/pinData.ts
@@ -3,6 +3,8 @@ import { INodeUi } from '@/Interface';
 import { IPinData } from 'n8n-workflow';
 import { stringSizeInBytes } from '@/components/helpers';
 import { MAX_WORKFLOW_PINNED_DATA_SIZE, PIN_DATA_NODE_TYPES_DENYLIST } from '@/constants';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export interface IPinDataContext {
 	node: INodeUi;
@@ -11,8 +13,9 @@ export interface IPinDataContext {
 
 export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend({
 	computed: {
+		...mapStores(useWorkflowsStore),
 		pinData (): IPinData[string] | undefined {
-			return this.node ? this.$store.getters['pinDataByNodeName'](this.node!.name) : undefined;
+			return this.node ? this.workflowsStore.pinDataByNodeName(this.node!.name) : undefined;
 		},
 		hasPinData (): boolean {
 			return !!this.node && typeof this.pinData !== 'undefined';
@@ -70,7 +73,7 @@ export const pinData = (Vue as Vue.VueConstructor<Vue & IPinDataContext>).extend
 		isValidPinDataSize(data: string | object): boolean {
 			if (typeof data === 'object') data = JSON.stringify(data);
 
-			if (this.$store.getters['pinDataSize'] + stringSizeInBytes(data) > MAX_WORKFLOW_PINNED_DATA_SIZE) {
+			if (this.workflowsStore.pinDataSize + stringSizeInBytes(data) > MAX_WORKFLOW_PINNED_DATA_SIZE) {
 				this.$showError(
 					new Error(this.$locale.baseText('ndv.pinData.error.tooLarge.description')),
 					this.$locale.baseText('ndv.pinData.error.tooLarge.title'),
diff --git a/packages/editor-ui/src/components/mixins/pushConnection.ts b/packages/editor-ui/src/components/mixins/pushConnection.ts
index dcc3599911..15b1a2aa92 100644
--- a/packages/editor-ui/src/components/mixins/pushConnection.ts
+++ b/packages/editor-ui/src/components/mixins/pushConnection.ts
@@ -1,4 +1,5 @@
 import {
+	IExecutionResponse,
 	IExecutionsCurrentSummaryExtended,
 	IPushData,
 } from '../../Interface';
@@ -22,6 +23,10 @@ import mixins from 'vue-typed-mixins';
 import { WORKFLOW_SETTINGS_MODAL_KEY } from '@/constants';
 import { getTriggerNodeServiceName } from '../helpers';
 import { codeNodeEditorEventBus } from '@/event-bus/code-node-editor-event-bus';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 export const pushConnection = mixins(
 	externalHooks,
@@ -40,8 +45,13 @@ export const pushConnection = mixins(
 			};
 		},
 		computed: {
+			...mapStores(
+				useNodeTypesStore,
+				useUIStore,
+				useWorkflowsStore,
+			),
 			sessionId (): string {
-				return this.$store.getters.sessionId;
+				return this.rootStore.sessionId;
 			},
 		},
 		methods: {
@@ -63,13 +73,13 @@ export const pushConnection = mixins(
 				// always removed that we do not end up with multiple ones
 				this.pushDisconnect();
 
-				const connectionUrl = `${this.$store.getters.getRestUrl}/push?sessionId=${this.sessionId}`;
+				const connectionUrl = `${this.rootStore.getRestUrl}/push?sessionId=${this.sessionId}`;
 
 				this.eventSource = new EventSource(connectionUrl, { withCredentials: true });
 				this.eventSource.addEventListener('message', this.pushMessageReceived, false);
 
 				this.eventSource.addEventListener('open', () => {
-					this.$store.commit('setPushConnectionActive', true);
+					this.rootStore.pushConnectionActive =  true;
 					if (this.reconnectTimeout !== null) {
 						clearTimeout(this.reconnectTimeout);
 						this.reconnectTimeout = null;
@@ -84,7 +94,7 @@ export const pushConnection = mixins(
 						this.reconnectTimeout = null;
 					}
 
-					this.$store.commit('setPushConnectionActive', false);
+					this.rootStore.pushConnectionActive =  false;
 					this.pushAutomaticReconnect();
 				}, false);
 			},
@@ -97,7 +107,7 @@ export const pushConnection = mixins(
 					this.eventSource.close();
 					this.eventSource = null;
 
-					this.$store.commit('setPushConnectionActive', false);
+					this.rootStore.pushConnectionActive =  false;
 				}
 			},
 
@@ -178,12 +188,12 @@ export const pushConnection = mixins(
 				}
 
 				if (receivedData.type === 'nodeExecuteAfter' || receivedData.type === 'nodeExecuteBefore') {
-					if (this.$store.getters.isActionActive('workflowRunning') === false) {
+					if (!this.uiStore.isActionActive('workflowRunning')) {
 						// No workflow is running so ignore the messages
 						return false;
 					}
 					const pushData = receivedData.data;
-					if (this.$store.getters.activeExecutionId !== pushData.executionId) {
+					if (this.workflowsStore.activeExecutionId !== pushData.executionId) {
 						// The data is not for the currently active execution or
 						// we do not have the execution id yet.
 						if (isRetry !== true) {
@@ -197,14 +207,14 @@ export const pushConnection = mixins(
 					// The workflow finished executing
 					const pushData = receivedData.data;
 
-					this.$store.commit('finishActiveExecution', pushData);
+					this.workflowsStore.finishActiveExecution(pushData);
 
-					if (this.$store.getters.isActionActive('workflowRunning') === false) {
+					if (!this.uiStore.isActionActive('workflowRunning')) {
 						// No workflow is running so ignore the messages
 						return false;
 					}
 
-					if (this.$store.getters.activeExecutionId !== pushData.executionId) {
+					if (this.workflowsStore.activeExecutionId !== pushData.executionId) {
 						// The workflow which did finish execution did either not get started
 						// by this session or we do not have the execution id yet.
 						if (isRetry !== true) {
@@ -227,19 +237,17 @@ export const pushConnection = mixins(
 
 					const workflow = this.getCurrentWorkflow();
 					if (runDataExecuted.waitTill !== undefined) {
-						const {
-							activeExecutionId,
-							workflowSettings,
-							saveManualExecutions,
-						} = this.$store.getters;
+						const activeExecutionId = this.workflowsStore.activeExecutionId;
+						const workflowSettings = this.workflowsStore.workflowSettings;
+						const saveManualExecutions = this.rootStore.saveManualExecutions;
 
 						const isSavingExecutions= workflowSettings.saveManualExecutions === undefined ? saveManualExecutions : workflowSettings.saveManualExecutions;
 
 						let action;
 						if (!isSavingExecutions) {
 							this.$root.$emit('registerGlobalLinkAction', 'open-settings', async () => {
-								if (this.$store.getters.isNewWorkflow) await this.saveAsNewWorkflow();
-								this.$store.dispatch('ui/openModal', WORKFLOW_SETTINGS_MODAL_KEY);
+								if (this.workflowsStore.isNewWorkflow) await this.saveAsNewWorkflow();
+								this.uiStore.openModal(WORKFLOW_SETTINGS_MODAL_KEY);
 							});
 
 							action = '<a data-action="open-settings">Turn on saving manual executions</a> and run again to see what happened after this node.';
@@ -272,7 +280,7 @@ export const pushConnection = mixins(
 									error_title: error.message,
 									error_type: error.context.type,
 									node_graph_string: JSON.stringify(TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes()).nodeGraph),
-									workflow_id: this.$store.getters.workflowId,
+									workflow_id: this.workflowsStore.workflowId,
 								};
 
 								if (error.context.nodeCause && ['no pairing info', 'invalid pairing info'].includes(error.context.type as string)) {
@@ -295,7 +303,7 @@ export const pushConnection = mixins(
 						if (runDataExecuted.data.resultData.error?.name === 'SubworkflowOperationError') {
 							const error = runDataExecuted.data.resultData.error as SubworkflowOperationError;
 
-							this.$store.commit('setSubworkflowExecutionError', error);
+							this.workflowsStore.subWorkflowExecutionError =  error;
 
 							this.$showMessage({
 								title: error.message,
@@ -324,10 +332,10 @@ export const pushConnection = mixins(
 						// Workflow did execute without a problem
 						this.$titleSet(workflow.name as string, 'IDLE');
 
-						const execution = this.$store.getters.getWorkflowExecution;
+						const execution = this.workflowsStore.getWorkflowExecution;
 						if (execution && execution.executedNode) {
-							const node = this.$store.getters.getNodeByName(execution.executedNode);
-							const nodeType = node && this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
+							const node = this.workflowsStore.getNodeByName(execution.executedNode);
+							const nodeType = node && this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 							const nodeOutput = execution && execution.executedNode && execution.data && execution.data.resultData && execution.data.resultData.runData && execution.data.resultData.runData[execution.executedNode];
 							if (node && nodeType && !nodeOutput) {
 								this.$showMessage({
@@ -361,11 +369,13 @@ export const pushConnection = mixins(
 					// It does not push the runData as it got already pushed with each
 					// node that did finish. For that reason copy in here the data
 					// which we already have.
-					runDataExecuted.data.resultData.runData = this.$store.getters.getWorkflowRunData;
+					if (this.workflowsStore.getWorkflowRunData) {
+						runDataExecuted.data.resultData.runData = this.workflowsStore.getWorkflowRunData;
+					}
 
-					this.$store.commit('setExecutingNode', null);
-					this.$store.commit('setWorkflowExecutionData', runDataExecuted);
-					this.$store.commit('removeActiveAction', 'workflowRunning');
+					this.workflowsStore.executingNode = null;
+					this.workflowsStore.setWorkflowExecutionData(runDataExecuted as IExecutionResponse);
+					this.uiStore.removeActiveAction('workflowRunning');
 
 					// Set the node execution issues on all the nodes which produced an error so that
 					// it can be displayed in the node-view
@@ -397,36 +407,36 @@ export const pushConnection = mixins(
 						workflowName: pushData.workflowName,
 					};
 
-					this.$store.commit('addActiveExecution', executionData);
+					this.workflowsStore.addActiveExecution(executionData);
 				} else if (receivedData.type === 'nodeExecuteAfter') {
 					// A node finished to execute. Add its data
 					const pushData = receivedData.data;
-					this.$store.commit('addNodeExecutionData', pushData);
+					this.workflowsStore.addNodeExecutionData(pushData);
 				} else if (receivedData.type === 'nodeExecuteBefore') {
 					// A node started to be executed. Set it as executing.
 					const pushData = receivedData.data;
-					this.$store.commit('setExecutingNode', pushData.nodeName);
+					this.workflowsStore.executingNode = pushData.nodeName;
 				} else if (receivedData.type === 'testWebhookDeleted') {
 					// A test-webhook was deleted
 					const pushData = receivedData.data;
 
-					if (pushData.workflowId === this.$store.getters.workflowId) {
-						this.$store.commit('setExecutionWaitingForWebhook', false);
-						this.$store.commit('removeActiveAction', 'workflowRunning');
+					if (pushData.workflowId === this.workflowsStore.workflowId) {
+						this.workflowsStore.executionWaitingForWebhook = false;
+						this.uiStore.removeActiveAction('workflowRunning');
 					}
 				} else if (receivedData.type === 'testWebhookReceived') {
 					// A test-webhook did get called
 					const pushData = receivedData.data;
 
-					if (pushData.workflowId === this.$store.getters.workflowId) {
-						this.$store.commit('setExecutionWaitingForWebhook', false);
-						this.$store.commit('setActiveExecutionId', pushData.executionId);
+					if (pushData.workflowId === this.workflowsStore.workflowId) {
+						this.workflowsStore.executionWaitingForWebhook = false;
+						this.workflowsStore.activeExecutionId = pushData.executionId;
 					}
 
 					this.processWaitingPushMessages();
 				} else if (receivedData.type === 'reloadNodeType') {
-					this.$store.dispatch('nodeTypes/getNodeTypes');
-					this.$store.dispatch('nodeTypes/getFullNodesProperties', [receivedData.data]);
+					this.nodeTypesStore.getNodeTypes();
+					this.nodeTypesStore.getFullNodesProperties([receivedData.data]);
 				} else if (receivedData.type === 'removeNodeType') {
 					const pushData = receivedData.data;
 
@@ -435,7 +445,7 @@ export const pushConnection = mixins(
 					// Force reload of all credential types
 					this.$store.dispatch('credentials/fetchCredentialTypes')
 						.then(() => {
-							this.$store.commit('nodeTypes/removeNodeTypes', nodesToBeRemoved);
+							this.nodeTypesStore.removeNodeTypes(nodesToBeRemoved);
 						});
 				}
 				return true;
diff --git a/packages/editor-ui/src/components/mixins/restApi.ts b/packages/editor-ui/src/components/mixins/restApi.ts
index ecf3c48f22..cf3ee357f5 100644
--- a/packages/editor-ui/src/components/mixins/restApi.ts
+++ b/packages/editor-ui/src/components/mixins/restApi.ts
@@ -28,6 +28,8 @@ import {
 	INodeTypeNameVersion,
 } from 'n8n-workflow';
 import { makeRestApiRequest } from '@/api/helpers';
+import { mapStores } from 'pinia';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 /**
  * Unflattens the Execution data.
@@ -52,12 +54,17 @@ function unflattenExecutionData (fullExecutionData: IExecutionFlattedResponse):
 }
 
 export const restApi = Vue.extend({
+	computed: {
+		...mapStores(
+			useRootStore,
+		),
+	},
 	methods: {
 		restApi (): IRestApi {
 			const self = this;
 			return {
 				async makeRestApiRequest (method: Method, endpoint: string, data?: IDataObject): Promise<any> { // tslint:disable-line:no-any
-					return makeRestApiRequest(self.$store.getters.getRestApiContext, method, endpoint, data);
+					return makeRestApiRequest(self.rootStore.getRestApiContext, method, endpoint, data);
 				},
 				getActiveWorkflows: (): Promise<string[]> => {
 					return self.restApi().makeRestApiRequest('GET', `/active`);
diff --git a/packages/editor-ui/src/components/mixins/showMessage.ts b/packages/editor-ui/src/components/mixins/showMessage.ts
index 473fc85550..b76e0c88b0 100644
--- a/packages/editor-ui/src/components/mixins/showMessage.ts
+++ b/packages/editor-ui/src/components/mixins/showMessage.ts
@@ -7,10 +7,17 @@ import { IRunExecutionData } from 'n8n-workflow';
 import type { ElMessageBoxOptions } from 'element-ui/types/message-box';
 import type { ElMessageComponent, ElMessageOptions, MessageType } from 'element-ui/types/message';
 import { sanitizeHtml } from '@/utils';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 let stickyNotificationQueue: ElNotificationComponent[] = [];
 
 export const showMessage = mixins(externalHooks).extend({
+	computed: {
+		...mapStores(
+			useWorkflowsStore,
+		),
+	},
 	methods: {
 		$showMessage(
 			messageData: Omit<ElNotificationOptions, 'message'> & { message?: string },
@@ -34,7 +41,7 @@ export const showMessage = mixins(externalHooks).extend({
 					error_title: messageData.title,
 					error_message: messageData.message,
 					caused_by_credential: this.causedByCredential(messageData.message),
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 				});
 			}
 
@@ -134,7 +141,7 @@ export const showMessage = mixins(externalHooks).extend({
 				error_description: message,
 				error_message: error.message,
 				caused_by_credential: this.causedByCredential(error.message),
-				workflow_id: this.$store.getters.workflowId,
+				workflow_id: this.workflowsStore.workflowId,
 			});
 		},
 
diff --git a/packages/editor-ui/src/components/mixins/userHelpers.ts b/packages/editor-ui/src/components/mixins/userHelpers.ts
index 68e3a4412f..a7aee3a06a 100644
--- a/packages/editor-ui/src/components/mixins/userHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/userHelpers.ts
@@ -1,5 +1,6 @@
-import { IPermissions } from '@/Interface';
+import { IPermissions, IUser } from '@/Interface';
 import { isAuthorized } from '@/modules/userHelpers';
+import { useUsersStore } from '@/stores/users';
 import Vue from 'vue';
 import { Route } from 'vue-router';
 
@@ -11,13 +12,14 @@ export const userHelpers = Vue.extend({
 			return this.canUserAccessRoute(route);
 		},
 
-		canUserAccessCurrentRoute() {
+		canUserAccessCurrentRoute(): boolean {
 			return this.canUserAccessRoute(this.$route);
 		},
 
 		canUserAccessRoute(route: Route): boolean {
 			const permissions: IPermissions = route.meta && route.meta.permissions;
-			const currentUser = this.$store.getters['users/currentUser'];
+			const usersStore = useUsersStore();
+			const currentUser = usersStore.currentUser;
 
 			if (permissions && isAuthorized(permissions, currentUser)) {
 				return true;
diff --git a/packages/editor-ui/src/components/mixins/workflowActivate.ts b/packages/editor-ui/src/components/mixins/workflowActivate.ts
index 783be2a84f..5133aaee5a 100644
--- a/packages/editor-ui/src/components/mixins/workflowActivate.ts
+++ b/packages/editor-ui/src/components/mixins/workflowActivate.ts
@@ -5,6 +5,10 @@ import { showMessage } from '@/components/mixins/showMessage';
 
 import mixins from 'vue-typed-mixins';
 import { LOCAL_STORAGE_ACTIVATION_FLAG, PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_ACTIVE_MODAL_KEY } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 export const workflowActivate = mixins(
 	externalHooks,
@@ -17,14 +21,21 @@ export const workflowActivate = mixins(
 				updatingWorkflowActivation: false,
 			};
 		},
+		computed: {
+			...mapStores(
+				useSettingsStore,
+				useUIStore,
+				useWorkflowsStore,
+			),
+		},
 		methods: {
 			async activateCurrentWorkflow(telemetrySource?: string) {
-				const workflowId = this.$store.getters.workflowId;
+				const workflowId = this.workflowsStore.workflowId;
 				return this.updateWorkflowActivation(workflowId, true, telemetrySource);
 			},
 			async updateWorkflowActivation(workflowId: string | undefined, newActiveState: boolean, telemetrySource?: string) {
 				this.updatingWorkflowActivation = true;
-				const nodesIssuesExist = this.$store.getters.nodesIssuesExist as boolean;
+				const nodesIssuesExist = this.workflowsStore.nodesIssuesExist as boolean;
 
 				let currWorkflowId: string | undefined = workflowId;
 				if (!currWorkflowId || currWorkflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
@@ -33,11 +44,11 @@ export const workflowActivate = mixins(
 						this.updatingWorkflowActivation = false;
 						return;
 					}
-					currWorkflowId = this.$store.getters.workflowId as string;
+					currWorkflowId = this.workflowsStore.workflowId as string;
 				}
-				const isCurrentWorkflow = currWorkflowId === this.$store.getters['workflowId'];
+				const isCurrentWorkflow = currWorkflowId === this.workflowsStore.workflowId;
 
-				const activeWorkflows = this.$store.getters.getActiveWorkflows;
+				const activeWorkflows =  this.workflowsStore.activeWorkflows;
 				const isWorkflowActive = activeWorkflows.includes(currWorkflowId);
 
 				const telemetryPayload = {
@@ -93,10 +104,10 @@ export const workflowActivate = mixins(
 
 				if (isCurrentWorkflow) {
 					if (newActiveState && window.localStorage.getItem(LOCAL_STORAGE_ACTIVATION_FLAG) !== 'true') {
-						this.$store.dispatch('ui/openModal', WORKFLOW_ACTIVE_MODAL_KEY);
+						this.uiStore.openModal(WORKFLOW_ACTIVE_MODAL_KEY);
 					}
 					else {
-						this.$store.dispatch('settings/fetchPromptsData');
+						this.settingsStore.fetchPromptsData();
 					}
 				}
 			},
diff --git a/packages/editor-ui/src/components/mixins/workflowHelpers.ts b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
index 381378e3c7..e8136f6d27 100644
--- a/packages/editor-ui/src/components/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/components/mixins/workflowHelpers.ts
@@ -57,6 +57,14 @@ import { isEqual } from 'lodash';
 import mixins from 'vue-typed-mixins';
 import { v4 as uuid } from 'uuid';
 import { getSourceItems } from '@/pairedItemUtils';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { IWorkflowSettings } from 'n8n-workflow';
+import { useNDVStore } from '@/stores/ndv';
+import { useTemplatesStore } from '@/stores/templates';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 let cachedWorkflowKey: string | null = '';
 let cachedWorkflow: Workflow | null = null;
@@ -68,6 +76,16 @@ export const workflowHelpers = mixins(
 	showMessage,
 )
 	.extend({
+		computed: {
+			...mapStores(
+				useNodeTypesStore,
+				useNDVStore,
+				useRootStore,
+				useTemplatesStore,
+				useWorkflowsStore,
+				useUIStore,
+			),
+		},
 		methods: {
 			 executeData(parentNode: string[], currentNode: string, inputName: string, runIndex: number): IExecuteData {
 				const executeData = {
@@ -81,7 +99,7 @@ export const workflowHelpers = mixins(
 					// which does not use the node name
 					const parentNodeName = parentNode[0];
 
-					const parentPinData = this.$store.getters.pinData[parentNodeName];
+					const parentPinData = this.workflowsStore.getPinData![parentNodeName];
 
 					// populate `executeData` from `pinData`
 
@@ -94,7 +112,7 @@ export const workflowHelpers = mixins(
 
 					// populate `executeData` from `runData`
 
-					const workflowRunData = this.$store.getters.getWorkflowRunData as IRunData | null;
+					const workflowRunData = this.workflowsStore.getWorkflowRunData;
 					if (workflowRunData === null) {
 						return executeData;
 					}
@@ -154,7 +172,7 @@ export const workflowHelpers = mixins(
 				}
 
 				const parentPinData = parentNode.reduce((acc: INodeExecutionData[], parentNodeName, index) => {
-					const pinData = this.$store.getters['pinDataByNodeName'](parentNodeName);
+					const pinData = this.workflowsStore.pinDataByNodeName(parentNodeName);
 
 					if (pinData) {
 						acc.push({
@@ -190,7 +208,7 @@ export const workflowHelpers = mixins(
 			// This has the advantage that it is very fast and does not cause problems with vuex
 			// when the workflow replaces the node-parameters.
 			getNodes (): INodeUi[] {
-				const nodes = this.$store.getters.allNodes;
+				const nodes = this.workflowsStore.allNodes;
 				const returnNodes: INodeUi[] = [];
 
 				for (const node of nodes) {
@@ -204,11 +222,11 @@ export const workflowHelpers = mixins(
 			// For each such type does it return how high the limit is, how many
 			// already exist and the name of this nodes.
 			getNodeTypesMaxCount (): INodeTypesMaxCount {
-				const nodes = this.$store.getters.allNodes;
+				const nodes = this.workflowsStore.allNodes;
 
 				const returnData: INodeTypesMaxCount = {};
 
-				const nodeTypes = this.$store.getters['nodeTypes/allNodeTypes'];
+				const nodeTypes = this.nodeTypesStore.allNodeTypes;
 				for (const nodeType of nodeTypes) {
 					if (nodeType.maxNodes !== undefined) {
 						returnData[nodeType.name] = {
@@ -231,7 +249,7 @@ export const workflowHelpers = mixins(
 
 			// Returns how many nodes of the given type currently exist
 			getNodeTypeCount (nodeType: string): number {
-				const nodes = this.$store.getters.allNodes;
+				const nodes = this.workflowsStore.allNodes;
 
 				let count = 0;
 
@@ -318,7 +336,7 @@ export const workflowHelpers = mixins(
 						return [];
 					},
 					getByNameAndVersion: (nodeType: string, version?: number): INodeType | undefined => {
-						const nodeTypeDescription = this.$store.getters['nodeTypes/getNodeType'](nodeType, version) as INodeTypeDescription | null;
+						const nodeTypeDescription = this.nodeTypesStore.getNodeType(nodeType, version);
 
 						if (nodeTypeDescription === null) {
 							return undefined;
@@ -339,7 +357,7 @@ export const workflowHelpers = mixins(
 
 			getCurrentWorkflow(copyData?: boolean): Workflow {
 				const nodes = this.getNodes();
-				const connections = (this.$store.getters.allConnections as IConnections);
+				const connections = this.workflowsStore.allConnections;
 				const cacheKey = JSON.stringify({nodes, connections});
 				if (!copyData && cachedWorkflow && cacheKey === cachedWorkflowKey) {
 					return cachedWorkflow;
@@ -352,12 +370,12 @@ export const workflowHelpers = mixins(
 			// Returns a workflow instance.
 			getWorkflow (nodes: INodeUi[], connections: IConnections, copyData?: boolean): Workflow {
 				const nodeTypes = this.getNodeTypes();
-				let workflowId = this.$store.getters.workflowId;
-				if (workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
+				let workflowId : string | undefined = this.workflowsStore.workflowId;
+				if (workflowId && workflowId === PLACEHOLDER_EMPTY_WORKFLOW_ID) {
 					workflowId = undefined;
 				}
 
-				const workflowName = this.$store.getters.workflowName;
+				const workflowName = this.workflowsStore.workflowName;
 
 				cachedWorkflow = new Workflow({
 					id: workflowId,
@@ -366,8 +384,8 @@ export const workflowHelpers = mixins(
 					connections: copyData? deepCopy(connections): connections,
 					active: false,
 					nodeTypes,
-					settings: this.$store.getters.workflowSettings,
-					pinData: this.$store.getters.pinData,
+					settings: this.workflowsStore.workflowSettings,
+					pinData: this.workflowsStore.pinData,
 				});
 
 				return cachedWorkflow;
@@ -375,8 +393,8 @@ export const workflowHelpers = mixins(
 
 			// Returns the currently loaded workflow as JSON.
 			getWorkflowDataToSave (): Promise<IWorkflowData> {
-				const workflowNodes = this.$store.getters.allNodes;
-				const workflowConnections = this.$store.getters.allConnections;
+				const workflowNodes = this.workflowsStore.allNodes;
+				const workflowConnections = this.workflowsStore.allConnections;
 
 				let nodeData;
 
@@ -393,17 +411,17 @@ export const workflowHelpers = mixins(
 				}
 
 				const data: IWorkflowData = {
-					name: this.$store.getters.workflowName,
+					name: this.workflowsStore.workflowName,
 					nodes,
-					pinData: this.$store.getters.pinData,
+					pinData: this.workflowsStore.getPinData,
 					connections: workflowConnections,
-					active: this.$store.getters.isActive,
-					settings: this.$store.getters.workflowSettings,
-					tags: this.$store.getters.workflowTags,
-					hash: this.$store.getters.workflowHash,
+					active: this.workflowsStore.isWorkflowActive,
+					settings: this.workflowsStore.workflow.settings,
+					tags: this.workflowsStore.workflowTags,
+					hash: this.workflowsStore.workflow.hash,
 				};
 
-				const workflowId = this.$store.getters.workflowId;
+				const workflowId = this.workflowsStore.workflowId;
 				if (workflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
 					data.id = workflowId;
 				}
@@ -438,7 +456,7 @@ export const workflowHelpers = mixins(
 
 				// Get the data of the node type that we can get the default values
 				// TODO: Later also has to care about the node-type-version as defaults could be different
-				const nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
+				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 
 				if (nodeType !== null) {
 					// Node-Type is known so we can save the parameters correctly
@@ -518,12 +536,12 @@ export const workflowHelpers = mixins(
 				if (webhookData.restartWebhook === true) {
 					return '$execution.resumeUrl';
 				}
-				let baseUrl = this.$store.getters.getWebhookUrl;
+				let baseUrl = this.rootStore.getWebhookUrl;
 				if (showUrlFor === 'test') {
-					baseUrl = this.$store.getters.getWebhookTestUrl;
+					baseUrl = this.rootStore.getWebhookTestUrl;
 				}
 
-				const workflowId = this.$store.getters.workflowId;
+				const workflowId = this.workflowsStore.workflowId;
 				const path = this.getWebhookExpressionValue(webhookData, 'path');
 				const isFullPath = this.getWebhookExpressionValue(webhookData, 'isFullPath') as unknown as boolean || false;
 
@@ -535,11 +553,11 @@ export const workflowHelpers = mixins(
 				let itemIndex = opts?.targetItem?.itemIndex || 0;
 
 				const inputName = 'main';
-				const activeNode = this.$store.getters['ndv/activeNode'];
+				const activeNode = this.ndvStore.activeNode;
 				const workflow = this.getCurrentWorkflow();
-				const workflowRunData = this.$store.getters.getWorkflowRunData as IRunData | null;
-				let parentNode = workflow.getParentNodes(activeNode.name, inputName, 1);
-				const executionData = this.$store.getters.getWorkflowExecution as IExecutionResponse | null;
+				const workflowRunData = this.workflowsStore.getWorkflowRunData;
+				let parentNode = workflow.getParentNodes(activeNode?.name, inputName, 1);
+				const executionData = this.workflowsStore.getWorkflowExecution;
 
 				if (opts?.inputNodeName && !parentNode.includes(opts.inputNodeName)) {
 					return null;
@@ -586,7 +604,7 @@ export const workflowHelpers = mixins(
 				}
 
 				parentNode.forEach((parentNodeName) => {
-					const pinData: IPinData[string] = this.$store.getters['pinDataByNodeName'](parentNodeName);
+					const pinData: IPinData[string] = this.workflowsStore.pinDataByNodeName(parentNodeName);
 
 					if (pinData) {
 						runExecutionData = {
@@ -635,7 +653,7 @@ export const workflowHelpers = mixins(
 				}
 				const executeData = this.executeData(parentNode, activeNode.name, inputName, runIndexCurrent);
 
-				return workflow.expression.getParameterValue(parameter, runExecutionData, runIndexCurrent, itemIndex, activeNode.name, connectionInputData, 'manual', this.$store.getters.timezone, additionalKeys, executeData, false) as IDataObject;
+				return workflow.expression.getParameterValue(parameter, runExecutionData, runIndexCurrent, itemIndex, activeNode.name, connectionInputData, 'manual', this.rootStore.timezone, additionalKeys, executeData, false) as IDataObject;
 			},
 
 			resolveExpression(expression: string, siblingParameters: INodeParameters = {}, opts: {targetItem?: TargetItem, inputNodeName?: string, inputRunIndex?: number, inputBranchIndex?: number, c?: number} = {}) {
@@ -658,7 +676,7 @@ export const workflowHelpers = mixins(
 			async updateWorkflow({workflowId, active}: {workflowId: string, active?: boolean}) {
 				let data: IWorkflowDataUpdate = {};
 
-				const isCurrentWorkflow = workflowId === this.$store.getters.workflowId;
+				const isCurrentWorkflow = workflowId === this.workflowsStore.workflowId;
 				if (isCurrentWorkflow) {
 					data = await this.getWorkflowDataToSave();
 				} else {
@@ -671,17 +689,17 @@ export const workflowHelpers = mixins(
 				}
 
 				const workflow = await this.restApi().updateWorkflow(workflowId, data);
-				this.$store.commit('setWorkflowHash', workflow.hash);
+				this.workflowsStore.setWorkflowHash(workflow.hash || '');
 
 				if (isCurrentWorkflow) {
-					this.$store.commit('setActive', !!workflow.active);
-					this.$store.commit('setStateDirty', false);
+					this.workflowsStore.setActive(!!workflow.active);
+					this.uiStore.stateIsDirty = false;
 				}
 
 				if (workflow.active) {
-					this.$store.commit('setWorkflowActive', workflowId);
+					this.workflowsStore.setWorkflowActive(workflowId);
 				} else {
-					this.$store.commit('setWorkflowInactive', workflowId);
+					this.workflowsStore.setWorkflowInactive(workflowId);
 				}
 			},
 
@@ -694,7 +712,7 @@ export const workflowHelpers = mixins(
 
 				// Workflow exists already so update it
 				try {
-					this.$store.commit('addActiveAction', 'workflowSaving');
+					this.uiStore.addActiveAction('workflowSaving');
 
 					const workflowDataRequest: IWorkflowDataUpdate = await this.getWorkflowDataToSave();
 
@@ -706,28 +724,28 @@ export const workflowHelpers = mixins(
 						workflowDataRequest.tags = tags;
 					}
 
-					workflowDataRequest.hash = this.$store.getters.workflowHash;
+					workflowDataRequest.hash = this.workflowsStore.workflowHash;
 
 					const workflowData = await this.restApi().updateWorkflow(currentWorkflow, workflowDataRequest);
-					this.$store.commit('setWorkflowHash', workflowData.hash);
+					this.workflowsStore.setWorkflowHash(workflowData.hash || '');
 
 					if (name) {
-						this.$store.commit('setWorkflowName', {newName: workflowData.name});
+						this.workflowsStore.setWorkflowName({newName: workflowData.name, setStateDirty:  false});
 					}
 
 					if (tags) {
 						const createdTags = (workflowData.tags || []) as ITag[];
 						const tagIds = createdTags.map((tag: ITag): string => tag.id);
-						this.$store.commit('setWorkflowTagIds', tagIds);
+						this.workflowsStore.setWorkflowTagIds(tagIds);
 					}
 
-					this.$store.commit('setStateDirty', false);
-					this.$store.commit('removeActiveAction', 'workflowSaving');
+					this.uiStore.stateIsDirty = false;
+					this.uiStore.removeActiveAction('workflowSaving');
 					this.$externalHooks().run('workflow.afterUpdate', { workflowData });
 
 					return true;
 				} catch (error) {
-					this.$store.commit('removeActiveAction', 'workflowSaving');
+					this.uiStore.removeActiveAction('workflowSaving');
 
 					this.$showMessage({
 						title: this.$locale.baseText('workflowHelpers.showMessage.title'),
@@ -741,7 +759,7 @@ export const workflowHelpers = mixins(
 
 			async saveAsNewWorkflow ({ name, tags, resetWebhookUrls, resetNodeIds, openInNewWindow, data }: {name?: string, tags?: string[], resetWebhookUrls?: boolean, openInNewWindow?: boolean, resetNodeIds?: boolean, data?: IWorkflowDataUpdate} = {}, redirect = true): Promise<boolean> {
 				try {
-					this.$store.commit('addActiveAction', 'workflowSaving');
+					this.uiStore.addActiveAction('workflowSaving');
 
 					const workflowDataRequest: IWorkflowDataUpdate = data || await this.getWorkflowDataToSave();
 					// make sure that the new ones are not active
@@ -775,40 +793,40 @@ export const workflowHelpers = mixins(
 					}
 					const workflowData = await this.restApi().createNewWorkflow(workflowDataRequest);
 
-					this.$store.commit('addWorkflow', workflowData);
-					this.$store.commit('setWorkflowHash', workflowData.hash);
+					this.workflowsStore.addWorkflow(workflowData);
+					this.workflowsStore.setWorkflowHash(workflowData.hash || '');
 
 					if (openInNewWindow) {
 						const routeData = this.$router.resolve({name: VIEWS.WORKFLOW, params: {name: workflowData.id}});
 						window.open(routeData.href, '_blank');
-						this.$store.commit('removeActiveAction', 'workflowSaving');
+						this.uiStore.removeActiveAction('workflowSaving');
 						return true;
 					}
 
-					this.$store.commit('setActive', workflowData.active || false);
-					this.$store.commit('setWorkflowId', workflowData.id);
-					this.$store.commit('setWorkflowName', {newName: workflowData.name, setStateDirty: false});
-					this.$store.commit('setWorkflowSettings', workflowData.settings || {});
-					this.$store.commit('setStateDirty', false);
+					this.workflowsStore.setActive(workflowData.active || false);
+					this.workflowsStore.setWorkflowId(workflowData.id);
+					this.workflowsStore.setWorkflowName({newName: workflowData.name, setStateDirty: false});
+					this.workflowsStore.setWorkflowSettings(workflowData.settings as IWorkflowSettings|| {});
+					this.uiStore.stateIsDirty = false;
 					Object.keys(changedNodes).forEach((nodeName) => {
 						const changes = {
 							key: 'webhookId',
 							value: changedNodes[nodeName],
 							name: nodeName,
-						} as IUpdateInformation;
-						this.$store.commit('setNodeValue', changes);
+						};
+						this.workflowsStore.setNodeValue(changes);
 					});
 
 					const createdTags = (workflowData.tags || []) as ITag[];
 					const tagIds = createdTags.map((tag: ITag): string => tag.id);
-					this.$store.commit('setWorkflowTagIds', tagIds);
+					this.workflowsStore.setWorkflowTagIds(tagIds);
 
 					const templateId = this.$route.query.templateId;
 					if (templateId) {
 						this.$telemetry.track('User saved new workflow from template', {
 							template_id: templateId,
 							workflow_id: workflowData.id,
-							wf_template_repo_session_id: this.$store.getters['templates/previousSessionId'],
+							wf_template_repo_session_id: this.templatesStore.previousSessionId,
 						});
 					}
 
@@ -819,13 +837,13 @@ export const workflowHelpers = mixins(
 						});
 					}
 
-					this.$store.commit('removeActiveAction', 'workflowSaving');
-					this.$store.commit('setStateDirty', false);
+					this.uiStore.removeActiveAction('workflowSaving');
+					this.uiStore.stateIsDirty = false;
 					this.$externalHooks().run('workflow.afterUpdate', { workflowData });
 
 					return true;
 				} catch (e) {
-					this.$store.commit('removeActiveAction', 'workflowSaving');
+					this.uiStore.removeActiveAction('workflowSaving');
 
 					this.$showMessage({
 						title: this.$locale.baseText('workflowHelpers.showMessage.title'),
diff --git a/packages/editor-ui/src/components/mixins/workflowRun.ts b/packages/editor-ui/src/components/mixins/workflowRun.ts
index 7cde605824..9275898c37 100644
--- a/packages/editor-ui/src/components/mixins/workflowRun.ts
+++ b/packages/editor-ui/src/components/mixins/workflowRun.ts
@@ -19,6 +19,10 @@ import { showMessage } from '@/components/mixins/showMessage';
 
 import mixins from 'vue-typed-mixins';
 import { titleChange } from './titleChange';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export const workflowRun = mixins(
 	externalHooks,
@@ -27,10 +31,17 @@ export const workflowRun = mixins(
 	showMessage,
 	titleChange,
 ).extend({
+	computed: {
+		...mapStores(
+			useRootStore,
+			useUIStore,
+			useWorkflowsStore,
+		),
+	},
 	methods: {
 		// Starts to executes a workflow on server.
 		async runWorkflowApi (runData: IStartRunData): Promise<IExecutionPushResponse> {
-			if (this.$store.getters.pushConnectionActive === false) {
+			if (this.rootStore.pushConnectionActive === false) {
 				// Do not start if the connection to server is not active
 				// because then it can not receive the data as it executes.
 				throw new Error(
@@ -38,25 +49,25 @@ export const workflowRun = mixins(
 				);
 			}
 
-			this.$store.commit('setSubworkflowExecutionError', null);
+			this.workflowsStore.subWorkflowExecutionError = null;
 
-			this.$store.commit('addActiveAction', 'workflowRunning');
+			this.uiStore.addActiveAction('workflowRunning');
 
 			let response: IExecutionPushResponse;
 
 			try {
 				response = await this.restApi().runWorkflow(runData);
 			} catch (error) {
-				this.$store.commit('removeActiveAction', 'workflowRunning');
+				this.uiStore.removeActiveAction('workflowRunning');
 				throw error;
 			}
 
 			if (response.executionId !== undefined) {
-				this.$store.commit('setActiveExecutionId', response.executionId);
+				this.workflowsStore.activeExecutionId = response.executionId;
 			}
 
 			if (response.waitingForWebhook === true) {
-				this.$store.commit('setExecutionWaitingForWebhook', true);
+				this.workflowsStore.executionWaitingForWebhook = true;
 			}
 
 			return response;
@@ -64,7 +75,7 @@ export const workflowRun = mixins(
 		async runWorkflow (nodeName?: string, source?: string): Promise<IExecutionPushResponse | undefined> {
 			const workflow = this.getCurrentWorkflow();
 
-			if (this.$store.getters.isActionActive('workflowRunning') === true) {
+			if (this.uiStore.isActionActive('workflowRunning')) {
 				return;
 			}
 
@@ -74,7 +85,7 @@ export const workflowRun = mixins(
 
 			try {
 				// Check first if the workflow has any issues before execute it
-				const issuesExist = this.$store.getters.nodesIssuesExist;
+				const issuesExist = this.workflowsStore.nodesIssuesExist;
 				if (issuesExist === true) {
 					// If issues exist get all of the issues of all nodes
 					const workflowIssues = this.checkReadyForExecution(workflow, nodeName);
@@ -89,7 +100,7 @@ export const workflowRun = mixins(
 						for (const nodeName of Object.keys(workflowIssues)) {
 							nodeIssues = NodeHelpers.nodeIssuesToString(workflowIssues[nodeName]);
 							let issueNodeType = 'UNKNOWN';
-							const issueNode = this.$store.getters.getNodeByName(nodeName);
+							const issueNode = this.workflowsStore.getNodeByName(nodeName);
 
 							if (issueNode) {
 								issueNodeType = issueNode.type;
@@ -138,7 +149,7 @@ export const workflowRun = mixins(
 					directParentNodes = workflow.getParentNodes(nodeName, 'main', 1);
 				}
 
-				const runData = this.$store.getters.getWorkflowRunData;
+				const runData = this.workflowsStore.getWorkflowRunData;
 
 				let newRunData: IRunData | undefined;
 
@@ -181,8 +192,8 @@ export const workflowRun = mixins(
 					startNodes.push(nodeName);
 				}
 
-				const isNewWorkflow = this.$store.getters.isNewWorkflow;
-				const hasWebhookNode = this.$store.getters.currentWorkflowHasWebhookNode;
+				const isNewWorkflow = this.workflowsStore.isNewWorkflow;
+				const hasWebhookNode = this.workflowsStore.currentWorkflowHasWebhookNode;
 				if (isNewWorkflow && hasWebhookNode) {
 					await this.saveCurrentWorkflow();
 				}
@@ -219,7 +230,7 @@ export const workflowRun = mixins(
 						},
 					} as IRunExecutionData,
 					workflowData: {
-						id: this.$store.getters.workflowId,
+						id: this.workflowsStore.workflowId,
 						name: workflowData.name!,
 						active: workflowData.active!,
 						createdAt: 0,
@@ -227,7 +238,7 @@ export const workflowRun = mixins(
 						...workflowData,
 					},
 				};
-				this.$store.commit('setWorkflowExecutionData', executionData);
+				this.workflowsStore.setWorkflowExecutionData(executionData);
 				this.updateNodesExecutionIssues();
 
 				const runWorkflowApiResponse = await this.runWorkflowApi(startRunData);
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index 3fa9c5912f..2c377d1aa8 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -410,3 +410,15 @@ export const CURL_IMPORT_NODES_PROTOCOLS: { [key: string]: string } = {
 	'imap': 'IMAP',
 	'imaps': 'IMAP',
 };
+
+export enum STORES {
+	COMMUNITY_NODES = 'communityNodes',
+	ROOT = 'root',
+	SETTINGS = 'settings',
+	UI = 'ui',
+	USERS = 'users',
+	WORKFLOWS = 'workflows',
+	NDV = 'ndv',
+	TEMPLATES = 'templates',
+	NODE_TYPES = 'nodeTypes',
+}
diff --git a/packages/editor-ui/src/main.ts b/packages/editor-ui/src/main.ts
index de091b8dcb..013b9ecd97 100644
--- a/packages/editor-ui/src/main.ts
+++ b/packages/editor-ui/src/main.ts
@@ -22,6 +22,8 @@ import { runExternalHook } from './components/mixins/externalHooks';
 import { TelemetryPlugin } from './plugins/telemetry';
 import { I18nPlugin, i18nInstance } from './plugins/i18n';
 
+import { createPinia, PiniaVuePlugin } from 'pinia';
+
 import { store } from './store';
 
 Vue.config.productionTip = false;
@@ -31,11 +33,15 @@ router.afterEach((to, from) => {
 
 Vue.use(TelemetryPlugin);
 Vue.use((vue) => I18nPlugin(vue, store));
+Vue.use(PiniaVuePlugin);
+
+const pinia = createPinia();
 
 new Vue({
 	i18n: i18nInstance,
 	router,
 	store,
+	pinia,
 	render: h => h(App),
 }).$mount('#app');
 
diff --git a/packages/editor-ui/src/modules/communityNodes.ts b/packages/editor-ui/src/modules/communityNodes.ts
deleted file mode 100644
index 0794fa3e6a..0000000000
--- a/packages/editor-ui/src/modules/communityNodes.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-import { getInstalledCommunityNodes, installNewPackage, uninstallPackage, updatePackage } from '@/api/communityNodes';
-import { getAvailableCommunityPackageCount } from '@/api/settings';
-import { ICommunityNodesState, ICommunityPackageMap, IRootState } from '@/Interface';
-import { PublicInstalledPackage } from 'n8n-workflow';
-import Vue from 'vue';
-import { ActionContext, Module } from 'vuex';
-
-const LOADER_DELAY = 300;
-
-const module: Module<ICommunityNodesState, IRootState> = {
-	namespaced: true,
-	state: {
-		// -1 means that package count has not been fetched yet
-		availablePackageCount: -1,
-		installedPackages: {},
-	},
-	mutations: {
-		setAvailablePackageCount: (state: ICommunityNodesState, count: number) => {
-			state.availablePackageCount = count;
-		},
-		setInstalledPackages: (state: ICommunityNodesState, packages: PublicInstalledPackage[]) => {
-			state.installedPackages = packages.reduce((packageMap: ICommunityPackageMap, pack: PublicInstalledPackage) => {
-				packageMap[pack.packageName] = pack;
-				return packageMap;
-			}, {});
-		},
-		removePackageByName(state: ICommunityNodesState, name: string) {
-			Vue.delete(state.installedPackages, name);
-		},
-		updatePackageObject(state: ICommunityNodesState, newPackage: PublicInstalledPackage) {
-			state.installedPackages[newPackage.packageName] = newPackage;
-		},
-	},
-	getters: {
-		availablePackageCount(state: ICommunityNodesState): number {
-			return state.availablePackageCount;
-		},
-		getInstalledPackages(state: ICommunityNodesState): PublicInstalledPackage[] {
-			return Object.values(state.installedPackages).sort((a, b) => a.packageName.localeCompare(b.packageName));
-		},
-		getInstalledPackageByName(state: ICommunityNodesState) {
-			return (name: string) => state.installedPackages[name];
-		},
-	},
-	actions: {
-		async fetchAvailableCommunityPackageCount(context: ActionContext<ICommunityNodesState, IRootState>) {
-			if(context.state.availablePackageCount === -1) {
-				const packageCount = await getAvailableCommunityPackageCount();
-				context.commit('setAvailablePackageCount', packageCount);
-			}
-		},
-		async fetchInstalledPackages(context: ActionContext<ICommunityNodesState, IRootState>) {
-			const installedPackages = await getInstalledCommunityNodes(context.rootGetters.getRestApiContext);
-			context.commit('setInstalledPackages', installedPackages);
-			const timeout = installedPackages.length > 0 ? 0 : LOADER_DELAY;
-			setTimeout(() => {
-			}, timeout);
-		},
-		async installPackage(context: ActionContext<ICommunityNodesState, IRootState>, packageName: string) {
-			try {
-				await installNewPackage(context.rootGetters.getRestApiContext, packageName);
-				await context.dispatch('communityNodes/fetchInstalledPackages');
-			} catch(error) {
-				throw(error);
-			}
-		},
-		async uninstallPackage(context: ActionContext<ICommunityNodesState, IRootState>, packageName: string) {
-			try {
-				await uninstallPackage(context.rootGetters.getRestApiContext, packageName);
-				context.commit('removePackageByName', packageName);
-			} catch(error) {
-				throw(error);
-			}
-		},
-		async updatePackage(context: ActionContext<ICommunityNodesState, IRootState>, packageName: string) {
-			try {
-				const packageToUpdate = context.getters.getInstalledPackageByName(packageName);
-				const updatedPackage = await updatePackage(context.rootGetters.getRestApiContext, packageToUpdate.packageName);
-				context.commit('updatePackageObject', updatedPackage);
-			} catch (error) {
-				throw(error);
-			}
-		},
-	},
-};
-
-export default module;
diff --git a/packages/editor-ui/src/modules/credentials.ee.ts b/packages/editor-ui/src/modules/credentials.ee.ts
index e99e036a67..293937c3e8 100644
--- a/packages/editor-ui/src/modules/credentials.ee.ts
+++ b/packages/editor-ui/src/modules/credentials.ee.ts
@@ -6,6 +6,8 @@ import {
 } from '../Interface';
 import {setCredentialSharedWith} from "@/api/credentials.ee";
 import {EnterpriseEditionFeature} from "@/constants";
+import { useSettingsStore } from '@/stores/settings';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 export const credentialsEEModule: Module<ICredentialsState, IRootState> = {
 	mutations: {
@@ -33,9 +35,9 @@ export const credentialsEEModule: Module<ICredentialsState, IRootState> = {
 	},
 	actions: {
 		setCredentialSharedWith: async (context: ActionContext<ICredentialsState, IRootState>, payload: { sharedWith: IUser[]; credentialId: string; }) => {
-			if (context.rootGetters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
+			if(useSettingsStore().isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
 				await setCredentialSharedWith(
-					context.rootGetters.getRestApiContext,
+					useRootStore().getRestApiContext,
 					payload.credentialId,
 					{
 						shareWithIds: payload.sharedWith.map((sharee) => sharee.id),
diff --git a/packages/editor-ui/src/modules/credentials.ts b/packages/editor-ui/src/modules/credentials.ts
index 9922ae0186..05aad2575e 100644
--- a/packages/editor-ui/src/modules/credentials.ts
+++ b/packages/editor-ui/src/modules/credentials.ts
@@ -31,6 +31,10 @@ import { getAppNameFromCredType } from '@/components/helpers';
 import {i18n} from "@/plugins/i18n";
 import {credentialsEEModule} from "@/modules/credentials.ee";
 import {EnterpriseEditionFeature} from "@/constants";
+import { useUsersStore } from '@/stores/users';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useSettingsStore } from '@/stores/settings';
 
 const DEFAULT_CREDENTIAL_NAME = 'Unnamed credential';
 const DEFAULT_CREDENTIAL_POSTFIX = 'account';
@@ -127,7 +131,8 @@ const module: Module<ICredentialsState, IRootState> = {
 		},
 		getNodesWithAccess (state: ICredentialsState, getters: any, rootState: IRootState, rootGetters: any) { // tslint:disable-line:no-any
 			return (credentialTypeName: string) => {
-				const allLatestNodeTypes: INodeTypeDescription[] = rootGetters['nodeTypes/allLatestNodeTypes'];
+				const nodeTypesStore = useNodeTypesStore();
+				const allLatestNodeTypes: INodeTypeDescription[] = nodeTypesStore.allLatestNodeTypes;
 
 				return allLatestNodeTypes.filter((nodeType: INodeTypeDescription) => {
 					if (!nodeType.credentials) {
@@ -187,28 +192,34 @@ const module: Module<ICredentialsState, IRootState> = {
 			if (context.getters.allCredentialTypes.length > 0 && forceFetch !== true) {
 				return;
 			}
-			const credentialTypes = await getCredentialTypes(context.rootGetters.getRestApiContext);
+			const rootStore = useRootStore();
+			const credentialTypes = await getCredentialTypes(rootStore.getRestApiContext);
 			context.commit('setCredentialTypes', credentialTypes);
 		},
 		fetchAllCredentials: async (context: ActionContext<ICredentialsState, IRootState>): Promise<ICredentialsResponse[]> => {
-			const credentials = await getAllCredentials(context.rootGetters.getRestApiContext);
+			const rootStore = useRootStore();
+			const credentials = await getAllCredentials(rootStore.getRestApiContext);
 			context.commit('setCredentials', credentials);
 
 			return credentials;
 		},
 		fetchForeignCredentials: async (context: ActionContext<ICredentialsState, IRootState>): Promise<ICredentialsResponse[]> => {
-			const credentials = await getForeignCredentials(context.rootGetters.getRestApiContext);
+			const rootStore = useRootStore();
+			const credentials = await getForeignCredentials(rootStore.getRestApiContext);
 			context.commit('setForeignCredentials', credentials);
 
 			return credentials;
 		},
 		getCredentialData: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
-			return await getCredentialData(context.rootGetters.getRestApiContext, id);
+			const rootStore = useRootStore();
+			return await getCredentialData(rootStore.getRestApiContext, id);
 		},
 		createNewCredential: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsDecrypted) => {
-			const credential = await createNewCredential(context.rootGetters.getRestApiContext, data);
+			const rootStore = useRootStore();
+			const settingsStore = useSettingsStore();
+			const credential = await createNewCredential(rootStore.getRestApiContext, data);
 
-			if (context.rootGetters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
+			if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
 				context.commit('upsertCredential', credential);
 
 				if (data.ownedBy) {
@@ -217,7 +228,8 @@ const module: Module<ICredentialsState, IRootState> = {
 						ownedBy: data.ownedBy,
 					});
 
-					if (data.sharedWith && data.ownedBy.id === context.rootGetters['users/currentUserId']) {
+					const usersStore = useUsersStore();
+					if (data.sharedWith && data.ownedBy.id === usersStore.currentUserId) {
 						await context.dispatch('setCredentialSharedWith', {
 							credentialId: credential.id,
 							sharedWith: data.sharedWith,
@@ -232,9 +244,11 @@ const module: Module<ICredentialsState, IRootState> = {
 		},
 		updateCredential: async (context: ActionContext<ICredentialsState, IRootState>, params: {data: ICredentialsDecrypted, id: string}) => {
 			const { id, data } = params;
-			const credential = await updateCredential(context.rootGetters.getRestApiContext, id, data);
+			const rootStore = useRootStore();
+			const settingsStore = useSettingsStore();
+			const credential = await updateCredential(rootStore.getRestApiContext, id, data);
 
-			if (context.rootGetters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
+			if (settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing)) {
 				context.commit('upsertCredential', credential);
 
 				if (data.ownedBy) {
@@ -243,7 +257,8 @@ const module: Module<ICredentialsState, IRootState> = {
 						ownedBy: data.ownedBy,
 					});
 
-					if (data.sharedWith && data.ownedBy.id === context.rootGetters['users/currentUserId']) {
+					const usersStore = useUsersStore();
+					if (data.sharedWith && data.ownedBy.id === usersStore.currentUserId) {
 						await context.dispatch('setCredentialSharedWith', {
 							credentialId: credential.id,
 							sharedWith: data.sharedWith,
@@ -257,19 +272,23 @@ const module: Module<ICredentialsState, IRootState> = {
 			return credential;
 		},
 		deleteCredential: async (context: ActionContext<ICredentialsState, IRootState>, { id }: {id: string}) => {
-			const deleted = await deleteCredential(context.rootGetters.getRestApiContext, id);
+			const rootStore = useRootStore();
+			const deleted = await deleteCredential(rootStore.getRestApiContext, id);
 			if (deleted) {
 				context.commit('deleteCredential', id);
 			}
 		},
 		oAuth2Authorize: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsResponse) => {
-			return oAuth2CredentialAuthorize(context.rootGetters.getRestApiContext, data);
+			const rootStore = useRootStore();
+			return oAuth2CredentialAuthorize(rootStore.getRestApiContext, data);
 		},
 		oAuth1Authorize: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsResponse) => {
-			return oAuth1CredentialAuthorize(context.rootGetters.getRestApiContext, data);
+			const rootStore = useRootStore();
+			return oAuth1CredentialAuthorize(rootStore.getRestApiContext, data);
 		},
 		testCredential: async (context: ActionContext<ICredentialsState, IRootState>, data: ICredentialsDecrypted): Promise<INodeCredentialTestResult> => {
-			return testCredential(context.rootGetters.getRestApiContext, { credentials: data });
+			const rootStore = useRootStore();
+			return testCredential(rootStore.getRestApiContext, { credentials: data });
 		},
 		getNewCredentialName: async (context: ActionContext<ICredentialsState, IRootState>, params: { credentialTypeName: string }) => {
 			try {
@@ -280,8 +299,8 @@ const module: Module<ICredentialsState, IRootState> = {
 					newName = getAppNameFromCredType(displayName);
 					newName = newName.length > 0 ? `${newName} ${DEFAULT_CREDENTIAL_POSTFIX}` : DEFAULT_CREDENTIAL_NAME;
 				}
-
-				const res = await getCredentialsNewName(context.rootGetters.getRestApiContext, newName);
+				const rootStore = useRootStore();
+				const res = await getCredentialsNewName(rootStore.getRestApiContext, newName);
 				return res.name;
 			} catch (e) {
 				return DEFAULT_CREDENTIAL_NAME;
diff --git a/packages/editor-ui/src/modules/ndv.ts b/packages/editor-ui/src/modules/ndv.ts
deleted file mode 100644
index 707b5b78df..0000000000
--- a/packages/editor-ui/src/modules/ndv.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import Vue from 'vue';
-import { Module } from 'vuex';
-import {
-	IRootState,
-	IRunDataDisplayMode,
-	NDVState,
-	XYPosition,
-	IExecutionResponse,
-	INodeUi,
-} from '../Interface';
-
-const module: Module<NDVState, IRootState> = {
-	namespaced: true,
-	state: {
-		activeNodeName: null,
-		mainPanelDimensions: {},
-		sessionId: '',
-		input: {
-			displayMode: 'table',
-			nodeName: undefined,
-			run: undefined,
-			branch: undefined,
-			data: {
-				isEmpty: true,
-			},
-		},
-		output: {
-			displayMode: 'table',
-			branch: undefined,
-			data: {
-				isEmpty: true,
-			},
-			editMode: {
-				enabled: false,
-				value: '',
-			},
-		},
-		focusedMappableInput: '',
-		mappingTelemetry: {},
-		hoveringItem: null,
-		draggable: {
-			isDragging: false,
-			type: '',
-			data: '',
-			canDrop: false,
-			stickyPosition: null,
-		},
-	},
-	getters: {
-		activeNodeName: (state: NDVState) => state.activeNodeName,
-		activeNode: (state, getters, rootState, rootGetters): INodeUi | null => {
-			return rootGetters.getNodeByName(state.activeNodeName);
-		},
-		ndvInputData: (state: NDVState, getters, rootState: IRootState, rootGetters) => {
-			const executionData = rootGetters.getWorkflowExecution as IExecutionResponse | null;
-			const inputNodeName: string | undefined = state.input.nodeName;
-			const inputRunIndex: number = state.input.run ?? 0;
-			const inputBranchIndex: number = state.input.branch?? 0;
-
-			if (!executionData || !inputNodeName || inputRunIndex === undefined || inputBranchIndex === undefined) {
-				return [];
-			}
-
-			return executionData.data?.resultData?.runData?.[inputNodeName]?.[inputRunIndex]?.data?.main?.[inputBranchIndex];
-		},
-		ndvSessionId: (state: NDVState): string => state.sessionId,
-		getPanelDisplayMode: (state: NDVState)  => {
-			return (panel: 'input' | 'output') => state[panel].displayMode;
-		},
-		inputPanelDisplayMode: (state: NDVState) => state.input.displayMode,
-		outputPanelDisplayMode: (state: NDVState) => state.output.displayMode,
-		outputPanelEditMode: (state: NDVState): NDVState['output']['editMode'] => state.output.editMode,
-		focusedMappableInput: (state: NDVState) => state.focusedMappableInput,
-		isDraggableDragging: (state: NDVState) => state.draggable.isDragging,
-		draggableType: (state: NDVState) => state.draggable.type,
-		draggableData: (state: NDVState) => state.draggable.data,
-		canDraggableDrop: (state: NDVState) => state.draggable.canDrop,
-		mainPanelDimensions: (state: NDVState) => (panelType: string) => {
-			const defaults = { relativeRight: 1, relativeLeft: 1, relativeWidth: 1 };
-
-			return {...defaults, ...state.mainPanelDimensions[panelType]};
-		},
-		draggableStickyPos: (state: NDVState) => state.draggable.stickyPosition,
-		mappingTelemetry: (state: NDVState) => state.mappingTelemetry,
-		hoveringItem: (state: NDVState) => state.hoveringItem,
-		ndvInputNodeName: (state: NDVState) => state.input.nodeName,
-		ndvInputRunIndex: (state: NDVState) => state.input.run,
-		ndvInputBranchIndex: (state: NDVState) => state.input.branch,
-		getNDVDataIsEmpty: (state: NDVState) => (panel: 'input' | 'output'): boolean => state[panel].data.isEmpty,
-	},
-	mutations: {
-		setActiveNodeName(state, nodeName: string) {
-			state.activeNodeName = nodeName;
-		},
-		setInputNodeName: (state: NDVState, name: string | undefined) => {
-			Vue.set(state.input, 'nodeName', name);
-		},
-		setInputRunIndex: (state: NDVState, run?: string) => {
-			Vue.set(state.input, 'run', run);
-		},
-		setMainPanelDimensions: (state: NDVState, params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}) => {
-			Vue.set(
-				state.mainPanelDimensions,
-				params.panelType,
-				{...state.mainPanelDimensions[params.panelType], ...params.dimensions },
-			);
-		},
-		setNDVSessionId: (state: NDVState) => {
-			Vue.set(state, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
-		},
-		resetNDVSessionId: (state: NDVState) => {
-			Vue.set(state, 'sessionId', '');
-		},
-		setPanelDisplayMode: (state: NDVState, params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}) => {
-			Vue.set(state[params.pane], 'displayMode', params.mode);
-		},
-		setOutputPanelEditModeEnabled: (state: NDVState, payload: boolean) => {
-			Vue.set(state.output.editMode, 'enabled', payload);
-		},
-		setOutputPanelEditModeValue: (state: NDVState, payload: string) => {
-			Vue.set(state.output.editMode, 'value', payload);
-		},
-		setMappableNDVInputFocus(state: NDVState, paramName: string) {
-			Vue.set(state, 'focusedMappableInput', paramName);
-		},
-		draggableStartDragging(state: NDVState, {type, data}: {type: string, data: string}) {
-			state.draggable = {
-				isDragging: true,
-				type,
-				data,
-				canDrop: false,
-				stickyPosition: null,
-			};
-		},
-		draggableStopDragging(state: NDVState) {
-			state.draggable = {
-				isDragging: false,
-				type: '',
-				data: '',
-				canDrop: false,
-				stickyPosition: null,
-			};
-		},
-		setDraggableStickyPos(state: NDVState, position: XYPosition | null) {
-			Vue.set(state.draggable, 'stickyPosition', position);
-		},
-		setDraggableCanDrop(state: NDVState, canDrop: boolean) {
-			Vue.set(state.draggable, 'canDrop', canDrop);
-		},
-		setMappingTelemetry(state: NDVState, telemetry: {[key: string]: string | number | boolean}) {
-			state.mappingTelemetry = {...state.mappingTelemetry, ...telemetry};
-		},
-		resetMappingTelemetry(state: NDVState) {
-			state.mappingTelemetry = {};
-		},
-		setHoveringItem(state: NDVState, item: null | NDVState['hoveringItem']) {
-			Vue.set(state, 'hoveringItem', item);
-		},
-		setNDVBranchIndex(state: NDVState, e: {pane: 'input' | 'output', branchIndex: number}) {
-			Vue.set(state[e.pane], 'branch', e.branchIndex);
-		},
-		setNDVPanelDataIsEmpty(state: NDVState, payload: {panel: 'input' | 'output', isEmpty: boolean}) {
-			Vue.set(state[payload.panel].data, 'isEmpty', payload.isEmpty);
-		},
-	},
-	actions: {
-	},
-};
-
-export default module;
diff --git a/packages/editor-ui/src/modules/nodeTypes.ts b/packages/editor-ui/src/modules/nodeTypes.ts
deleted file mode 100644
index 6aa777a9c9..0000000000
--- a/packages/editor-ui/src/modules/nodeTypes.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import Vue from 'vue';
-import { ActionContext, Module } from 'vuex';
-import type {
-	ILoadOptions,
-	INodeCredentials,
-	INodeListSearchResult,
-	INodeParameters,
-	INodeTypeDescription,
-	INodeTypeNameVersion,
-} from 'n8n-workflow';
-
-import { DEFAULT_NODETYPE_VERSION } from '@/constants';
-import { addHeaders, addNodeTranslation } from '@/plugins/i18n';
-import {
-	getNodeParameterOptions,
-	getNodesInformation,
-	getNodeTranslationHeaders,
-	getNodeTypes,
-	getResourceLocatorResults,
-} from '@/api/nodeTypes';
-import { omit } from '@/utils';
-import type { IRootState, INodeTypesState, ICategoriesWithNodes, INodeCreateElement, IResourceLocatorReqParams } from '../Interface';
-import { getCategoriesWithNodes, getCategorizedList } from './nodeTypesHelpers';
-
-const module: Module<INodeTypesState, IRootState> = {
-	namespaced: true,
-	state: {
-		nodeTypes: {},
-	},
-	getters: {
-		allNodeTypes: (state): INodeTypeDescription[] => {
-			return Object.values(state.nodeTypes).reduce<INodeTypeDescription[]>((allNodeTypes, nodeType) => {
-				const versionNumbers = Object.keys(nodeType).map(Number);
-				const allNodeVersions = versionNumbers.map(version => nodeType[version]);
-
-				return [...allNodeTypes, ...allNodeVersions];
-			}, []);
-		},
-		allLatestNodeTypes: (state): INodeTypeDescription[] => {
-			return Object.values(state.nodeTypes).reduce<INodeTypeDescription[]>((allLatestNodeTypes, nodeVersions) => {
-				const versionNumbers = Object.keys(nodeVersions).map(Number);
-				const latestNodeVersion = nodeVersions[Math.max(...versionNumbers)];
-
-				if (!latestNodeVersion) return allLatestNodeTypes;
-
-				return [...allLatestNodeTypes, latestNodeVersion];
-			}, []);
-		},
-		getNodeType: (state) => (nodeTypeName: string, version?: number): INodeTypeDescription | null => {
-			const nodeVersions = state.nodeTypes[nodeTypeName];
-
-			if (!nodeVersions) return null;
-
-			const versionNumbers = Object.keys(nodeVersions).map(Number);
-			const nodeType = nodeVersions[version || Math.max(...versionNumbers)];
-
-			return nodeType || null;
-		},
-		isTriggerNode: (state, getters) => (nodeTypeName: string) => {
-			const nodeType = getters.getNodeType(nodeTypeName);
-			return !!(nodeType && nodeType.group.includes('trigger'));
-		},
-		visibleNodeTypes: (state, getters): INodeTypeDescription[] => {
-			return getters.allLatestNodeTypes.filter((nodeType: INodeTypeDescription) => !nodeType.hidden);
-		},
-		categoriesWithNodes: (state, getters, rootState, rootGetters): ICategoriesWithNodes => {
-			return getCategoriesWithNodes(getters.visibleNodeTypes, rootGetters['users/personalizedNodeTypes']);
-		},
-		categorizedItems: (state, getters): INodeCreateElement[] => {
-			return getCategorizedList(getters.categoriesWithNodes);
-		},
-	},
-	mutations: {
-		setNodeTypes(state, newNodeTypes: INodeTypeDescription[] = []) {
-			const nodeTypes = newNodeTypes.reduce<Record<string, Record<string, INodeTypeDescription>>>((acc, newNodeType) => {
-				const newNodeVersions = getNodeVersions(newNodeType);
-
-				if (newNodeVersions.length === 0) {
-					const singleVersion = { [DEFAULT_NODETYPE_VERSION]: newNodeType };
-
-					acc[newNodeType.name] = singleVersion;
-					return acc;
-				}
-
-				for (const version of newNodeVersions) {
-					if (acc[newNodeType.name]) {
-						acc[newNodeType.name][version] = newNodeType;
-					} else {
-						acc[newNodeType.name] = { [version]: newNodeType };
-					}
-				}
-
-				return acc;
-			}, { ...state.nodeTypes });
-
-			Vue.set(state, 'nodeTypes', nodeTypes);
-		},
-		removeNodeTypes(state, nodeTypesToRemove: INodeTypeDescription[]) {
-			state.nodeTypes = nodeTypesToRemove.reduce(
-				(oldNodes, newNodeType) => omit(newNodeType.name, oldNodes),
-				state.nodeTypes,
-			);
-		},
-	},
-	actions: {
-		async getFullNodesProperties(
-			context: ActionContext<INodeTypesState, IRootState>,
-			nodesToBeFetched: INodeTypeNameVersion[],
-		) {
-			await context.dispatch('credentials/fetchCredentialTypes', true);
-
-			const nodesInformation = await context.dispatch(
-				'getNodesInformation',
-				nodesToBeFetched,
-			);
-
-			context.commit('setNodeTypes', nodesInformation);
-		},
-		async getNodeTypes(context: ActionContext<INodeTypesState, IRootState>) {
-			const nodeTypes = await getNodeTypes(context.rootGetters.getRestApiContext);
-			if (nodeTypes.length) {
-				context.commit('setNodeTypes', nodeTypes);
-			}
-		},
-		async getNodeTranslationHeaders(context: ActionContext<INodeTypesState, IRootState>) {
-			const headers = await getNodeTranslationHeaders(context.rootGetters.getRestApiContext);
-
-			if (headers) {
-				addHeaders(headers, context.rootGetters.defaultLocale);
-			}
-		},
-		async getNodesInformation(
-			context: ActionContext<INodeTypesState, IRootState>,
-			nodeInfos: INodeTypeNameVersion[],
-		) {
-			const nodesInformation = await getNodesInformation(
-				context.rootGetters.getRestApiContext,
-				nodeInfos,
-			);
-
-			nodesInformation.forEach(nodeInformation => {
-				if (nodeInformation.translation) {
-					const nodeType = nodeInformation.name.replace('n8n-nodes-base.', '');
-
-					addNodeTranslation(
-						{ [nodeType]: nodeInformation.translation },
-						context.getters.defaultLocale,
-					);
-				}
-			});
-
-			context.commit('setNodeTypes', nodesInformation);
-		},
-		async getNodeParameterOptions(
-			context: ActionContext<INodeTypesState, IRootState>,
-			sendData: {
-				nodeTypeAndVersion: INodeTypeNameVersion,
-				path: string,
-				methodName?: string,
-				loadOptions?: ILoadOptions,
-				currentNodeParameters: INodeParameters,
-				credentials?: INodeCredentials,
-			},
-		) {
-			return getNodeParameterOptions(context.rootGetters.getRestApiContext, sendData);
-		},
-		async getResourceLocatorResults(
-			context: ActionContext<INodeTypesState, IRootState>,
-			sendData: IResourceLocatorReqParams,
-		): Promise<INodeListSearchResult> {
-			return getResourceLocatorResults(context.rootGetters.getRestApiContext, sendData);
-		},
-	},
-};
-
-function getNodeVersions(nodeType: INodeTypeDescription) {
-	return Array.isArray(nodeType.version) ? nodeType.version : [nodeType.version];
-}
-
-export default module;
diff --git a/packages/editor-ui/src/modules/settings.ts b/packages/editor-ui/src/modules/settings.ts
deleted file mode 100644
index 68ea3b578c..0000000000
--- a/packages/editor-ui/src/modules/settings.ts
+++ /dev/null
@@ -1,243 +0,0 @@
-import {  ActionContext, Module } from 'vuex';
-import {
-	ILogLevel,
-	IN8nPrompts,
-	IN8nUISettings,
-	IN8nValueSurveyData,
-	IRootState,
-	ISettingsState,
-	WorkflowCallerPolicyDefaultOption,
-} from '../Interface';
-import { getPromptsData, submitValueSurvey, submitContactInfo, getSettings } from '../api/settings';
-import Vue from 'vue';
-import {CONTACT_PROMPT_MODAL_KEY, EnterpriseEditionFeature, VALUE_SURVEY_MODAL_KEY} from '@/constants';
-import { ITelemetrySettings } from 'n8n-workflow';
-import { testHealthEndpoint } from '@/api/templates';
-import {createApiKey, deleteApiKey, getApiKey } from "@/api/api-keys";
-
-const module: Module<ISettingsState, IRootState> = {
-	namespaced: true,
-	state: {
-		settings: {} as IN8nUISettings,
-		promptsData: {} as IN8nPrompts,
-		userManagement: {
-			enabled: false,
-			showSetupOnFirstLoad: false,
-			smtpSetup: false,
-		},
-		templatesEndpointHealthy: false,
-		api: {
-			enabled: false,
-			latestVersion: 0,
-			path: '/',
-		},
-		onboardingCallPromptEnabled: false,
-	},
-	getters: {
-		isEnterpriseFeatureEnabled: (state: ISettingsState) => (feature: EnterpriseEditionFeature): boolean => {
-			return state.settings.enterprise[feature];
-		},
-		versionCli(state: ISettingsState) {
-			return state.settings.versionCli;
-		},
-		isUserManagementEnabled(state: ISettingsState): boolean {
-			return state.userManagement.enabled;
-		},
-		isPublicApiEnabled(state: ISettingsState): boolean {
-			return state.api.enabled;
-		},
-		publicApiLatestVersion(state: ISettingsState): number {
-			return state.api.latestVersion;
-		},
-		publicApiPath(state: ISettingsState): string {
-			return state.api.path;
-		},
-		showSetupPage(state: ISettingsState) {
-			return state.userManagement.showSetupOnFirstLoad;
-		},
-		getPromptsData(state: ISettingsState) {
-			return state.promptsData;
-		},
-		isDesktopDeployment(state: ISettingsState) {
-			return state.settings.deployment?.type.startsWith('desktop_');
-		},
-		isCloudDeployment(state: ISettingsState) {
-			return state.settings.deployment && state.settings.deployment.type === 'cloud';
-		},
-		isSmtpSetup(state: ISettingsState) {
-			return state.userManagement.smtpSetup;
-		},
-		isPersonalizationSurveyEnabled(state: ISettingsState) {
-			return state.settings.telemetry.enabled && state.settings.personalizationSurveyEnabled;
-		},
-		telemetry: (state): ITelemetrySettings => {
-			return state.settings.telemetry;
-		},
-		logLevel: (state): ILogLevel => {
-			return state.settings.logLevel;
-		},
-		isTelemetryEnabled: (state) => {
-			return state.settings.telemetry && state.settings.telemetry.enabled;
-		},
-		areTagsEnabled: (state) => {
-			return state.settings.workflowTagsDisabled !== undefined ? !state.settings.workflowTagsDisabled : true;
-		},
-		isHiringBannerEnabled: (state): boolean => {
-			return state.settings.hiringBannerEnabled;
-		},
-		isTemplatesEnabled: (state): boolean => {
-			return Boolean(state.settings.templates && state.settings.templates.enabled);
-		},
-		isTemplatesEndpointReachable: (state): boolean => {
-			return state.templatesEndpointHealthy;
-		},
-		templatesHost: (state): string  => {
-			return state.settings.templates.host;
-		},
-		isOnboardingCallPromptFeatureEnabled: (state): boolean => {
-			return state.onboardingCallPromptEnabled;
-		},
-		isCommunityNodesFeatureEnabled: (state): boolean => {
-			return state.settings.communityNodesEnabled;
-		},
-		isNpmAvailable: (state): boolean => {
-			return state.settings.isNpmAvailable;
-		},
-		allowedModules: (state): { builtIn?: string[]; external?: string[] } => {
-			return state.settings.allowedModules;
-		},
-		isQueueModeEnabled: (state): boolean => {
-			return state.settings.executionMode === 'queue';
-		},
-		workflowCallerPolicyDefaultOption: (state): WorkflowCallerPolicyDefaultOption => {
-			return state.settings.workflowCallerPolicyDefaultOption;
-		},
-		isWorkflowSharingEnabled: (state): boolean => {
-			return state.settings.isWorkflowSharingEnabled;
-		},
-	},
-	mutations: {
-		setSettings(state: ISettingsState, settings: IN8nUISettings) {
-			state.settings = settings;
-			state.userManagement.enabled = settings.userManagement.enabled;
-			state.userManagement.showSetupOnFirstLoad = !!settings.userManagement.showSetupOnFirstLoad;
-			state.userManagement.smtpSetup = settings.userManagement.smtpSetup;
-			state.api.enabled = settings.publicApi.enabled;
-			state.api.latestVersion = settings.publicApi.latestVersion;
-			state.api.path = settings.publicApi.path;
-			state.onboardingCallPromptEnabled = settings.onboardingCallPromptEnabled;
-		},
-		stopShowingSetupPage(state: ISettingsState) {
-			Vue.set(state.userManagement, 'showSetupOnFirstLoad', false);
-		},
-		setPromptsData(state: ISettingsState, promptsData: IN8nPrompts) {
-			Vue.set(state, 'promptsData', promptsData);
-		},
-		setTemplatesEndpointHealthy(state: ISettingsState) {
-			state.templatesEndpointHealthy = true;
-		},
-		setCommunityNodesFeatureEnabled(state: ISettingsState, isEnabled: boolean) {
-			state.settings.communityNodesEnabled = isEnabled;
-		},
-		setIsWorkflowSharingEnabled(state: ISettingsState, enabled: boolean) {
-			state.settings.isWorkflowSharingEnabled = enabled;
-		},
-		setWorkflowCallerPolicyDefaultOption(state: ISettingsState, defaultOption: WorkflowCallerPolicyDefaultOption) {
-			state.settings.workflowCallerPolicyDefaultOption = defaultOption;
-		},
-		setAllowedModules(state, allowedModules: { builtIn?: string, external?: string }) {
-			state.settings.allowedModules = {
-				...(allowedModules.builtIn && { builtIn: allowedModules.builtIn.split(',') }),
-				...(allowedModules.external && { external: allowedModules.external.split(',') }),
-			};
-		},
-	},
-	actions: {
-		async getSettings(context: ActionContext<ISettingsState, IRootState>) {
-			const settings = await getSettings(context.rootGetters.getRestApiContext);
-			context.commit('setSettings', settings);
-
-			// todo refactor to this store
-			context.commit('setUrlBaseWebhook', settings.urlBaseWebhook, {root: true});
-			context.commit('setUrlBaseEditor', settings.urlBaseEditor, {root: true});
-			context.commit('setEndpointWebhook', settings.endpointWebhook, {root: true});
-			context.commit('setEndpointWebhookTest', settings.endpointWebhookTest, {root: true});
-			context.commit('setSaveDataErrorExecution', settings.saveDataErrorExecution, {root: true});
-			context.commit('setSaveDataSuccessExecution', settings.saveDataSuccessExecution, {root: true});
-			context.commit('setSaveManualExecutions', settings.saveManualExecutions, {root: true});
-			context.commit('setTimezone', settings.timezone, {root: true});
-			context.commit('setExecutionTimeout', settings.executionTimeout, {root: true});
-			context.commit('setMaxExecutionTimeout', settings.maxExecutionTimeout, {root: true});
-			context.commit('setVersionCli', settings.versionCli, {root: true});
-			context.commit('setInstanceId', settings.instanceId, {root: true});
-			context.commit('setOauthCallbackUrls', settings.oauthCallbackUrls, {root: true});
-			context.commit('setN8nMetadata', settings.n8nMetadata || {}, {root: true});
-			context.commit('setDefaultLocale', settings.defaultLocale, {root: true});
-			context.commit('setIsNpmAvailable', settings.isNpmAvailable, {root: true});
-			context.commit('versions/setVersionNotificationSettings', settings.versionNotifications, {root: true});
-			context.commit('setCommunityNodesFeatureEnabled', settings.communityNodesEnabled === true);
-			context.commit('settings/setAllowedModules', settings.allowedModules, {root: true});
-			context.commit('settings/setWorkflowCallerPolicyDefaultOption', settings.workflowCallerPolicyDefaultOption, {root: true});
-			context.commit('settings/setIsWorkflowSharingEnabled', settings.enterprise.workflowSharing, {root: true});
-		},
-		async fetchPromptsData(context: ActionContext<ISettingsState, IRootState>) {
-			if (!context.getters.isTelemetryEnabled) {
-				return;
-			}
-
-			try {
-				const instanceId = context.state.settings.instanceId;
-				const userId = context.rootGetters['users/currentUserId'];
-				const promptsData: IN8nPrompts = await getPromptsData(instanceId, userId);
-
-				if (promptsData && promptsData.showContactPrompt) {
-					context.commit('ui/openModal', CONTACT_PROMPT_MODAL_KEY, {root: true});
-				} else if (promptsData && promptsData.showValueSurvey) {
-					context.commit('ui/openModal', VALUE_SURVEY_MODAL_KEY, {root: true});
-				}
-
-				context.commit('setPromptsData', promptsData);
-			} catch (e) {
-				return e;
-			}
-
-		},
-		async submitContactInfo(context: ActionContext<ISettingsState, IRootState>, email: string) {
-			try {
-				const instanceId = context.state.settings.instanceId;
-				const userId = context.rootGetters['users/currentUserId'];
-				return await submitContactInfo(instanceId, userId, email);
-			} catch (e) {
-				return e;
-			}
-		},
-
-		async submitValueSurvey(context: ActionContext<ISettingsState, IRootState>, params: IN8nValueSurveyData) {
-			try {
-				const instanceId = context.state.settings.instanceId;
-				const userId = context.rootGetters['users/currentUserId'];
-				return await submitValueSurvey(instanceId, userId, params);
-			} catch (e) {
-				return e;
-			}
-		},
-		async testTemplatesEndpoint(context: ActionContext<ISettingsState, IRootState>) {
-			const timeout = new Promise((_, reject) => setTimeout(() => reject(), 2000));
-			await Promise.race([testHealthEndpoint(context.getters.templatesHost), timeout]);
-			context.commit('setTemplatesEndpointHealthy', true);
-		},
-		async getApiKey(context: ActionContext<ISettingsState, IRootState>) {
-			const { apiKey } = await getApiKey(context.rootGetters['getRestApiContext']);
-			return apiKey;
-		},
-		async createApiKey(context: ActionContext<ISettingsState, IRootState>) {
-			const { apiKey } = await createApiKey(context.rootGetters['getRestApiContext']);
-			return apiKey;
-		},
-		async deleteApiKey(context: ActionContext<ISettingsState, IRootState>) {
-			await deleteApiKey(context.rootGetters['getRestApiContext']);
-		},
-	},
-};
-
-export default module;
diff --git a/packages/editor-ui/src/modules/tags.ts b/packages/editor-ui/src/modules/tags.ts
index 52063607c6..1430ed440d 100644
--- a/packages/editor-ui/src/modules/tags.ts
+++ b/packages/editor-ui/src/modules/tags.ts
@@ -6,6 +6,8 @@ import {
 } from '../Interface';
 import { createTag, deleteTag, getTags, updateTag } from '../api/tags';
 import Vue from 'vue';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
 
 const module: Module<ITagsState, IRootState> = {
 	namespaced: true,
@@ -71,30 +73,35 @@ const module: Module<ITagsState, IRootState> = {
 			}
 
 			context.commit('setLoading', true);
-			const tags = await getTags(context.rootGetters.getRestApiContext, Boolean(withUsageCount));
+			const rootStore = useRootStore();
+			const tags = await getTags(rootStore.getRestApiContext, Boolean(withUsageCount));
 			context.commit('setAllTags', tags);
 			context.commit('setLoading', false);
 
 			return tags;
 		},
 		create: async (context: ActionContext<ITagsState, IRootState>, name: string): Promise<ITag> => {
-			const tag = await createTag(context.rootGetters.getRestApiContext, { name });
+			const rootStore = useRootStore();
+			const tag = await createTag(rootStore.getRestApiContext, { name });
 			context.commit('upsertTags', [tag]);
 
 			return tag;
 		},
 		rename: async (context: ActionContext<ITagsState, IRootState>, { id, name }: { id: string, name: string }) => {
-			const tag = await updateTag(context.rootGetters.getRestApiContext, id, { name });
+			const rootStore = useRootStore();
+			const tag = await updateTag(rootStore.getRestApiContext, id, { name });
 			context.commit('upsertTags', [tag]);
 
 			return tag;
 		},
 		delete: async (context: ActionContext<ITagsState, IRootState>, id: string) => {
-			const deleted = await deleteTag(context.rootGetters.getRestApiContext, id);
+			const rootStore = useRootStore();
+			const deleted = await deleteTag(rootStore.getRestApiContext, id);
 
 			if (deleted) {
 				context.commit('deleteTag', id);
-				context.commit('removeWorkflowTagId', id, {root: true});
+				const workflowsStore = useWorkflowsStore();
+				workflowsStore.removeWorkflowTagId(id);
 			}
 
 			return deleted;
diff --git a/packages/editor-ui/src/modules/templates.ts b/packages/editor-ui/src/modules/templates.ts
deleted file mode 100644
index 44c0c379f9..0000000000
--- a/packages/editor-ui/src/modules/templates.ts
+++ /dev/null
@@ -1,282 +0,0 @@
-import { getCategories, getCollectionById, getCollections, getTemplateById, getWorkflows, getWorkflowTemplate } from '@/api/templates';
-import { ActionContext, Module } from 'vuex';
-import {
-	IRootState,
-	ITemplatesCollection,
-	ITemplatesWorkflow,
-	ITemplatesCategory,
-	ITemplateState,
-	ITemplatesQuery,
-	ITemplatesWorkflowFull,
-	ITemplatesCollectionFull,
-	IWorkflowTemplate,
-} from '../Interface';
-
-import Vue from 'vue';
-
-const TEMPLATES_PAGE_SIZE = 10;
-
-function getSearchKey(query: ITemplatesQuery): string {
-	return JSON.stringify([query.search || '', [...query.categories].sort()]);
-}
-
-const module: Module<ITemplateState, IRootState> = {
-	namespaced: true,
-	state: {
-		categories: {},
-		collections: {},
-		workflows: {},
-		collectionSearches: {},
-		workflowSearches: {},
-		currentSessionId: '',
-		previousSessionId: '',
-	},
-	getters: {
-		allCategories(state: ITemplateState) {
-			return Object.values(state.categories).sort((a: ITemplatesCategory, b: ITemplatesCategory) => a.name > b.name ? 1: -1);
-		},
-		getTemplateById(state: ITemplateState) {
-			return (id: string): null | ITemplatesWorkflow => state.workflows[id];
-		},
-		getCollectionById(state: ITemplateState) {
-			return (id: string): null | ITemplatesCollection => state.collections[id];
-		},
-		getCategoryById(state: ITemplateState) {
-			return (id: string): null | ITemplatesCategory => state.categories[id];
-		},
-		getSearchedCollections(state: ITemplateState) {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = state.collectionSearches[searchKey];
-				if (!search) {
-					return null;
-				}
-
-				return search.collectionIds.map((collectionId: string) => state.collections[collectionId]);
-			};
-		},
-		getSearchedWorkflows(state: ITemplateState) {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = state.workflowSearches[searchKey];
-				if (!search) {
-					return null;
-				}
-
-				return search.workflowIds.map((workflowId: string) => state.workflows[workflowId]);
-			};
-		},
-		getSearchedWorkflowsTotal(state: ITemplateState) {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = state.workflowSearches[searchKey];
-
-				return search ? search.totalWorkflows : 0;
-			};
-		},
-		isSearchLoadingMore(state: ITemplateState) {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = state.workflowSearches[searchKey];
-
-				return Boolean(search && search.loadingMore);
-			};
-		},
-		isSearchFinished(state: ITemplateState) {
-			return (query: ITemplatesQuery) => {
-				const searchKey = getSearchKey(query);
-				const search = state.workflowSearches[searchKey];
-
-				return Boolean(search && !search.loadingMore && search.totalWorkflows === search.workflowIds.length);
-			};
-		},
-		currentSessionId(state: ITemplateState) {
-			return state.currentSessionId;
-		},
-		previousSessionId(state: ITemplateState) {
-			return state.previousSessionId;
-		},
-	},
-	mutations: {
-		addCategories(state: ITemplateState, categories: ITemplatesCategory[]) {
-			categories.forEach((category: ITemplatesCategory) => {
-				Vue.set(state.categories, category.id, category);
-			});
-		},
-		addCollections(state: ITemplateState, collections: Array<ITemplatesCollection | ITemplatesCollectionFull>) {
-			collections.forEach((collection) => {
-				const workflows = (collection.workflows || []).map((workflow) => ({id: workflow.id}));
-				const cachedCollection = state.collections[collection.id] || {};
-				Vue.set(state.collections, collection.id, {
-					...cachedCollection,
-					...collection,
-					workflows,
-				});
-			});
-		},
-		addWorkflows(state: ITemplateState, workflows: Array<ITemplatesWorkflow | ITemplatesWorkflowFull>) {
-			workflows.forEach((workflow: ITemplatesWorkflow) => {
-				const cachedWorkflow = state.workflows[workflow.id] || {};
-				Vue.set(state.workflows, workflow.id, {
-					...cachedWorkflow,
-					...workflow,
-				});
-			});
-		},
-		addCollectionSearch(state: ITemplateState, data: {collections: ITemplatesCollection[], query: ITemplatesQuery}) {
-			const collectionIds = data.collections.map((collection) => collection.id);
-			const searchKey = getSearchKey(data.query);
-			Vue.set(state.collectionSearches, searchKey, {
-				collectionIds,
-			});
-		},
-		addWorkflowsSearch(state: ITemplateState, data: {totalWorkflows: number; workflows: ITemplatesWorkflow[], query: ITemplatesQuery}) {
-			const workflowIds = data.workflows.map((workflow) => workflow.id);
-			const searchKey = getSearchKey(data.query);
-			const cachedResults = state.workflowSearches[searchKey];
-			if (!cachedResults) {
-				Vue.set(state.workflowSearches, searchKey, {
-					workflowIds,
-					totalWorkflows: data.totalWorkflows,
-				});
-
-				return;
-			}
-
-			Vue.set(state.workflowSearches, searchKey, {
-				workflowIds: [...cachedResults.workflowIds, ...workflowIds],
-				totalWorkflows: data.totalWorkflows,
-			});
-		},
-		setWorkflowSearchLoading(state: ITemplateState, query: ITemplatesQuery) {
-			const searchKey = getSearchKey(query);
-			const cachedResults = state.workflowSearches[searchKey];
-			if (!cachedResults) {
-				return;
-			}
-
-			Vue.set(state.workflowSearches[searchKey], 'loadingMore', true);
-		},
-		setWorkflowSearchLoaded(state: ITemplateState, query: ITemplatesQuery) {
-			const searchKey = getSearchKey(query);
-			const cachedResults = state.workflowSearches[searchKey];
-			if (!cachedResults) {
-				return;
-			}
-
-			Vue.set(state.workflowSearches[searchKey], 'loadingMore', false);
-		},
-		resetSessionId(state: ITemplateState) {
-			state.previousSessionId = state.currentSessionId;
-			state.currentSessionId = '';
-		},
-		setSessionId(state: ITemplateState) {
-			if (!state.currentSessionId) {
-				state.currentSessionId = `templates-${Date.now()}`;
-			}
-		},
-	},
-	actions: {
-		async getTemplateById(context: ActionContext<ITemplateState, IRootState>, templateId: string): Promise<ITemplatesWorkflowFull> {
-			const apiEndpoint: string = context.rootGetters['settings/templatesHost'];
-			const versionCli: string = context.rootGetters['versionCli'];
-			const response = await getTemplateById(apiEndpoint, templateId, { 'n8n-version': versionCli });
-			const template: ITemplatesWorkflowFull = {
-				...response.workflow,
-				full: true,
-			};
-
-			context.commit('addWorkflows', [template]);
-			return template;
-		},
-		async getCollectionById(context: ActionContext<ITemplateState, IRootState>, collectionId: string): Promise<ITemplatesCollection> {
-			const apiEndpoint: string = context.rootGetters['settings/templatesHost'];
-			const versionCli: string = context.rootGetters['versionCli'];
-			const response = await getCollectionById(apiEndpoint, collectionId, { 'n8n-version': versionCli });
-			const collection: ITemplatesCollectionFull = {
-				...response.collection,
-				full: true,
-			};
-
-			context.commit('addCollections', [collection]);
-			context.commit('addWorkflows', response.collection.workflows);
-
-			return context.getters.getCollectionById(collectionId);
-		},
-		async getCategories(context: ActionContext<ITemplateState, IRootState>): Promise<ITemplatesCategory[]> {
-			const cachedCategories: ITemplatesCategory[] = context.getters.allCategories;
-			if (cachedCategories.length) {
-				return cachedCategories;
-			}
-			const apiEndpoint: string = context.rootGetters['settings/templatesHost'];
-			const versionCli: string = context.rootGetters['versionCli'];
-			const response = await getCategories(apiEndpoint, { 'n8n-version': versionCli });
-			const categories = response.categories;
-
-			context.commit('addCategories', categories);
-
-			return categories;
-		},
-		async getCollections(context: ActionContext<ITemplateState, IRootState>, query: ITemplatesQuery): Promise<ITemplatesCollection[]> {
-			const cachedResults: ITemplatesCollection[] | null = context.getters.getSearchedCollections(query);
-			if (cachedResults) {
-				return cachedResults;
-			}
-
-			const apiEndpoint: string = context.rootGetters['settings/templatesHost'];
-			const versionCli: string = context.rootGetters['versionCli'];
-			const response = await getCollections(apiEndpoint, query, { 'n8n-version': versionCli });
-			const collections = response.collections;
-
-			context.commit('addCollections', collections);
-			context.commit('addCollectionSearch', {query, collections});
-			collections.forEach((collection: ITemplatesCollection) => context.commit('addWorkflows', collection.workflows));
-
-			return collections;
-		},
-		async getWorkflows(context: ActionContext<ITemplateState, IRootState>, query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
-			const cachedResults: ITemplatesWorkflow[] = context.getters.getSearchedWorkflows(query);
-			if (cachedResults) {
-				return cachedResults;
-			}
-
-			const apiEndpoint: string = context.rootGetters['settings/templatesHost'];
-			const versionCli: string = context.rootGetters['versionCli'];
-
-			const payload = await getWorkflows(apiEndpoint, {...query, skip: 0, limit: TEMPLATES_PAGE_SIZE}, { 'n8n-version': versionCli });
-
-			context.commit('addWorkflows', payload.workflows);
-			context.commit('addWorkflowsSearch', {...payload, query});
-
-			return context.getters.getSearchedWorkflows(query);
-		},
-		async getMoreWorkflows(context: ActionContext<ITemplateState, IRootState>, query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
-			if (context.getters.isSearchLoadingMore(query) && !context.getters.isSearchFinished(query)) {
-				return [];
-			}
-			const cachedResults: ITemplatesWorkflow[] = context.getters.getSearchedWorkflows(query) || [];
-			const apiEndpoint: string = context.rootGetters['settings/templatesHost'];
-
-			context.commit('setWorkflowSearchLoading', query);
-			try {
-				const payload = await getWorkflows(apiEndpoint, {...query, skip: cachedResults.length, limit: TEMPLATES_PAGE_SIZE});
-
-				context.commit('setWorkflowSearchLoaded', query);
-				context.commit('addWorkflows', payload.workflows);
-				context.commit('addWorkflowsSearch', {...payload, query});
-
-				return context.getters.getSearchedWorkflows(query);
-			} catch (e) {
-				context.commit('setWorkflowSearchLoaded', query);
-				throw e;
-			}
-		},
-		getWorkflowTemplate: async (context: ActionContext<ITemplateState, IRootState>, templateId: string): Promise<IWorkflowTemplate> => {
-			const apiEndpoint: string = context.rootGetters['settings/templatesHost'];
-			const versionCli: string = context.rootGetters['versionCli'];
-			return await getWorkflowTemplate(apiEndpoint, templateId, { 'n8n-version': versionCli });
-		},
-	},
-};
-
-export default module;
diff --git a/packages/editor-ui/src/modules/ui.ts b/packages/editor-ui/src/modules/ui.ts
deleted file mode 100644
index 763051dfba..0000000000
--- a/packages/editor-ui/src/modules/ui.ts
+++ /dev/null
@@ -1,376 +0,0 @@
-import { getCurlToJson } from '@/api/curlHelper';
-import { applyForOnboardingCall, fetchNextOnboardingPrompt, submitEmailOnSignup } from '@/api/workflow-webhooks';
-import {
-	ABOUT_MODAL_KEY,
-	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
-	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
-	CREDENTIAL_EDIT_MODAL_KEY,
-	CREDENTIAL_SELECT_MODAL_KEY,
-	CHANGE_PASSWORD_MODAL_KEY,
-	CONTACT_PROMPT_MODAL_KEY,
-	DELETE_USER_MODAL_KEY,
-	DUPLICATE_MODAL_KEY,
-	EXECUTIONS_MODAL_KEY,
-	PERSONALIZATION_MODAL_KEY,
-	INVITE_USER_MODAL_KEY,
-	TAGS_MANAGER_MODAL_KEY,
-	VALUE_SURVEY_MODAL_KEY,
-	VERSIONS_MODAL_KEY,
-	WORKFLOW_ACTIVE_MODAL_KEY,
-	WORKFLOW_SETTINGS_MODAL_KEY,
-	VIEWS,
-	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
-	FAKE_DOOR_FEATURES,
-	COMMUNITY_PACKAGE_MANAGE_ACTIONS,
-	IMPORT_CURL_MODAL_KEY,
-} from '@/constants';
-import Vue from 'vue';
-import { ActionContext, Module } from 'vuex';
-import {
-	IFakeDoorLocation,
-	IRootState,
-	IUiState,
-	XYPosition,
-	IFakeDoor,
-} from '../Interface';
-
-const module: Module<IUiState, IRootState> = {
-	namespaced: true,
-	state: {
-		modals: {
-			[ABOUT_MODAL_KEY]: {
-				open: false,
-			},
-			[CHANGE_PASSWORD_MODAL_KEY]: {
-				open: false,
-			},
-			[CONTACT_PROMPT_MODAL_KEY]: {
-				open: false,
-			},
-			[CREDENTIAL_EDIT_MODAL_KEY]: {
-				open: false,
-				mode: '',
-				activeId: null,
-			},
-			[CREDENTIAL_SELECT_MODAL_KEY]: {
-				open: false,
-			},
-			[DELETE_USER_MODAL_KEY]: {
-				open: false,
-				activeId: null,
-			},
-			[DUPLICATE_MODAL_KEY]: {
-				open: false,
-			},
-			[ONBOARDING_CALL_SIGNUP_MODAL_KEY]: {
-				open: false,
-			},
-			[PERSONALIZATION_MODAL_KEY]: {
-				open: false,
-			},
-			[INVITE_USER_MODAL_KEY]: {
-				open: false,
-			},
-			[TAGS_MANAGER_MODAL_KEY]: {
-				open: false,
-			},
-			[VALUE_SURVEY_MODAL_KEY]: {
-				open: false,
-			},
-			[VERSIONS_MODAL_KEY]: {
-				open: false,
-			},
-			[WORKFLOW_SETTINGS_MODAL_KEY]: {
-				open: false,
-			},
-			[EXECUTIONS_MODAL_KEY]: {
-				open: false,
-			},
-			[WORKFLOW_ACTIVE_MODAL_KEY]: {
-				open: false,
-			},
-			[COMMUNITY_PACKAGE_INSTALL_MODAL_KEY]: {
-				open: false,
-			},
-			[COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY]: {
-				open: false,
-				mode: '',
-				activeId: null,
-			},
-			[IMPORT_CURL_MODAL_KEY]: {
-				open: false,
-				curlCommand: '',
-				httpNodeParameters: '',
-			},
-		},
-		modalStack: [],
-		sidebarMenuCollapsed: false,
-		isPageLoading: true,
-		currentView: '',
-		fakeDoorFeatures: [
-			{
-				id: FAKE_DOOR_FEATURES.ENVIRONMENTS,
-				featureName: 'fakeDoor.settings.environments.name',
-				icon: 'server',
-				infoText: 'fakeDoor.settings.environments.infoText',
-				actionBoxTitle: `fakeDoor.settings.environments.actionBox.title`,
-				actionBoxDescription: 'fakeDoor.settings.environments.actionBox.description',
-				linkURL: `https://n8n-community.typeform.com/to/l7QOrERN#f=environments`,
-				uiLocations: ['settings'],
-			},
-			{
-				id: FAKE_DOOR_FEATURES.LOGGING,
-				featureName: 'fakeDoor.settings.logging.name',
-				icon: 'sign-in-alt',
-				infoText: 'fakeDoor.settings.logging.infoText',
-				actionBoxTitle: `fakeDoor.settings.logging.actionBox.title`,
-				actionBoxDescription: 'fakeDoor.settings.logging.actionBox.description',
-				linkURL: `https://n8n-community.typeform.com/to/l7QOrERN#f=logging`,
-				uiLocations: ['settings'],
-			},
-			{
-				id: FAKE_DOOR_FEATURES.SHARING,
-				featureName: 'fakeDoor.credentialEdit.sharing.name',
-				actionBoxTitle: 'fakeDoor.credentialEdit.sharing.actionBox.title',
-				actionBoxDescription: 'fakeDoor.credentialEdit.sharing.actionBox.description',
-				linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=sharing',
-				uiLocations: ['credentialsModal'],
-			},
-		],
-		nodeViewInitialized: false,
-		addFirstStepOnLoad: false,
-		executionSidebarAutoRefresh: true,
-	},
-	getters: {
-		isVersionsOpen: (state: IUiState) => {
-			return state.modals[VERSIONS_MODAL_KEY].open;
-		},
-		getCurlCommand: (state: IUiState) => {
-			return state.modals[IMPORT_CURL_MODAL_KEY].curlCommand;
-		},
-		getHttpNodeParameters: (state: IUiState) => {
-			return state.modals[IMPORT_CURL_MODAL_KEY].httpNodeParameters;
-		},
-		isModalOpen: (state: IUiState) => {
-			return (name: string) => state.modals[name].open;
-		},
-		isModalActive: (state: IUiState) => {
-			return (name: string) => state.modalStack.length > 0 && name === state.modalStack[0];
-		},
-		getModalActiveId: (state: IUiState) => {
-			return (name: string) => state.modals[name].activeId;
-		},
-		getModalMode: (state: IUiState) => {
-			return (name: string) => state.modals[name].mode;
-		},
-		getModalData: (state: IUiState) => {
-			return (name: string) => state.modals[name].data;
-		},
-		sidebarMenuCollapsed: (state: IUiState): boolean => state.sidebarMenuCollapsed,
-		getFakeDoorFeatures: (state: IUiState): IFakeDoor[] => {
-			return state.fakeDoorFeatures;
-		},
-		getFakeDoorByLocation: (state: IUiState, getters) => (location: IFakeDoorLocation) => {
-			return getters.getFakeDoorFeatures.filter((fakeDoor: IFakeDoor) => fakeDoor.uiLocations.includes(location));
-		},
-		getFakeDoorById: (state: IUiState, getters) => (id: string) => {
-			return getters.getFakeDoorFeatures.find((fakeDoor: IFakeDoor) => fakeDoor.id.toString() === id);
-		},
-		getCurrentView: (state: IUiState) => state.currentView,
-		isNodeView: (state: IUiState) => [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(state.currentView),
-		getNDVDataIsEmpty: (state: IUiState) => (panel: 'input' | 'output'): boolean => state.ndv[panel].data.isEmpty,
-		isNodeViewInitialized: (state: IUiState) => state.nodeViewInitialized,
-		getAddFirstStepOnLoad: (state: IUiState) => state.addFirstStepOnLoad,
-		isExecutionSidebarAutoRefreshOn: (state: IUiState) => state.executionSidebarAutoRefresh,
-	},
-	mutations: {
-		setMode: (state: IUiState, params: {name: string, mode: string}) => {
-			const { name, mode } = params;
-			Vue.set(state.modals[name], 'mode', mode);
-		},
-		setFakeDoorFeatures: (state: IUiState, payload: IFakeDoor[]) => {
-			state.fakeDoorFeatures = payload;
-		},
-		setActiveId: (state: IUiState, params: {name: string, id: string}) => {
-			const { name, id } = params;
-			Vue.set(state.modals[name], 'activeId', id);
-		},
-		setModalData: (state: IUiState, params: { name: string, data: Record<string, unknown> }) => {
-			const { name, data } = params;
-
-			Vue.set(state.modals[name], 'data', data);
-		},
-		setCurlCommand: (state: IUiState, params: {name: string, command: string}) => {
-			const { name, command } = params;
-			Vue.set(state.modals[name], 'curlCommand', command);
-		},
-		setHttpNodeParameters: (state: IUiState, params: {name: string, parameters: string}) => {
-			const { name, parameters } = params;
-			Vue.set(state.modals[name], 'httpNodeParameters', parameters);
-		},
-		openModal: (state: IUiState, name: string) => {
-			Vue.set(state.modals[name], 'open', true);
-			state.modalStack = [name].concat(state.modalStack);
-		},
-		closeModal: (state: IUiState, name: string) => {
-			Vue.set(state.modals[name], 'open', false);
-			state.modalStack = state.modalStack.filter((openModalName: string) => {
-				return name !== openModalName;
-			});
-		},
-		closeAllModals: (state: IUiState) => {
-			Object.keys(state.modals).forEach((name: string) => {
-				if (state.modals[name].open) {
-					Vue.set(state.modals[name], 'open', false);
-				}
-			});
-			state.modalStack = [];
-		},
-		toggleSidebarMenuCollapse: (state: IUiState) => {
-			state.sidebarMenuCollapsed = !state.sidebarMenuCollapsed;
-		},
-		collapseSidebarMenu: (state: IUiState) => {
-			state.sidebarMenuCollapsed = true;
-		},
-		expandSidebarMenu: (state: IUiState) => {
-			state.sidebarMenuCollapsed = false;
-		},
-		setCurrentView: (state: IUiState, currentView: string) => {
-			state.currentView = currentView;
-		},
-		setNDVSessionId: (state: IUiState) => {
-			Vue.set(state.ndv, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
-		},
-		resetNDVSessionId: (state: IUiState) => {
-			Vue.set(state.ndv, 'sessionId', '');
-		},
-		setPanelDisplayMode: (state: IUiState, params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}) => {
-			Vue.set(state.ndv[params.pane], 'displayMode', params.mode);
-		},
-		setOutputPanelEditModeEnabled: (state: IUiState, payload: boolean) => {
-			Vue.set(state.ndv.output.editMode, 'enabled', payload);
-		},
-		setOutputPanelEditModeValue: (state: IUiState, payload: string) => {
-			Vue.set(state.ndv.output.editMode, 'value', payload);
-		},
-		setMainPanelRelativePosition(state: IUiState, relativePosition: number) {
-			state.mainPanelPosition = relativePosition;
-		},
-		setMappableNDVInputFocus(state: IUiState, paramName: string) {
-			Vue.set(state.ndv, 'focusedMappableInput', paramName);
-		},
-		draggableStartDragging(state: IUiState, {type, data}: {type: string, data: string}) {
-			state.draggable = {
-				isDragging: true,
-				type,
-				data,
-				canDrop: false,
-				stickyPosition: null,
-			};
-		},
-		draggableStopDragging(state: IUiState) {
-			state.draggable = {
-				isDragging: false,
-				type: '',
-				data: '',
-				canDrop: false,
-				stickyPosition: null,
-			};
-		},
-		setDraggableStickyPos(state: IUiState, position: XYPosition | null) {
-			Vue.set(state.draggable, 'stickyPosition', position);
-		},
-		setDraggableCanDrop(state: IUiState, canDrop: boolean) {
-			Vue.set(state.draggable, 'canDrop', canDrop);
-		},
-		setMappingTelemetry(state: IUiState, telemetry: {[key: string]: string | number | boolean}) {
-			state.ndv.mappingTelemetry = {...state.ndv.mappingTelemetry, ...telemetry};
-		},
-		resetMappingTelemetry(state: IUiState) {
-			state.ndv.mappingTelemetry = {};
-		},
-		setHoveringItem(state: IUiState, item: null | IUiState['ndv']['hoveringItem']) {
-			Vue.set(state.ndv, 'hoveringItem', item);
-		},
-		setNDVBranchIndex(state: IUiState, e: {pane: 'input' | 'output', branchIndex: number}) {
-			Vue.set(state.ndv[e.pane], 'branch', e.branchIndex);
-		},
-		setNDVPanelDataIsEmpty(state: IUiState, payload: {panel: 'input' | 'output', isEmpty: boolean}) {
-			Vue.set(state.ndv[payload.panel].data, 'isEmpty', payload.isEmpty);
-		},
-		setNodeViewInitialized(state: IUiState, isInitialized: boolean) {
-			state.nodeViewInitialized = isInitialized;
-		},
-		setAddFirstStepOnLoad(state: IUiState, addStep: boolean) {
-			state.addFirstStepOnLoad = addStep;
-		},
-		setExecutionsSidebarAutoRefresh(state: IUiState, autoRefresh: boolean) {
-			state.executionSidebarAutoRefresh = autoRefresh;
-		},
-	},
-	actions: {
-		openModal: async (context: ActionContext<IUiState, IRootState>, modalKey: string) => {
-			context.commit('openModal', modalKey);
-		},
-		openModalWithData: async (context: ActionContext<IUiState, IRootState>, payload: { name: string, data: Record<string, unknown> }) => {
-			context.commit('setModalData', payload);
-			context.commit('openModal', payload.name);
-		},
-		openDeleteUserModal: async (context: ActionContext<IUiState, IRootState>, { id }: {id: string}) => {
-			context.commit('setActiveId', { name: DELETE_USER_MODAL_KEY, id });
-			context.commit('openModal', DELETE_USER_MODAL_KEY);
-		},
-		openExistingCredential: async (context: ActionContext<IUiState, IRootState>, { id }: {id: string}) => {
-			context.commit('setActiveId', { name: CREDENTIAL_EDIT_MODAL_KEY, id });
-			context.commit('setMode', { name: CREDENTIAL_EDIT_MODAL_KEY, mode: 'edit' });
-			context.commit('openModal', CREDENTIAL_EDIT_MODAL_KEY);
-		},
-		setCurlCommand: async (context: ActionContext<IUiState, IRootState>, { command }: {command: string}) => {
-			context.commit('setCurlCommand', { name: IMPORT_CURL_MODAL_KEY, command });
-		},
-		setHttpNodeParameters: async (context: ActionContext<IUiState, IRootState>, { parameters }) => {
-			context.commit('setHttpNodeParameters', { name: IMPORT_CURL_MODAL_KEY, parameters });
-		},
-		openExisitngCredential: async (context: ActionContext<IUiState, IRootState>, { id }: {id: string}) => {
-			context.commit('setActiveId', { name: CREDENTIAL_EDIT_MODAL_KEY, id });
-			context.commit('setMode', { name: CREDENTIAL_EDIT_MODAL_KEY, mode: 'edit' });
-			context.commit('openModal', CREDENTIAL_EDIT_MODAL_KEY);
-		},
-		openNewCredential: async (context: ActionContext<IUiState, IRootState>, { type }: {type: string}) => {
-			context.commit('setActiveId', { name: CREDENTIAL_EDIT_MODAL_KEY, id: type });
-			context.commit('setMode', { name: CREDENTIAL_EDIT_MODAL_KEY, mode: 'new' });
-			context.commit('openModal', CREDENTIAL_EDIT_MODAL_KEY);
-		},
-		getNextOnboardingPrompt: async (context: ActionContext<IUiState, IRootState>) => {
-			const instanceId = context.rootGetters.instanceId;
-			const currentUser = context.rootGetters['users/currentUser'];
-			return await fetchNextOnboardingPrompt(instanceId, currentUser);
-		},
-		applyForOnboardingCall: async (context: ActionContext<IUiState, IRootState>, { email }) => {
-			const instanceId = context.rootGetters.instanceId;
-			const currentUser = context.rootGetters['users/currentUser'];
-			return await applyForOnboardingCall(instanceId, currentUser, email);
-		},
-		submitContactEmail: async (context: ActionContext<IUiState, IRootState>, { email, agree }) => {
-			const instanceId = context.rootGetters.instanceId;
-			const currentUser = context.rootGetters['users/currentUser'];
-
-			return await submitEmailOnSignup(instanceId, currentUser, email || currentUser.email, agree);
-		},
-		async openCommunityPackageUninstallConfirmModal(context: ActionContext<IUiState, IRootState>, packageName: string) {
-			context.commit('setActiveId', { name: COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,  id: packageName});
-			context.commit('setMode', { name: COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, mode: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL });
-			context.commit('openModal', COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
-		},
-		async openCommunityPackageUpdateConfirmModal(context: ActionContext<IUiState, IRootState>, packageName: string) {
-			context.commit('setActiveId', { name: COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,  id: packageName});
-			context.commit('setMode', { name: COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, mode: COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE });
-			context.commit('openModal', COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
-		},
-		async getCurlToJson(context: ActionContext<IUiState, IRootState>, curlCommand) {
-			return await getCurlToJson(context.rootGetters['getRestApiContext'], curlCommand);
-		},
-	},
-};
-
-export default module;
diff --git a/packages/editor-ui/src/modules/users.ts b/packages/editor-ui/src/modules/users.ts
deleted file mode 100644
index d1faa6f290..0000000000
--- a/packages/editor-ui/src/modules/users.ts
+++ /dev/null
@@ -1,227 +0,0 @@
-import { PERSONALIZATION_MODAL_KEY } from '@/constants';
-import {
-	changePassword,
-	deleteUser,
-	getCurrentUser,
-	getUsers,
-	inviteUsers,
-	login,
-	loginCurrentUser,
-	logout,
-	reinvite,
-	sendForgotPasswordEmail,
-	setupOwner,
-	signup,
-	submitPersonalizationSurvey,
-	skipOwnerSetup,
-	updateCurrentUser,
-	updateCurrentUserPassword,
-	validatePasswordToken,
-	validateSignupToken,
-} from '@/api/users';
-import Vue from 'vue';
-import {  ActionContext, Module } from 'vuex';
-import {
-	IInviteResponse,
-	IPersonalizationLatestVersion,
-	IRootState,
-	IUser,
-	IUserResponse,
-	IUsersState,
-} from '../Interface';
-import { getPersonalizedNodeTypes, isAuthorized, PERMISSIONS, ROLE } from './userHelpers';
-
-const isDefaultUser = (user: IUserResponse | null) => Boolean(user && user.isPending && user.globalRole && user.globalRole.name === ROLE.Owner);
-
-const isPendingUser = (user: IUserResponse | null) => Boolean(user && user.isPending);
-
-
-const module: Module<IUsersState, IRootState> = {
-	namespaced: true,
-	state: {
-		currentUserId: null,
-		users: {},
-	},
-	mutations: {
-		addUsers: (state: IUsersState, users: IUserResponse[]) => {
-			users.forEach((userResponse: IUserResponse) => {
-				const prevUser = state.users[userResponse.id] || {};
-				const updatedUser = {
-					...prevUser,
-					...userResponse,
-				};
-				const user: IUser = {
-					...updatedUser,
-					fullName: userResponse.firstName? `${updatedUser.firstName} ${updatedUser.lastName || ''}`: undefined,
-					isDefaultUser: isDefaultUser(updatedUser),
-					isPendingUser: isPendingUser(updatedUser),
-					isOwner: Boolean(updatedUser.globalRole && updatedUser.globalRole.name === ROLE.Owner),
-				};
-				Vue.set(state.users, user.id, user);
-			});
-		},
-		setCurrentUserId: (state: IUsersState, userId: string) => {
-			state.currentUserId = userId;
-		},
-		clearCurrentUserId: (state: IUsersState) => {
-			state.currentUserId = null;
-		},
-		deleteUser: (state: IUsersState, userId: string) => {
-			Vue.delete(state.users, userId);
-		},
-		setPersonalizationAnswers(state: IUsersState, answers: IPersonalizationLatestVersion) {
-			if (!state.currentUserId) {
-				return;
-			}
-
-			const user = state.users[state.currentUserId] as IUser | null;
-			if (!user) {
-				return;
-			}
-
-			Vue.set(user, 'personalizationAnswers', answers);
-		},
-	},
-	getters: {
-		allUsers(state: IUsersState): IUser[] {
-			return Object.values(state.users);
-		},
-		currentUserId(state: IUsersState): string | null {
-			return state.currentUserId;
-		},
-		currentUser(state: IUsersState): IUser | null {
-			return state.currentUserId ? state.users[state.currentUserId] : null;
-		},
-		getUserById(state: IUsersState): (userId: string) => IUser | null {
-			return (userId: string): IUser | null => state.users[userId];
-		},
-		globalRoleName(state: IUsersState, getters: any) { // tslint:disable-line:no-any
-			return getters.currentUser.globalRole.name;
-		},
-		canUserDeleteTags(state: IUsersState, getters: any, rootState: IRootState, rootGetters: any) { // tslint:disable-line:no-any
-			const currentUser = getters.currentUser;
-
-			return isAuthorized(PERMISSIONS.TAGS.CAN_DELETE_TAGS, currentUser);
-		},
-		canUserAccessSidebarUserInfo(state: IUsersState, getters: any, rootState: IRootState, rootGetters: any) { // tslint:disable-line:no-any
-			const currentUser = getters.currentUser;
-
-			return isAuthorized(PERMISSIONS.PRIMARY_MENU.CAN_ACCESS_USER_INFO, currentUser);
-		},
-		showUMSetupWarning(state: IUsersState, getters: any, rootState: IRootState, rootGetters: any) { // tslint:disable-line:no-any
-			const currentUser = getters.currentUser;
-
-			return isAuthorized(PERMISSIONS.USER_SETTINGS.VIEW_UM_SETUP_WARNING, currentUser);
-		},
-		personalizedNodeTypes(state: IUsersState, getters: any): string[] { // tslint:disable-line:no-any
-			const user = getters.currentUser as IUser | null;
-			if (!user) {
-				return [];
-			}
-
-			const answers = user.personalizationAnswers;
-			if (!answers) {
-				return [];
-			}
-
-			return getPersonalizedNodeTypes(answers);
-		},
-	},
-	actions: {
-		async loginWithCookie(context: ActionContext<IUsersState, IRootState>) {
-			const user = await loginCurrentUser(context.rootGetters.getRestApiContext);
-			if (user) {
-				context.commit('addUsers', [user]);
-				context.commit('setCurrentUserId', user.id);
-			}
-		},
-		async getCurrentUser(context: ActionContext<IUsersState, IRootState>) {
-			const user = await getCurrentUser(context.rootGetters.getRestApiContext);
-			if (user) {
-				context.commit('addUsers', [user]);
-				context.commit('setCurrentUserId', user.id);
-			}
-		},
-		async loginWithCreds(context: ActionContext<IUsersState, IRootState>, params: {email: string, password: string}) {
-			const user = await login(context.rootGetters.getRestApiContext, params);
-			if (user) {
-				context.commit('addUsers', [user]);
-				context.commit('setCurrentUserId', user.id);
-			}
-		},
-		async logout(context: ActionContext<IUsersState, IRootState>) {
-			await logout(context.rootGetters.getRestApiContext);
-			context.commit('clearCurrentUserId');
-		},
-		async createOwner(context: ActionContext<IUsersState, IRootState>, params: { firstName: string; lastName: string; email: string; password: string;}) {
-			const user = await setupOwner(context.rootGetters.getRestApiContext, params);
-			if (user) {
-				context.commit('addUsers', [user]);
-				context.commit('setCurrentUserId', user.id);
-				context.commit('settings/stopShowingSetupPage', null, { root: true });
-			}
-		},
-		async validateSignupToken(context: ActionContext<IUsersState, IRootState>, params: {inviteeId: string, inviterId: string}): Promise<{ inviter: { firstName: string, lastName: string } }> {
-			return await validateSignupToken(context.rootGetters.getRestApiContext, params);
-		},
-		async signup(context: ActionContext<IUsersState, IRootState>, params: { inviteeId: string; inviterId: string; firstName: string; lastName: string; password: string;}) {
-			const user = await signup(context.rootGetters.getRestApiContext, params);
-			if (user) {
-				context.commit('addUsers', [user]);
-				context.commit('setCurrentUserId', user.id);
-			}
-		},
-		async sendForgotPasswordEmail(context: ActionContext<IUsersState, IRootState>, params: {email: string}) {
-			await sendForgotPasswordEmail(context.rootGetters.getRestApiContext, params);
-		},
-		async validatePasswordToken(context: ActionContext<IUsersState, IRootState>, params: {token: string, userId: string}) {
-			await validatePasswordToken(context.rootGetters.getRestApiContext, params);
-		},
-		async changePassword(context: ActionContext<IUsersState, IRootState>, params: {token: string, password: string, userId: string}) {
-			await changePassword(context.rootGetters.getRestApiContext, params);
-		},
-		async updateUser(context: ActionContext<IUsersState, IRootState>, params: {id: string, firstName: string, lastName: string, email: string}) {
-			const user = await updateCurrentUser(context.rootGetters.getRestApiContext, params);
-			context.commit('addUsers', [user]);
-		},
-		async updateCurrentUserPassword(context: ActionContext<IUsersState, IRootState>, {password, currentPassword}: {password: string, currentPassword: string}) {
-			await updateCurrentUserPassword(context.rootGetters.getRestApiContext, {newPassword: password, currentPassword});
-		},
-		async deleteUser(context: ActionContext<IUsersState, IRootState>, params: { id: string, transferId?: string}) {
-			await deleteUser(context.rootGetters.getRestApiContext, params);
-			context.commit('deleteUser', params.id);
-		},
-		async fetchUsers(context: ActionContext<IUsersState, IRootState>) {
-			const users = await getUsers(context.rootGetters.getRestApiContext);
-			context.commit('addUsers', users);
-		},
-		async inviteUsers(context: ActionContext<IUsersState, IRootState>, params: Array<{email: string}>): Promise<IInviteResponse[]> {
-			const users = await inviteUsers(context.rootGetters.getRestApiContext, params);
-			context.commit('addUsers', users.map(({user}) => ({ isPending: true, ...user })));
-			return users;
-		},
-		async reinviteUser(context: ActionContext<IUsersState, IRootState>, params: {id: string}) {
-			await reinvite(context.rootGetters.getRestApiContext, params);
-		},
-		async submitPersonalizationSurvey(context: ActionContext<IUsersState, IRootState>, results: IPersonalizationLatestVersion) {
-			await submitPersonalizationSurvey(context.rootGetters.getRestApiContext, results);
-
-			context.commit('setPersonalizationAnswers', results);
-		},
-		async showPersonalizationSurvey(context: ActionContext<IUsersState, IRootState>) {
-			const surveyEnabled = context.rootGetters['settings/isPersonalizationSurveyEnabled'] as boolean;
-			const currentUser = context.getters.currentUser as IUser | null;
-			if (surveyEnabled && currentUser && !currentUser.personalizationAnswers) {
-				context.dispatch('ui/openModal', PERSONALIZATION_MODAL_KEY, {root: true});
-			}
-		},
-		async skipOwnerSetup(context: ActionContext<IUsersState, IRootState>) {
-			try {
-				context.commit('settings/stopShowingSetupPage', null, { root: true });
-				await skipOwnerSetup(context.rootGetters.getRestApiContext);
-			} catch (error) {}
-		},
-	},
-};
-
-export default module;
diff --git a/packages/editor-ui/src/modules/versions.ts b/packages/editor-ui/src/modules/versions.ts
index 56d28c6411..e992644bc2 100644
--- a/packages/editor-ui/src/modules/versions.ts
+++ b/packages/editor-ui/src/modules/versions.ts
@@ -1,4 +1,5 @@
 import { getNextVersions } from '@/api/versions';
+import { useRootStore } from '@/stores/n8nRootStore';
 import { ActionContext, Module } from 'vuex';
 import {
 	IRootState,
@@ -40,7 +41,7 @@ const module: Module<IVersionsState, IRootState> = {
 			state.currentVersion = versions.find((version) => version.name === currentVersion);
 		},
 		setVersionNotificationSettings(state: IVersionsState, settings: {enabled: true, endpoint: string, infoUrl: string}) {
-			state.versionNotificationSettings = settings;	
+			state.versionNotificationSettings = settings;
 		},
 	},
 	actions: {
@@ -48,8 +49,9 @@ const module: Module<IVersionsState, IRootState> = {
 			try {
 				const { enabled, endpoint } = context.state.versionNotificationSettings;
 				if (enabled && endpoint) {
-					const currentVersion = context.rootState.versionCli;
-					const instanceId = context.rootState.instanceId;
+					const rootStore = useRootStore();
+					const currentVersion = rootStore.versionCli;
+					const instanceId = rootStore.instanceId;
 					const versions = await getNextVersions(endpoint, currentVersion, instanceId);
 					context.commit('setVersions', {versions, currentVersion});
 				}
@@ -59,4 +61,4 @@ const module: Module<IVersionsState, IRootState> = {
 	},
 };
 
-export default module;
\ No newline at end of file
+export default module;
diff --git a/packages/editor-ui/src/modules/workflows.ts b/packages/editor-ui/src/modules/workflows.ts
deleted file mode 100644
index 5fdd05ecec..0000000000
--- a/packages/editor-ui/src/modules/workflows.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { getCurrentExecutions, getFinishedExecutions, getNewWorkflow } from '@/api/workflows';
-import { DUPLICATE_POSTFFIX, MAX_WORKFLOW_NAME_LENGTH, DEFAULT_NEW_WORKFLOW_NAME } from '@/constants';
-import { IDataObject } from 'n8n-workflow';
-import { ActionContext, Module } from 'vuex';
-import {
-	IExecutionsSummary,
-	IRootState,
-	IWorkflowsState,
-} from '../Interface';
-
-const module: Module<IWorkflowsState, IRootState> = {
-	namespaced: true,
-	state: {
-		currentWorkflowExecutions: [],
-		activeWorkflowExecution: null,
-		finishedExecutionsCount: 0,
-	},
-	actions: {
-		getNewWorkflowData: async (context: ActionContext<IWorkflowsState, IRootState>, name?: string): Promise<object> => {
-			let workflowData = {
-				name: '',
-				onboardingFlowEnabled: false,
-			};
-			try {
-				workflowData = await getNewWorkflow(context.rootGetters.getRestApiContext, name);
-			}
-			catch (e) {
-				// in case of error, default to original name
-				workflowData.name = name || DEFAULT_NEW_WORKFLOW_NAME;
-			}
-
-			context.commit('setWorkflowName', { newName: workflowData.name }, { root: true });
-			return workflowData;
-		},
-
-		getDuplicateCurrentWorkflowName: async (context: ActionContext<IWorkflowsState, IRootState>, currentWorkflowName: string): Promise<string> => {
-			if (currentWorkflowName && (currentWorkflowName.length + DUPLICATE_POSTFFIX.length) >= MAX_WORKFLOW_NAME_LENGTH) {
-				return currentWorkflowName;
-			}
-
-			let newName = `${currentWorkflowName}${DUPLICATE_POSTFFIX}`;
-
-			try {
-				const newWorkflow = await getNewWorkflow(context.rootGetters.getRestApiContext, newName );
-				newName = newWorkflow.name;
-			}
-			catch (e) {
-			}
-
-			return newName;
-		},
-		async loadCurrentWorkflowExecutions (
-			context: ActionContext<IWorkflowsState, IRootState>,
-			filter: { finished: boolean, status: string },
-		): Promise<IExecutionsSummary[]> {
-			let activeExecutions = [];
-			let finishedExecutions = [];
-			const requestFilter: IDataObject = { workflowId: context.rootGetters.workflowId };
-
-			if (!context.rootGetters.workflowId) {
-				return [];
-			}
-			try {
-				if (filter.status === ''|| !filter.finished) {
-					activeExecutions = await getCurrentExecutions(context.rootGetters.getRestApiContext, requestFilter);
-				}
-				if (filter.status === '' || filter.finished) {
-					if (filter.status === 'waiting') {
-						requestFilter.waitTill = true;
-					} else if (filter.status !== '')  {
-						requestFilter.finished = filter.status === 'success';
-					}
-					finishedExecutions = await getFinishedExecutions(context.rootGetters.getRestApiContext, requestFilter);
-				}
-				context.commit('setTotalFinishedExecutionsCount', finishedExecutions.count);
-				return [...activeExecutions, ...finishedExecutions.results || []];
-			} catch (error) {
-				throw(error);
-			}
-		},
-	},
-	mutations: {
-		setCurrentWorkflowExecutions (state: IWorkflowsState, executions: IExecutionsSummary[]) {
-			state.currentWorkflowExecutions = executions;
-		},
-		setActiveWorkflowExecution (state: IWorkflowsState, executionData: IExecutionsSummary) {
-			state.activeWorkflowExecution = executionData;
-		},
-		setTotalFinishedExecutionsCount (state: IWorkflowsState, count: number) {
-			state.finishedExecutionsCount = count;
-		},
-		deleteExecution (state: IWorkflowsState, execution: IExecutionsSummary) {
-			state.currentWorkflowExecutions.splice(state.currentWorkflowExecutions.indexOf(execution), 1);
-		},
-	},
-	getters: {
-		currentWorkflowExecutions: (state: IWorkflowsState): IExecutionsSummary[] => {
-			return state.currentWorkflowExecutions;
-		},
-		getActiveWorkflowExecution: (state: IWorkflowsState): IExecutionsSummary|null => {
-			return state.activeWorkflowExecution;
-		},
-		getExecutionDataById: (state: IWorkflowsState) => (id: string) => {
-			return state.currentWorkflowExecutions.find(execution => execution.id === id);
-		},
-		getTotalFinishedExecutionsCount: (state: IWorkflowsState) : number => {
-			return state.finishedExecutionsCount;
-		},
-		getAllLoadedFinishedExecutions: (state: IWorkflowsState) : IExecutionsSummary[] => {
-			return state.currentWorkflowExecutions.filter(ex => ex.finished === true || ex.stoppedAt !== undefined);
-		},
-	},
-};
-
-export default module;
diff --git a/packages/editor-ui/src/permissions.ts b/packages/editor-ui/src/permissions.ts
index 8048e9af7f..f5b34b17ce 100644
--- a/packages/editor-ui/src/permissions.ts
+++ b/packages/editor-ui/src/permissions.ts
@@ -7,6 +7,7 @@
 import {IUser, ICredentialsResponse, IRootState, IWorkflowDb} from "@/Interface";
 import {Store} from "vuex";
 import {EnterpriseEditionFeature} from "@/constants";
+import { useSettingsStore } from "./stores/settings";
 
 export enum UserRole {
 	InstanceOwner = 'isInstanceOwner',
@@ -54,8 +55,9 @@ export const parsePermissionsTable = (user: IUser, table: IPermissionsTable): IP
  */
 
 export const getCredentialPermissions = (user: IUser, credential: ICredentialsResponse, store: Store<IRootState>) => {
+	const settingsStore = useSettingsStore();
 	const table: IPermissionsTable = [
-		{ name: UserRole.ResourceOwner, test: () => !!(credential && credential.ownedBy && credential.ownedBy.id === user.id) || !store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing) },
+		{ name: UserRole.ResourceOwner, test: () => !!(credential && credential.ownedBy && credential.ownedBy.id === user.id) || !settingsStore.isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing) },
 		{ name: UserRole.ResourceReader, test: () => !!(credential && credential.sharedWith && credential.sharedWith.find((sharee) => sharee.id === user.id)) },
 		{ name: 'read', test: [UserRole.ResourceOwner, UserRole.InstanceOwner, UserRole.ResourceReader] },
 		{ name: 'save', test: [UserRole.ResourceOwner, UserRole.InstanceOwner] },
@@ -72,7 +74,7 @@ export const getCredentialPermissions = (user: IUser, credential: ICredentialsRe
 
 export const getWorkflowPermissions = (user: IUser, workflow: IWorkflowDb, store: Store<IRootState>) => {
 	const table: IPermissionsTable = [
-		// { name: UserRole.ResourceOwner, test: () => !!(workflow && workflow.ownedBy && workflow.ownedBy.id === user.id) || !store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing) },
+		// { name: UserRole.ResourceOwner, test: () => !!(workflow && workflow.ownedBy && workflow.ownedBy.id === user.id) || !useSettingsStore().isEnterpriseFeatureEnabled(EnterpriseEditionFeature.Sharing) },
 		{ name: UserRole.ResourceOwner, test: () => true },
 		// { name: UserRole.ResourceReader, test: () => !!(workflow && workflow.sharedWith && workflow.sharedWith.find((sharee) => sharee.id === user.id)) },
 		{ name: UserRole.ResourceReader, test: () => true },
diff --git a/packages/editor-ui/src/plugins/i18n/index.ts b/packages/editor-ui/src/plugins/i18n/index.ts
index c746f1b8fd..79e3718a60 100644
--- a/packages/editor-ui/src/plugins/i18n/index.ts
+++ b/packages/editor-ui/src/plugins/i18n/index.ts
@@ -14,6 +14,8 @@ import {
 } from 'n8n-design-system';
 
 import englishBaseText from './locales/en.json';
+import { useUIStore } from "@/stores/ui";
+import { useNDVStore } from "@/stores/ndv";
 import {INodeProperties, INodePropertyCollection, INodePropertyOptions} from "n8n-workflow";
 
 Vue.use(VueI18n);
@@ -22,7 +24,7 @@ locale.use('en');
 export let i18n: I18nClass;
 
 export function I18nPlugin(vue: typeof Vue, store: Store<IRootState>): void {
-	i18n = new I18nClass(store);
+	i18n = new I18nClass();
 
 	Object.defineProperty(vue, '$locale', {
 		get() { return i18n; },
@@ -34,11 +36,6 @@ export function I18nPlugin(vue: typeof Vue, store: Store<IRootState>): void {
 }
 
 export class I18nClass {
-	$store: Store<IRootState>;
-
-	constructor(store: Store<IRootState>) {
-		this.$store = store;
-	}
 
 	private get i18n(): VueI18n {
 		return i18nInstance;
@@ -95,7 +92,8 @@ export class I18nClass {
 	 * Namespace for methods to render text in the credentials details modal.
 	 */
 	credText () {
-		const credentialType = this.$store.getters.activeCredentialType;
+		const uiStore = useUIStore();
+		const credentialType = uiStore.activeCredentialType;
 		const credentialPrefix = `n8n-nodes-base.credentials.${credentialType}`;
 		const context = this;
 
@@ -189,8 +187,9 @@ export class I18nClass {
 	 * except for `eventTriggerDescription`.
 	 */
 	nodeText () {
-		const activeNode = this.$store.getters['ndv/activeNode'];
-		const nodeType = activeNode ? this.shortNodeType(activeNode.type) : ''; // unused in eventTriggerDescription
+		const ndvStore = useNDVStore();
+		const activeNode = ndvStore.activeNode;
+		const nodeType = activeNode ? this.shortNodeType(activeNode.type as string) : ''; // unused in eventTriggerDescription
 		const initialKey = `n8n-nodes-base.nodes.${nodeType}.nodeView`;
 		const context = this;
 
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 718dc61f4f..9a6a3c2212 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -67,6 +67,7 @@
 	"auth.changePassword.reenterNewPassword": "Re-enter New Password",
 	"auth.changePassword.tokenValidationError": "Issue validating invite token",
 	"auth.defaultPasswordRequirements": "8+ characters, at least 1 number and 1 capital letter",
+	"auth.validation.missingParameters": "Missing token or user id",
 	"auth.email": "Email",
 	"auth.firstName": "First Name",
 	"auth.lastName": "Last Name",
diff --git a/packages/editor-ui/src/plugins/telemetry/index.ts b/packages/editor-ui/src/plugins/telemetry/index.ts
index 51377ce678..d49a35f4e8 100644
--- a/packages/editor-ui/src/plugins/telemetry/index.ts
+++ b/packages/editor-ui/src/plugins/telemetry/index.ts
@@ -9,6 +9,7 @@ import { Route } from "vue-router";
 import type { INodeCreateElement, IRootState } from "@/Interface";
 import type { Store } from "vuex";
 import type { IUserNodesPanelSession } from "./telemetry.types";
+import { useSettingsStore } from "@/stores/settings";
 
 export function TelemetryPlugin(vue: typeof _Vue): void {
 	const telemetry = new Telemetry();
@@ -59,9 +60,11 @@ export class Telemetry {
 
 		const { config: { key, url } } = telemetrySettings;
 
+		// TODO: Remove this once migration to pinia is done
 		this.store = store;
+		const settingsStore = useSettingsStore();
 
-		const logLevel = store.getters['settings/logLevel'];
+		const logLevel = settingsStore.logLevel;
 
 		const logging = logLevel === 'debug' ? { logLevel: 'DEBUG' } : {};
 
@@ -113,7 +116,7 @@ export class Telemetry {
 			const pageName = route.name;
 			let properties: {[key: string]: string} = {};
 			if (this.store && route.meta && route.meta.telemetry && typeof route.meta.telemetry.getProperties === 'function') {
-				properties = route.meta.telemetry.getProperties(route, this.store);
+				properties = route.meta.telemetry.getProperties(route);
 			}
 
 			const category = (route.meta && route.meta.telemetry && route.meta.telemetry.pageCategory) || 'Editor';
diff --git a/packages/editor-ui/src/router.ts b/packages/editor-ui/src/router.ts
index 9ae53826ed..dd445ec99f 100644
--- a/packages/editor-ui/src/router.ts
+++ b/packages/editor-ui/src/router.ts
@@ -24,12 +24,12 @@ import TemplatesWorkflowView from '@/views/TemplatesWorkflowView.vue';
 import TemplatesSearchView from '@/views/TemplatesSearchView.vue';
 import CredentialsView from '@/views/CredentialsView.vue';
 import WorkflowsView from '@/views/WorkflowsView.vue';
-import { Store } from 'vuex';
-import { IPermissions, IRootState } from './Interface';
+import { IPermissions } from './Interface';
 import { LOGIN_STATUS, ROLE } from './modules/userHelpers';
 import { RouteConfigSingleView } from 'vue-router/types/router';
 import { VIEWS } from './constants';
-import { store } from './store';
+import { useSettingsStore } from './stores/settings';
+import { useTemplatesStore } from './stores/templates';
 
 Vue.use(Router);
 
@@ -37,18 +37,19 @@ interface IRouteConfig extends RouteConfigSingleView {
 	meta: {
 		nodeView?: boolean;
 		templatesEnabled?: boolean;
-		getRedirect?: (store: Store<IRootState>) => {name: string} | false;
+		getRedirect?: () => {name: string} | false;
 		permissions: IPermissions;
 		telemetry?: {
 			disabled?: true;
-			getProperties: (route: Route, store: Store<IRootState>) => object;
+			getProperties: (route: Route) => object;
 		};
 		scrollOffset?: number;
 	};
 }
 
-function getTemplatesRedirect(store: Store<IRootState>) {
-	const isTemplatesEnabled: boolean = store.getters['settings/isTemplatesEnabled'];
+function getTemplatesRedirect() {
+	const settingsStore = useSettingsStore();
+	const isTemplatesEnabled: boolean = settingsStore.isTemplatesEnabled;
 	if (!isTemplatesEnabled) {
 		return {name: VIEWS.NOT_FOUND};
 	}
@@ -71,9 +72,8 @@ const router = new Router({
 			path: '/',
 			name: VIEWS.HOMEPAGE,
 			meta: {
-				getRedirect(store: Store<IRootState>) {
+				getRedirect() {
 					const startOnNewWorkflowRouteFlag = window.posthog?.isFeatureEnabled?.('start-at-wf-empty-state');
-
 					return { name: startOnNewWorkflowRouteFlag ? VIEWS.NEW_WORKFLOW : VIEWS.WORKFLOWS };
 				},
 				permissions: {
@@ -93,10 +93,11 @@ const router = new Router({
 			meta: {
 				templatesEnabled: true,
 				telemetry: {
-					getProperties(route: Route, store: Store<IRootState>) {
+					getProperties(route: Route) {
+						const templatesStore = useTemplatesStore();
 						return {
 							collection_id: route.params.id,
-							wf_template_repo_session_id: store.getters['templates/currentSessionId'],
+							wf_template_repo_session_id: templatesStore.currentSessionId,
 						};
 					},
 				},
@@ -136,10 +137,11 @@ const router = new Router({
 				templatesEnabled: true,
 				getRedirect: getTemplatesRedirect,
 				telemetry: {
-					getProperties(route: Route, store: Store<IRootState>) {
+					getProperties(route: Route) {
+						const templatesStore = useTemplatesStore();
 						return {
 							template_id: route.params.id,
-							wf_template_repo_session_id: store.getters['templates/currentSessionId'],
+							wf_template_repo_session_id: templatesStore.currentSessionId,
 						};
 					},
 				},
@@ -163,9 +165,10 @@ const router = new Router({
 				// Templates view remembers it's scroll position on back
 				scrollOffset: 0,
 				telemetry: {
-					getProperties(route: Route, store: Store<IRootState>) {
+					getProperties(route: Route) {
+						const templatesStore = useTemplatesStore();
 						return {
-							wf_template_repo_session_id: store.getters['templates/currentSessionId'],
+							wf_template_repo_session_id: templatesStore.currentSessionId,
 						};
 					},
 				},
@@ -378,7 +381,8 @@ const router = new Router({
 					},
 					deny: {
 						shouldDeny: () => {
-							return store.getters['settings/isUserManagementEnabled'] === false;
+							const settingsStore = useSettingsStore();
+							return settingsStore.isUserManagementEnabled === false;
 						},
 					},
 				},
@@ -431,7 +435,7 @@ const router = new Router({
 			meta: {
 				telemetry: {
 					pageCategory: 'settings',
-					getProperties(route: Route, store: Store<IRootState>) {
+					getProperties(route: Route) {
 						return {
 							feature: 'users',
 						};
@@ -443,7 +447,8 @@ const router = new Router({
 					},
 					deny: {
 						shouldDeny: () => {
-							return store.getters['settings/isUserManagementEnabled'] === false;
+							const settingsStore = useSettingsStore();
+							return settingsStore.isUserManagementEnabled === false;
 						},
 					},
 				},
@@ -458,7 +463,7 @@ const router = new Router({
 			meta: {
 				telemetry: {
 					pageCategory: 'settings',
-					getProperties(route: Route, store: Store<IRootState>) {
+					getProperties(route: Route) {
 						return {
 							feature: 'personal',
 						};
@@ -483,7 +488,7 @@ const router = new Router({
 			meta: {
 				telemetry: {
 					pageCategory: 'settings',
-					getProperties(route: Route, store: Store<IRootState>) {
+					getProperties(route: Route) {
 						return {
 							feature: 'api',
 						};
@@ -495,7 +500,8 @@ const router = new Router({
 					},
 					deny: {
 						shouldDeny: () => {
-							return store.getters['settings/isPublicApiEnabled'] === false;
+							const settingsStore =  useSettingsStore();
+							return settingsStore.isPublicApiEnabled === false;
 						},
 					},
 				},
@@ -517,7 +523,8 @@ const router = new Router({
 					},
 					deny: {
 						shouldDeny: () => {
-							return store.getters['settings/isCommunityNodesFeatureEnabled'] === false;
+							const settingsStore = useSettingsStore();
+							return settingsStore.isCommunityNodesFeatureEnabled === false;
 						},
 					},
 				},
@@ -531,7 +538,7 @@ const router = new Router({
 			meta: {
 				telemetry: {
 					pageCategory: 'settings',
-					getProperties(route: Route, store: Store<IRootState>) {
+					getProperties(route: Route) {
 						return {
 							feature: route.params['featureId'],
 						};
diff --git a/packages/editor-ui/src/store.ts b/packages/editor-ui/src/store.ts
index c2d262cf4f..40405e5c09 100644
--- a/packages/editor-ui/src/store.ts
+++ b/packages/editor-ui/src/store.ts
@@ -1,1072 +1,89 @@
 import Vue from 'vue';
-import Vuex, {ActionContext} from 'vuex';
-
-import {
-	PLACEHOLDER_EMPTY_WORKFLOW_ID,
-} from '@/constants';
-
-import {
-	IConnection,
-	IConnections,
-	IDataObject,
-	INodeConnections,
-	INodeExecutionData,
-	INodeIssueData,
-	INodeTypeDescription,
-	IPinData,
-	IRunData,
-	ITaskData,
-	IWorkflowSettings,
-} from 'n8n-workflow';
-
-import {
-	IExecutionResponse,
-	IExecutionsCurrentSummaryExtended,
-	IRootState,
-	IMenuItem,
-	INodeUi,
-	INodeUpdatePropertiesInformation,
-	IPushDataExecutionFinished,
-	IPushDataNodeExecuteAfter,
-	IUpdateInformation,
-	IWorkflowDb,
-	XYPosition,
-	IRestApiContext,
-	IWorkflowsState,
-	IWorkflowsMap,
-} from './Interface';
-
-import nodeTypes from './modules/nodeTypes';
-import ndv from './modules/ndv';
+import Vuex from 'vuex';
 import credentials from './modules/credentials';
-import settings from './modules/settings';
 import tags from './modules/tags';
-import ui from './modules/ui';
-import users from './modules/users';
-import workflows from './modules/workflows';
-import versions from './modules/versions';
-import templates from './modules/templates';
-import {stringSizeInBytes} from "@/components/helpers";
-import {dataPinningEventBus} from "@/event-bus/data-pinning-event-bus";
-import communityNodes from './modules/communityNodes';
 import nodeCreator from './modules/nodeCreator';
-import { isJsonKeyObject } from './utils';
-import {getActiveWorkflows, getWorkflows} from "@/api/workflows";
-import { getPairedItemsMapping } from './pairedItemUtils';
+import versions from './modules/versions';
+import { IMenuItem } from 'n8n-design-system';
+import { useUIStore } from './stores/ui';
+import { IFakeDoor, INodeUi, IRootState } from './Interface';
+import { useSettingsStore } from './stores/settings';
+import { useUsersStore } from './stores/users';
+import { useRootStore } from './stores/n8nRootStore';
+import { useWorkflowsStore } from './stores/workflows';
+import { useNDVStore } from './stores/ndv';
+import { IWorkflowSettings } from 'n8n-workflow';
 
 Vue.use(Vuex);
 
-const state: IRootState = {
-	activeExecutions: [],
-	activeWorkflows: [],
-	activeActions: [],
-	activeCredentialType: null,
-	// @ts-ignore
-	baseUrl: import.meta.env.VUE_APP_URL_BASE_API ?? window.BASE_PATH ?? '/',
-	defaultLocale: 'en',
-	endpointWebhook: 'webhook',
-	endpointWebhookTest: 'webhook-test',
-	executionId: null,
-	executingNode: '',
-	executionWaitingForWebhook: false,
-	pushConnectionActive: true,
-	saveDataErrorExecution: 'all',
-	saveDataSuccessExecution: 'all',
-	saveManualExecutions: false,
-	timezone: 'America/New_York',
-	stateIsDirty: false,
-	executionTimeout: -1,
-	maxExecutionTimeout: Number.MAX_SAFE_INTEGER,
-	versionCli: '0.0.0',
-	oauthCallbackUrls: {},
-	n8nMetadata: {},
-	workflowExecutionData: null,
-	workflowExecutionPairedItemMappings: {},
-	lastSelectedNode: null,
-	lastSelectedNodeOutputIndex: null,
-	nodeViewOffsetPosition: [0, 0],
-	nodeViewMoveInProgress: false,
-	selectedNodes: [],
-	sessionId: Math.random().toString(36).substring(2, 15),
-	urlBaseEditor: 'http://localhost:5678',
-	urlBaseWebhook: 'http://localhost:5678/',
-	isNpmAvailable: false,
-	workflow: {
-		id: PLACEHOLDER_EMPTY_WORKFLOW_ID,
-		name: '',
-		active: false,
-		createdAt: -1,
-		updatedAt: -1,
-		connections: {},
-		nodes: [],
-		settings: {},
-		tags: [],
-		pinData: {},
-		hash: '',
-	},
-	workflowsById: {},
-	sidebarMenuItems: [],
-	instanceId: '',
-	nodeMetadata: {},
-	subworkflowExecutionError: null,
-};
 
+// Everything here is kept just to be used by front-end web hooks
+// as long as we have instances that use vuex store
 const modules = {
-	nodeTypes,
 	credentials,
 	tags,
-	settings,
-	templates,
-	workflows,
 	versions,
-	users,
-	ui,
-	communityNodes,
 	nodeCreator,
-	ndv,
+	users: {
+		namespaced: true,
+		getters: { globalRoleName () { return useUsersStore().globalRoleName; } },
+	},
+	ui: {
+		namespaced: true,
+		getters: { getFakeDoorFeatures () { return useUIStore().fakeDoorFeatures; } },
+	},
+	settings: {
+		namespaced: true,
+		getters: { isUserManagementEnabled () { return useSettingsStore().isUserManagementEnabled; } },
+	},
 };
 
 export const store = new Vuex.Store({
 	strict: import.meta.env.NODE_ENV !== 'production',
 	modules,
-	state,
 	mutations: {
-		// Active Actions
-		addActiveAction(state, action: string) {
-			if (!state.activeActions.includes(action)) {
-				state.activeActions.push(action);
-			}
+		addSidebarMenuItems(state: IRootState, menuItems: IMenuItem[]) {
+			const uiStore = useUIStore();
+			const updated = uiStore.sidebarMenuItems.concat(menuItems);
+			uiStore.sidebarMenuItems =  updated;
 		},
-
-		removeActiveAction(state, action: string) {
-			const actionIndex = state.activeActions.indexOf(action);
-			if (actionIndex !== -1) {
-				state.activeActions.splice(actionIndex, 1);
-			}
-		},
-
-		// Active Executions
-		addActiveExecution(state, newActiveExecution: IExecutionsCurrentSummaryExtended) {
-			// Check if the execution exists already
-			const activeExecution = state.activeExecutions.find(execution => {
-				return execution.id === newActiveExecution.id;
-			});
-
-			if (activeExecution !== undefined) {
-				// Exists already so no need to add it again
-				if (activeExecution.workflowName === undefined) {
-					activeExecution.workflowName = newActiveExecution.workflowName;
-				}
-				return;
-			}
-
-			state.activeExecutions.unshift(newActiveExecution);
-		},
-		finishActiveExecution(state, finishedActiveExecution: IPushDataExecutionFinished) {
-			// Find the execution to set to finished
-			const activeExecution = state.activeExecutions.find(execution => {
-				return execution.id === finishedActiveExecution.executionId;
-			});
-
-			if (activeExecution === undefined) {
-				// The execution could not be found
-				return;
-			}
-
-			if (finishedActiveExecution.executionId !== undefined) {
-				Vue.set(activeExecution, 'id', finishedActiveExecution.executionId);
-			}
-
-			Vue.set(activeExecution, 'finished', finishedActiveExecution.data.finished);
-			Vue.set(activeExecution, 'stoppedAt', finishedActiveExecution.data.stoppedAt);
-		},
-		setSubworkflowExecutionError(state, subworkflowExecutionError: Error | null) {
-			state.subworkflowExecutionError = subworkflowExecutionError;
-		},
-		setActiveExecutions(state, newActiveExecutions: IExecutionsCurrentSummaryExtended[]) {
-			Vue.set(state, 'activeExecutions', newActiveExecutions);
-		},
-
-		// Workflows
-		setWorkflows: (state: IRootState, workflows: IWorkflowDb[]) => {
-			state.workflowsById = workflows.reduce<IWorkflowsMap>((acc, workflow: IWorkflowDb) => {
-				if (workflow.id) {
-					acc[workflow.id] = workflow;
-				}
-
-				return acc;
-			}, {});
-		},
-		deleteWorkflow: (state: IRootState, id: string) => {
-			const { [id]: deletedWorkflow, ...workflows } = state.workflowsById;
-
-			state.workflowsById = workflows;
-		},
-		addWorkflow: (state: IRootState, workflow: IWorkflowDb) => {
-			Vue.set(state.workflowsById, workflow.id, workflow);
-		},
-
-		// Active Workflows
-		setActiveWorkflows(state, newActiveWorkflows: string[]) {
-			state.activeWorkflows = newActiveWorkflows;
-		},
-		setWorkflowActive(state, workflowId: string) {
-			state.stateIsDirty = false;
-			const index = state.activeWorkflows.indexOf(workflowId);
-			if (index === -1) {
-				state.activeWorkflows.push(workflowId);
-			}
-
-			if (state.workflowsById[workflowId]) {
-				Vue.set(state.workflowsById[workflowId], 'active', true);
-			}
-		},
-		setWorkflowInactive(state, workflowId: string) {
-			const index = state.activeWorkflows.indexOf(workflowId);
-			if (index !== -1) {
-				state.activeWorkflows.splice(index, 1);
-			}
-
-			if (state.workflowsById[workflowId]) {
-				Vue.set(state.workflowsById[workflowId], 'active', false);
-			}
-		},
-		// Set state condition dirty or not
-		// ** Dirty: if current workflow state has been synchronized with database AKA has it been saved
-		setStateDirty(state, dirty: boolean) {
-			state.stateIsDirty = dirty;
-		},
-
-		// Selected Nodes
-		addSelectedNode(state, node: INodeUi) {
-			state.selectedNodes.push(node);
-		},
-		removeNodeFromSelection(state, node: INodeUi) {
-			let index;
-			for (index in state.selectedNodes) {
-				if (state.selectedNodes[index].name === node.name) {
-					state.selectedNodes.splice(parseInt(index, 10), 1);
-					break;
-				}
-			}
-		},
-		resetSelectedNodes(state) {
-			Vue.set(state, 'selectedNodes', []);
-		},
-
-		// Pin data
-		pinData(state, payload: { node: INodeUi, data: INodeExecutionData[] }) {
-			if (!state.workflow.pinData) {
-				Vue.set(state.workflow, 'pinData', {});
-			}
-
-			if (!Array.isArray(payload.data)) {
-				payload.data = [payload.data];
-			}
-
-			const storedPinData = payload.data.map(item => isJsonKeyObject(item) ? item : { json: item });
-
-			Vue.set(state.workflow.pinData!, payload.node.name, storedPinData);
-			state.stateIsDirty = true;
-
-			dataPinningEventBus.$emit('pin-data', { [payload.node.name]: storedPinData });
-		},
-		unpinData(state, payload: { node: INodeUi }) {
-			if (!state.workflow.pinData) {
-				Vue.set(state.workflow, 'pinData', {});
-			}
-
-			Vue.set(state.workflow.pinData!, payload.node.name, undefined);
-			delete state.workflow.pinData![payload.node.name];
-
-			state.stateIsDirty = true;
-
-			dataPinningEventBus.$emit('unpin-data', { [payload.node.name]: undefined });
-		},
-
-		// Active
-		setActive(state, newActive: boolean) {
-			state.workflow.active = newActive;
-		},
-
-		// Connections
-		addConnection(state, data) {
-			if (data.connection.length !== 2) {
-				// All connections need two entries
-				// TODO: Check if there is an error or whatever that is supposed to be returned
-				return;
-			}
-
-			if (data.setStateDirty === true) {
-				state.stateIsDirty = true;
-			}
-
-			const sourceData: IConnection = data.connection[0];
-			const destinationData: IConnection = data.connection[1];
-
-			// Check if source node and type exist already and if not add them
-			if (!state.workflow.connections.hasOwnProperty(sourceData.node)) {
-				Vue.set(state.workflow.connections, sourceData.node, {});
-			}
-			if (!state.workflow.connections[sourceData.node].hasOwnProperty(sourceData.type)) {
-				Vue.set(state.workflow.connections[sourceData.node], sourceData.type, []);
-			}
-			if (state.workflow.connections[sourceData.node][sourceData.type].length < (sourceData.index + 1)) {
-				for (let i = state.workflow.connections[sourceData.node][sourceData.type].length; i <= sourceData.index; i++) {
-					state.workflow.connections[sourceData.node][sourceData.type].push([]);
-				}
-			}
-
-			// Check if the same connection exists already
-			const checkProperties = ['index', 'node', 'type'];
-			let propertyName: string;
-			let connectionExists = false;
-			connectionLoop:
-			for (const existingConnection of state.workflow.connections[sourceData.node][sourceData.type][sourceData.index]) {
-				for (propertyName of checkProperties) {
-					if ((existingConnection as any)[propertyName] !== (destinationData as any)[propertyName]) { // tslint:disable-line:no-any
-						continue connectionLoop;
-					}
-				}
-				connectionExists = true;
-				break;
-			}
-
-			// Add the new connection if it does not exist already
-			if (connectionExists === false) {
-				state.workflow.connections[sourceData.node][sourceData.type][sourceData.index].push(destinationData);
-			}
-
-		},
-		removeConnection(state, data) {
-			const sourceData = data.connection[0];
-			const destinationData = data.connection[1];
-
-			if (!state.workflow.connections.hasOwnProperty(sourceData.node)) {
-				return;
-			}
-			if (!state.workflow.connections[sourceData.node].hasOwnProperty(sourceData.type)) {
-				return;
-			}
-			if (state.workflow.connections[sourceData.node][sourceData.type].length < (sourceData.index + 1)) {
-				return;
-			}
-
-			state.stateIsDirty = true;
-
-			const connections = state.workflow.connections[sourceData.node][sourceData.type][sourceData.index];
-			for (const index in connections) {
-				if (connections[index].node === destinationData.node && connections[index].type === destinationData.type && connections[index].index === destinationData.index) {
-					// Found the connection to remove
-					connections.splice(parseInt(index, 10), 1);
-				}
-			}
-
-		},
-		removeAllConnections(state, data) {
-			if (data && data.setStateDirty === true) {
-				state.stateIsDirty = true;
-			}
-			state.workflow.connections = {};
-		},
-		removeAllNodeConnection(state, node: INodeUi) {
-			state.stateIsDirty = true;
-			// Remove all source connections
-			if (state.workflow.connections.hasOwnProperty(node.name)) {
-				delete state.workflow.connections[node.name];
-			}
-
-			// Remove all destination connections
-			const indexesToRemove = [];
-			let sourceNode: string, type: string, sourceIndex: string, connectionIndex: string, connectionData: IConnection;
-			for (sourceNode of Object.keys(state.workflow.connections)) {
-				for (type of Object.keys(state.workflow.connections[sourceNode])) {
-					for (sourceIndex of Object.keys(state.workflow.connections[sourceNode][type])) {
-						indexesToRemove.length = 0;
-						for (connectionIndex of Object.keys(state.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)])) {
-							connectionData = state.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)][parseInt(connectionIndex, 10)];
-							if (connectionData.node === node.name) {
-								indexesToRemove.push(connectionIndex);
-							}
-						}
-
-						indexesToRemove.forEach((index) => {
-							state.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)].splice(parseInt(index, 10), 1);
-						});
-					}
-				}
-			}
-		},
-
-		renameNodeSelectedAndExecution(state, nameData) {
-			state.stateIsDirty = true;
-			// If node has any WorkflowResultData rename also that one that the data
-			// does still get displayed also after node got renamed
-			if (state.workflowExecutionData !== null && state.workflowExecutionData.data && state.workflowExecutionData.data.resultData.runData.hasOwnProperty(nameData.old)) {
-				state.workflowExecutionData.data.resultData.runData[nameData.new] = state.workflowExecutionData.data.resultData.runData[nameData.old];
-				delete state.workflowExecutionData.data.resultData.runData[nameData.old];
-			}
-
-			// In case the renamed node was last selected set it also there with the new name
-			if (state.lastSelectedNode === nameData.old) {
-				state.lastSelectedNode = nameData.new;
-			}
-
-			Vue.set(state.nodeMetadata, nameData.new, state.nodeMetadata[nameData.old]);
-			Vue.delete(state.nodeMetadata, nameData.old);
-
-			if (state.workflow.pinData && state.workflow.pinData.hasOwnProperty(nameData.old)) {
-				Vue.set(state.workflow.pinData, nameData.new, state.workflow.pinData[nameData.old]);
-				Vue.delete(state.workflow.pinData, nameData.old);
-			}
-
-			state.workflowExecutionPairedItemMappings = getPairedItemsMapping(state.workflowExecutionData);
-		},
-
-		resetAllNodesIssues(state) {
-			state.workflow.nodes.forEach((node) => {
-				node.issues = undefined;
-			});
-
-			return true;
-		},
-
-		setNodeIssue(state, nodeIssueData: INodeIssueData) {
-
-			const node = state.workflow.nodes.find(node => {
-				return node.name === nodeIssueData.node;
-			});
-			if (!node) {
-				return false;
-			}
-
-			if (nodeIssueData.value === null) {
-				// Remove the value if one exists
-				if (node.issues === undefined || node.issues[nodeIssueData.type] === undefined) {
-					// No values for type exist so nothing has to get removed
-					return true;
-				}
-
-				// @ts-ignore
-				Vue.delete(node.issues, nodeIssueData.type);
-			} else {
-				if (node.issues === undefined) {
-					Vue.set(node, 'issues', {});
-				}
-
-				// Set/Overwrite the value
-				Vue.set(node.issues!, nodeIssueData.type, nodeIssueData.value);
-			}
-
-			return true;
-		},
-
-		// Id
-		setWorkflowId (state, id: string) {
-			state.workflow.id = id === 'new' ? PLACEHOLDER_EMPTY_WORKFLOW_ID : id;
-		},
-
-		// Name
-		setWorkflowName(state, data) {
-			if (data.setStateDirty === true) {
-				state.stateIsDirty = true;
-			}
-			state.workflow.name = data.newName;
-		},
-
-		setWorkflowHash(state, hash: string) {
-			state.workflow.hash = hash;
-		},
-
-		// replace invalid credentials in workflow
-		replaceInvalidWorkflowCredentials(state, {credentials, invalid, type}) {
-			state.workflow.nodes.forEach((node) => {
-				if (!node.credentials || !node.credentials[type]) {
-					return;
-				}
-				const nodeCredentials = node.credentials[type];
-
-				if (typeof nodeCredentials === 'string' && nodeCredentials === invalid.name) {
-					node.credentials[type] = credentials;
-					return;
-				}
-
-				if (nodeCredentials.id === null) {
-					if (nodeCredentials.name === invalid.name) {
-						node.credentials[type] = credentials;
-					}
-					return;
-				}
-
-				if (nodeCredentials.id === invalid.id) {
-					node.credentials[type] = credentials;
-				}
-			});
-		},
-
-		// Nodes
-		addNode(state, nodeData: INodeUi) {
-			if (!nodeData.hasOwnProperty('name')) {
-				// All nodes have to have a name
-				// TODO: Check if there is an error or whatever that is supposed to be returned
-				return;
-			}
-
-			state.workflow.nodes.push(nodeData);
-		},
-		removeNode(state, node: INodeUi) {
-			Vue.delete(state.nodeMetadata, node.name);
-
-			if (state.workflow.pinData && state.workflow.pinData.hasOwnProperty(node.name)) {
-				Vue.delete(state.workflow.pinData, node.name);
-			}
-
-			for (let i = 0; i < state.workflow.nodes.length; i++) {
-				if (state.workflow.nodes[i].name === node.name) {
-					state.workflow.nodes.splice(i, 1);
-					state.stateIsDirty = true;
-					return;
-				}
-			}
-		},
-		removeAllNodes(state, data) {
-			if (data.setStateDirty === true) {
-				state.stateIsDirty = true;
-			}
-
-			if (data.removePinData) {
-				Vue.set(state.workflow, 'pinData', {});
-			}
-
-			state.workflow.nodes.splice(0, state.workflow.nodes.length);
-			state.nodeMetadata = {};
-		},
-		updateNodeProperties(state, updateInformation: INodeUpdatePropertiesInformation) {
-			// Find the node that should be updated
-			const node = state.workflow.nodes.find(node => {
-				return node.name === updateInformation.name;
-			});
-
-			if (node) {
-				for (const key of Object.keys(updateInformation.properties)) {
-					state.stateIsDirty = true;
-					Vue.set(node, key, updateInformation.properties[key]);
-				}
-			}
-		},
-		setNodeValue(state, updateInformation: IUpdateInformation) {
-			// Find the node that should be updated
-			const node = state.workflow.nodes.find(node => {
-				return node.name === updateInformation.name;
-			});
-
-			if (node === undefined || node === null) {
-				throw new Error(`Node with the name "${updateInformation.name}" could not be found to set parameter.`);
-			}
-
-			state.stateIsDirty = true;
-			Vue.set(node, updateInformation.key, updateInformation.value);
-		},
-		setNodeParameters(state, updateInformation: IUpdateInformation) {
-			// Find the node that should be updated
-			const node = state.workflow.nodes.find(node => {
-				return node.name === updateInformation.name;
-			});
-
-			if (node === undefined || node === null) {
-				throw new Error(`Node with the name "${updateInformation.name}" could not be found to set parameter.`);
-			}
-
-			state.stateIsDirty = true;
-			Vue.set(node, 'parameters', updateInformation.value);
-
-			if (!state.nodeMetadata[node.name]) {
-				Vue.set(state.nodeMetadata, node.name, {});
-			}
-			Vue.set(state.nodeMetadata[node.name], 'parametersLastUpdatedAt', Date.now());
-		},
-
-		// Node-View
-		setNodeViewMoveInProgress(state, value: boolean) {
-			state.nodeViewMoveInProgress = value;
-		},
-		setNodeViewOffsetPosition(state, data) {
-			state.nodeViewOffsetPosition = data.newOffset;
-		},
-
-		// Active Execution
-		setExecutingNode(state, executingNode: string) {
-			state.executingNode = executingNode;
-		},
-		setExecutionWaitingForWebhook(state, newWaiting: boolean) {
-			state.executionWaitingForWebhook = newWaiting;
-		},
-		setActiveExecutionId(state, executionId: string | null) {
-			state.executionId = executionId;
-		},
-
-		// Push Connection
-		setPushConnectionActive(state, newActive: boolean) {
-			state.pushConnectionActive = newActive;
-		},
-
-		// Webhooks
-		setUrlBaseWebhook(state, urlBaseWebhook: string) {
-			const url = urlBaseWebhook.endsWith('/') ? urlBaseWebhook : `${urlBaseWebhook}/`;
-			Vue.set(state, 'urlBaseWebhook', url);
-		},
-		setUrlBaseEditor(state, urlBaseEditor: string) {
-			const url = urlBaseEditor.endsWith('/') ? urlBaseEditor : `${urlBaseEditor}/`;
-			Vue.set(state, 'urlBaseEditor', url);
-		},
-		setEndpointWebhook(state, endpointWebhook: string) {
-			Vue.set(state, 'endpointWebhook', endpointWebhook);
-		},
-		setEndpointWebhookTest(state, endpointWebhookTest: string) {
-			Vue.set(state, 'endpointWebhookTest', endpointWebhookTest);
-		},
-
-		setSaveDataErrorExecution(state, newValue: string) {
-			Vue.set(state, 'saveDataErrorExecution', newValue);
-		},
-		setSaveDataSuccessExecution(state, newValue: string) {
-			Vue.set(state, 'saveDataSuccessExecution', newValue);
-		},
-		setSaveManualExecutions(state, saveManualExecutions: boolean) {
-			Vue.set(state, 'saveManualExecutions', saveManualExecutions);
-		},
-		setTimezone(state, timezone: string) {
-			Vue.set(state, 'timezone', timezone);
-		},
-		setExecutionTimeout(state, executionTimeout: number) {
-			Vue.set(state, 'executionTimeout', executionTimeout);
-		},
-		setMaxExecutionTimeout(state, maxExecutionTimeout: number) {
-			Vue.set(state, 'maxExecutionTimeout', maxExecutionTimeout);
-		},
-		setVersionCli(state, version: string) {
-			Vue.set(state, 'versionCli', version);
-		},
-		setInstanceId(state, instanceId: string) {
-			Vue.set(state, 'instanceId', instanceId);
-		},
-		setOauthCallbackUrls(state, urls: IDataObject) {
-			Vue.set(state, 'oauthCallbackUrls', urls);
-		},
-		setN8nMetadata(state, metadata: IDataObject) {
-			Vue.set(state, 'n8nMetadata', metadata);
-		},
-		setDefaultLocale(state, locale: string) {
-			Vue.set(state, 'defaultLocale', locale);
-		},
-		setIsNpmAvailable(state, isNpmAvailable: boolean) {
-			Vue.set(state, 'isNpmAvailable', isNpmAvailable);
-		},
-		setActiveCredentialType(state, activeCredentialType: string) {
-			state.activeCredentialType = activeCredentialType;
-		},
-		setLastSelectedNode(state, nodeName: string) {
-			state.lastSelectedNode = nodeName;
-		},
-
-		setLastSelectedNodeOutputIndex(state, outputIndex: number | null) {
-			state.lastSelectedNodeOutputIndex = outputIndex;
-		},
-
-		setWorkflowExecutionData(state, workflowResultData: IExecutionResponse | null) {
-			state.workflowExecutionData = workflowResultData;
-			state.workflowExecutionPairedItemMappings = getPairedItemsMapping(state.workflowExecutionData);
-		},
-		addNodeExecutionData(state, pushData: IPushDataNodeExecuteAfter): void {
-			if (state.workflowExecutionData === null || !state.workflowExecutionData.data) {
-				throw new Error('The "workflowExecutionData" is not initialized!');
-			}
-			if (state.workflowExecutionData.data.resultData.runData[pushData.nodeName] === undefined) {
-				Vue.set(state.workflowExecutionData.data.resultData.runData, pushData.nodeName, []);
-			}
-			state.workflowExecutionData.data.resultData.runData[pushData.nodeName].push(pushData.data);
-			state.workflowExecutionPairedItemMappings = getPairedItemsMapping(state.workflowExecutionData);
-		},
-		clearNodeExecutionData(state, nodeName: string): void {
-			if (state.workflowExecutionData === null || !state.workflowExecutionData.data) {
-				return;
-			}
-
-			Vue.delete(state.workflowExecutionData.data.resultData.runData, nodeName);
-		},
-
-		setWorkflowSettings(state, workflowSettings: IWorkflowSettings) {
-			Vue.set(state.workflow, 'settings', workflowSettings);
-		},
-
-		setWorkflowPinData(state, pinData: IPinData) {
-			Vue.set(state.workflow, 'pinData', pinData || {});
-
-			dataPinningEventBus.$emit('pin-data', pinData || {});
-		},
-
-		setWorkflowTagIds(state, tags: string[]) {
-			Vue.set(state.workflow, 'tags', tags);
-		},
-
-		addWorkflowTagIds(state, tags: string[]) {
-			Vue.set(state.workflow, 'tags', [...new Set([...(state.workflow.tags || []), ...tags])]);
-		},
-
-		removeWorkflowTagId(state, tagId: string) {
-			const tags = state.workflow.tags as string[];
-			const updated = tags.filter((id: string) => id !== tagId);
-
-			Vue.set(state.workflow, 'tags', updated);
-		},
-
-		// Workflow
-		setWorkflow(state, workflow: IWorkflowDb) {
-			Vue.set(state, 'workflow', workflow);
-
-			if (!state.workflow.hasOwnProperty('active')) {
-				Vue.set(state.workflow, 'active', false);
-			}
-			if (!state.workflow.hasOwnProperty('connections')) {
-				Vue.set(state.workflow, 'connections', {});
-			}
-			if (!state.workflow.hasOwnProperty('createdAt')) {
-				Vue.set(state.workflow, 'createdAt', -1);
-			}
-			if (!state.workflow.hasOwnProperty('updatedAt')) {
-				Vue.set(state.workflow, 'updatedAt', -1);
-			}
-			if (!state.workflow.hasOwnProperty('id')) {
-				Vue.set(state.workflow, 'id', PLACEHOLDER_EMPTY_WORKFLOW_ID);
-			}
-			if (!state.workflow.hasOwnProperty('nodes')) {
-				Vue.set(state.workflow, 'nodes', []);
-			}
-			if (!state.workflow.hasOwnProperty('settings')) {
-				Vue.set(state.workflow, 'settings', {});
-			}
-		},
-
-		addSidebarMenuItems (state, menuItems: IMenuItem[]) {
-			const updated = state.sidebarMenuItems.concat(menuItems);
-			Vue.set(state, 'sidebarMenuItems', updated);
+		setFakeDoorFeatures(state: IRootState, fakeDoors: IFakeDoor[]): void {
+			useUIStore().fakeDoorFeatures = fakeDoors;
 		},
 	},
 	getters: {
-		workflowExecutionPairedItemMappings: (state): IRootState['workflowExecutionPairedItemMappings'] => {
-			return state.workflowExecutionPairedItemMappings;
+		getFakeDoorItems(): IFakeDoor[] {
+			return useUIStore().fakeDoorFeatures;
 		},
-		executedNode: (state): string | undefined => {
-			return state.workflowExecutionData ? state.workflowExecutionData.executedNode : undefined;
+		isUserManagementEnabled(): boolean {
+			return useSettingsStore().isUserManagementEnabled;
 		},
-		activeCredentialType: (state): string | null => {
-			return state.activeCredentialType;
+		n8nMetadata(): IRootState['n8nMetadata'] {
+			return useRootStore().n8nMetadata;
 		},
-
-		subworkflowExecutionError: (state): Error | null => {
-			return state.subworkflowExecutionError;
+		instanceId(): string {
+			return useRootStore().instanceId;
 		},
-		workflowHash: (state): string | undefined => {
-			return state.workflow.hash;
+		workflowId(): string {
+			return useWorkflowsStore().workflowId;
 		},
-
-		isActionActive: (state) => (action: string): boolean => {
-			return state.activeActions.includes(action);
+		workflowName(): string {
+			return useWorkflowsStore().workflowName;
 		},
-
-		isNewWorkflow: (state) => {
-			return state.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID;
+		activeNode(): INodeUi | null {
+			return useNDVStore().activeNode;
 		},
-
-		currentWorkflowHasWebhookNode: (state: IRootState): boolean => {
-			return !!state.workflow.nodes.find((node: INodeUi) => !!node.webhookId);
+		workflowSettings(): IWorkflowSettings {
+			return useWorkflowsStore().workflowSettings;
 		},
-
-		getActiveExecutions: (state): IExecutionsCurrentSummaryExtended[] => {
-			return state.activeExecutions;
+		activeExecutionId(): string {
+			return useWorkflowsStore().activeExecutionId || '';
 		},
-
-		getParametersLastUpdated: (state): ((name: string) => number | undefined) => {
-			return (nodeName: string) => state.nodeMetadata[nodeName] && state.nodeMetadata[nodeName].parametersLastUpdatedAt;
+		nodeByName: (state: IRootState) => (nodeName: string): INodeUi | null => {
+			return useWorkflowsStore().getNodeByName(nodeName);
 		},
-
-		getBaseUrl: (state): string => {
-			return state.baseUrl;
-		},
-		getRestUrl: (state): string => {
-			let endpoint = 'rest';
-			if (import.meta.env.VUE_APP_ENDPOINT_REST) {
-				endpoint = import.meta.env.VUE_APP_ENDPOINT_REST;
-			}
-			return `${state.baseUrl}${endpoint}`;
-		},
-		getRestApiContext(state): IRestApiContext {
-			let endpoint = 'rest';
-			if (import.meta.env.VUE_APP_ENDPOINT_REST) {
-				endpoint = import.meta.env.VUE_APP_ENDPOINT_REST;
-			}
-			return {
-				baseUrl: `${state.baseUrl}${endpoint}`,
-				sessionId: state.sessionId,
-			};
-		},
-		getWebhookBaseUrl: (state): string => {
-			return state.urlBaseWebhook;
-		},
-		getWebhookUrl: (state): string => {
-			return `${state.urlBaseWebhook}${state.endpointWebhook}`;
-		},
-		getWebhookTestUrl: (state): string => {
-			return `${state.urlBaseEditor}${state.endpointWebhookTest}`;
-		},
-
-		getStateIsDirty: (state): boolean => {
-			return state.stateIsDirty;
-		},
-
-		instanceId: (state): string => {
-			return state.instanceId;
-		},
-
-		saveDataErrorExecution: (state): string => {
-			return state.saveDataErrorExecution;
-		},
-		saveDataSuccessExecution: (state): string => {
-			return state.saveDataSuccessExecution;
-		},
-		saveManualExecutions: (state): boolean => {
-			return state.saveManualExecutions;
-		},
-		timezone: (state): string => {
-			return state.timezone;
-		},
-		executionTimeout: (state): number => {
-			return state.executionTimeout;
-		},
-		maxExecutionTimeout: (state): number => {
-			return state.maxExecutionTimeout;
-		},
-		versionCli: (state): string => {
-			return state.versionCli;
-		},
-		oauthCallbackUrls: (state): object => {
-			return state.oauthCallbackUrls;
-		},
-		n8nMetadata: (state): object => {
-			return state.n8nMetadata;
-		},
-		defaultLocale: (state): string => {
-			return state.defaultLocale;
-		},
-
-		// Push Connection
-		pushConnectionActive: (state): boolean => {
-			return state.pushConnectionActive;
-		},
-		sessionId: (state): string => {
-			return state.sessionId;
-		},
-
-		// Workflows
-		allWorkflows(state: IRootState): IWorkflowDb[] {
-			return Object.values(state.workflowsById)
-				.sort((a, b) => a.name.localeCompare(b.name));
-		},
-
-		// Active Workflows
-		getActiveWorkflows: (state): string[] => {
-			return state.activeWorkflows;
-		},
-
-		workflowTriggerNodes: (state, getters) => {
-			return state.workflow.nodes.filter(node => {
-				const nodeType = getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
-				return nodeType && nodeType.group.includes('trigger');
-			});
-		},
-
-		getNodeViewOffsetPosition: (state): XYPosition => {
-			return state.nodeViewOffsetPosition;
-		},
-		isNodeViewMoveInProgress: (state): boolean => {
-			return state.nodeViewMoveInProgress;
-		},
-
-		// Selected Nodes
-		getSelectedNodes: (state): INodeUi[] => {
-			const seen = new Set();
-			return state.selectedNodes.filter((node: INodeUi) => {
-				// dedupe for instances when same node is selected in different ways
-				if (!seen.has(node.id)) {
-					seen.add(node.id);
-					return true;
-				}
-
-				return false;
-			});
-		},
-		isNodeSelected: (state) => (nodeName: string): boolean => {
-			let index;
-			for (index in state.selectedNodes) {
-				if (state.selectedNodes[index].name === nodeName) {
-					return true;
-				}
-			}
-			return false;
-		},
-
-		isActive: (state): boolean => {
-			return state.workflow.active;
-		},
-		allConnections: (state): IConnections => {
-			return state.workflow.connections;
-		},
-		outgoingConnectionsByNodeName: (state) => (nodeName: string): INodeConnections => {
-			if (state.workflow.connections.hasOwnProperty(nodeName)) {
-				return state.workflow.connections[nodeName];
-			}
-			return {};
-		},
-		allNodes: (state): INodeUi[] => {
-			return state.workflow.nodes;
-		},
-		nodesByName: (state: IRootState): { [name: string]: INodeUi } => {
-			return state.workflow.nodes.reduce((accu: { [name: string]: INodeUi }, node) => {
-				accu[node.name] = node;
-				return accu;
-			}, {});
-		},
-		getNodeByName: (state, getters) => (nodeName: string): INodeUi | null => {
-			return getters.nodesByName[nodeName] || null;
-		},
-		getNodeById: (state, getters) => (nodeId: string): INodeUi | undefined => {
-			return state.workflow.nodes.find((node: INodeUi) => node.id === nodeId);
-		},
-		nodesIssuesExist: (state): boolean => {
-			for (const node of state.workflow.nodes) {
-				if (node.issues === undefined || Object.keys(node.issues).length === 0) {
-					continue;
-				}
-				return true;
-			}
-			return false;
-		},
-		/**
-		 * Pin data
-		 */
-		pinData: (state): IPinData | undefined => {
-			return state.workflow.pinData;
-		},
-		pinDataByNodeName: (state) => (nodeName: string) => {
-			if (!state.workflow.pinData || !state.workflow.pinData[nodeName]) return undefined;
-
-			return state.workflow.pinData[nodeName].map(item => item.json);
-		},
-		pinDataSize: (state, getters, rootState, rootGetters) => {
-			const activeNode = rootGetters['ndv/activeNodeName'];
-			return state.workflow.nodes
-				.reduce((acc, node) => {
-					if (typeof node.pinData !== 'undefined' && node.name !== activeNode) {
-						acc += stringSizeInBytes(node.pinData);
-					}
-
-					return acc;
-				}, 0);
-		},
-
-		activeNode: (state, getters, rootState, rootGetters): INodeUi | null => {
-			// kept here for FE hooks
-			return rootGetters['ndv/activeNode'];
-		},
-
-		/**
-		 * Getter for node default names ending with a number: `'S3'`, `'Magento 2'`, etc.
-		 */
-		nativelyNumberSuffixedDefaults: (_, getters): string[] => {
-			const { 'nodeTypes/allNodeTypes': allNodeTypes } = getters as {
-				['nodeTypes/allNodeTypes']: Array<INodeTypeDescription & { defaults: { name: string } }>;
-			};
-
-			return allNodeTypes.reduce<string[]>((acc, cur) => {
-				if (/\d$/.test(cur.defaults.name)) acc.push(cur.defaults.name);
-				return acc;
-			}, []);
-		},
-		lastSelectedNode: (state, getters): INodeUi | null => {
-			return getters.getNodeByName(state.lastSelectedNode);
-		},
-		lastSelectedNodeOutputIndex: (state, getters): number | null => {
-			return state.lastSelectedNodeOutputIndex;
-		},
-
-		// Active Execution
-		executingNode: (state): string | null => {
-			return state.executingNode;
-		},
-		activeExecutionId: (state): string | null => {
-			return state.executionId;
-		},
-		executionWaitingForWebhook: (state): boolean => {
-			return state.executionWaitingForWebhook;
-		},
-
-		workflowName: (state): string => {
-			return state.workflow.name;
-		},
-		workflowId: (state): string => {
-			return state.workflow.id;
-		},
-
-		workflowSettings: (state): IWorkflowSettings => {
-			if (state.workflow.settings === undefined) {
-				return {};
-			}
-			return state.workflow.settings;
-		},
-
-		workflowTags: (state): string[] => {
-			return state.workflow.tags as string[];
-		},
-
-		// Workflow Result Data
-		getWorkflowExecution: (state): IExecutionResponse | null => {
-			return state.workflowExecutionData;
-		},
-		getWorkflowRunData: (state): IRunData | null => {
-			if (!state.workflowExecutionData || !state.workflowExecutionData.data || !state.workflowExecutionData.data.resultData) {
-				return null;
-			}
-
-			return state.workflowExecutionData.data.resultData.runData;
-		},
-		getWorkflowResultDataByNodeName: (state, getters) => (nodeName: string): ITaskData[] | null => {
-			const workflowRunData = getters.getWorkflowRunData;
-
-			if (workflowRunData === null) {
-				return null;
-			}
-			if (!workflowRunData.hasOwnProperty(nodeName)) {
-				return null;
-			}
-			return workflowRunData[nodeName];
-		},
-
-		sidebarMenuItems: (state): IMenuItem[] => {
-			return state.sidebarMenuItems;
-		},
-	},
-	actions: {
-		fetchAllWorkflows: async (context: ActionContext<IWorkflowsState, IRootState>): Promise<IWorkflowDb[]> => {
-			const workflows = await getWorkflows(context.rootGetters.getRestApiContext);
-			context.commit('setWorkflows', workflows);
-
-			return workflows;
-		},
-		fetchActiveWorkflows: async (context: ActionContext<IWorkflowsState, IRootState>): Promise<string[]> => {
-			const activeWorkflows = await getActiveWorkflows(context.rootGetters.getRestApiContext);
-			context.commit('setActiveWorkflows', activeWorkflows);
-
-			return activeWorkflows;
+		allNodes(): INodeUi[] {
+			return useWorkflowsStore().allNodes;
 		},
 	},
 });
diff --git a/packages/editor-ui/src/stores/communityNodes.ts b/packages/editor-ui/src/stores/communityNodes.ts
new file mode 100644
index 0000000000..482fc705a8
--- /dev/null
+++ b/packages/editor-ui/src/stores/communityNodes.ts
@@ -0,0 +1,82 @@
+import { getInstalledCommunityNodes, installNewPackage, uninstallPackage, updatePackage } from "@/api/communityNodes";
+import { getAvailableCommunityPackageCount } from "@/api/settings";
+import { defineStore } from "pinia";
+import { useRootStore } from "./n8nRootStore";
+import { PublicInstalledPackage } from 'n8n-workflow';
+import Vue from "vue";
+import { CommunityNodesState, CommunityPackageMap } from "@/Interface";
+import { STORES } from "@/constants";
+
+const LOADER_DELAY = 300;
+
+export const useCommunityNodesStore = defineStore(STORES.COMMUNITY_NODES, {
+	state: (): CommunityNodesState => ({
+		// -1 means that package count has not been fetched yet
+		availablePackageCount: -1,
+		installedPackages: {},
+	}),
+	getters: {
+		getInstalledPackages() : PublicInstalledPackage[] {
+			return Object.values(this.installedPackages).sort((a, b) => a.packageName.localeCompare(b.packageName));
+		},
+		getInstalledPackageByName() {
+			return (name: string): PublicInstalledPackage => this.installedPackages[name];
+		},
+	},
+	actions: {
+		async fetchAvailableCommunityPackageCount(): Promise<void> {
+			if (this.availablePackageCount === -1) {
+				this.availablePackageCount = await getAvailableCommunityPackageCount();
+			}
+		},
+		async fetchInstalledPackages(): Promise<void> {
+			const rootStore = useRootStore();
+			const installedPackages = await getInstalledCommunityNodes(rootStore.getRestApiContext);
+			this.setInstalledPackages(installedPackages);
+			const timeout = installedPackages.length > 0 ? 0: LOADER_DELAY;
+			setTimeout(() => {
+				return;
+			}, timeout);
+		},
+		async installPackage(packageName: string): Promise<void> {
+			try {
+				const rootStore = useRootStore();
+				await installNewPackage(rootStore.getRestApiContext, packageName);
+				await this.fetchInstalledPackages();
+			} catch (error) {
+				throw (error);
+			}
+		},
+		async uninstallPackage(packageName: string): Promise<void> {
+			try {
+				const rootStore = useRootStore();
+				await uninstallPackage(rootStore.getRestApiContext, packageName);
+				this.removePackageByName(packageName);
+			} catch (error) {
+				throw (error);
+			}
+		},
+		async updatePackage(packageName: string): Promise<void> {
+			try {
+				const rootStore = useRootStore();
+				const packageToUpdate: PublicInstalledPackage = this.getInstalledPackageByName(packageName);
+				const updatedPackage: PublicInstalledPackage = await updatePackage(rootStore.getRestApiContext, packageToUpdate.packageName);
+				this.updatePackageObject(updatedPackage);
+			} catch (error) {
+				throw (error);
+			}
+		},
+		setInstalledPackages(packages: PublicInstalledPackage[]) {
+			this.installedPackages = packages.reduce((packageMap: CommunityPackageMap, pack: PublicInstalledPackage) => {
+				packageMap[pack.packageName] = pack;
+				return packageMap;
+			}, {});
+		},
+		removePackageByName(name: string): void {
+			Vue.delete(this.installedPackages, name);
+		},
+		updatePackageObject(newPackage: PublicInstalledPackage) {
+			this.installedPackages[newPackage.packageName] = newPackage;
+		},
+	},
+});
diff --git a/packages/editor-ui/src/stores/n8nRootStore.ts b/packages/editor-ui/src/stores/n8nRootStore.ts
new file mode 100644
index 0000000000..37cac9c669
--- /dev/null
+++ b/packages/editor-ui/src/stores/n8nRootStore.ts
@@ -0,0 +1,109 @@
+import { STORES } from '@/constants';
+import { INodeUi, IRestApiContext, RootState } from '@/Interface';
+import { IDataObject } from 'n8n-workflow';
+import { defineStore } from 'pinia';
+import Vue from 'vue';
+import { useNodeTypesStore } from './nodeTypes';
+
+export const useRootStore = defineStore(STORES.ROOT, {
+	state: (): RootState => ({
+		// @ts-ignore
+		baseUrl: import.meta.env.VUE_APP_URL_BASE_API ? import.meta.env.VUE_APP_URL_BASE_API : (window.BASE_PATH === '/%BASE_PATH%/' ? '/' : window.BASE_PATH),
+		defaultLocale: 'en',
+		endpointWebhook: 'webhook',
+		endpointWebhookTest: 'webhook-test',
+		pushConnectionActive: true,
+		timezone: 'America/New_York',
+		executionTimeout: -1,
+		maxExecutionTimeout: Number.MAX_SAFE_INTEGER,
+		versionCli: '0.0.0',
+		oauthCallbackUrls: {},
+		n8nMetadata: {},
+		sessionId: Math.random().toString(36).substring(2, 15),
+		urlBaseWebhook: 'http://localhost:5678/',
+		urlBaseEditor: 'http://localhost:5678',
+		isNpmAvailable: false,
+		instanceId: '',
+	}),
+	getters: {
+		getWebhookUrl(): string {
+			return `${this.urlBaseWebhook}${this.endpointWebhook}`;
+		},
+
+		getWebhookTestUrl(): string {
+			return `${this.urlBaseEditor}${this.endpointWebhookTest}`;
+		},
+
+		getRestUrl(): string {
+			let endpoint = 'rest';
+			if (import.meta.env.VUE_APP_ENDPOINT_REST) {
+				endpoint = import.meta.env.VUE_APP_ENDPOINT_REST;
+			}
+			return `${this.baseUrl}${endpoint}`;
+		},
+
+		getRestApiContext(): IRestApiContext {
+			let endpoint = 'rest';
+			if (import.meta.env.VUE_APP_ENDPOINT_REST) {
+				endpoint = import.meta.env.VUE_APP_ENDPOINT_REST;
+			}
+			return {
+				baseUrl: `${this.baseUrl}${endpoint}`,
+				sessionId: this.sessionId,
+			};
+		},
+		// TODO: Waiting for nodeTypes store
+		/**
+		 * Getter for node default names ending with a number: `'S3'`, `'Magento 2'`, etc.
+		 */
+		 nativelyNumberSuffixedDefaults: (): string[] => {
+			return useNodeTypesStore().allNodeTypes.reduce<string[]>((acc, cur) => {
+				if (/\d$/.test(cur.defaults.name as string)) acc.push(cur.defaults.name as string);
+				return acc;
+			}, []);
+		},
+	},
+	actions: {
+		setUrlBaseWebhook(urlBaseWebhook: string): void {
+			const url = urlBaseWebhook.endsWith('/') ? urlBaseWebhook : `${urlBaseWebhook}/`;
+			Vue.set(this, 'urlBaseWebhook', url);
+		},
+		setUrlBaseEditor(urlBaseEditor: string): void {
+			const url = urlBaseEditor.endsWith('/') ? urlBaseEditor : `${urlBaseEditor}/`;
+			Vue.set(this, 'urlBaseEditor', url);
+		},
+		setEndpointWebhook(endpointWebhook: string): void {
+			Vue.set(this, 'endpointWebhook', endpointWebhook);
+		},
+		setEndpointWebhookTest(endpointWebhookTest: string): void {
+			Vue.set(this, 'endpointWebhookTest', endpointWebhookTest);
+		},
+		setTimezone(timezone: string): void {
+			Vue.set(this, 'timezone', timezone);
+		},
+		setExecutionTimeout(executionTimeout: number): void {
+			Vue.set(this, 'executionTimeout', executionTimeout);
+		},
+		setMaxExecutionTimeout(maxExecutionTimeout: number): void {
+			Vue.set(this, 'maxExecutionTimeout', maxExecutionTimeout);
+		},
+		setVersionCli(version: string): void {
+			Vue.set(this, 'versionCli', version);
+		},
+		setInstanceId(instanceId: string): void {
+			Vue.set(this, 'instanceId', instanceId);
+		},
+		setOauthCallbackUrls(urls: IDataObject): void {
+			Vue.set(this, 'oauthCallbackUrls', urls);
+		},
+		setN8nMetadata(metadata: IDataObject): void {
+			Vue.set(this, 'n8nMetadata', metadata);
+		},
+		setDefaultLocale(locale: string): void {
+			Vue.set(this, 'defaultLocale', locale);
+		},
+		setIsNpmAvailable(isNpmAvailable: boolean): void {
+			Vue.set(this, 'isNpmAvailable', isNpmAvailable);
+		},
+	},
+});
diff --git a/packages/editor-ui/src/stores/ndv.ts b/packages/editor-ui/src/stores/ndv.ts
new file mode 100644
index 0000000000..34b0f72bb6
--- /dev/null
+++ b/packages/editor-ui/src/stores/ndv.ts
@@ -0,0 +1,180 @@
+import { STORES } from "@/constants";
+import { INodeUi, IRunDataDisplayMode, NDVState, XYPosition } from "@/Interface";
+import { IRunData } from "n8n-workflow";
+import { defineStore } from "pinia";
+import Vue from "vue";
+import { useWorkflowsStore } from "./workflows";
+
+export const useNDVStore =  defineStore(STORES.NDV, {
+	state: (): NDVState => ({
+		activeNodeName: null,
+		mainPanelDimensions: {},
+		sessionId: '',
+		input: {
+			displayMode: 'table',
+			nodeName: undefined,
+			run: undefined,
+			branch: undefined,
+			data: {
+				isEmpty: true,
+			},
+		},
+		output: {
+			displayMode: 'table',
+			branch: undefined,
+			data: {
+				isEmpty: true,
+			},
+			editMode: {
+				enabled: false,
+				value: '',
+			},
+		},
+		focusedMappableInput: '',
+		mappingTelemetry: {},
+		hoveringItem: null,
+		draggable: {
+			isDragging: false,
+			type: '',
+			data: '',
+			canDrop: false,
+			stickyPosition: null,
+		},
+	}),
+	getters: {
+		activeNode(): INodeUi | null {
+			const workflowsStore = useWorkflowsStore();
+			return workflowsStore.getNodeByName(this.activeNodeName || '');
+		},
+		ndvInputData(): IRunData[] {
+			const workflowsStore = useWorkflowsStore();
+			const executionData = workflowsStore.getWorkflowExecution;
+			const inputNodeName: string | undefined = this.input.nodeName;
+			const inputRunIndex: number = this.input.run ?? 0;
+			const inputBranchIndex: number = this.input.branch?? 0;
+
+			if (!executionData || !inputNodeName || inputRunIndex === undefined || inputBranchIndex === undefined) {
+				return [];
+			}
+
+			return executionData.data?.resultData?.runData?.[inputNodeName]?.[inputRunIndex]?.data?.main?.[inputBranchIndex];
+		},
+		getPanelDisplayMode() {
+			return (panel: 'input' | 'output') => this[panel].displayMode;
+		},
+		inputPanelDisplayMode(): IRunDataDisplayMode {
+			return this.input.displayMode;
+		},
+		outputPanelDisplayMode(): IRunDataDisplayMode {
+			return this.output.displayMode;
+		},
+		isDraggableDragging(): boolean {
+			return this.draggable.isDragging;
+		},
+		draggableType(): string {
+			return this.draggable.type;
+		},
+		draggableData(): string {
+			return this.draggable.data;
+		},
+		canDraggableDrop(): boolean {
+			return this.draggable.canDrop;
+		},
+		outputPanelEditMode(): NDVState['output']['editMode'] {
+			return this.output.editMode;
+		},
+		getMainPanelDimensions() {
+			return (panelType: string) => {
+				const defaults = { relativeRight: 1, relativeLeft: 1, relativeWidth: 1 };
+				return {...defaults, ...this.mainPanelDimensions[panelType]};
+			};
+		},
+		draggableStickyPos(): XYPosition | null {
+			return this.draggable.stickyPosition;
+		},
+		ndvInputNodeName(): string | undefined {
+			return this.input.nodeName;
+		},
+		ndvInputRunIndex(): number | undefined {
+			return this.input.run;
+		},
+		ndvInputBranchIndex(): number | undefined {
+			return this.input.branch;
+		},
+		isDNVDataEmpty() {
+			return (panel: 'input' | 'output'): boolean => this[panel].data.isEmpty;
+		},
+	},
+	actions: {
+		setInputNodeName(name: string | undefined): void {
+			Vue.set(this.input, 'nodeName', name);
+		},
+		setInputRunIndex(run?: string): void  {
+			Vue.set(this.input, 'run', run);
+		},
+		setMainPanelDimensions(params: { panelType:string, dimensions: { relativeLeft?: number, relativeRight?: number, relativeWidth?: number }}): void  {
+			Vue.set(
+				this.mainPanelDimensions,
+				params.panelType,
+				{...this.mainPanelDimensions[params.panelType], ...params.dimensions },
+			);
+		},
+		setNDVSessionId(): void  {
+			Vue.set(this, 'sessionId', `ndv-${Math.random().toString(36).slice(-8)}`);
+		},
+		resetNDVSessionId(): void  {
+			Vue.set(this, 'sessionId', '');
+		},
+		setPanelDisplayMode(params: {pane: 'input' | 'output', mode: IRunDataDisplayMode}): void {
+			Vue.set(this[params.pane], 'displayMode', params.mode);
+		},
+		setOutputPanelEditModeEnabled(isEnabled: boolean): void  {
+			Vue.set(this.output.editMode, 'enabled', isEnabled);
+		},
+		setOutputPanelEditModeValue(payload: string): void {
+			Vue.set(this.output.editMode, 'value', payload);
+		},
+		setMappableNDVInputFocus(paramName: string): void {
+			Vue.set(this, 'focusedMappableInput', paramName);
+		},
+		draggableStartDragging({type, data}: {type: string, data: string}): void {
+			this.draggable = {
+				isDragging: true,
+				type,
+				data,
+				canDrop: false,
+				stickyPosition: null,
+			};
+		},
+		draggableStopDragging(): void {
+			this.draggable = {
+				isDragging: false,
+				type: '',
+				data: '',
+				canDrop: false,
+				stickyPosition: null,
+			};
+		},
+		setDraggableStickyPos(position: XYPosition | null): void {
+			Vue.set(this.draggable, 'stickyPosition', position);
+		},
+		setDraggableCanDrop(canDrop: boolean): void {
+			Vue.set(this.draggable, 'canDrop', canDrop);
+		},
+		setMappingTelemetry(telemetry: {[key: string]: string | number | boolean}): void {
+			this.mappingTelemetry = {...this.mappingTelemetry, ...telemetry};
+		},
+		resetMappingTelemetry(): void {
+			this.mappingTelemetry = {};
+		},
+		setHoveringItem(item: null | NDVState['hoveringItem']): void {
+			Vue.set(this, 'hoveringItem', item);
+		},
+		setNDVBranchIndex(e: {pane: 'input' | 'output', branchIndex: number}): void {
+			Vue.set(this[e.pane], 'branch', e.branchIndex);
+		},
+		setNDVPanelDataIsEmpty(payload: {panel: 'input' | 'output', isEmpty: boolean}): void {
+			Vue.set(this[payload.panel].data, 'isEmpty', payload.isEmpty);
+		},
+	},
+});
diff --git a/packages/editor-ui/src/stores/nodeTypes.ts b/packages/editor-ui/src/stores/nodeTypes.ts
new file mode 100644
index 0000000000..7e63e61172
--- /dev/null
+++ b/packages/editor-ui/src/stores/nodeTypes.ts
@@ -0,0 +1,157 @@
+import { getNodeParameterOptions, getNodesInformation, getNodeTranslationHeaders, getNodeTypes, getResourceLocatorResults } from "@/api/nodeTypes";
+import { DEFAULT_NODETYPE_VERSION, STORES } from "@/constants";
+import { ICategoriesWithNodes, INodeCreateElement, INodeTypesState, IResourceLocatorReqParams } from "@/Interface";
+import { getCategoriesWithNodes, getCategorizedList } from "@/modules/nodeTypesHelpers";
+import { addHeaders, addNodeTranslation } from "@/plugins/i18n";
+import { store } from "@/store";
+import { omit } from "@/utils";
+import { ILoadOptions, INodeCredentials, INodeListSearchResult, INodeParameters, INodePropertyOptions, INodeTypeDescription, INodeTypeNameVersion } from 'n8n-workflow';
+import { defineStore } from "pinia";
+import Vue from "vue";
+import { useRootStore } from "./n8nRootStore";
+import { useUsersStore } from "./users";
+
+function getNodeVersions(nodeType: INodeTypeDescription) {
+	return Array.isArray(nodeType.version) ? nodeType.version : [nodeType.version];
+}
+
+export const useNodeTypesStore =  defineStore(STORES.NODE_TYPES, {
+	state: (): INodeTypesState => ({
+		nodeTypes: {},
+	}),
+	getters: {
+		allNodeTypes(): INodeTypeDescription[] {
+			return Object.values(this.nodeTypes).reduce<INodeTypeDescription[]>((allNodeTypes, nodeType) => {
+				const versionNumbers = Object.keys(nodeType).map(Number);
+				const allNodeVersions = versionNumbers.map(version => nodeType[version]);
+
+				return [...allNodeTypes, ...allNodeVersions];
+			}, []);
+		},
+		allLatestNodeTypes(): INodeTypeDescription[] {
+			return Object.values(this.nodeTypes).reduce<INodeTypeDescription[]>((allLatestNodeTypes, nodeVersions) => {
+				const versionNumbers = Object.keys(nodeVersions).map(Number);
+				const latestNodeVersion = nodeVersions[Math.max(...versionNumbers)];
+
+				if (!latestNodeVersion) return allLatestNodeTypes;
+
+				return [...allLatestNodeTypes, latestNodeVersion];
+			}, []);
+		},
+		getNodeType() {
+			return (nodeTypeName: string, version?: number): INodeTypeDescription | null => {
+				const nodeVersions = this.nodeTypes[nodeTypeName];
+
+				if (!nodeVersions) return null;
+
+				const versionNumbers = Object.keys(nodeVersions).map(Number);
+				const nodeType = nodeVersions[version || Math.max(...versionNumbers)];
+
+				return nodeType || null;
+			};
+		},
+		isTriggerNode() {
+			return (nodeTypeName: string) => {
+				const nodeType = this.getNodeType(nodeTypeName);
+				return !!(nodeType && nodeType.group.includes('trigger'));
+			};
+		},
+		visibleNodeTypes(): INodeTypeDescription[] {
+			return this.allLatestNodeTypes.filter((nodeType: INodeTypeDescription) => !nodeType.hidden);
+		},
+		categoriesWithNodes(): ICategoriesWithNodes {
+			const usersStore = useUsersStore();
+			return getCategoriesWithNodes(this.visibleNodeTypes, usersStore.personalizedNodeTypes);
+		},
+		categorizedItems(): INodeCreateElement[] {
+			return getCategorizedList(this.categoriesWithNodes);
+		},
+	},
+	actions: {
+		setNodeTypes(newNodeTypes: INodeTypeDescription[] = []): void {
+			const nodeTypes = newNodeTypes.reduce<Record<string, Record<string, INodeTypeDescription>>>((acc, newNodeType) => {
+				const newNodeVersions = getNodeVersions(newNodeType);
+
+				if (newNodeVersions.length === 0) {
+					const singleVersion = { [DEFAULT_NODETYPE_VERSION]: newNodeType };
+
+					acc[newNodeType.name] = singleVersion;
+					return acc;
+				}
+
+				for (const version of newNodeVersions) {
+					if (acc[newNodeType.name]) {
+						acc[newNodeType.name][version] = newNodeType;
+					} else {
+						acc[newNodeType.name] = { [version]: newNodeType };
+					}
+				}
+
+				return acc;
+			}, { ...this.nodeTypes });
+
+			Vue.set(this, 'nodeTypes', nodeTypes);
+		},
+		removeNodeTypes(nodeTypesToRemove: INodeTypeDescription[]): void {
+			this.nodeTypes = nodeTypesToRemove.reduce(
+				(oldNodes, newNodeType) => omit(newNodeType.name, oldNodes),
+				this.nodeTypes,
+			);
+		},
+		async getNodesInformation(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
+			const rootStore = useRootStore();
+			const nodesInformation = await getNodesInformation(rootStore.getRestApiContext, nodeInfos);
+
+			nodesInformation.forEach(nodeInformation => {
+				if (nodeInformation.translation) {
+					const nodeType = nodeInformation.name.replace('n8n-nodes-base.', '');
+
+					addNodeTranslation(
+						{ [nodeType]: nodeInformation.translation },
+						rootStore.defaultLocale,
+					);
+				}
+			});
+			this.setNodeTypes(nodesInformation);
+		},
+		async getFullNodesProperties(nodesToBeFetched: INodeTypeNameVersion[]): Promise<void> {
+			const vuexStore = store;
+			vuexStore.dispatch('credentials/fetchCredentialTypes', true);
+			await this.getNodesInformation(nodesToBeFetched);
+		},
+		async getNodeTypes(): Promise<void> {
+			const rootStore = useRootStore();
+			const nodeTypes = await getNodeTypes(rootStore.getRestApiContext);
+			if (nodeTypes.length) {
+				this.setNodeTypes(nodeTypes);
+			}
+		},
+		async getNodeTranslationHeaders(): Promise<void> {
+			const rootStore = useRootStore();
+			const headers = await getNodeTranslationHeaders(rootStore.getRestApiContext);
+
+			if (headers) {
+				addHeaders(headers, rootStore.defaultLocale);
+			}
+		},
+		async getNodeParameterOptions(
+			sendData: {
+				nodeTypeAndVersion: INodeTypeNameVersion,
+				path: string,
+				methodName?: string,
+				loadOptions?: ILoadOptions,
+				currentNodeParameters: INodeParameters,
+				credentials?: INodeCredentials,
+			},
+		): Promise<INodePropertyOptions[]> {
+			const rootStore = useRootStore();
+			return getNodeParameterOptions(rootStore.getRestApiContext, sendData);
+		},
+		async getResourceLocatorResults(
+			sendData: IResourceLocatorReqParams,
+		): Promise<INodeListSearchResult> {
+			const rootStore = useRootStore();
+			return getResourceLocatorResults(rootStore.getRestApiContext, sendData);
+		},
+	},
+});
diff --git a/packages/editor-ui/src/stores/settings.ts b/packages/editor-ui/src/stores/settings.ts
new file mode 100644
index 0000000000..91707b5069
--- /dev/null
+++ b/packages/editor-ui/src/stores/settings.ts
@@ -0,0 +1,235 @@
+import { createApiKey, deleteApiKey, getApiKey } from "@/api/api-keys";
+import { getPromptsData, getSettings, submitContactInfo, submitValueSurvey } from "@/api/settings";
+import { testHealthEndpoint } from "@/api/templates";
+import { CONTACT_PROMPT_MODAL_KEY, EnterpriseEditionFeature, STORES, VALUE_SURVEY_MODAL_KEY } from "@/constants";
+import { ILogLevel, IN8nPromptResponse, IN8nPrompts, IN8nUISettings, IN8nValueSurveyData, ISettingsState, WorkflowCallerPolicyDefaultOption } from "@/Interface";
+import { store } from "@/store";
+import { ITelemetrySettings } from "n8n-workflow";
+import { defineStore } from "pinia";
+import Vue from "vue";
+import { useRootStore } from "./n8nRootStore";
+import { useUIStore } from "./ui";
+import { useUsersStore } from "./users";
+
+export const useSettingsStore = defineStore(STORES.SETTINGS, {
+	state: (): ISettingsState => ({
+		settings: {} as IN8nUISettings,
+		promptsData: {} as IN8nPrompts,
+		userManagement: {
+			enabled: false,
+			showSetupOnFirstLoad: false,
+			smtpSetup: false,
+		},
+		templatesEndpointHealthy: false,
+		api: {
+			enabled: false,
+			latestVersion: 0,
+			path: '/',
+		},
+		onboardingCallPromptEnabled: false,
+		saveDataErrorExecution: 'all',
+		saveDataSuccessExecution: 'all',
+		saveManualExecutions: false,
+	}),
+	getters: {
+		isEnterpriseFeatureEnabled() {
+			return (feature: EnterpriseEditionFeature) : boolean => this.settings.enterprise[feature];
+		},
+		versionCli(): string {
+			return this.settings.versionCli;
+		},
+		isUserManagementEnabled(): boolean {
+			return this.userManagement.enabled;
+		},
+		isPublicApiEnabled(): boolean {
+			return this.api.enabled;
+		},
+		publicApiLatestVersion(): number {
+			return this.api.latestVersion;
+		},
+		publicApiPath(): string {
+			return this.api.path;
+		},
+		showSetupPage() : boolean {
+			return this.userManagement.showSetupOnFirstLoad === true;
+		},
+		isDesktopDeployment() : boolean {
+			if (!this.settings.deployment) {
+				return false;
+			}
+			return this.settings.deployment?.type.startsWith('desktop_');
+		},
+		isCloudDeployment() : boolean {
+			if (!this.settings.deployment) {
+				return false;
+			}
+			return this.settings.deployment.type === 'cloud';
+		},
+		isSmtpSetup() : boolean {
+			return this.userManagement.smtpSetup;
+		},
+		isPersonalizationSurveyEnabled() : boolean {
+			return (this.settings.telemetry && this.settings.telemetry.enabled) && this.settings.personalizationSurveyEnabled;
+		},
+		telemetry() : ITelemetrySettings {
+			return this.settings.telemetry;
+		},
+		logLevel() : ILogLevel {
+			return this.settings.logLevel;
+		},
+		isTelemetryEnabled() : boolean {
+			return this.settings.telemetry && this.settings.telemetry.enabled;
+		},
+		areTagsEnabled() : boolean {
+			return this.settings.workflowTagsDisabled !== undefined ? !this.settings.workflowTagsDisabled : true;
+		},
+		isHiringBannerEnabled() : boolean {
+			return this.settings.hiringBannerEnabled;
+		},
+		isTemplatesEnabled(): boolean {
+			return Boolean(this.settings.templates && this.settings.templates.enabled);
+		},
+		isTemplatesEndpointReachable() : boolean {
+			return this.templatesEndpointHealthy;
+		},
+		templatesHost() : string {
+			return this.settings.templates.host;
+		},
+		isCommunityNodesFeatureEnabled() : boolean {
+			return this.settings.communityNodesEnabled;
+		},
+		isNpmAvailable() : boolean {
+			return this.settings.isNpmAvailable;
+		},
+		allowedModules() : { builtIn?: string[]; external?: string[] } {
+			return this.settings.allowedModules;
+		},
+		isQueueModeEnabled(): boolean {
+			return this.settings.executionMode === 'queue';
+		},
+		isWorkflowSharingEnabled(): boolean {
+			return this.settings.isWorkflowSharingEnabled;
+		},
+		workflowCallerPolicyDefaultOption(): WorkflowCallerPolicyDefaultOption {
+			return this.settings.workflowCallerPolicyDefaultOption;
+		},
+	},
+	actions: {
+		setSettings(settings: IN8nUISettings): void {
+
+			this.settings =  settings;
+			this.userManagement.enabled = settings.userManagement.enabled;
+			this.userManagement.showSetupOnFirstLoad = !!settings.userManagement.showSetupOnFirstLoad;
+			this.userManagement.smtpSetup = settings.userManagement.smtpSetup;
+			this.api.enabled = settings.publicApi.enabled;
+			this.api.latestVersion = settings.publicApi.latestVersion;
+			this.api.path = settings.publicApi.path;
+			this.onboardingCallPromptEnabled = settings.onboardingCallPromptEnabled;
+		},
+		async getSettings(): Promise<void> {
+			const rootStore = useRootStore();
+			const settings = await getSettings(rootStore.getRestApiContext);
+			const vuexStore = store;
+
+			this.setSettings(settings);
+			this.settings.communityNodesEnabled = settings.communityNodesEnabled;
+			this.setAllowedModules(settings.allowedModules as { builtIn?: string, external?: string });
+			this.setSaveDataErrorExecution(settings.saveDataErrorExecution);
+			this.setSaveDataSuccessExecution(settings.saveDataSuccessExecution);
+			this.setSaveManualExecutions(settings.saveManualExecutions);
+
+			rootStore.setUrlBaseWebhook(settings.urlBaseWebhook);
+			rootStore.setUrlBaseEditor(settings.urlBaseEditor);
+			rootStore.setEndpointWebhook(settings.endpointWebhook);
+			rootStore.setEndpointWebhookTest(settings.endpointWebhookTest);
+			rootStore.setTimezone(settings.timezone);
+			rootStore.setExecutionTimeout(settings.executionTimeout);
+			rootStore.setMaxExecutionTimeout(settings.maxExecutionTimeout);
+			rootStore.setVersionCli(settings.versionCli);
+			rootStore.setInstanceId(settings.instanceId);
+			rootStore.setOauthCallbackUrls(settings.oauthCallbackUrls);
+			rootStore.setN8nMetadata(settings.n8nMetadata || {});
+			rootStore.setDefaultLocale(settings.defaultLocale);
+			rootStore.setIsNpmAvailable(settings.isNpmAvailable);
+			vuexStore.commit('versions/setVersionNotificationSettings', settings.versionNotifications, {root: true});
+		},
+		stopShowingSetupPage(): void {
+			Vue.set(this.userManagement, 'showSetupOnFirstLoad', false);
+
+		},
+		setPromptsData(promptsData: IN8nPrompts): void {
+			Vue.set(this, 'promptsData', promptsData);
+		},
+		setAllowedModules(allowedModules: { builtIn?: string, external?: string }): void {
+			this.settings.allowedModules = {
+				...(allowedModules.builtIn && { builtIn: allowedModules.builtIn.split(',') }),
+				...(allowedModules.external && { external: allowedModules.external.split(',') }),
+			};
+		},
+		async fetchPromptsData(): Promise<void> {
+			if (!this.isTelemetryEnabled) {
+				Promise.resolve();
+			}
+			try {
+				const uiStore = useUIStore();
+				const usersStore = useUsersStore();
+				const promptsData: IN8nPrompts = await getPromptsData(this.settings.instanceId, usersStore.currentUserId || '');
+
+				if (promptsData && promptsData.showContactPrompt) {
+					uiStore.openModal(CONTACT_PROMPT_MODAL_KEY);
+				} else  if (promptsData && promptsData.showValueSurvey) {
+					uiStore.openModal(VALUE_SURVEY_MODAL_KEY);
+				}
+
+				this.setPromptsData(promptsData);
+				Promise.resolve();
+			} catch (error) {
+				Promise.reject(error);
+			}
+		},
+		async submitContactInfo(email: string): Promise<IN8nPromptResponse | undefined> {
+			try {
+				const usersStore = useUsersStore();
+				return await submitContactInfo(this.settings.instanceId, usersStore.currentUserId || '', email);
+			} catch (error) {
+				return;
+			}
+		},
+		async submitValueSurvey(params: IN8nValueSurveyData): Promise<IN8nPromptResponse | undefined> {
+			try {
+				const usersStore = useUsersStore();
+				return await submitValueSurvey(this.settings.instanceId, usersStore.currentUserId || '', params);
+			} catch (error) {
+				return;
+			}
+		},
+		async testTemplatesEndpoint(): Promise<void> {
+			const timeout = new Promise((_, reject) => setTimeout(() => reject(), 2000));
+			await Promise.race([testHealthEndpoint(this.templatesHost), timeout]);
+			this.templatesEndpointHealthy = true;
+		},
+		async getApiKey(): Promise<string | null> {
+			const rootStore = useRootStore();
+			const { apiKey } = await getApiKey(rootStore.getRestApiContext);
+			return apiKey;
+		},
+		async createApiKey(): Promise<string | null> {
+			const rootStore = useRootStore();
+			const { apiKey } = await createApiKey(rootStore.getRestApiContext);
+			return apiKey;
+		},
+		async deleteApiKey(): Promise<void> {
+			const rootStore = useRootStore();
+			await deleteApiKey(rootStore.getRestApiContext);
+		},
+		setSaveDataErrorExecution(newValue: string) {
+			Vue.set(this, 'saveDataErrorExecution', newValue);
+		},
+		setSaveDataSuccessExecution(newValue: string) {
+			Vue.set(this, 'saveDataSuccessExecution', newValue);
+		},
+		setSaveManualExecutions(saveManualExecutions: boolean) {
+			Vue.set(this, 'saveManualExecutions', saveManualExecutions);
+		},
+	},
+});
diff --git a/packages/editor-ui/src/stores/templates.ts b/packages/editor-ui/src/stores/templates.ts
new file mode 100644
index 0000000000..72da277fa7
--- /dev/null
+++ b/packages/editor-ui/src/stores/templates.ts
@@ -0,0 +1,267 @@
+import { defineStore } from "pinia";
+import { STORES } from '@/constants';
+import { ITemplatesCategory, ITemplatesCollection, ITemplatesCollectionFull, ITemplatesQuery, ITemplateState, ITemplatesWorkflow, ITemplatesWorkflowFull, IWorkflowTemplate } from "@/Interface";
+import Vue from "vue";
+import { useSettingsStore } from "./settings";
+import { getCategories, getCollectionById, getCollections, getTemplateById, getWorkflows, getWorkflowTemplate } from "@/api/templates";
+
+const TEMPLATES_PAGE_SIZE = 10;
+
+function getSearchKey(query: ITemplatesQuery): string {
+	return JSON.stringify([query.search || '', [...query.categories].sort()]);
+}
+
+export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
+		state: (): ITemplateState => ({
+			categories: {},
+			collections: {},
+			workflows: {},
+			collectionSearches: {},
+			workflowSearches: {},
+			currentSessionId: '',
+			previousSessionId: '',
+		}),
+		getters: {
+			allCategories(): ITemplatesCategory[] {
+				return Object.values(this.categories).sort((a: ITemplatesCategory, b: ITemplatesCategory) => a.name > b.name ? 1: -1);
+			},
+			getTemplateById() {
+				return (id: string): null | ITemplatesWorkflow => this.workflows[id];
+			},
+			getCollectionById() {
+				return (id: string): null | ITemplatesCollection => this.collections[id];
+			},
+			getCategoryById() {
+				return (id: string): null | ITemplatesCategory => this.categories[id];
+			},
+			getSearchedCollections() {
+				return (query: ITemplatesQuery) => {
+					const searchKey = getSearchKey(query);
+					const search = this.collectionSearches[searchKey];
+					if (!search) {
+						return null;
+					}
+
+					return search.collectionIds.map((collectionId: string) => this.collections[collectionId]);
+				};
+			},
+			getSearchedWorkflows() {
+				return (query: ITemplatesQuery) => {
+					const searchKey = getSearchKey(query);
+					const search = this.workflowSearches[searchKey];
+					if (!search) {
+						return null;
+					}
+
+					return search.workflowIds.map((workflowId: string) => this.workflows[workflowId]);
+				};
+			},
+			getSearchedWorkflowsTotal() {
+				return (query: ITemplatesQuery) => {
+					const searchKey = getSearchKey(query);
+					const search = this.workflowSearches[searchKey];
+
+					return search ? search.totalWorkflows : 0;
+				};
+			},
+			isSearchLoadingMore() {
+				return (query: ITemplatesQuery) => {
+					const searchKey = getSearchKey(query);
+					const search = this.workflowSearches[searchKey];
+
+					return Boolean(search && search.loadingMore);
+				};
+			},
+			isSearchFinished() {
+				return (query: ITemplatesQuery) => {
+					const searchKey = getSearchKey(query);
+					const search = this.workflowSearches[searchKey];
+
+					return Boolean(search && !search.loadingMore && search.totalWorkflows === search.workflowIds.length);
+				};
+			},
+		},
+		actions: {
+			addCategories(categories: ITemplatesCategory[]): void {
+				categories.forEach((category: ITemplatesCategory) => {
+					Vue.set(this.categories, category.id, category);
+				});
+			},
+			addCollections(collections: Array<ITemplatesCollection | ITemplatesCollectionFull>): void {
+				collections.forEach((collection) => {
+					const workflows = (collection.workflows || []).map((workflow) => ({id: workflow.id}));
+					const cachedCollection = this.collections[collection.id] || {};
+					Vue.set(this.collections, collection.id, {
+						...cachedCollection,
+						...collection,
+						workflows,
+					});
+				});
+			},
+			addWorkflows(workflows: Array<ITemplatesWorkflow | ITemplatesWorkflowFull>): void {
+				workflows.forEach((workflow: ITemplatesWorkflow) => {
+					const cachedWorkflow = this.workflows[workflow.id] || {};
+					Vue.set(this.workflows, workflow.id, {
+						...cachedWorkflow,
+						...workflow,
+					});
+				});
+			},
+			addCollectionSearch(data: {collections: ITemplatesCollection[], query: ITemplatesQuery}): void {
+				const collectionIds = data.collections.map((collection) => collection.id);
+				const searchKey = getSearchKey(data.query);
+				Vue.set(this.collectionSearches, searchKey, {
+					collectionIds,
+				});
+			},
+			addWorkflowsSearch(data: {totalWorkflows: number; workflows: ITemplatesWorkflow[], query: ITemplatesQuery}): void {
+				const workflowIds = data.workflows.map((workflow) => workflow.id);
+				const searchKey = getSearchKey(data.query);
+				const cachedResults = this.workflowSearches[searchKey];
+				if (!cachedResults) {
+					Vue.set(this.workflowSearches, searchKey, {
+						workflowIds,
+						totalWorkflows: data.totalWorkflows,
+					});
+
+					return;
+				}
+
+				Vue.set(this.workflowSearches, searchKey, {
+					workflowIds: [...cachedResults.workflowIds, ...workflowIds],
+					totalWorkflows: data.totalWorkflows,
+				});
+			},
+			setWorkflowSearchLoading(query: ITemplatesQuery): void {
+				const searchKey = getSearchKey(query);
+				const cachedResults = this.workflowSearches[searchKey];
+				if (!cachedResults) {
+					return;
+				}
+
+				Vue.set(this.workflowSearches[searchKey], 'loadingMore', true);
+			},
+			setWorkflowSearchLoaded(query: ITemplatesQuery): void {
+				const searchKey = getSearchKey(query);
+				const cachedResults = this.workflowSearches[searchKey];
+				if (!cachedResults) {
+					return;
+				}
+
+				Vue.set(this.workflowSearches[searchKey], 'loadingMore', false);
+			},
+			resetSessionId(): void {
+				this.previousSessionId = this.currentSessionId;
+				this.currentSessionId = '';
+			},
+			setSessionId(): void {
+				if (!this.currentSessionId) {
+					this.currentSessionId = `templates-${Date.now()}`;
+				}
+			},
+			async fetchTemplateById(templateId: string): Promise<ITemplatesWorkflow | ITemplatesWorkflowFull> {
+				const settingsStore = useSettingsStore();
+				const apiEndpoint: string = settingsStore.templatesHost;
+				const versionCli: string = settingsStore.versionCli;
+				const response = await getTemplateById(apiEndpoint, templateId, { 'n8n-version': versionCli });
+
+				const template: ITemplatesWorkflowFull = {
+					...response.workflow,
+					full: true,
+				};
+				this.addWorkflows([template]);
+
+				return template;
+			},
+			async fetchCollectionById(collectionId: string): Promise<ITemplatesCollection | null> {
+				const settingsStore = useSettingsStore();
+				const apiEndpoint: string = settingsStore.templatesHost;
+				const versionCli: string = settingsStore.versionCli;
+				const response = await getCollectionById(apiEndpoint, collectionId, { 'n8n-version': versionCli });
+				const collection: ITemplatesCollectionFull = {
+					...response.collection,
+					full: true,
+				};
+
+				this.addCollections([collection]);
+				this.addWorkflows(response.collection.workflows);
+				return this.getCollectionById(collectionId);
+			},
+			async getCategories(): Promise<ITemplatesCategory[]> {
+				const cachedCategories = this.allCategories;
+				if (cachedCategories.length) {
+					return cachedCategories;
+				}
+				const settingsStore = useSettingsStore();
+				const apiEndpoint: string = settingsStore.templatesHost;
+				const versionCli: string = settingsStore.versionCli;
+				const response = await getCategories(apiEndpoint, { 'n8n-version': versionCli });
+				const categories = response.categories;
+
+				this.addCategories(categories);
+				return categories;
+			},
+			async getCollections(query: ITemplatesQuery): Promise<ITemplatesCollection[]> {
+				const cachedResults = this.getSearchedCollections(query);
+				if (cachedResults) {
+					return cachedResults;
+				}
+
+				const settingsStore = useSettingsStore();
+				const apiEndpoint: string = settingsStore.templatesHost;
+				const versionCli: string = settingsStore.versionCli;
+				const response = await getCollections(apiEndpoint, query, { 'n8n-version': versionCli });
+				const collections = response.collections;
+
+				this.addCollections(collections);
+				this.addCollectionSearch({query, collections});
+				collections.forEach(collection => this.addWorkflows(collection.workflows as ITemplatesWorkflowFull[]));
+
+				return collections;
+			},
+			async getWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
+				const cachedResults = this.getSearchedWorkflows(query);
+				if (cachedResults) {
+					return cachedResults;
+				}
+
+				const settingsStore = useSettingsStore();
+				const apiEndpoint: string = settingsStore.templatesHost;
+				const versionCli: string = settingsStore.versionCli;
+
+				const payload = await getWorkflows(apiEndpoint, {...query, skip: 0, limit: TEMPLATES_PAGE_SIZE}, { 'n8n-version': versionCli });
+
+				this.addWorkflows(payload.workflows);
+				this.addWorkflowsSearch({...payload, query});
+				return this.getSearchedWorkflows(query) || [];
+			},
+			async getMoreWorkflows(query: ITemplatesQuery): Promise<ITemplatesWorkflow[]> {
+				if (this.isSearchLoadingMore(query) && !this.isSearchFinished(query)) {
+					return [];
+				}
+				const cachedResults = this.getSearchedWorkflows(query) || [];
+				const settingsStore = useSettingsStore();
+				const apiEndpoint: string = settingsStore.templatesHost;
+
+				this.setWorkflowSearchLoading(query);
+				try {
+					const payload = await getWorkflows(apiEndpoint, {...query, skip: cachedResults.length, limit: TEMPLATES_PAGE_SIZE});
+
+					this.setWorkflowSearchLoaded(query);
+					this.addWorkflows(payload.workflows);
+					this.addWorkflowsSearch({...payload, query});
+
+					return this.getSearchedWorkflows(query) || [];
+				} catch (e) {
+					this.setWorkflowSearchLoaded(query);
+					throw e;
+				}
+			},
+			async getWorkflowTemplate(templateId: string): Promise<IWorkflowTemplate> {
+				const settingsStore = useSettingsStore();
+				const apiEndpoint: string = settingsStore.templatesHost;
+				const versionCli: string = settingsStore.versionCli;
+				return await getWorkflowTemplate(apiEndpoint, templateId, { 'n8n-version': versionCli });
+			},
+		},
+});
diff --git a/packages/editor-ui/src/stores/ui.ts b/packages/editor-ui/src/stores/ui.ts
new file mode 100644
index 0000000000..1bafccd2af
--- /dev/null
+++ b/packages/editor-ui/src/stores/ui.ts
@@ -0,0 +1,385 @@
+import {
+	applyForOnboardingCall,
+	fetchNextOnboardingPrompt,
+	submitEmailOnSignup,
+} from "@/api/workflow-webhooks";
+import {
+	ABOUT_MODAL_KEY,
+	CHANGE_PASSWORD_MODAL_KEY,
+	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
+	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
+	COMMUNITY_PACKAGE_MANAGE_ACTIONS,
+	CONTACT_PROMPT_MODAL_KEY,
+	CREDENTIAL_EDIT_MODAL_KEY,
+	CREDENTIAL_SELECT_MODAL_KEY,
+	DELETE_USER_MODAL_KEY,
+	DUPLICATE_MODAL_KEY,
+	EXECUTIONS_MODAL_KEY,
+	FAKE_DOOR_FEATURES,
+	IMPORT_CURL_MODAL_KEY,
+	INVITE_USER_MODAL_KEY,
+	ONBOARDING_CALL_SIGNUP_MODAL_KEY,
+	PERSONALIZATION_MODAL_KEY,
+	STORES,
+	TAGS_MANAGER_MODAL_KEY,
+	VALUE_SURVEY_MODAL_KEY,
+	VERSIONS_MODAL_KEY,
+	VIEWS,
+	WORKFLOW_ACTIVE_MODAL_KEY,
+	WORKFLOW_SETTINGS_MODAL_KEY,
+} from "@/constants";
+import {
+	CurlToJSONResponse,
+	IFakeDoorLocation,
+	IMenuItem,
+	INodeUi,
+	IOnboardingCallPrompt,
+	IUser,
+	UIState,
+	XYPosition,
+} from "@/Interface";
+import Vue from "vue";
+import { defineStore } from "pinia";
+import { useRootStore } from "./n8nRootStore";
+import { getCurlToJson } from "@/api/curlHelper";
+import { useWorkflowsStore } from "./workflows";
+
+export const useUIStore = defineStore(STORES.UI, {
+	state: (): UIState => ({
+		activeActions: [],
+		activeCredentialType: null,
+		modals: {
+			[ABOUT_MODAL_KEY]: {
+				open: false,
+			},
+			[CHANGE_PASSWORD_MODAL_KEY]: {
+				open: false,
+			},
+			[CONTACT_PROMPT_MODAL_KEY]: {
+				open: false,
+			},
+			[CREDENTIAL_EDIT_MODAL_KEY]: {
+				open: false,
+				mode: '',
+				activeId: null,
+			},
+			[CREDENTIAL_SELECT_MODAL_KEY]: {
+				open: false,
+			},
+			[DELETE_USER_MODAL_KEY]: {
+				open: false,
+				activeId: null,
+			},
+			[DUPLICATE_MODAL_KEY]: {
+				open: false,
+			},
+			[ONBOARDING_CALL_SIGNUP_MODAL_KEY]: {
+				open: false,
+			},
+			[PERSONALIZATION_MODAL_KEY]: {
+				open: false,
+			},
+			[INVITE_USER_MODAL_KEY]: {
+				open: false,
+			},
+			[TAGS_MANAGER_MODAL_KEY]: {
+				open: false,
+			},
+			[VALUE_SURVEY_MODAL_KEY]: {
+				open: false,
+			},
+			[VERSIONS_MODAL_KEY]: {
+				open: false,
+			},
+			[WORKFLOW_SETTINGS_MODAL_KEY]: {
+				open: false,
+			},
+			[EXECUTIONS_MODAL_KEY]: {
+				open: false,
+			},
+			[WORKFLOW_ACTIVE_MODAL_KEY]: {
+				open: false,
+			},
+			[COMMUNITY_PACKAGE_INSTALL_MODAL_KEY]: {
+				open: false,
+			},
+			[COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY]: {
+				open: false,
+				mode: '',
+				activeId: null,
+			},
+			[IMPORT_CURL_MODAL_KEY]: {
+				open: false,
+				curlCommand: '',
+				httpNodeParameters: '',
+			},
+		},
+		modalStack: [],
+		sidebarMenuCollapsed: true,
+		isPageLoading: true,
+		currentView: '',
+		mainPanelPosition: 0.5,
+		fakeDoorFeatures: [
+			{
+				id: FAKE_DOOR_FEATURES.ENVIRONMENTS,
+				featureName: 'fakeDoor.settings.environments.name',
+				icon: 'server',
+				infoText: 'fakeDoor.settings.environments.infoText',
+				actionBoxTitle: 'fakeDoor.settings.environments.actionBox.title',
+				actionBoxDescription: 'fakeDoor.settings.environments.actionBox.description',
+				linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=environments',
+				uiLocations: ['settings'],
+			},
+			{
+				id: FAKE_DOOR_FEATURES.LOGGING,
+				featureName: 'fakeDoor.settings.logging.name',
+				icon: 'sign-in-alt',
+				infoText: 'fakeDoor.settings.logging.infoText',
+				actionBoxTitle: 'fakeDoor.settings.logging.actionBox.title',
+				actionBoxDescription: 'fakeDoor.settings.logging.actionBox.description',
+				linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=logging',
+				uiLocations: ['settings'],
+			},
+			{
+				id: FAKE_DOOR_FEATURES.SHARING,
+				featureName: 'fakeDoor.credentialEdit.sharing.name',
+				actionBoxTitle: 'fakeDoor.credentialEdit.sharing.actionBox.title',
+				actionBoxDescription: 'fakeDoor.credentialEdit.sharing.actionBox.description',
+				linkURL: 'https://n8n-community.typeform.com/to/l7QOrERN#f=sharing',
+				uiLocations: ['credentialsModal'],
+			},
+		],
+		draggable: {
+			isDragging: false,
+			type: '',
+			data: '',
+			canDrop: false,
+			stickyPosition: null,
+		},
+		stateIsDirty: false,
+		lastSelectedNode: null,
+		lastSelectedNodeOutputIndex: null,
+		nodeViewOffsetPosition: [0, 0],
+		nodeViewMoveInProgress: false,
+		selectedNodes: [],
+		sidebarMenuItems: [],
+		nodeViewInitialized: false,
+		addFirstStepOnLoad: false,
+		executionSidebarAutoRefresh: true,
+	}),
+	getters: {
+		getLastSelectedNode(): INodeUi | null {
+			const workflowsStore = useWorkflowsStore();
+			if (this.lastSelectedNode) {
+				return workflowsStore.getNodeByName(this.lastSelectedNode);
+			}
+			return null;
+		},
+		getCurlCommand() : string|undefined {
+			return this.modals[IMPORT_CURL_MODAL_KEY].curlCommand;
+		},
+		getHttpNodeParameters() : string|undefined {
+			return this.modals[IMPORT_CURL_MODAL_KEY].httpNodeParameters;
+		},
+		areExpressionsDisabled() : boolean {
+			return this.currentView === VIEWS.DEMO;
+		},
+		isVersionsOpen() : boolean {
+			return this.modals[VERSIONS_MODAL_KEY].open;
+		},
+		isModalOpen() {
+			return (name: string) => this.modals[name].open;
+		},
+		isModalActive() {
+			return (name: string) => this.modalStack.length > 0 && name === this.modalStack[0];
+		},
+		getModalActiveId() {
+			return (name: string) => this.modals[name].activeId;
+		},
+		getModalMode() {
+			return (name: string) => this.modals[name].mode;
+		},
+		getModalData() {
+			return (name: string) => this.modals[name].data;
+		},
+		getFakeDoorByLocation() {
+			return (location: IFakeDoorLocation) => this.fakeDoorFeatures.filter(fakeDoor => fakeDoor.uiLocations.includes(location));
+		},
+		getFakeDoorById() {
+			return (id: string) => this.fakeDoorFeatures.find(fakeDoor => fakeDoor.id.toString() === id);
+		},
+		isNodeView() : boolean {
+			return [VIEWS.NEW_WORKFLOW.toString(), VIEWS.WORKFLOW.toString(), VIEWS.EXECUTION.toString()].includes(this.currentView);
+		},
+		isActionActive() {
+			return (action: string) => this.activeActions.includes(action);
+		},
+		getSelectedNodes() : INodeUi[] {
+			const seen = new Set();
+			return this.selectedNodes.filter((node: INodeUi) => {
+				// dedupe for instances when same node is selected in different ways
+				if (!seen.has(node.id)) {
+					seen.add(node.id);
+					return true;
+				}
+				return false;
+			});
+		},
+		isNodeSelected() {
+			return (nodeName: string): boolean => {
+				let index;
+				for (index in this.selectedNodes) {
+					if (this.selectedNodes[index].name === nodeName) {
+						return true;
+					}
+				}
+				return false;
+			};
+		},
+	},
+	actions: {
+		setMode(name: string, mode: string):  void {
+			Vue.set(this.modals[name], 'mode', mode);
+		},
+		setActiveId(name: string, id: string): void {
+			Vue.set(this.modals[name], 'activeId', id);
+		},
+		setModalData (payload: { name: string, data: Record<string, unknown> }) {
+			Vue.set(this.modals[payload.name], 'data', payload.data);
+		},
+		openModal(name: string): void {
+			Vue.set(this.modals[name], 'open', true);
+			this.modalStack = [name].concat(this.modalStack);
+		},
+		openModalWithData (payload: { name: string, data: Record<string, unknown> }): void {
+			this.setModalData(payload);
+			this.openModal(payload.name);
+		},
+		closeModal(name: string): void {
+			Vue.set(this.modals[name], 'open', false);
+			this.modalStack = this.modalStack.filter((openModalName: string) => {
+				return name !== openModalName;
+			});
+		},
+		closeAllModals(): void {
+			Object.keys(this.modals).forEach((name: string) => {
+				if (this.modals[name].open) {
+					Vue.set(this.modals[name], 'open', false);
+				}
+			});
+			this.modalStack = [];
+		},
+		draggableStartDragging(type: string, data: string): void {
+			this.draggable = {
+				isDragging: true,
+				type,
+				data,
+				canDrop: false,
+				stickyPosition: null,
+			};
+		},
+		draggableStopDragging(): void {
+			this.draggable = {
+				isDragging: false,
+				type: '',
+				data: '',
+				canDrop: false,
+				stickyPosition: null,
+			};
+		},
+		setDraggableStickyPos(position: XYPosition): void {
+			Vue.set(this.draggable, 'stickyPosition', position);
+		},
+		setDraggableCanDrop(canDrop: boolean): void {
+			Vue.set(this.draggable, 'canDrop', canDrop);
+		},
+		openDeleteUserModal(id: string): void {
+			this.setActiveId(DELETE_USER_MODAL_KEY, id);
+			this.openModal(DELETE_USER_MODAL_KEY);
+		},
+		openExistingCredential(id: string): void {
+			this.setActiveId(CREDENTIAL_EDIT_MODAL_KEY, id);
+			this.setMode(CREDENTIAL_EDIT_MODAL_KEY, 'edit');
+			this.openModal(CREDENTIAL_EDIT_MODAL_KEY);
+		},
+		openNewCredential(type: string): void {
+			this.setActiveId(CREDENTIAL_EDIT_MODAL_KEY, type);
+			this.setMode(CREDENTIAL_EDIT_MODAL_KEY, 'new');
+			this.openModal(CREDENTIAL_EDIT_MODAL_KEY);
+		},
+		async getNextOnboardingPrompt(): Promise<IOnboardingCallPrompt> {
+			const rootStore = useRootStore();
+			const instanceId = rootStore.instanceId;
+			// TODO: current USER
+			const currentUser = {} as IUser;
+			return await fetchNextOnboardingPrompt(instanceId, currentUser);
+		},
+		async applyForOnboardingCall(email: string): Promise<string> {
+			const rootStore = useRootStore();
+			const instanceId = rootStore.instanceId;
+			// TODO: current USER
+			const currentUser = {} as IUser;
+			return await applyForOnboardingCall(instanceId, currentUser, email);
+		},
+		async submitContactEmail(email: string, agree: boolean): Promise<string> {
+			const rootStore = useRootStore();
+			const instanceId = rootStore.instanceId;
+			// TODO: current USER
+			const currentUser = {} as IUser;
+			return await submitEmailOnSignup(instanceId, currentUser, email || currentUser.email, agree);
+		},
+		openCommunityPackageUninstallConfirmModal(packageName: string) {
+			this.setActiveId(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, packageName);
+			this.setMode(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS.UNINSTALL);
+			this.openModal(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
+		},
+		openCommunityPackageUpdateConfirmModal(packageName: string) {
+			this.setActiveId(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, packageName);
+			this.setMode(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS.UPDATE);
+			this.openModal(COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY);
+		},
+		addActiveAction(action: string): void {
+			if (!this.activeActions.includes(action)) {
+				this.activeActions.push(action);
+			}
+		},
+		removeActiveAction(action: string): void {
+			const actionIndex = this.activeActions.indexOf(action);
+			if (actionIndex !== -1) {
+				this.activeActions.splice(actionIndex, 1);
+			}
+		},
+		addSelectedNode(node: INodeUi): void {
+			this.selectedNodes.push(node);
+		},
+		removeNodeFromSelection(node: INodeUi): void {
+			let index;
+			for (index in this.selectedNodes) {
+				if (this.selectedNodes[index].name === node.name) {
+					this.selectedNodes.splice(parseInt(index, 10), 1);
+					break;
+				}
+			}
+		},
+		resetSelectedNodes(): void {
+			Vue.set(this, 'selectedNodes', []);
+		},
+		addSidebarMenuItems(menuItems: IMenuItem[]) {
+			const updated = this.sidebarMenuItems.concat(menuItems);
+			Vue.set(this, 'sidebarMenuItems', updated);
+		},
+		setCurlCommand (payload: { name: string, command: string }): void {
+			Vue.set(this.modals[payload.name], 'curlCommand', payload.command);
+		},
+		setHttpNodeParameters (payload: { name: string, parameters: string }): void {
+			Vue.set(this.modals[payload.name], 'httpNodeParameters', payload.parameters);
+		},
+		toggleSidebarMenuCollapse (): void {
+			this.sidebarMenuCollapsed = !this.sidebarMenuCollapsed;
+		},
+		async getCurlToJson (curlCommand: string): Promise<CurlToJSONResponse> {
+			const rootStore = useRootStore();
+			return await getCurlToJson(rootStore.getRestApiContext, curlCommand);
+		},
+	},
+});
diff --git a/packages/editor-ui/src/stores/users.ts b/packages/editor-ui/src/stores/users.ts
new file mode 100644
index 0000000000..c9edb4a15c
--- /dev/null
+++ b/packages/editor-ui/src/stores/users.ts
@@ -0,0 +1,204 @@
+import { changePassword, deleteUser, getCurrentUser, getUsers, inviteUsers, login, loginCurrentUser, logout, reinvite, sendForgotPasswordEmail, setupOwner, signup, skipOwnerSetup, submitPersonalizationSurvey, updateCurrentUser, updateCurrentUserPassword, validatePasswordToken, validateSignupToken } from "@/api/users";
+import { PERSONALIZATION_MODAL_KEY, STORES } from "@/constants";
+import { IInviteResponse, IPersonalizationLatestVersion, IUser, IUserResponse, IUsersState } from "@/Interface";
+import { getPersonalizedNodeTypes, isAuthorized, PERMISSIONS, ROLE } from "@/modules/userHelpers";
+import { defineStore } from "pinia";
+import Vue from "vue";
+import { useRootStore } from "./n8nRootStore";
+import { useSettingsStore } from "./settings";
+import { useUIStore } from "./ui";
+
+const isDefaultUser = (user: IUserResponse | null) => Boolean(user && user.isPending && user.globalRole && user.globalRole.name === ROLE.Owner);
+const isPendingUser = (user: IUserResponse | null) => Boolean(user && user.isPending);
+
+export const useUsersStore = defineStore(STORES.USERS, {
+	state: (): IUsersState => ({
+		currentUserId: null,
+		users: {},
+	}),
+	getters: {
+		allUsers(): IUser[] {
+			return Object.values(this.users);
+		},
+		currentUser(): IUser | null {
+			return this.currentUserId ? this.users[this.currentUserId] : null;
+		},
+		getUserById(): (userId: string) => IUser | null {
+			return (userId: string): IUser | null => this.users[userId];
+		},
+		globalRoleName(): string {
+			return this.currentUser?.globalRole?.name || '';
+		},
+		canUserDeleteTags(): boolean {
+			return isAuthorized(PERMISSIONS.TAGS.CAN_DELETE_TAGS, this.currentUser);
+		},
+		canUserAccessSidebarUserInfo() {
+			if (this.currentUser) {
+				const currentUser: IUser = this.currentUser;
+				return isAuthorized(PERMISSIONS.PRIMARY_MENU.CAN_ACCESS_USER_INFO, currentUser);
+			}
+			return false;
+		},
+		showUMSetupWarning() {
+			if (this.currentUser) {
+				const currentUser: IUser = this.currentUser;
+				return isAuthorized(PERMISSIONS.USER_SETTINGS.VIEW_UM_SETUP_WARNING, currentUser);
+			}
+			return false;
+		},
+		personalizedNodeTypes(): string[] {
+			const user = this.currentUser as IUser | null;
+			if (!user) {
+				return [];
+			}
+
+			const answers = user.personalizationAnswers;
+			if (!answers) {
+				return [];
+			}
+			return getPersonalizedNodeTypes(answers);
+		},
+	},
+	actions: {
+		addUsers(users: IUserResponse[]) {
+			users.forEach((userResponse: IUserResponse) => {
+				const prevUser = this.users[userResponse.id] || {};
+				const updatedUser = {
+					...prevUser,
+					...userResponse,
+				};
+				const user: IUser = {
+					...updatedUser,
+					fullName: userResponse.firstName? `${updatedUser.firstName} ${updatedUser.lastName || ''}`: undefined,
+					isDefaultUser: isDefaultUser(updatedUser),
+					isPendingUser: isPendingUser(updatedUser),
+					isOwner: Boolean(updatedUser.globalRole && updatedUser.globalRole.name === ROLE.Owner),
+				};
+				Vue.set(this.users, user.id, user);
+			});
+		},
+		deleteUserById(userId: string): void {
+			Vue.delete(this.users, userId);
+		},
+		setPersonalizationAnswers(answers: IPersonalizationLatestVersion): void {
+			if (!this.currentUser) {
+				return;
+			}
+			Vue.set(this.currentUser, 'personalizationAnswers', answers);
+		},
+		async getCurrentUser(): void {
+			const rootStore = useRootStore();
+			const user = await getCurrentUser(rootStore.getRestApiContext);
+			if (user) {
+				this.addUsers([user]);
+				this.currentUserId = user.id;
+			}
+		},
+		async loginWithCookie(): void {
+			const rootStore = useRootStore();
+			const user = await loginCurrentUser(rootStore.getRestApiContext);
+			if (user) {
+				this.addUsers([user]);
+				this.currentUserId = user.id;
+			}
+		},
+		async loginWithCreds(params: {email: string, password: string}): Promise<void> {
+			const rootStore = useRootStore();
+			const user = await login(rootStore.getRestApiContext, params);
+			if (user) {
+				this.addUsers([user]);
+				this.currentUserId = user.id;
+			}
+		},
+		async logout(): Promise<void> {
+			const rootStore = useRootStore();
+			await logout(rootStore.getRestApiContext);
+			this.currentUserId = null;
+		},
+		async createOwner(params: { firstName: string; lastName: string; email: string; password: string;}): Promise<void> {
+			const rootStore = useRootStore();
+			const user = await setupOwner(rootStore.getRestApiContext, params);
+			const settingsStore = useSettingsStore();
+			if (user) {
+				this.addUsers([user]);
+				this.currentUserId = user.id;
+				settingsStore.stopShowingSetupPage();
+			}
+		},
+		async validateSignupToken(params: {inviteeId: string, inviterId: string}): Promise<{ inviter: { firstName: string, lastName: string } }> {
+			const rootStore = useRootStore();
+			return await validateSignupToken(rootStore.getRestApiContext, params);
+		},
+		async signup(params: { inviteeId: string; inviterId: string; firstName: string; lastName: string; password: string;}): Promise<void> {
+			const rootStore = useRootStore();
+			const user = await signup(rootStore.getRestApiContext, params);
+			if (user) {
+				this.addUsers([user]);
+				this.currentUserId = user.id;
+			}
+		},
+		async sendForgotPasswordEmail( params: {email: string}): Promise<void> {
+			const rootStore = useRootStore();
+			await sendForgotPasswordEmail(rootStore.getRestApiContext, params);
+		},
+		async validatePasswordToken(params: {token: string, userId: string}): Promise<void> {
+			const rootStore = useRootStore();
+			await validatePasswordToken(rootStore.getRestApiContext, params);
+		},
+		async changePassword(params: {token: string, password: string, userId: string}): Promise<void> {
+			const rootStore = useRootStore();
+			await changePassword(rootStore.getRestApiContext, params);
+		},
+		async updateUser(params: {id: string, firstName: string, lastName: string, email: string}): Promise<void> {
+			const rootStore = useRootStore();
+			const user = await updateCurrentUser(rootStore.getRestApiContext, params);
+			this.addUsers([user]);
+		},
+		async updateCurrentUserPassword({password, currentPassword}: {password: string, currentPassword: string}): Promise<void> {
+			const rootStore = useRootStore();
+			await updateCurrentUserPassword(rootStore.getRestApiContext, {newPassword: password, currentPassword});
+		},
+		async deleteUser(params: { id: string, transferId?: string}): Promise<void> {
+			const rootStore = useRootStore();
+			await deleteUser(rootStore.getRestApiContext, params);
+			this.deleteUserById(params.id);
+		},
+		async fetchUsers(): Promise<void> {
+			const rootStore = useRootStore();
+			const users = await getUsers(rootStore.getRestApiContext);
+			this.addUsers(users);
+		},
+		async inviteUsers(params: Array<{email: string}>): Promise<IInviteResponse[]> {
+			const rootStore = useRootStore();
+			const users = await inviteUsers(rootStore.getRestApiContext, params);
+			this.addUsers(users.map(({user}) => ({ isPending: true, ...user })));
+			return users;
+		},
+		async reinviteUser(params: {id: string}): Promise<void> {
+			const rootStore = useRootStore();
+			await reinvite(rootStore.getRestApiContext, params);
+		},
+		async submitPersonalizationSurvey(results: IPersonalizationLatestVersion): Promise<void> {
+			const rootStore = useRootStore();
+			await submitPersonalizationSurvey(rootStore.getRestApiContext, results);
+			this.setPersonalizationAnswers(results);
+		},
+		async showPersonalizationSurvey(): Promise<void> {
+			const settingsStore = useSettingsStore();
+			const surveyEnabled = settingsStore.isPersonalizationSurveyEnabled;
+			const currentUser = this.currentUser;
+			if (surveyEnabled && currentUser && !currentUser.personalizationAnswers) {
+				const uiStore = useUIStore();
+				uiStore.openModal(PERSONALIZATION_MODAL_KEY);
+			}
+		},
+		async skipOwnerSetup(): Promise<void> {
+			try {
+				const rootStore = useRootStore();
+				const settingsStore = useSettingsStore();
+				settingsStore.stopShowingSetupPage();
+				await skipOwnerSetup(rootStore.getRestApiContext);
+			} catch (error) {}
+		},
+	},
+});
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
new file mode 100644
index 0000000000..53c7c06d4c
--- /dev/null
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -0,0 +1,773 @@
+import { DEFAULT_NEW_WORKFLOW_NAME, DUPLICATE_POSTFFIX, MAX_WORKFLOW_NAME_LENGTH, PLACEHOLDER_EMPTY_WORKFLOW_ID, STORES } from "@/constants";
+import {
+	IExecutionResponse,
+	IExecutionsCurrentSummaryExtended,
+	IExecutionsSummary,
+	INewWorkflowData,
+	INodeUi,
+	INodeUpdatePropertiesInformation,
+	IPushDataExecutionFinished,
+	IPushDataNodeExecuteAfter,
+	IUpdateInformation,
+	IWorkflowDb,
+	IWorkflowsMap,
+	WorkflowsState,
+} from "@/Interface";
+import { defineStore } from "pinia";
+import { IConnection, IConnections, IDataObject, INode, INodeConnections, INodeCredentials, INodeCredentialsDetails, INodeExecutionData, INodeIssueData, IPinData, IRunData, ITaskData, IWorkflowSettings } from 'n8n-workflow';
+import Vue from "vue";
+import { useRootStore } from "./n8nRootStore";
+import { getActiveWorkflows, getCurrentExecutions, getFinishedExecutions, getNewWorkflow, getWorkflows } from "@/api/workflows";
+import { useUIStore } from "./ui";
+import { getPairedItemsMapping } from "@/pairedItemUtils";
+import { dataPinningEventBus } from "@/event-bus/data-pinning-event-bus";
+import { isJsonKeyObject } from "@/utils";
+import { stringSizeInBytes } from "@/components/helpers";
+import { useNDVStore } from "./ndv";
+import { useNodeTypesStore } from "./nodeTypes";
+
+export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
+	state: (): WorkflowsState => ({
+		workflow: {
+			id: PLACEHOLDER_EMPTY_WORKFLOW_ID,
+			name: '',
+			active: false,
+			createdAt: -1,
+			updatedAt: -1,
+			connections: {},
+			nodes: [],
+			settings: {},
+			tags: [],
+			pinData: {},
+			hash: '',
+		},
+		activeWorkflows: [],
+		activeExecutions: [],
+		currentWorkflowExecutions: [],
+		activeWorkflowExecution: null,
+		finishedExecutionsCount: 0,
+		workflowExecutionData: null,
+		workflowExecutionPairedItemMappings: {},
+		workflowsById: {},
+		subWorkflowExecutionError: null,
+		activeExecutionId: null,
+		executingNode: null,
+		executionWaitingForWebhook: false,
+		nodeMetadata: {},
+	}),
+	getters: {
+		// Workflow getters
+		workflowName(): string {
+			return this.workflow.name;
+		},
+		workflowId(): string {
+			return this.workflow.id;
+		},
+		workflowHash(): string | undefined {
+			return this.workflow.hash;
+		},
+		workflowSettings() : IWorkflowSettings {
+			if (this.workflow.settings === undefined) {
+				return {};
+			}
+			return this.workflow.settings;
+		},
+		workflowTags() : string[] {
+			return this.workflow.tags as string[];
+		},
+		allWorkflows() : IWorkflowDb[] {
+			return Object.values(this.workflowsById)
+				.sort((a, b) => a.name.localeCompare(b.name));
+		},
+		isNewWorkflow() : boolean {
+			return this.workflow.id === PLACEHOLDER_EMPTY_WORKFLOW_ID;
+		},
+		isWorkflowActive(): boolean {
+			return this.workflow.active;
+		},
+		workflowTriggerNodes() : INodeUi[] {
+			return this.workflow.nodes.filter((node: INodeUi) => {
+				const nodeTypesStore = useNodeTypesStore();
+				const nodeType = nodeTypesStore.getNodeType(node.type as string, node.typeVersion as number);
+				return nodeType && nodeType.group.includes('trigger');
+			});
+		},
+		currentWorkflowHasWebhookNode(): boolean {
+			return !!this.workflow.nodes.find((node: INodeUi) => !!node.webhookId);
+		},
+		getWorkflowRunData(): IRunData | null {
+			if (!this.workflowExecutionData || !this.workflowExecutionData.data || !this.workflowExecutionData.data.resultData) {
+				return null;
+			}
+			return this.workflowExecutionData.data.resultData.runData;
+		},
+		getWorkflowResultDataByNodeName() {
+			return (nodeName: string): ITaskData[] | null => {
+				const workflowRunData = this.getWorkflowRunData;
+
+				if (workflowRunData === null) {
+					return null;
+				}
+				if (!workflowRunData.hasOwnProperty(nodeName)) {
+					return null;
+				}
+				return workflowRunData[nodeName];
+			};
+		},
+
+		// Node getters
+		allConnections() : IConnections {
+			return this.workflow.connections;
+		},
+		outgoingConnectionsByNodeName()  {
+			return (nodeName: string): INodeConnections => {
+				if (this.workflow.connections.hasOwnProperty(nodeName)) {
+					return this.workflow.connections[nodeName];
+				}
+				return {};
+			};
+		},
+		allNodes() : INodeUi[] {
+			return this.workflow.nodes;
+		},
+		nodesByName() : { [name: string]: INodeUi } {
+			return this.workflow.nodes.reduce((accu: { [name: string]: INodeUi }, node) => {
+				accu[node.name] = node;
+				return accu;
+			}, {});
+		},
+		getNodeByName() {
+			return (nodeName: string): INodeUi | null => this.nodesByName[nodeName] || null;
+		},
+		getNodeById() {
+			return (nodeId: string): INodeUi | undefined => this.workflow.nodes.find((node: INodeUi) => node.id === nodeId);
+		},
+		nodesIssuesExist(): boolean {
+			for (const node of this.workflow.nodes) {
+				if (node.issues === undefined || Object.keys(node.issues).length === 0) {
+					continue;
+				}
+				return true;
+			}
+			return false;
+		},
+		getPinData(): IPinData | undefined {
+			return this.workflow.pinData;
+		},
+		pinDataSize(): number {
+			const ndvStore = useNDVStore();
+			const activeNode = ndvStore.activeNodeName;
+			return this.workflow.nodes
+				.reduce((acc, node) => {
+					if (typeof node.pinData !== 'undefined' && node.name !== activeNode) {
+						acc += stringSizeInBytes(node.pinData);
+					}
+
+					return acc;
+				}, 0);
+		},
+		executedNode(): string | undefined {
+			return this.workflowExecutionData ? this.workflowExecutionData.executedNode : undefined;
+		},
+		getParametersLastUpdate(): ((name: string) => number | undefined) {
+			return (nodeName: string) => this.nodeMetadata[nodeName] && this.nodeMetadata[nodeName].parametersLastUpdatedAt;
+		},
+
+		// Executions getters
+		getExecutionDataById(): (id: string) => IExecutionsSummary | undefined {
+			return (id: string): IExecutionsSummary | undefined => this.currentWorkflowExecutions.find(execution => execution.id === id);
+		},
+		getAllLoadedFinishedExecutions(): IExecutionsSummary[] {
+			return this.currentWorkflowExecutions.filter(ex => ex.finished === true || ex.stoppedAt !== undefined);
+		},
+		getWorkflowExecution(): IExecutionResponse | null {
+			return this.workflowExecutionData;
+		},
+		getTotalFinishedExecutionsCount(): number {
+			return this.finishedExecutionsCount;
+		},
+	},
+	actions: {
+
+		// Workflow actions
+
+		async fetchAllWorkflows(): Promise<IWorkflowDb[]> {
+			const rootStore = useRootStore();
+			const workflows = await getWorkflows(rootStore.getRestApiContext);
+			this.setWorkflows(workflows);
+			return workflows;
+		},
+
+		async getNewWorkflowData(name?: string): Promise<INewWorkflowData> {
+			let workflowData = {
+				name: '',
+				onboardingFlowEnabled: false,
+			};
+			try {
+				const rootStore = useRootStore();
+				workflowData = await getNewWorkflow(rootStore.getRestApiContext, name);
+			}
+			catch (e) {
+				// in case of error, default to original name
+				workflowData.name = name || DEFAULT_NEW_WORKFLOW_NAME;
+			}
+
+			this.setWorkflowName({ newName: workflowData.name, setStateDirty: false });
+			return workflowData;
+		},
+
+		setWorkflowId (id: string): void {
+			this.workflow.id = id === 'new' ? PLACEHOLDER_EMPTY_WORKFLOW_ID : id;
+		},
+
+		setWorkflowName(data: { newName: string, setStateDirty: boolean }): void {
+			if (data.setStateDirty === true) {
+				const uiStore = useUIStore();
+				uiStore.stateIsDirty = true;
+			}
+			this.workflow.name = data.newName;
+		},
+
+		setWorkflowHash(hash: string): void {
+			this.workflow.hash = hash;
+		},
+
+		// replace invalid credentials in workflow
+		replaceInvalidWorkflowCredentials(data: {credentials: INodeCredentialsDetails, invalid: INodeCredentialsDetails, type: string}): void {
+			this.workflow.nodes.forEach((node : INodeUi) => {
+				const nodeCredentials: INodeCredentials | undefined = (node as unknown as INode).credentials;
+
+				if (!nodeCredentials || !nodeCredentials[data.type]) {
+					return;
+				}
+
+				const nodeCredentialDetails: INodeCredentialsDetails | string = nodeCredentials[data.type];
+
+				if (typeof nodeCredentialDetails === 'string' && nodeCredentialDetails === data.invalid.name) {
+					(node.credentials as INodeCredentials)[data.type] = data.credentials;
+					return;
+				}
+
+				if (nodeCredentialDetails.id === null) {
+					if (nodeCredentialDetails.name === data.invalid.name) {
+						(node.credentials as INodeCredentials)[data.type] = data.credentials;
+					}
+					return;
+				}
+
+				if (nodeCredentialDetails.id === data.invalid.id) {
+					(node.credentials as INodeCredentials)[data.type] = data.credentials;
+				}
+			});
+		},
+
+		setWorkflows(workflows: IWorkflowDb[]) : void {
+			this.workflowsById = workflows.reduce<IWorkflowsMap>((acc, workflow: IWorkflowDb) => {
+				if (workflow.id) {
+					acc[workflow.id] = workflow;
+				}
+
+				return acc;
+			}, {});
+		},
+
+		deleteWorkflow(id: string) : void {
+			const { [id]: deletedWorkflow, ...workflows } = this.workflowsById;
+			this.workflowsById = workflows;
+		},
+
+		addWorkflow(workflow: IWorkflowDb) : void {
+			Vue.set(this.workflowsById, workflow.id, workflow);
+		},
+
+		setWorkflowActive(workflowId: string): void {
+			const uiStore = useUIStore();
+			uiStore.stateIsDirty = false;
+			const index = this.activeWorkflows.indexOf(workflowId);
+			if (index === -1) {
+				this.activeWorkflows.push(workflowId);
+			}
+		},
+
+		setWorkflowInactive(workflowId: string): void {
+			const index = this.activeWorkflows.indexOf(workflowId);
+			if (index !== -1) {
+				this.activeWorkflows.splice(index, 1);
+			}
+		},
+
+		async fetchActiveWorkflows(): Promise<string[]> {
+			const rootStore = useRootStore();
+			const activeWorkflows = await getActiveWorkflows(rootStore.getRestApiContext);
+			this.activeWorkflows = activeWorkflows;
+			return activeWorkflows;
+		},
+
+		setActive(newActive: boolean) : void {
+			this.workflow.active = newActive;
+		},
+
+		async getDuplicateCurrentWorkflowName(currentWorkflowName: string): Promise<string> {
+			if (currentWorkflowName && (currentWorkflowName.length + DUPLICATE_POSTFFIX.length) >= MAX_WORKFLOW_NAME_LENGTH) {
+				return currentWorkflowName;
+			}
+
+			let newName = `${currentWorkflowName}${DUPLICATE_POSTFFIX}`;
+			try {
+				const rootStore = useRootStore();
+				const newWorkflow = await getNewWorkflow(rootStore.getRestApiContext, newName );
+				newName = newWorkflow.name;
+			}
+			catch (e) {
+			}
+			return newName;
+		},
+
+
+		// Node actions
+		setWorkflowExecutionData(workflowResultData: IExecutionResponse | null): void {
+			this.workflowExecutionData = workflowResultData;
+			this.workflowExecutionPairedItemMappings = getPairedItemsMapping(this.workflowExecutionData);
+		},
+
+		setWorkflowSettings(workflowSettings: IWorkflowSettings): void {
+			Vue.set(this.workflow, 'settings', workflowSettings);
+		},
+
+		setWorkflowPinData(pinData: IPinData): void {
+			Vue.set(this.workflow, 'pinData', pinData || {});
+			dataPinningEventBus.$emit('pin-data', pinData || {});
+		},
+
+		setWorkflowTagIds(tags: string[]): void {
+			Vue.set(this.workflow, 'tags', tags);
+		},
+
+		addWorkflowTagIds(tags: string[]): void {
+			Vue.set(this.workflow, 'tags', [...new Set([...(this.workflow.tags || []), ...tags])]);
+		},
+
+		removeWorkflowTagId(tagId: string): void {
+			const tags = this.workflow.tags as string[];
+			const updated = tags.filter((id: string) => id !== tagId);
+			Vue.set(this.workflow, 'tags', updated);
+		},
+
+		setWorkflow(workflow: IWorkflowDb): void {
+			Vue.set(this, 'workflow', workflow);
+
+			if (!this.workflow.hasOwnProperty('active')) {
+				Vue.set(this.workflow, 'active', false);
+			}
+			if (!this.workflow.hasOwnProperty('connections')) {
+				Vue.set(this.workflow, 'connections', {});
+			}
+			if (!this.workflow.hasOwnProperty('createdAt')) {
+				Vue.set(this.workflow, 'createdAt', -1);
+			}
+			if (!this.workflow.hasOwnProperty('updatedAt')) {
+				Vue.set(this.workflow, 'updatedAt', -1);
+			}
+			if (!this.workflow.hasOwnProperty('id')) {
+				Vue.set(this.workflow, 'id', PLACEHOLDER_EMPTY_WORKFLOW_ID);
+			}
+			if (!this.workflow.hasOwnProperty('nodes')) {
+				Vue.set(this.workflow, 'nodes', []);
+			}
+			if (!this.workflow.hasOwnProperty('settings')) {
+				Vue.set(this.workflow, 'settings', {});
+			}
+		},
+
+		pinData(payload: { node: INodeUi, data: INodeExecutionData[] }): void {
+			if (!this.workflow.pinData) {
+				Vue.set(this.workflow, 'pinData', {});
+			}
+
+			if (!Array.isArray(payload.data)) {
+				payload.data = [payload.data];
+			}
+
+			const storedPinData = payload.data.map(item => isJsonKeyObject(item) ? item : { json: item });
+
+			Vue.set(this.workflow.pinData!, payload.node.name, storedPinData);
+
+			const uiStore = useUIStore();
+			uiStore.stateIsDirty = true;
+
+			dataPinningEventBus.$emit('pin-data', { [payload.node.name]: storedPinData });
+		},
+
+		unpinData(payload: { node: INodeUi }): void {
+			if (!this.workflow.pinData) {
+				Vue.set(this.workflow, 'pinData', {});
+			}
+
+			Vue.set(this.workflow.pinData!, payload.node.name, undefined);
+			delete this.workflow.pinData![payload.node.name];
+
+			const uiStore = useUIStore();
+			uiStore.stateIsDirty = true;
+
+			dataPinningEventBus.$emit('unpin-data', { [payload.node.name]: undefined });
+		},
+
+		addConnection(data: { connection: IConnection[], setStateDirty: boolean }): void {
+			if (data.connection.length !== 2) {
+				// All connections need two entries
+				// TODO: Check if there is an error or whatever that is supposed to be returned
+				return;
+			}
+			const uiStore = useUIStore();
+			if (data.setStateDirty === true) {
+				uiStore.stateIsDirty = true;
+			}
+
+			const sourceData: IConnection = data.connection[0];
+			const destinationData: IConnection = data.connection[1];
+
+			// Check if source node and type exist already and if not add them
+			if (!this.workflow.connections.hasOwnProperty(sourceData.node)) {
+				Vue.set(this.workflow.connections, sourceData.node, {});
+			}
+			if (!this.workflow.connections[sourceData.node].hasOwnProperty(sourceData.type)) {
+				Vue.set(this.workflow.connections[sourceData.node], sourceData.type, []);
+			}
+			if (this.workflow.connections[sourceData.node][sourceData.type].length < (sourceData.index + 1)) {
+				for (let i = this.workflow.connections[sourceData.node][sourceData.type].length; i <= sourceData.index; i++) {
+					this.workflow.connections[sourceData.node][sourceData.type].push([]);
+				}
+			}
+
+			// Check if the same connection exists already
+			const checkProperties = ['index', 'node', 'type'];
+			let propertyName: string;
+			let connectionExists = false;
+			connectionLoop:
+			for (const existingConnection of this.workflow.connections[sourceData.node][sourceData.type][sourceData.index]) {
+				for (propertyName of checkProperties) {
+					if ((existingConnection as any)[propertyName] !== (destinationData as any)[propertyName]) { // tslint:disable-line:no-any
+						continue connectionLoop;
+					}
+				}
+				connectionExists = true;
+				break;
+			}
+			// Add the new connection if it does not exist already
+			if (connectionExists === false) {
+				this.workflow.connections[sourceData.node][sourceData.type][sourceData.index].push(destinationData);
+			}
+		},
+
+		removeConnection(data: { connection: IConnection[] }): void {
+			const sourceData = data.connection[0];
+			const destinationData = data.connection[1];
+
+			if (!this.workflow.connections.hasOwnProperty(sourceData.node)) {
+				return;
+			}
+			if (!this.workflow.connections[sourceData.node].hasOwnProperty(sourceData.type)) {
+				return;
+			}
+			if (this.workflow.connections[sourceData.node][sourceData.type].length < (sourceData.index + 1)) {
+				return;
+			}
+			const uiStore = useUIStore();
+			uiStore.stateIsDirty = true;
+
+			const connections = this.workflow.connections[sourceData.node][sourceData.type][sourceData.index];
+			for (const index in connections) {
+				if (connections[index].node === destinationData.node && connections[index].type === destinationData.type && connections[index].index === destinationData.index) {
+					// Found the connection to remove
+					connections.splice(parseInt(index, 10), 1);
+				}
+			}
+		},
+
+		removeAllConnections(data: { setStateDirty: boolean }): void {
+			if (data && data.setStateDirty === true) {
+				const uiStore = useUIStore();
+				uiStore.stateIsDirty = true;
+			}
+			this.workflow.connections = {};
+		},
+
+		removeAllNodeConnection(node: INodeUi): void {
+			const uiStore = useUIStore();
+			uiStore.stateIsDirty = true;
+			// Remove all source connections
+			if (this.workflow.connections.hasOwnProperty(node.name)) {
+				delete this.workflow.connections[node.name];
+			}
+
+			// Remove all destination connections
+			const indexesToRemove = [];
+			let sourceNode: string, type: string, sourceIndex: string, connectionIndex: string, connectionData: IConnection;
+			for (sourceNode of Object.keys(this.workflow.connections)) {
+				for (type of Object.keys(this.workflow.connections[sourceNode])) {
+					for (sourceIndex of Object.keys(this.workflow.connections[sourceNode][type])) {
+						indexesToRemove.length = 0;
+						for (connectionIndex of Object.keys(this.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)])) {
+							connectionData = this.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)][parseInt(connectionIndex, 10)];
+							if (connectionData.node === node.name) {
+								indexesToRemove.push(connectionIndex);
+							}
+						}
+
+						indexesToRemove.forEach((index) => {
+							this.workflow.connections[sourceNode][type][parseInt(sourceIndex, 10)].splice(parseInt(index, 10), 1);
+						});
+					}
+				}
+			}
+		},
+
+		renameNodeSelectedAndExecution(nameData: { old: string, new: string }): void {
+			const uiStore = useUIStore();
+			uiStore.stateIsDirty = true;
+			// If node has any WorkflowResultData rename also that one that the data
+			// does still get displayed also after node got renamed
+			if (this.workflowExecutionData !== null && this.workflowExecutionData.data && this.workflowExecutionData.data.resultData.runData.hasOwnProperty(nameData.old)) {
+				this.workflowExecutionData.data.resultData.runData[nameData.new] = this.workflowExecutionData.data.resultData.runData[nameData.old];
+				delete this.workflowExecutionData.data.resultData.runData[nameData.old];
+			}
+
+			// In case the renamed node was last selected set it also there with the new name
+			if (uiStore.lastSelectedNode === nameData.old) {
+				uiStore.lastSelectedNode = nameData.new;
+			}
+
+			Vue.set(this.nodeMetadata, nameData.new, this.nodeMetadata[nameData.old]);
+			Vue.delete(this.nodeMetadata, nameData.old);
+
+			if (this.workflow.pinData && this.workflow.pinData.hasOwnProperty(nameData.old)) {
+				Vue.set(this.workflow.pinData, nameData.new, this.workflow.pinData[nameData.old]);
+				Vue.delete(this.workflow.pinData, nameData.old);
+			}
+
+			this.workflowExecutionPairedItemMappings = getPairedItemsMapping(this.workflowExecutionData);
+		},
+
+		resetAllNodesIssues(): boolean {
+			this.workflow.nodes.forEach((node) => {
+				node.issues = undefined;
+			});
+			return true;
+		},
+
+		setNodeIssue(nodeIssueData: INodeIssueData): boolean {
+			const node = this.workflow.nodes.find(node => {
+				return node.name === nodeIssueData.node;
+			});
+			if (!node) {
+				return false;
+			}
+			if (nodeIssueData.value === null) {
+				// Remove the value if one exists
+				if (node.issues === undefined || node.issues[nodeIssueData.type] === undefined) {
+					// No values for type exist so nothing has to get removed
+					return true;
+				}
+
+				// @ts-ignore
+				Vue.delete(node.issues, nodeIssueData.type);
+			} else {
+				if (node.issues === undefined) {
+					Vue.set(node, 'issues', {});
+				}
+				// Set/Overwrite the value
+				Vue.set(node.issues!, nodeIssueData.type, nodeIssueData.value);
+			}
+			return true;
+		},
+
+		addNode(nodeData: INodeUi): void {
+			if (!nodeData.hasOwnProperty('name')) {
+				// All nodes have to have a name
+				// TODO: Check if there is an error or whatever that is supposed to be returned
+				return;
+			}
+			this.workflow.nodes.push(nodeData);
+		},
+
+		removeNode(node: INodeUi): void {
+			Vue.delete(this.nodeMetadata, node.name);
+
+			if (this.workflow.pinData && this.workflow.pinData.hasOwnProperty(node.name)) {
+				Vue.delete(this.workflow.pinData, node.name);
+			}
+
+			for (let i = 0; i < this.workflow.nodes.length; i++) {
+				if (this.workflow.nodes[i].name === node.name) {
+					this.workflow.nodes.splice(i, 1);
+					const uiStore = useUIStore();
+					uiStore.stateIsDirty = true;
+					return;
+				}
+			}
+		},
+
+		removeAllNodes(data: { setStateDirty: boolean, removePinData: boolean }): void {
+			if (data.setStateDirty === true) {
+				const uiStore = useUIStore();
+				uiStore.stateIsDirty = true;
+			}
+
+			if (data.removePinData) {
+				Vue.set(this.workflow, 'pinData', {});
+			}
+
+			this.workflow.nodes.splice(0, this.workflow.nodes.length);
+			this.nodeMetadata = {};
+		},
+
+		updateNodeProperties(updateInformation: INodeUpdatePropertiesInformation): void {
+			// Find the node that should be updated
+			const node = this.workflow.nodes.find(node => {
+				return node.name === updateInformation.name;
+			});
+
+			if (node) {
+				for (const key of Object.keys(updateInformation.properties)) {
+					const uiStore = useUIStore();
+					uiStore.stateIsDirty = true;
+					Vue.set(node, key, updateInformation.properties[key]);
+				}
+			}
+		},
+
+		setNodeValue(updateInformation: IUpdateInformation): void {
+			// Find the node that should be updated
+			const node = this.workflow.nodes.find(node => {
+				return node.name === updateInformation.name;
+			});
+
+			if (node === undefined || node === null) {
+				throw new Error(`Node with the name "${updateInformation.name}" could not be found to set parameter.`);
+			}
+
+			const uiStore = useUIStore();
+			uiStore.stateIsDirty = true;
+			Vue.set(node, updateInformation.key, updateInformation.value);
+		},
+
+		setNodeParameters(updateInformation: IUpdateInformation): void {
+			// Find the node that should be updated
+			const node = this.workflow.nodes.find(node => {
+				return node.name === updateInformation.name;
+			});
+
+			if (node === undefined || node === null) {
+				throw new Error(`Node with the name "${updateInformation.name}" could not be found to set parameter.`);
+			}
+
+			const uiStore = useUIStore();
+			uiStore.stateIsDirty = true;
+			Vue.set(node, 'parameters', updateInformation.value);
+
+			if (!this.nodeMetadata[node.name]) {
+				Vue.set(this.nodeMetadata, node.name, {});
+			}
+			Vue.set(this.nodeMetadata[node.name], 'parametersLastUpdatedAt', Date.now());
+		},
+
+		addNodeExecutionData(pushData: IPushDataNodeExecuteAfter): void {
+			if (this.workflowExecutionData === null || !this.workflowExecutionData.data) {
+				throw new Error('The "workflowExecutionData" is not initialized!');
+			}
+			if (this.workflowExecutionData.data.resultData.runData[pushData.nodeName] === undefined) {
+				Vue.set(this.workflowExecutionData.data.resultData.runData, pushData.nodeName, []);
+			}
+			this.workflowExecutionData.data.resultData.runData[pushData.nodeName].push(pushData.data);
+			this.workflowExecutionPairedItemMappings = getPairedItemsMapping(this.workflowExecutionData);
+		},
+		clearNodeExecutionData(nodeName: string): void {
+			if (this.workflowExecutionData === null || !this.workflowExecutionData.data) {
+				return;
+			}
+			Vue.delete(this.workflowExecutionData.data.resultData.runData, nodeName);
+		},
+
+		pinDataByNodeName(nodeName: string): INodeExecutionData[] | undefined {
+			if (!this.workflow.pinData || !this.workflow.pinData[nodeName]) return undefined;
+			return this.workflow.pinData[nodeName].map(item => item.json) as INodeExecutionData[];
+		},
+
+		activeNode(): INodeUi | null {
+			// kept here for FE hooks
+			const ndvStore = useNDVStore();
+			return ndvStore.activeNode;
+		},
+
+		// Executions actions
+
+		addActiveExecution(newActiveExecution: IExecutionsCurrentSummaryExtended) : void {
+			// Check if the execution exists already
+			const activeExecution = this.activeExecutions.find(execution => {
+				return execution.id === newActiveExecution.id;
+			});
+
+			if (activeExecution !== undefined) {
+				// Exists already so no need to add it again
+				if (activeExecution.workflowName === undefined) {
+					activeExecution.workflowName = newActiveExecution.workflowName;
+				}
+				return;
+			}
+			this.activeExecutions.unshift(newActiveExecution);
+		},
+		finishActiveExecution(finishedActiveExecution: IPushDataExecutionFinished) : void {
+			// Find the execution to set to finished
+			const activeExecution = this.activeExecutions.find(execution => {
+				return execution.id === finishedActiveExecution.executionId;
+			});
+
+			if (activeExecution === undefined) {
+				// The execution could not be found
+				return;
+			}
+
+			if (finishedActiveExecution.executionId !== undefined) {
+				Vue.set(activeExecution, 'id', finishedActiveExecution.executionId);
+			}
+
+			Vue.set(activeExecution, 'finished', finishedActiveExecution.data.finished);
+			Vue.set(activeExecution, 'stoppedAt', finishedActiveExecution.data.stoppedAt);
+		},
+
+		setActiveExecutions(newActiveExecutions: IExecutionsCurrentSummaryExtended[]) : void {
+			Vue.set(this, 'activeExecutions', newActiveExecutions);
+		},
+
+		async loadCurrentWorkflowExecutions (filter: { finished: boolean, status: string }): Promise<IExecutionsSummary[]> {
+			let activeExecutions = [];
+			let finishedExecutions = [];
+			const requestFilter: IDataObject = { workflowId: this.workflowId };
+
+			if (!this.workflowId) {
+				return [];
+			}
+			try {
+				const rootStore = useRootStore();
+				if (filter.status === ''|| !filter.finished) {
+					activeExecutions = await getCurrentExecutions(rootStore.getRestApiContext, requestFilter);
+				}
+				if (filter.status === '' || filter.finished) {
+					if (filter.status === 'waiting') {
+						requestFilter.waitTill = true;
+					} else if (filter.status !== '')  {
+						requestFilter.finished = filter.status === 'success';
+					}
+					finishedExecutions = await getFinishedExecutions(rootStore.getRestApiContext, requestFilter);
+				}
+				// context.commit('setTotalFinishedExecutionsCount', finishedExecutions.count);
+				return [...activeExecutions, ...finishedExecutions.results || []];
+			} catch (error) {
+				throw(error);
+			}
+		},
+		deleteExecution (execution: IExecutionsSummary): void {
+			this.currentWorkflowExecutions.splice(this.currentWorkflowExecutions.indexOf(execution), 1);
+		},
+	},
+});
diff --git a/packages/editor-ui/src/views/ChangePasswordView.vue b/packages/editor-ui/src/views/ChangePasswordView.vue
index e35e5d14a9..cd6ce9220a 100644
--- a/packages/editor-ui/src/views/ChangePasswordView.vue
+++ b/packages/editor-ui/src/views/ChangePasswordView.vue
@@ -15,6 +15,8 @@ import { showMessage } from '@/components/mixins/showMessage';
 import mixins from 'vue-typed-mixins';
 import { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(
 	showMessage,
@@ -30,6 +32,9 @@ export default mixins(
 			config: null as null | IFormBoxConfig,
 		};
 	},
+	computed: {
+		...mapStores(useUsersStore),
+	},
 	async mounted() {
 		this.config = {
 			title: this.$locale.baseText('auth.changePassword'),
@@ -67,9 +72,8 @@ export default mixins(
 				},
 			],
 		};
-
-		const token = this.$route.query.token;
-		const userId = this.$route.query.userId;
+		const token = (!this.$route.query.token || typeof this.$route.query.token !== 'string') ? null : this.$route.query.token;
+		const userId = (!this.$route.query.userId || typeof this.$route.query.userId !== 'string') ? null : this.$route.query.userId;
 		try {
 			if (!token) {
 				throw new Error(this.$locale.baseText('auth.changePassword.missingTokenError'));
@@ -78,7 +82,7 @@ export default mixins(
 				throw new Error(this.$locale.baseText('auth.changePassword.missingUserIdError'));
 			}
 
-			await this.$store.dispatch('users/validatePasswordToken', {token, userId});
+			await this.usersStore.validatePasswordToken({ token, userId });
 		} catch (e) {
 			this.$showMessage({title: this.$locale.baseText('auth.changePassword.tokenValidationError'), type: 'error'});
 		}
@@ -105,17 +109,22 @@ export default mixins(
 		async onSubmit() {
 			try {
 				this.loading = true;
-				const token = this.$route.query.token;
-				const userId = this.$route.query.userId;
-				await this.$store.dispatch('users/changePassword', {token, userId, password: this.password});
+				const token = (!this.$route.query.token || typeof this.$route.query.token !== 'string') ? null : this.$route.query.token;
+				const userId = (!this.$route.query.userId || typeof this.$route.query.userId !== 'string') ? null : this.$route.query.userId;
 
-				this.$showMessage({
-					type: 'success',
-					title: this.$locale.baseText('auth.changePassword.passwordUpdated'),
-					message: this.$locale.baseText('auth.changePassword.passwordUpdatedMessage'),
-				});
+				if (token && userId) {
+					await this.usersStore.changePassword({token, userId, password: this.password});
 
-				await this.$router.push({ name: VIEWS.SIGNIN });
+					this.$showMessage({
+						type: 'success',
+						title: this.$locale.baseText('auth.changePassword.passwordUpdated'),
+						message: this.$locale.baseText('auth.changePassword.passwordUpdatedMessage'),
+					});
+
+					await this.$router.push({ name: VIEWS.SIGNIN });
+				} else {
+					this.$showError(new Error(this.$locale.baseText('auth.validation.missingParameters')), this.$locale.baseText('auth.changePassword.error'));
+				}
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('auth.changePassword.error'));
 			}
diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
index c4d6e1f87d..846c27c99a 100644
--- a/packages/editor-ui/src/views/CredentialsView.vue
+++ b/packages/editor-ui/src/views/CredentialsView.vue
@@ -59,6 +59,10 @@ import ResourceOwnershipSelect from "@/components/forms/ResourceOwnershipSelect.
 import ResourceFiltersDropdown from "@/components/forms/ResourceFiltersDropdown.vue";
 import {CREDENTIAL_SELECT_MODAL_KEY} from '@/constants';
 import Vue from "vue";
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useUsersStore } from '@/stores/users';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 type IResourcesListLayoutInstance = Vue & { sendFiltersTelemetry: (source: string) => void };
 
@@ -88,12 +92,11 @@ export default mixins(
 		};
 	},
 	computed: {
-		currentUser(): IUser {
-			return this.$store.getters['users/currentUser'];
-		},
-		allUsers(): IUser[] {
-			return this.$store.getters['users/allUsers'];
-		},
+		...mapStores(
+			useNodeTypesStore,
+			useUIStore,
+			useUsersStore,
+		),
 		allCredentials(): ICredentialsResponse[] {
 			return this.$store.getters['credentials/allCredentials'];
 		},
@@ -106,7 +109,7 @@ export default mixins(
 	},
 	methods: {
 		addCredential() {
-			this.$store.dispatch('ui/openModal', CREDENTIAL_SELECT_MODAL_KEY);
+			this.uiStore.openModal(CREDENTIAL_SELECT_MODAL_KEY);
 
 			this.$telemetry.track('User clicked add cred button', {
 				source: 'Creds list',
@@ -118,13 +121,13 @@ export default mixins(
 				this.$store.dispatch('credentials/fetchCredentialTypes'),
 			];
 
-			if (this.$store.getters['nodeTypes/allNodeTypes'].length === 0) {
-				loadPromises.push(this.$store.dispatch('nodeTypes/getNodeTypes'));
+			if (this.nodeTypesStore.allNodeTypes.length === 0) {
+				loadPromises.push(this.nodeTypesStore.getNodeTypes());
 			}
 
 			await Promise.all(loadPromises);
 
-			this.$store.dispatch('users/fetchUsers'); // Can be loaded in the background, used for filtering
+			this.usersStore.fetchUsers(); // Can be loaded in the background, used for filtering
 		},
 		onFilter(resource: ICredentialsResponse, filters: { type: string[]; search: string; }, matches: boolean): boolean {
 			if (filters.type.length > 0) {
diff --git a/packages/editor-ui/src/views/ForgotMyPasswordView.vue b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
index 73ddf691e4..26709c4236 100644
--- a/packages/editor-ui/src/views/ForgotMyPasswordView.vue
+++ b/packages/editor-ui/src/views/ForgotMyPasswordView.vue
@@ -13,6 +13,9 @@ import { showMessage } from '@/components/mixins/showMessage';
 import mixins from 'vue-typed-mixins';
 import { IFormBoxConfig } from '@/Interface';
 import { mapGetters } from 'vuex';
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(
 	showMessage,
@@ -27,7 +30,10 @@ export default mixins(
 		};
 	},
 	computed: {
-		...mapGetters('settings', ['isSmtpSetup']),
+		...mapStores(
+			useSettingsStore,
+			useUsersStore,
+		),
 		formConfig(): IFormBoxConfig {
 			const EMAIL_INPUTS: IFormBoxConfig['inputs'] = [
 				{
@@ -59,7 +65,7 @@ export default mixins(
 				redirectLink: '/signin',
 			};
 
-			if (this.isSmtpSetup) {
+			if (this.settingsStore.isSmtpSetup) {
 				return {
 					...DEFAULT_FORM_CONFIG,
 					buttonText: this.$locale.baseText('forgotPassword.getRecoveryLink'),
@@ -76,7 +82,7 @@ export default mixins(
 		async onSubmit(values: { email: string }) {
 			try {
 				this.loading = true;
-				await this.$store.dispatch('users/sendForgotPasswordEmail', values);
+				await this.usersStore.sendForgotPasswordEmail(values);
 
 				this.$showMessage({
 					type: 'success',
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 02152c21a2..d8d73aba10 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -87,7 +87,7 @@
 			@addNode="onAddNode"
 		/>
 		<div
-			:class="{ 'zoom-menu': true, 'regular-zoom-menu': !isDemo, 'demo-zoom-menu': isDemo, expanded: !sidebarMenuCollapsed }">
+			:class="{ 'zoom-menu': true, 'regular-zoom-menu': !isDemo, 'demo-zoom-menu': isDemo, expanded: !uiStore.sidebarMenuCollapsed }">
 			<n8n-icon-button @click="zoomToFit" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomToFit')"
 				icon="expand" />
 			<n8n-icon-button @click="zoomIn" type="tertiary" size="large" :title="$locale.baseText('nodeView.zoomIn')"
@@ -220,6 +220,8 @@ import {
 	IWorkflowTemplate,
 	IExecutionsSummary,
 	IWorkflowToShare,
+	IUser,
+	INodeUpdatePropertiesInformation,
 } from '@/Interface';
 import { mapGetters } from 'vuex';
 
@@ -228,8 +230,17 @@ import '../plugins/PlusEndpointType';
 import { getAccountAge } from '@/modules/userHelpers';
 import { dataPinningEventBus } from "@/event-bus/data-pinning-event-bus";
 import { debounceHelper } from '@/components/mixins/debounce';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
 import { getNodeViewTab } from '@/components/helpers';
 import { Route } from 'vue-router';
+import { useWorkflowsStore } from '@/stores/workflows';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useNDVStore } from '@/stores/ndv';
+import { useTemplatesStore } from '@/stores/templates';
+import { useNodeTypesStore } from '@/stores/nodeTypes';
 
 interface AddNodeOptions {
 	position?: XYPosition;
@@ -271,7 +282,7 @@ export default mixins(
 			// Listen to route changes and load the workflow accordingly
 			'$route' (to: Route, from: Route) {
 				const currentTab = getNodeViewTab(to);
-				const nodeViewNotInitialized = !this.$store.getters['ui/isNodeViewInitialized'];
+				const nodeViewNotInitialized = !this.uiStore.nodeViewInitialized;
 				let workflowChanged =
 					from.params.name !== to.params.name &&
 					// Both 'new' and __EMPTY__ are new workflow names, so ignore them when detecting if wf changed
@@ -285,9 +296,9 @@ export default mixins(
 					if (workflowChanged || nodeViewNotInitialized || isOpeningTemplate) {
 						this.startLoading();
 						if (nodeViewNotInitialized) {
-							const previousDirtyState = this.$store.getters.getStateIsDirty;
+							const previousDirtyState = this.uiStore.stateIsDirty;
 							this.resetWorkspace();
-							this.$store.commit('setStateDirty', previousDirtyState);
+							this.uiStore.stateIsDirty = previousDirtyState;
 						}
 						this.initView().then(() => {
 							this.stopLoading();
@@ -302,7 +313,7 @@ export default mixins(
 					workflowChanged = from.params.name !== to.params.name && !(to.params.name === 'new' && from.params.name === undefined);
 					if (workflowChanged) {
 						// This will trigger node view to update next time workflow tab is opened
-						this.$store.commit('ui/setNodeViewInitialized', false);
+						this.uiStore.nodeViewInitialized = false;
 					}
 				}
 			},
@@ -326,7 +337,7 @@ export default mixins(
 					return;
 				}
 
-				const result = this.$store.getters.getStateIsDirty;
+				const result = this.uiStore.stateIsDirty;
 				if (result) {
 					const confirmModal = await this.confirmModal(
 						this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
@@ -339,11 +350,11 @@ export default mixins(
 
 					if (confirmModal === MODAL_CONFIRMED) {
 						const saved = await this.saveCurrentWorkflow({}, false);
-						if (saved) this.$store.dispatch('settings/fetchPromptsData');
-						this.$store.commit('setStateDirty', false);
+						if (saved) this.settingsStore.fetchPromptsData();
+						this.uiStore.stateIsDirty = false;
 						next();
 					} else if (confirmModal === MODAL_CANCEL) {
-						this.$store.commit('setStateDirty', false);
+						this.uiStore.stateIsDirty = false;
 						next();
 					} else if (confirmModal === MODAL_CLOSE) {
 						next(false);
@@ -356,27 +367,33 @@ export default mixins(
 			}
 		},
 		computed: {
-			...mapGetters('users', [
-				'currentUser',
-			]),
-			...mapGetters('ui', [
-				'sidebarMenuCollapsed',
-			]),
-			...mapGetters('settings', [
-				'isOnboardingCallPromptFeatureEnabled',
-			]),
+			...mapStores(
+				useNodeTypesStore,
+				useNDVStore,
+				useRootStore,
+				useSettingsStore,
+				useTemplatesStore,
+				useUIStore,
+				useUsersStore,
+				useWorkflowsStore,
+			),
+			nativelyNumberSuffixedDefaults(): string[] {
+				return this.rootStore.nativelyNumberSuffixedDefaults;
+			},
+			currentUser(): IUser | null {
+				return this.usersStore.currentUser;
+			},
 			defaultLocale(): string {
-				return this.$store.getters.defaultLocale;
+				return this.rootStore.defaultLocale;
 			},
 			isEnglishLocale(): boolean {
 				return this.defaultLocale === 'en';
 			},
-			...mapGetters(['nativelyNumberSuffixedDefaults']),
 			activeNode(): INodeUi | null {
-				return this.$store.getters['ndv/activeNode'];
+				return this.ndvStore.activeNode;
 			},
 			executionWaitingForWebhook(): boolean {
-				return this.$store.getters.executionWaitingForWebhook;
+				return this.workflowsStore.executionWaitingForWebhook;
 			},
 			isDemo(): boolean {
 				return this.$route.name === VIEWS.DEMO;
@@ -388,10 +405,10 @@ export default mixins(
 				return this.loadingService === null && !this.containsTrigger && !this.isDemo && !this.isExecutionView;
 			},
 			lastSelectedNode(): INodeUi | null {
-				return this.$store.getters.lastSelectedNode;
+				return this.uiStore.getLastSelectedNode;
 			},
 			nodes(): INodeUi[] {
-				return this.$store.getters.allNodes;
+				return this.workflowsStore.allNodes;
 			},
 			runButtonText(): string {
 				if (!this.workflowRunning) {
@@ -405,7 +422,7 @@ export default mixins(
 				return this.$locale.baseText('nodeView.runButtonText.executingWorkflow');
 			},
 			workflowStyle(): object {
-				const offsetPosition = this.getNodeViewOffsetPosition;
+				const offsetPosition = this.uiStore.nodeViewOffsetPosition;
 				return {
 					left: offsetPosition[0] + 'px',
 					top: offsetPosition[1] + 'px',
@@ -419,14 +436,14 @@ export default mixins(
 			backgroundStyle(): object {
 				return CanvasHelpers.getBackgroundStyles(
 					this.nodeViewScale,
-					this.$store.getters.getNodeViewOffsetPosition,
+					this.uiStore.nodeViewOffsetPosition,
 					this.isExecutionPreview,
 				);
 			},
 			workflowClasses() {
 				const returnClasses = [];
 				if (this.ctrlKeyPressed) {
-					if (this.$store.getters.isNodeViewMoveInProgress === true) {
+					if (this.uiStore.nodeViewMoveInProgress === true) {
 						returnClasses.push('move-in-process');
 					} else {
 						returnClasses.push('move-active');
@@ -439,16 +456,16 @@ export default mixins(
 				return returnClasses;
 			},
 			workflowExecution(): IExecutionResponse | null {
-				return this.$store.getters.getWorkflowExecution;
+				return this.workflowsStore.getWorkflowExecution;
 			},
 			workflowRunning(): boolean {
-				return this.$store.getters.isActionActive('workflowRunning');
+				return this.uiStore.isActionActive('workflowRunning');
 			},
 			currentWorkflow (): string {
-				return this.$route.params.name || this.$store.getters.workflowId;
+				return this.$route.params.name || this.workflowsStore.workflowId;
 			},
 			workflowName (): string {
-				return this.$store.getters.workflowName;
+				return this.workflowsStore.workflowName;
 			},
 			allTriggersDisabled(): boolean {
 				const disabledTriggerNodes = this.triggerNodes.filter(node => node.disabled);
@@ -457,7 +474,7 @@ export default mixins(
 			triggerNodes(): INodeUi[] {
 				return this.nodes.filter(node =>
 					node.type === START_NODE_TYPE ||
-					this.$store.getters['nodeTypes/isTriggerNode'](node.type),
+					this.nodeTypesStore.isTriggerNode(node.type),
 				);
 			},
 			containsTrigger(): boolean {
@@ -467,7 +484,7 @@ export default mixins(
 				return !this.containsTrigger || this.allTriggersDisabled;
 			},
 			getNodeViewOffsetPosition(): XYPosition {
-				return this.$store.getters.getNodeViewOffsetPosition;
+				return this.uiStore.nodeViewOffsetPosition;
 			},
 		},
 		data() {
@@ -508,10 +525,10 @@ export default mixins(
 				this.showTriggerMissingTooltip = isVisible;
 			},
 			onRunNode(nodeName: string, source: string) {
-				const node = this.$store.getters.getNodeByName(nodeName);
+				const node = this.workflowsStore.getNodeByName(nodeName);
 				const telemetryPayload = {
 					node_type: node ? node.type : null,
-					workflow_id: this.$store.getters.workflowId,
+					workflow_id: this.workflowsStore.workflowId,
 					source: 'canvas',
 				};
 				this.$telemetry.track('User clicked execute node button', telemetryPayload);
@@ -521,7 +538,7 @@ export default mixins(
 			async onRunWorkflow() {
 				this.getWorkflowDataToSave().then((workflowData) => {
 					const telemetryPayload = {
-						workflow_id: this.$store.getters.workflowId,
+						workflow_id: this.workflowsStore.workflowId,
 						node_graph_string: JSON.stringify(TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes()).nodeGraph),
 					};
 					this.$telemetry.track('User clicked execute workflow button', telemetryPayload);
@@ -551,7 +568,7 @@ export default mixins(
 				});
 			},
 			clearExecutionData() {
-				this.$store.commit('setWorkflowExecutionData', null);
+				this.workflowsStore.workflowExecutionData = null;
 				this.updateNodesExecutionIssues();
 			},
 			translateName(type: string, originalName: string) {
@@ -569,7 +586,7 @@ export default mixins(
 				additionalUsedNames?: string[],
 				type?: string,
 			}) {
-				const allNodeNamesOnCanvas = this.$store.getters.allNodes.map((n: INodeUi) => n.name);
+				const allNodeNamesOnCanvas = this.workflowsStore.allNodes.map((n: INodeUi) => n.name);
 				originalName = this.isEnglishLocale ? originalName : this.translateName(type, originalName);
 
 				if (
@@ -626,7 +643,7 @@ export default mixins(
 			},
 			async onSaveKeyboardShortcut() {
 				const saved = await this.saveCurrentWorkflow();
-				if (saved) this.$store.dispatch('settings/fetchPromptsData');
+				if (saved) await this.settingsStore.fetchPromptsData();
 			},
 			showTriggerCreator(source: string) {
 				if(this.createNodeActive) return;
@@ -651,15 +668,17 @@ export default mixins(
 				if (data === undefined) {
 					throw new Error(`Execution with id "${executionId}" could not be found!`);
 				}
-				this.$store.commit('setWorkflowName', { newName: data.workflowData.name, setStateDirty: false });
-				this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
-				this.$store.commit('setWorkflowExecutionData', data);
-				this.$store.commit('setWorkflowPinData', data.workflowData.pinData);
+				this.workflowsStore.setWorkflowName({ newName: data.workflowData.name, setStateDirty: false });
+				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+				this.workflowsStore.setWorkflowExecutionData(data);
+				if (data.workflowData.pinData) {
+					this.workflowsStore.setWorkflowPinData(data.workflowData.pinData);
+				}
 
 				await this.addNodes(deepCopy(data.workflowData.nodes), deepCopy(data.workflowData.connections));
 				this.$nextTick(() => {
 					this.zoomToFit();
-					this.$store.commit('setStateDirty', false);
+					this.uiStore.stateIsDirty = false;
 				});
 				this.$externalHooks().run('execution.open', { workflowId: data.workflowData.id, workflowName: data.workflowData.name, executionId });
 				this.$telemetry.track('User opened read-only execution', { workflow_id: data.workflowData.id, execution_mode: data.mode, execution_finished: data.finished });
@@ -714,10 +733,10 @@ export default mixins(
 				this.resetWorkspace();
 				data.workflow.nodes = CanvasHelpers.getFixedNodesList(data.workflow.nodes);
 
-				await this.addNodes(data.workflow.nodes, data.workflow.connections);
+				await this.addNodes(data.workflow.nodes as INodeUi[], data.workflow.connections);
 
 				if (data.workflow.pinData) {
-					this.$store.commit('setWorkflowPinData', data.workflow.pinData);
+					this.workflowsStore.setWorkflowPinData(data.workflow.pinData);
 				}
 
 				this.$nextTick(() => {
@@ -729,13 +748,13 @@ export default mixins(
 				this.setLoadingText(this.$locale.baseText('nodeView.loadingTemplate'));
 				this.resetWorkspace();
 
-				this.$store.commit('workflows/setCurrentWorkflowExecutions', []);
-				this.$store.commit('workflows/setActiveWorkflowExecution', null);
+				this.workflowsStore.currentWorkflowExecutions = [];
+				this.workflowsStore.activeWorkflowExecution = null;
 
 				let data: IWorkflowTemplate | undefined;
 				try {
 					this.$externalHooks().run('template.requested', { templateId });
-					data = await this.$store.dispatch('templates/getWorkflowTemplate', templateId);
+					data = await this.templatesStore.getWorkflowTemplate(templateId);
 
 					if (!data) {
 						throw new Error(
@@ -751,17 +770,16 @@ export default mixins(
 					return;
 				}
 
-				data.workflow.nodes = CanvasHelpers.getFixedNodesList(data.workflow.nodes);
+				data.workflow.nodes = CanvasHelpers.getFixedNodesList(data.workflow.nodes) as INodeUi[];
 
 				this.blankRedirect = true;
 				this.$router.replace({ name: VIEWS.NEW_WORKFLOW, query: { templateId } });
 
 				await this.addNodes(data.workflow.nodes, data.workflow.connections);
-				this.workflowData = await this.$store.dispatch('workflows/getNewWorkflowData', data.name);
+				this.workflowData = await this.workflowsStore.getNewWorkflowData(data.name) || {};
 				this.$nextTick(() => {
 					this.zoomToFit();
-
-					this.$store.commit('setStateDirty', true);
+					this.uiStore.stateIsDirty = true;
 				});
 
 				this.$externalHooks().run('template.open', { templateId, templateName: data.name, workflow: data.workflow });
@@ -789,24 +807,26 @@ export default mixins(
 						),
 					);
 				}
-				this.$store.commit('setActive', data.active || false);
-				this.$store.commit('setWorkflowId', workflowId);
-				this.$store.commit('setWorkflowName', { newName: data.name, setStateDirty: false });
-				this.$store.commit('setWorkflowSettings', data.settings || {});
-				this.$store.commit('setWorkflowPinData', data.pinData || {});
-				this.$store.commit('setWorkflowHash', data.hash);
+				this.workflowsStore.setActive(data.active || false);
+				this.workflowsStore.setWorkflowId(workflowId);
+				this.workflowsStore.setWorkflowName({ newName: data.name, setStateDirty: false });
+				this.workflowsStore.setWorkflowSettings(data.settings || {});
+				this.workflowsStore.setWorkflowPinData(data.pinData || {});
+				this.workflowsStore.setWorkflowHash(data.hash || '');
 
 				const tags = (data.tags || []) as ITag[];
-				this.$store.commit('tags/upsertTags', tags);
 				const tagIds = tags.map((tag) => tag.id);
-				this.$store.commit('setWorkflowTagIds', tagIds || []);
+				this.workflowsStore.setWorkflowTagIds(tagIds || []);
+				this.$store.commit('tags/upsertTags', tags);
+
 				await this.addNodes(data.nodes, data.connections);
+
 				if (!this.credentialsUpdated) {
-					this.$store.commit('setStateDirty', false);
+					this.uiStore.stateIsDirty = false;
 				}
 				this.zoomToFit();
 				this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name });
-				this.$store.commit('workflows/setActiveWorkflowExecution', null);
+				this.workflowsStore.activeWorkflowExecution = null;
 				this.stopLoading();
 				return data;
 			},
@@ -871,7 +891,7 @@ export default mixins(
 					this.createNodeActive = false;
 					if (this.activeNode) {
 						this.$externalHooks().run('dataDisplay.nodeEditingFinished');
-						this.$store.commit('ndv/setActiveNodeName', null);
+						this.ndvStore.activeNodeName = null;
 					}
 
 					return;
@@ -958,7 +978,7 @@ export default mixins(
 						if (lastSelectedNode.type === STICKY_NODE_TYPE && this.isReadOnly) {
 							return;
 						}
-						this.$store.commit('ndv/setActiveNodeName', lastSelectedNode.name);
+						this.ndvStore.activeNodeName = lastSelectedNode.name;
 					}
 				} else if (e.key === 'ArrowRight' && e.shiftKey) {
 					// Select all downstream nodes
@@ -973,7 +993,7 @@ export default mixins(
 						return;
 					}
 
-					const connections = this.$store.getters.outgoingConnectionsByNodeName(lastSelectedNode.name);
+					const connections = this.workflowsStore.outgoingConnectionsByNodeName(lastSelectedNode.name);
 
 					if (connections.main === undefined || connections.main.length === 0) {
 						return;
@@ -1028,14 +1048,14 @@ export default mixins(
 					}
 
 					const parentNode = connections.main[0][0].node;
-					const connectionsParent = this.$store.getters.outgoingConnectionsByNodeName(parentNode);
+					const connectionsParent = this.workflowsStore.outgoingConnectionsByNodeName(parentNode);
 
 					if (!Array.isArray(connectionsParent.main) || !connectionsParent.main.length) {
 						return;
 					}
 
 					// Get all the sibling nodes and their x positions to know which one to set active
-					let siblingNode: INodeUi;
+					let siblingNode: INodeUi | null;
 					let lastCheckedNodePosition = e.key === 'ArrowUp' ? -99999999 : 99999999;
 					let nextSelectNode: string | null = null;
 					for (const ouputConnections of connectionsParent.main) {
@@ -1044,19 +1064,21 @@ export default mixins(
 								// Ignore current node
 								continue;
 							}
-							siblingNode = this.$store.getters.getNodeByName(ouputConnection.node);
+							siblingNode = this.workflowsStore.getNodeByName(ouputConnection.node);
 
-							if (e.key === 'ArrowUp') {
-								// Get the next node on the left
-								if (siblingNode.position[1] <= lastSelectedNode.position[1] && siblingNode.position[1] > lastCheckedNodePosition) {
-									nextSelectNode = siblingNode.name;
-									lastCheckedNodePosition = siblingNode.position[1];
-								}
-							} else {
-								// Get the next node on the right
-								if (siblingNode.position[1] >= lastSelectedNode.position[1] && siblingNode.position[1] < lastCheckedNodePosition) {
-									nextSelectNode = siblingNode.name;
-									lastCheckedNodePosition = siblingNode.position[1];
+							if (siblingNode) {
+								if (e.key === 'ArrowUp') {
+									// Get the next node on the left
+									if (siblingNode.position[1] <= lastSelectedNode.position[1] && siblingNode.position[1] > lastCheckedNodePosition) {
+										nextSelectNode = siblingNode.name;
+										lastCheckedNodePosition = siblingNode.position[1];
+									}
+								} else {
+									// Get the next node on the right
+									if (siblingNode.position[1] >= lastSelectedNode.position[1] && siblingNode.position[1] < lastCheckedNodePosition) {
+										nextSelectNode = siblingNode.name;
+										lastCheckedNodePosition = siblingNode.position[1];
+									}
 								}
 							}
 						}
@@ -1072,14 +1094,14 @@ export default mixins(
 				if (!this.editAllowedCheck()) {
 					return;
 				}
-				this.disableNodes(this.$store.getters.getSelectedNodes);
+				this.disableNodes(this.uiStore.getSelectedNodes);
 			},
 
 			deleteSelectedNodes() {
 				// Copy "selectedNodes" as the nodes get deleted out of selection
 				// when they get deleted and if we would use original it would mess
 				// with the index and would so not delete all nodes
-				const nodesToDelete: string[] = this.$store.getters.getSelectedNodes.map((node: INodeUi) => {
+				const nodesToDelete: string[] = this.uiStore.getSelectedNodes.map((node: INodeUi) => {
 					return node.name;
 				});
 				nodesToDelete.forEach((nodeName: string) => {
@@ -1129,23 +1151,23 @@ export default mixins(
 			},
 
 			pushDownstreamNodes(sourceNodeName: string, margin: number) {
-				const sourceNode = this.$store.getters.nodesByName[sourceNodeName];
+				const sourceNode = this.workflowsStore.nodesByName[sourceNodeName];
 				const workflow = this.getCurrentWorkflow();
 				const childNodes = workflow.getChildNodes(sourceNodeName);
 				for (const nodeName of childNodes) {
-					const node = this.$store.getters.nodesByName[nodeName] as INodeUi;
+					const node = this.workflowsStore.nodesByName[nodeName] as INodeUi;
 					if (node.position[0] < sourceNode.position[0]) {
 						continue;
 					}
 
-					const updateInformation = {
+					const updateInformation: INodeUpdatePropertiesInformation = {
 						name: nodeName,
 						properties: {
-							position: [node.position[0] + margin, node.position[1]],
+							position: { position: [node.position[0] + margin, node.position[1]] },
 						},
 					};
 
-					this.$store.commit('updateNodeProperties', updateInformation);
+					this.workflowsStore.updateNodeProperties(updateInformation);
 					this.onNodeMoved(node);
 				}
 			},
@@ -1162,7 +1184,7 @@ export default mixins(
 				this.getSelectedNodesToSave().then((data) => {
 					const workflowToCopy: IWorkflowToShare = {
 						meta: {
-							instanceId: this.$store.getters.instanceId,
+							instanceId: this.rootStore.instanceId,
 						},
 						...data,
 					};
@@ -1179,7 +1201,7 @@ export default mixins(
 						}
 						this.$telemetry.track('User copied nodes', {
 							node_types: data.nodes.map((node) => node.type),
-							workflow_id: this.$store.getters.workflowId,
+							workflow_id: this.workflowsStore.workflowId,
 						});
 					}
 				});
@@ -1189,21 +1211,21 @@ export default mixins(
 				const { scale, offset } = CanvasHelpers.scaleReset({ scale: this.nodeViewScale, offset: this.getNodeViewOffsetPosition });
 
 				this.setZoomLevel(scale);
-				this.$store.commit('setNodeViewOffsetPosition', { newOffset: offset });
+				this.uiStore.nodeViewOffsetPosition = offset;
 			},
 
 			zoomIn() {
 				const { scale, offset: [xOffset, yOffset] } = CanvasHelpers.scaleBigger({ scale: this.nodeViewScale, offset: this.getNodeViewOffsetPosition });
 
 				this.setZoomLevel(scale);
-				this.$store.commit('setNodeViewOffsetPosition', { newOffset: [xOffset, yOffset] });
+				this.uiStore.nodeViewOffsetPosition = [xOffset, yOffset];
 			},
 
 			zoomOut() {
 				const { scale, offset: [xOffset, yOffset] } = CanvasHelpers.scaleSmaller({ scale: this.nodeViewScale, offset: this.getNodeViewOffsetPosition });
 
 				this.setZoomLevel(scale);
-				this.$store.commit('setNodeViewOffsetPosition', { newOffset: [xOffset, yOffset] });
+				this.uiStore.nodeViewOffsetPosition = [xOffset, yOffset];
 			},
 
 			setZoomLevel(zoomLevel: number) {
@@ -1247,7 +1269,7 @@ export default mixins(
 			// Extend nodes with placeholder trigger button as NodeUI object
 			// with the centered position if canvas doesn't contains trigger node
 			getNodesWithPlaceholderNode(): INodeUi[] {
-				const nodes = this.$store.getters.allNodes as INodeUi[];
+				const nodes = this.workflowsStore.allNodes;
 
 				const extendedNodes = this.containsTrigger
 					? nodes
@@ -1265,11 +1287,11 @@ export default mixins(
 				const {zoomLevel, offset} = CanvasHelpers.getZoomToFit(nodes, !this.isDemo);
 
 				this.setZoomLevel(zoomLevel);
-				this.$store.commit('setNodeViewOffsetPosition', { newOffset: offset });
+				this.uiStore.nodeViewOffsetPosition = offset;
 			},
 
 			async stopExecution() {
-				const executionId = this.$store.getters.activeExecutionId;
+				const executionId = this.workflowsStore.activeExecutionId;
 				if (executionId === null) {
 					return;
 				}
@@ -1297,11 +1319,11 @@ export default mixins(
 							executionId,
 							retryOf: execution.retryOf,
 						} as IPushDataExecutionFinished;
-						this.$store.commit('finishActiveExecution', pushData);
+						this.workflowsStore.finishActiveExecution(pushData);
 						this.$titleSet(execution.workflowData.name, 'IDLE');
-						this.$store.commit('setExecutingNode', null);
-						this.$store.commit('setWorkflowExecutionData', executedData);
-						this.$store.commit('removeActiveAction', 'workflowRunning');
+						this.workflowsStore.executingNode = null;
+						this.workflowsStore.setWorkflowExecutionData(executedData as IExecutionResponse);
+						this.uiStore.removeActiveAction('workflowRunning');
 						this.$showMessage({
 							title: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.title'),
 							message: this.$locale.baseText('nodeView.showMessage.stopExecutionCatch.message'),
@@ -1318,7 +1340,7 @@ export default mixins(
 
 				this.getWorkflowDataToSave().then((workflowData) => {
 					const trackProps = {
-						workflow_id: this.$store.getters.workflowId,
+						workflow_id: this.workflowsStore.workflowId,
 						node_graph_string: JSON.stringify(TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase, this.getNodeTypes()).nodeGraph),
 					};
 
@@ -1328,7 +1350,7 @@ export default mixins(
 
 			async stopWaitingForWebhook() {
 				try {
-					await this.restApi().removeTestWebhook(this.$store.getters.workflowId);
+					await this.restApi().removeTestWebhook(this.workflowsStore.workflowId);
 				} catch (error) {
 					this.$showError(
 						error,
@@ -1341,54 +1363,56 @@ export default mixins(
 			 * This method gets called when data got pasted into the window
 			 */
 			async receivedCopyPasteData(plainTextData: string): Promise<void> {
-				let workflowData: IWorkflowDataUpdate | undefined;
-
-				if (this.editAllowedCheck() === false) {
-					return;
-				}
-				// Check if it is an URL which could contain workflow data
-				if (plainTextData.match(/^http[s]?:\/\/.*\.json$/i)) {
-					// Pasted data points to a possible workflow JSON file
-
-					if (!this.editAllowedCheck()) {
+				const currentTab = getNodeViewTab(this.$route);
+				if (currentTab === MAIN_HEADER_TABS.WORKFLOW) {
+					let workflowData: IWorkflowDataUpdate | undefined;
+					if (this.editAllowedCheck() === false) {
 						return;
 					}
-
-					const importConfirm = await this.confirmMessage(
-						this.$locale.baseText(
-							'nodeView.confirmMessage.receivedCopyPasteData.message',
-							{ interpolate: { plainTextData } },
-						),
-						this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.headline'),
-						'warning',
-						this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText'),
-						this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText'),
-					);
-
-					if (!importConfirm) {
-						return;
-					}
-
-					workflowData = await this.getWorkflowDataFromUrl(plainTextData);
-					if (workflowData === undefined) {
-						return;
-					}
-				} else {
-					// Pasted data is is possible workflow data
-					try {
-						// Check first if it is valid JSON
-						workflowData = JSON.parse(plainTextData);
+					// Check if it is an URL which could contain workflow data
+					if (plainTextData.match(/^http[s]?:\/\/.*\.json$/i)) {
+						// Pasted data points to a possible workflow JSON file
 
 						if (!this.editAllowedCheck()) {
 							return;
 						}
-					} catch (e) {
-						// Is no valid JSON so ignore
-						return;
-					}
-				}
 
-				return this.importWorkflowData(workflowData!, false, 'paste');
+						const importConfirm = await this.confirmMessage(
+							this.$locale.baseText(
+								'nodeView.confirmMessage.receivedCopyPasteData.message',
+								{ interpolate: { plainTextData } },
+							),
+							this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.headline'),
+							'warning',
+							this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.confirmButtonText'),
+							this.$locale.baseText('nodeView.confirmMessage.receivedCopyPasteData.cancelButtonText'),
+						);
+
+						if (!importConfirm) {
+							return;
+						}
+
+						workflowData = await this.getWorkflowDataFromUrl(plainTextData);
+						if (workflowData === undefined) {
+							return;
+						}
+					} else {
+						// Pasted data is is possible workflow data
+						try {
+							// Check first if it is valid JSON
+							workflowData = JSON.parse(plainTextData);
+
+							if (!this.editAllowedCheck()) {
+								return;
+							}
+						} catch (e) {
+							// Is no valid JSON so ignore
+							return;
+						}
+					}
+
+					return this.importWorkflowData(workflowData!, false, 'paste');
+				}
 			},
 
 			// Returns the workflow data from a given URL. If no data gets found or
@@ -1438,7 +1462,7 @@ export default mixins(
 						});
 					}
 
-					const currInstanceId = this.$store.getters.instanceId;
+					const currInstanceId = this.rootStore.instanceId;
 
 					const nodeGraph = JSON.stringify(
 						TelemetryHelpers.generateNodesGraph(workflowData as IWorkflowBase,
@@ -1450,11 +1474,11 @@ export default mixins(
 					);
 					if (source === 'paste') {
 						this.$telemetry.track('User pasted nodes', {
-							workflow_id: this.$store.getters.workflowId,
+							workflow_id: this.workflowsStore.workflowId,
 							node_graph_string: nodeGraph,
 						});
 					} else {
-						this.$telemetry.track('User imported workflow', { source, workflow_id: this.$store.getters.workflowId, node_graph_string: nodeGraph });
+						this.$telemetry.track('User imported workflow', { source, workflow_id: this.workflowsStore.workflowId, node_graph_string: nodeGraph });
 					}
 
 					// By default we automatically deselect all the currently
@@ -1475,10 +1499,10 @@ export default mixins(
 					});
 
 					if (workflowData.pinData) {
-						this.$store.commit('setWorkflowPinData', workflowData.pinData);
+						this.workflowsStore.setWorkflowPinData(workflowData.pinData);
 					}
 
-					const tagsEnabled = this.$store.getters['settings/areTagsEnabled'];
+					const tagsEnabled = this.settingsStore.areTagsEnabled;
 					if (importTags && tagsEnabled && Array.isArray(workflowData.tags)) {
 						const allTags: ITag[] = await this.$store.dispatch('tags/fetchAll');
 						const tagNames = new Set(allTags.map((tag) => tag.name));
@@ -1508,7 +1532,7 @@ export default mixins(
 							return accu;
 						}, []);
 
-						this.$store.commit('addWorkflowTagIds', tagIds);
+						this.workflowsStore.addWorkflowTagIds(tagIds);
 					}
 
 				} catch (error) {
@@ -1543,7 +1567,7 @@ export default mixins(
 			},
 
 			nodeDeselectedByName(nodeName: string) {
-				const node = this.$store.getters.getNodeByName(nodeName);
+				const node = this.workflowsStore.getNodeByName(nodeName);
 				if (node) {
 					this.nodeDeselected(node);
 				}
@@ -1554,18 +1578,17 @@ export default mixins(
 					this.deselectAllNodes();
 				}
 
-				const node = this.$store.getters.getNodeByName(nodeName);
+				const node = this.workflowsStore.getNodeByName(nodeName);
 				if (node) {
 					this.nodeSelected(node);
-				}
+					this.uiStore.lastSelectedNode = node.name;
+					this.uiStore.lastSelectedNodeOutputIndex = null;
+					this.lastSelectedConnection = null;
+					this.newNodeInsertPosition = null;
 
-				this.$store.commit('setLastSelectedNode', node.name);
-				this.$store.commit('setLastSelectedNodeOutputIndex', null);
-				this.lastSelectedConnection = null;
-				this.newNodeInsertPosition = null;
-
-				if (setActive) {
-					this.$store.commit('ndv/setActiveNodeName', node.name);
+					if (setActive) {
+						this.ndvStore.activeNodeName = node.name;
+					}
 				}
 			},
 			showMaxNodeTypeError(nodeTypeData: INodeTypeDescription) {
@@ -1609,8 +1632,8 @@ export default mixins(
 					};
 
 					await this.loadNodesProperties([newNodeData].map(node => ({name: node.type, version: node.typeVersion})));
-					const nodeType = this.$store.getters['nodeTypes/getNodeType'](newNodeData.type, newNodeData.typeVersion) as INodeTypeDescription;
-				 	const nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, {}, true, false, newNodeData);
+					const nodeType = this.nodeTypesStore.getNodeType(newNodeData.type, newNodeData.typeVersion);
+				 	const nodeParameters = NodeHelpers.getNodeParameters(nodeType?.properties || [], {}, true, false, newNodeData);
 
 					if (nodeTypeData.credentials) {
 						const authentication = nodeTypeData.credentials.find(type => type.name === defaultCredential.type);
@@ -1651,7 +1674,7 @@ export default mixins(
 			},
 
 			async injectNode (nodeTypeName: string, options: AddNodeOptions = {}) {
-				const nodeTypeData: INodeTypeDescription | null = this.$store.getters['nodeTypes/getNodeType'](nodeTypeName);
+				const nodeTypeData: INodeTypeDescription | null = this.nodeTypesStore.getNodeType(nodeTypeName);
 
 				if (nodeTypeData === null) {
 					this.$showMessage({
@@ -1697,7 +1720,7 @@ export default mixins(
 						let yOffset = 0;
 
 						if (lastSelectedConnection) {
-							const sourceNodeType = this.$store.getters['nodeTypes/getNodeType'](lastSelectedNode.type, lastSelectedNode.typeVersion) as INodeTypeDescription | null;
+							const sourceNodeType = this.nodeTypesStore.getNodeType(lastSelectedNode.type, lastSelectedNode.typeVersion);
 							const offsets = [[-100, 100], [-140, 0, 140], [-240, -100, 100, 240]];
 							if (sourceNodeType && sourceNodeType.outputs.length > 1) {
 								const offset = offsets[sourceNodeType.outputs.length - 2];
@@ -1717,7 +1740,7 @@ export default mixins(
 				} else {
 					// If added node is a trigger and it's the first one added to the canvas
 					// we place it at canvasAddButtonPosition to replace the canvas add button
-					const position = this.$store.getters['nodeTypes/isTriggerNode'](nodeTypeName) && !this.containsTrigger
+					const position = this.nodeTypesStore.isTriggerNode(nodeTypeName) && !this.containsTrigger
 						? this.canvasAddButtonPosition
 						// If no node is active find a free spot
 						: this.lastClickPosition as XYPosition;
@@ -1738,15 +1761,15 @@ export default mixins(
 
 				await this.addNodes([newNodeData]);
 
-				this.$store.commit('setStateDirty', true);
+				this.uiStore.stateIsDirty = true;
 
 				if (nodeTypeName === STICKY_NODE_TYPE) {
-					this.$telemetry.trackNodesPanel('nodeView.addSticky', { workflow_id: this.$store.getters.workflowId });
+					this.$telemetry.trackNodesPanel('nodeView.addSticky', { workflow_id: this.workflowsStore.workflowId });
 				} else {
 					this.$externalHooks().run('nodeView.addNodeButton', { nodeTypeName });
 					const trackProperties: ITelemetryTrackProperties = {
 						node_type: nodeTypeName,
-						workflow_id: this.$store.getters.workflowId,
+						workflow_id: this.workflowsStore.workflowId,
 						drag_and_drop: options.dragAndDrop,
 					};
 
@@ -1767,7 +1790,7 @@ export default mixins(
 				return newNodeData;
 			},
 			getConnection(sourceNodeName: string, sourceNodeOutputIndex: number, targetNodeName: string, targetNodeOuputIndex: number): IConnection | undefined {
-				const nodeConnections = (this.$store.getters.outgoingConnectionsByNodeName(sourceNodeName) as INodeConnections).main;
+				const nodeConnections = (this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName) as INodeConnections).main;
 				if (nodeConnections) {
 					const connections: IConnection[] | null = nodeConnections[sourceNodeOutputIndex];
 
@@ -1805,7 +1828,7 @@ export default mixins(
 
 				const lastSelectedConnection = this.lastSelectedConnection;
 				const lastSelectedNode = this.lastSelectedNode;
-				const lastSelectedNodeOutputIndex = this.$store.getters.lastSelectedNodeOutputIndex;
+				const lastSelectedNodeOutputIndex = this.uiStore.lastSelectedNodeOutputIndex;
 
 				const newNodeData = await this.injectNode(nodeTypeName, options);
 				if (!newNodeData) {
@@ -1845,13 +1868,13 @@ export default mixins(
 					// Get the node and set it as active that new nodes
 					// which get created get automatically connected
 					// to it.
-					const sourceNode = this.$store.getters.getNodeById(info.sourceId) as INodeUi | null;
+					const sourceNode = this.workflowsStore.getNodeById(info.sourceId);
 					if (!sourceNode) {
 						return;
 					}
 
-					this.$store.commit('setLastSelectedNode', sourceNode.name);
-					this.$store.commit('setLastSelectedNodeOutputIndex', info.index);
+					this.uiStore.lastSelectedNode = sourceNode.name;
+					this.uiStore.lastSelectedNodeOutputIndex = info.index;
 					this.newNodeInsertPosition = null;
 
 					if (info.connection) {
@@ -1869,12 +1892,14 @@ export default mixins(
 						}
 
 						if (this.pullConnActiveNodeName) {
-							const sourceNode = this.$store.getters.getNodeById(connection.sourceId);
-							const sourceNodeName = sourceNode.name;
-							const outputIndex = connection.getParameters().index;
+							const sourceNode = this.workflowsStore.getNodeById(connection.sourceId);
+							if (sourceNode) {
+								const sourceNodeName = sourceNode.name;
+								const outputIndex = connection.getParameters().index;
 
-							this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0);
-							this.pullConnActiveNodeName = null;
+								this.connectTwoNodes(sourceNodeName, outputIndex, this.pullConnActiveNodeName, 0);
+								this.pullConnActiveNodeName = null;
+							}
 							return;
 						}
 
@@ -1894,8 +1919,8 @@ export default mixins(
 						// @ts-ignore
 						const targetInfo = info.dropEndpoint.getParameters();
 
-						const sourceNodeName = this.$store.getters.getNodeById(sourceInfo.nodeId).name;
-						const targetNodeName = this.$store.getters.getNodeById(targetInfo.nodeId).name;
+						const sourceNodeName = this.workflowsStore.getNodeById(sourceInfo.nodeId)?.name || '';
+						const targetNodeName = this.workflowsStore.getNodeById(targetInfo.nodeId)?.name || '';
 
 						// check for duplicates
 						if (this.getConnection(sourceNodeName, sourceInfo.index, targetNodeName, targetInfo.index)) {
@@ -1919,15 +1944,17 @@ export default mixins(
 						const sourceInfo = info.sourceEndpoint.getParameters();
 						const targetInfo = info.targetEndpoint.getParameters();
 
-						const sourceNodeName = this.$store.getters.getNodeById(sourceInfo.nodeId).name;
-						const targetNodeName = this.$store.getters.getNodeById(targetInfo.nodeId).name;
+						const sourceNodeName = this.workflowsStore.getNodeById(sourceInfo.nodeId)?.name;
+						const targetNodeName = this.workflowsStore.getNodeById(targetInfo.nodeId)?.name;
 
-						info.connection.__meta = {
-							sourceNodeName,
-							sourceOutputIndex: sourceInfo.index,
-							targetNodeName,
-							targetOutputIndex: targetInfo.index,
-						};
+						if (sourceNodeName && targetNodeName) {
+							info.connection.__meta = {
+								sourceNodeName,
+								sourceOutputIndex: sourceInfo.index,
+								targetNodeName,
+								targetOutputIndex: targetInfo.index,
+							};
+						}
 
 						CanvasHelpers.resetConnection(info.connection);
 
@@ -2011,7 +2038,7 @@ export default mixins(
 
 						CanvasHelpers.moveBackInputLabelPosition(info.targetEndpoint);
 
-						this.$store.commit('addConnection', {
+						this.workflowsStore.addConnection({
 							connection: [
 								{
 									node: sourceNodeName,
@@ -2046,12 +2073,12 @@ export default mixins(
 
 						const connectionInfo = [
 							{
-								node: this.$store.getters.getNodeById(sourceInfo.nodeId).name,
+								node: this.workflowsStore.getNodeById(sourceInfo.nodeId)?.name || '',
 								type: sourceInfo.type,
 								index: sourceInfo.index,
 							},
 							{
-								node: this.$store.getters.getNodeById(targetInfo.nodeId).name,
+								node: this.workflowsStore.getNodeById(targetInfo.nodeId)?.name || '',
 								type: targetInfo.type,
 								index: targetInfo.index,
 							},
@@ -2070,7 +2097,7 @@ export default mixins(
 						this.__removeConnectionByConnectionInfo(info, false);
 
 						if (this.pullConnActiveNodeName) { // establish new connection when dragging connection from one node to another
-							const sourceNode = this.$store.getters.getNodeById(info.connection.sourceId);
+							const sourceNode = this.workflowsStore.getNodeById(info.connection.sourceId);
 							const sourceNodeName = sourceNode.name;
 							const outputIndex = info.connection.getParameters().index;
 
@@ -2110,9 +2137,9 @@ export default mixins(
 								const [x, y] = CanvasHelpers.getMousePosition(e);
 								if (top <= y && bottom >= y && (left - inputMargin) <= x && right >= x) {
 									const nodeName = (element as HTMLElement).dataset['name'] as string;
-									const node = this.$store.getters.getNodeByName(nodeName) as INodeUi | null;
+									const node = this.workflowsStore.getNodeByName(nodeName) as INodeUi | null;
 									if (node) {
-										const nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
+										const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 										if (nodeType && nodeType.inputs && nodeType.inputs.length === 1) {
 											this.pullConnActiveNodeName = node.name;
 											const endpointUUID = this.getInputEndpointUUID(nodeName, 0);
@@ -2167,11 +2194,11 @@ export default mixins(
 			async newWorkflow(): Promise<void> {
 				this.startLoading();
 				await this.resetWorkspace();
-				this.workflowData = await this.$store.dispatch('workflows/getNewWorkflowData');
-				this.$store.commit('workflows/setCurrentWorkflowExecutions', []);
-				this.$store.commit('workflows/setActiveWorkflowExecution', null);
+				this.workflowData = await this.workflowsStore.getNewWorkflowData();
+				this.workflowsStore.currentWorkflowExecutions = [];
+				this.workflowsStore.activeWorkflowExecution = null;
 
-				this.$store.commit('setStateDirty', false);
+				this.uiStore.stateIsDirty = false;
 				this.setZoomLevel(1);
 				this.zoomToFit();
 			},
@@ -2202,15 +2229,15 @@ export default mixins(
 						this.$telemetry.track('welcome note inserted');
 					}
 				}
-				this.$store.commit('ui/setNodeViewInitialized', true);
-				this.$store.commit('workflows/setActiveWorkflowExecution', null);
+				this.uiStore.nodeViewInitialized = true;
+				this.workflowsStore.activeWorkflowExecution = null;
 				this.stopLoading();
 			}),
 			async initView(): Promise<void> {
 				if (this.$route.params.action === 'workflowSave') {
 					// In case the workflow got saved we do not have to run init
 					// as only the route changed but all the needed data is already loaded
-					this.$store.commit('setStateDirty', false);
+					this.uiStore.stateIsDirty = false;
 					return Promise.resolve();
 				}
 				if (this.blankRedirect) {
@@ -2225,7 +2252,7 @@ export default mixins(
 					const executionId = this.$route.params.id;
 					await this.openExecution(executionId);
 				} else {
-					const result = this.$store.getters.getStateIsDirty;
+					const result = this.uiStore.stateIsDirty;;
 					if (result) {
 						const confirmModal = await this.confirmModal(
 							this.$locale.baseText('generic.unsavedWork.confirmMessage.message'),
@@ -2237,7 +2264,7 @@ export default mixins(
 						);
 						if (confirmModal === MODAL_CONFIRMED) {
 							const saved = await this.saveCurrentWorkflow();
-							if (saved) this.$store.dispatch('settings/fetchPromptsData');
+							if (saved) await this.settingsStore.fetchPromptsData();
 						} else if (confirmModal === MODAL_CLOSE) {
 							return Promise.resolve();
 						}
@@ -2268,14 +2295,14 @@ export default mixins(
 						await this.newWorkflow();
 					}
 				}
-				this.$store.commit('ui/setNodeViewInitialized', true);
+				this.uiStore.nodeViewInitialized = true;
 				document.addEventListener('keydown', this.keyDown);
 				document.addEventListener('keyup', this.keyUp);
 				window.addEventListener("beforeunload", (e) => {
 					if (this.isDemo){
 						return;
 					}
-					else if (this.$store.getters.getStateIsDirty === true) {
+					else if (this.uiStore.stateIsDirty === true) {
 						const confirmationMessage = this.$locale.baseText('nodeView.itLooksLikeYouHaveBeenEditingSomething');
 						(e || window.event).returnValue = confirmationMessage; //Gecko + IE
 						return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
@@ -2288,7 +2315,7 @@ export default mixins(
 				});
 			},
 			getOutputEndpointUUID(nodeName: string, index: number): string | null {
-				const node = this.$store.getters.getNodeByName(nodeName);
+				const node = this.workflowsStore.getNodeByName(nodeName);
 				if (!node) {
 					return null;
 				}
@@ -2296,7 +2323,7 @@ export default mixins(
 				return CanvasHelpers.getOutputEndpointUUID(node.id, index);
 			},
 			getInputEndpointUUID(nodeName: string, index: number) {
-				const node = this.$store.getters.getNodeByName(nodeName);
+				const node = this.workflowsStore.getNodeByName(nodeName);
 				if (!node) {
 					return null;
 				}
@@ -2326,17 +2353,17 @@ export default mixins(
 					const connectionProperties = { connection, setStateDirty: false };
 					// When nodes get connected it gets saved automatically to the storage
 					// so if we do not connect we have to save the connection manually
-					this.$store.commit('addConnection', connectionProperties);
+					this.workflowsStore.addConnection(connectionProperties);
 				}
 
 				setTimeout(() => {
-					this.addPinDataConnections(this.$store.getters.pinData);
+					this.addPinDataConnections(this.workflowsStore.pinData);
 				});
 			},
 			__removeConnection(connection: [IConnection, IConnection], removeVisualConnection = false) {
 				if (removeVisualConnection) {
-					const sourceId = this.$store.getters.getNodeByName(connection[0].node);
-					const targetId = this.$store.getters.getNodeByName(connection[1].node);
+					const sourceId = this.workflowsStore.getNodeByName(connection[0].node);
+					const targetId = this.workflowsStore.getNodeByName(connection[1].node);
 					// @ts-ignore
 					const connections = this.instance.getConnections({
 						source: sourceId,
@@ -2349,7 +2376,7 @@ export default mixins(
 					});
 				}
 
-				this.$store.commit('removeConnection', { connection });
+				this.workflowsStore.removeConnection({ connection });
 			},
 			__deleteJSPlumbConnection(connection: Connection) {
 				// Make sure to remove the overlay else after the second move
@@ -2365,12 +2392,10 @@ export default mixins(
 				}
 			},
 			__removeConnectionByConnectionInfo(info: OnConnectionBindInfo, removeVisualConnection = false) {
-				// @ts-ignore
 				const sourceInfo = info.sourceEndpoint.getParameters();
-				const sourceNode = this.$store.getters.getNodeById(sourceInfo.nodeId);
-				// @ts-ignore
+				const sourceNode = this.workflowsStore.getNodeById(sourceInfo.nodeId);
 				const targetInfo = info.targetEndpoint.getParameters();
-				const targetNode = this.$store.getters.getNodeById(targetInfo.nodeId);
+				const targetNode = this.workflowsStore.getNodeById(targetInfo.nodeId);
 
 				if (sourceNode && targetNode) {
 					const connectionInfo = [
@@ -2390,68 +2415,70 @@ export default mixins(
 						this.__deleteJSPlumbConnection(info.connection);
 					}
 
-					this.$store.commit('removeConnection', { connection: connectionInfo });
+					this.workflowsStore.removeConnection({ connection: connectionInfo });
 				}
 			},
 			async duplicateNode(nodeName: string) {
 				if (!this.editAllowedCheck()) {
 					return;
 				}
+				const node = this.workflowsStore.getNodeByName(nodeName);
 
-				const node = this.$store.getters.getNodeByName(nodeName);
+				if (node) {
+					const nodeTypeData = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 
-				const nodeTypeData: INodeTypeDescription | null = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
-				if (nodeTypeData && nodeTypeData.maxNodes !== undefined && this.getNodeTypeCount(node.type) >= nodeTypeData.maxNodes) {
-					this.showMaxNodeTypeError(nodeTypeData);
-					return;
-				}
+					if (nodeTypeData && nodeTypeData.maxNodes !== undefined && this.getNodeTypeCount(node.type) >= nodeTypeData.maxNodes) {
+						this.showMaxNodeTypeError(nodeTypeData);
+						return;
+					}
 
-				// Deep copy the data so that data on lower levels of the node-properties do
-				// not share objects
-				const newNodeData = deepCopy(this.getNodeDataToSave(node));
-				newNodeData.id = uuid();
+					// Deep copy the data so that data on lower levels of the node-properties do
+					// not share objects
+					const newNodeData = deepCopy(this.getNodeDataToSave(node));
+					newNodeData.id = uuid();
 
-				// Check if node-name is unique else find one that is
-				newNodeData.name = this.getUniqueNodeName({
-					originalName: newNodeData.name,
-					type: newNodeData.type,
-				});
-
-				newNodeData.position = CanvasHelpers.getNewNodePosition(
-					this.nodes,
-					[node.position[0], node.position[1] + 140],
-					[0, 140],
-				);
-
-				if (newNodeData.webhookId) {
-					// Make sure that the node gets a new unique webhook-ID
-					newNodeData.webhookId = uuid();
-				}
-
-				await this.addNodes([newNodeData]);
-
-				const pinData = this.$store.getters['pinDataByNodeName'](nodeName);
-				if (pinData) {
-					this.$store.commit('pinData', {
-						node: newNodeData,
-						data: pinData,
+					// Check if node-name is unique else find one that is
+					newNodeData.name = this.getUniqueNodeName({
+						originalName: newNodeData.name,
+						type: newNodeData.type,
 					});
+
+					newNodeData.position = CanvasHelpers.getNewNodePosition(
+						this.nodes,
+						[node.position[0], node.position[1] + 140],
+						[0, 140],
+					);
+
+					if (newNodeData.webhookId) {
+						// Make sure that the node gets a new unique webhook-ID
+						newNodeData.webhookId = uuid();
+					}
+
+					await this.addNodes([newNodeData]);
+
+					const pinData = this.workflowsStore.pinDataByNodeName(nodeName);
+					if (pinData) {
+						this.workflowsStore.pinData({
+							node: newNodeData,
+							data: pinData,
+						});
+					}
+
+					this.uiStore.stateIsDirty = true;
+
+					// Automatically deselect all nodes and select the current one and also active
+					// current node
+					this.deselectAllNodes();
+					setTimeout(() => {
+						this.nodeSelectedByName(newNodeData.name, false);
+					});
+
+					this.$telemetry.track('User duplicated node', { node_type: node.type, workflow_id: this.workflowsStore.workflowId });
 				}
-
-				this.$store.commit('setStateDirty', true);
-
-				// Automatically deselect all nodes and select the current one and also active
-				// current node
-				this.deselectAllNodes();
-				setTimeout(() => {
-					this.nodeSelectedByName(newNodeData.name, false);
-				});
-
-				this.$telemetry.track('User duplicated node', { node_type: node.type, workflow_id: this.$store.getters.workflowId });
 			},
 			getJSPlumbConnection(sourceNodeName: string, sourceOutputIndex: number, targetNodeName: string, targetInputIndex: number): Connection | undefined {
-				const sourceNode = this.$store.getters.getNodeByName(sourceNodeName) as INodeUi;
-				const targetNode = this.$store.getters.getNodeByName(targetNodeName) as INodeUi;
+				const sourceNode = this.workflowsStore.getNodeByName(sourceNodeName);
+				const targetNode = this.workflowsStore.getNodeByName(targetNodeName);
 				if (!sourceNode || !targetNode) {
 					return;
 				}
@@ -2474,8 +2501,8 @@ export default mixins(
 				});
 			},
 			getJSPlumbEndpoints(nodeName: string): Endpoint[] {
-				const node = this.$store.getters.getNodeByName(nodeName);
-				return this.instance.getEndpoints(node.id);
+				const node = this.workflowsStore.getNodeByName(nodeName);
+				return this.instance.getEndpoints(node !== null ? node.id : '');
 			},
 			getPlusEndpoint(nodeName: string, outputIndex: number): Endpoint | undefined {
 				const endpoints = this.getJSPlumbEndpoints(nodeName);
@@ -2483,21 +2510,25 @@ export default mixins(
 				return endpoints.find((endpoint: Endpoint) => endpoint.type === 'N8nPlus' && endpoint.__meta && endpoint.__meta.index === outputIndex);
 			},
 			getIncomingOutgoingConnections(nodeName: string): { incoming: Connection[], outgoing: Connection[] } {
-				const node = this.$store.getters.getNodeByName(nodeName);
-				// @ts-ignore
-				const outgoing = this.instance.getConnections({
-					source: node.id,
-				}) as Connection[];
+				const node = this.workflowsStore.getNodeByName(nodeName);
 
-				// @ts-ignore
-				const incoming = this.instance.getConnections({
-					target: node.id,
-				}) as Connection[];
+				if (node) {
+					// @ts-ignore
+					const outgoing = this.instance.getConnections({
+						source: node.id,
+					});
 
-				return {
-					incoming,
-					outgoing,
-				};
+					// @ts-ignore
+					const incoming = this.instance.getConnections({
+						target: node.id,
+					}) as Connection[];
+
+					return {
+						incoming,
+						outgoing,
+					};
+				}
+				return { incoming: [], outgoing: [] };
 			},
 			onNodeMoved(node: INodeUi) {
 				const { incoming, outgoing } = this.getIncomingOutgoingConnections(node.name);
@@ -2508,13 +2539,13 @@ export default mixins(
 				});
 			},
 			onNodeRun({ name, data, waiting }: { name: string, data: ITaskData[] | null, waiting: boolean }) {
-				const pinData = this.$store.getters.pinData;
+				const pinData = this.workflowsStore.getPinData;
 
 				if (pinData && pinData[name]) return;
 
 				const sourceNodeName = name;
-				const sourceNode = this.$store.getters.getNodeByName(sourceNodeName);
-				const sourceId = sourceNode.id;
+				const sourceNode = this.workflowsStore.getNodeByName(sourceNodeName);
+				const sourceId = sourceNode !== null ? sourceNode.id : '';
 
 				if (data === null || data.length === 0 || waiting) {
 					// @ts-ignore
@@ -2536,7 +2567,7 @@ export default mixins(
 					return;
 				}
 
-				const nodeConnections = (this.$store.getters.outgoingConnectionsByNodeName(sourceNodeName) as INodeConnections).main;
+				const nodeConnections = this.workflowsStore.outgoingConnectionsByNodeName(sourceNodeName).main;
 				const outputMap = CanvasHelpers.getOutputSummary(data, nodeConnections || []);
 
 				Object.keys(outputMap).forEach((sourceOutputIndex: string) => {
@@ -2576,7 +2607,7 @@ export default mixins(
 					return;
 				}
 
-				const node = this.$store.getters.getNodeByName(nodeName) as INodeUi | null;
+				const node = this.workflowsStore.getNodeByName(nodeName);
 				if (!node) {
 					return;
 				}
@@ -2608,18 +2639,18 @@ export default mixins(
 					this.$telemetry.track(
 						'User deleted workflow note',
 						{
-							workflow_id: this.$store.getters.workflowId,
+							workflow_id: this.workflowsStore.workflowId,
 							is_welcome_note: node.name === QUICKSTART_NOTE_NAME,
 						},
 					);
 				} else {
 					this.$externalHooks().run('node.deleteNode', { node });
-					this.$telemetry.track('User deleted node', { node_type: node.type, workflow_id: this.$store.getters.workflowId });
+					this.$telemetry.track('User deleted node', { node_type: node.type, workflow_id: this.workflowsStore.workflowId });
 				}
 
 				let waitForNewConnection = false;
 				// connect nodes before/after deleted node
-				const nodeType: INodeTypeDescription | null = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion);
+				const nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 				if (nodeType && nodeType.outputs.length === 1
 					&& nodeType.inputs.length === 1) {
 					const { incoming, outgoing } = this.getIncomingOutgoingConnections(node.name);
@@ -2657,10 +2688,9 @@ export default mixins(
 					this.instance.destroyDraggable(node.id);
 
 					// Remove the connections in data
-					this.$store.commit('removeAllNodeConnection', node);
-
-					this.$store.commit('removeNode', node);
-					this.$store.commit('clearNodeExecutionData', node.name);
+					this.workflowsStore.removeAllNodeConnection(node);
+					this.workflowsStore.removeNode(node);
+					this.workflowsStore.clearNodeExecutionData(node.name);
 
 					if (!waitForNewConnection) {
 						// Now it can draw again
@@ -2668,8 +2698,7 @@ export default mixins(
 					}
 
 					// Remove node from selected index if found in it
-					this.$store.commit('removeNodeFromSelection', node);
-
+					this.uiStore.removeNodeFromSelection(node);
 				}, 0); // allow other events to finish like drag stop
 			},
 			valueChanged(parameterData: IUpdateInformation) {
@@ -2729,13 +2758,13 @@ export default mixins(
 				workflow.renameNode(currentName, newName);
 
 				// Update also last selected node and execution data
-				this.$store.commit('renameNodeSelectedAndExecution', { old: currentName, new: newName });
+				this.workflowsStore.renameNodeSelectedAndExecution({ old: currentName, new: newName });
 
 				// Reset all nodes and connections to load the new ones
 				this.deleteEveryEndpoint();
 
-				this.$store.commit('removeAllConnections');
-				this.$store.commit('removeAllNodes', { setStateDirty: true });
+				this.workflowsStore.removeAllConnections({ setStateDirty: false });
+				this.workflowsStore.removeAllNodes({ removePinData: false, setStateDirty: true });
 
 				// Wait a tick that the old nodes had time to get removed
 				await Vue.nextTick();
@@ -2748,14 +2777,14 @@ export default mixins(
 				this.nodeSelectedByName(newName);
 
 				if (isActive) {
-					this.$store.commit('ndv/setActiveNodeName', newName);
+					this.ndvStore.activeNodeName = newName;
 					this.renamingActive = false;
 				}
 			},
 			deleteEveryEndpoint() {
 				// Check as it does not exist on first load
 				if (this.instance) {
-					const nodes = this.$store.getters.allNodes as INodeUi[];
+					const nodes = this.workflowsStore.allNodes;
 					nodes.forEach((node: INodeUi) => {
 						try {
 							// important to prevent memory leak
@@ -2831,7 +2860,7 @@ export default mixins(
 						node.id = uuid();
 					}
 
-					nodeType = this.$store.getters['nodeTypes/getNodeType'](node.type, node.typeVersion) as INodeTypeDescription | null;
+					nodeType = this.nodeTypesStore.getNodeType(node.type, node.typeVersion);
 
 					// Make sure that some properties always exist
 					if (!node.hasOwnProperty('disabled')) {
@@ -2869,7 +2898,7 @@ export default mixins(
 						node.issues = foundNodeIssues;
 					}
 
-					this.$store.commit('addNode', node);
+					this.workflowsStore.addNode(node);
 				});
 
 				// Wait for the node to be rendered
@@ -3025,7 +3054,7 @@ export default mixins(
 				// Add the nodes with the changed node names, expressions and connections
 				await this.addNodes(Object.values(tempWorkflow.nodes), tempWorkflow.connectionsBySourceNode);
 
-				this.$store.commit('setStateDirty', true);
+				this.uiStore.stateIsDirty = true;
 
 				return {
 					nodes: Object.values(tempWorkflow.nodes),
@@ -3042,7 +3071,7 @@ export default mixins(
 				let nodeData;
 				const exportNodeNames: string[] = [];
 
-				for (const node of this.$store.getters.getSelectedNodes) {
+				for (const node of this.uiStore.getSelectedNodes) {
 					try {
 						nodeData = this.getNodeDataToSave(node);
 						exportNodeNames.push(node.name);
@@ -3063,7 +3092,7 @@ export default mixins(
 					typeConnections: INodeConnections;
 
 				data.nodes.forEach((node) => {
-					connections = this.$store.getters.outgoingConnectionsByNodeName(node.name);
+					connections = this.workflowsStore.outgoingConnectionsByNodeName(node.name);
 					if (Object.keys(connections).length === 0) {
 						return;
 					}
@@ -3104,43 +3133,43 @@ export default mixins(
 				if (this.executionWaitingForWebhook) {
 					// Make sure that if there is a waiting test-webhook that
 					// it gets removed
-					this.restApi().removeTestWebhook(this.$store.getters.workflowId)
+					this.restApi().removeTestWebhook(this.workflowsStore.workflowId)
 						.catch(() => {
 							// Ignore all errors
 						});
 				}
 
-				this.$store.commit('removeAllConnections', { setStateDirty: false });
-				this.$store.commit('removeAllNodes', { setStateDirty: false, removePinData: true });
+				this.workflowsStore.removeAllConnections({ setStateDirty: false });
+				this.workflowsStore.removeAllNodes({ setStateDirty: false, removePinData: true });
 
 				// Reset workflow execution data
-				this.$store.commit('setWorkflowExecutionData', null);
-				this.$store.commit('resetAllNodesIssues');
+				this.workflowsStore.setWorkflowExecutionData(null);
+				this.workflowsStore.resetAllNodesIssues();
 				// vm.$forceUpdate();
 
-				this.$store.commit('setActive', false);
-				this.$store.commit('setWorkflowId', PLACEHOLDER_EMPTY_WORKFLOW_ID);
-				this.$store.commit('setWorkflowName', { newName: '', setStateDirty: false });
-				this.$store.commit('setWorkflowSettings', {});
-				this.$store.commit('setWorkflowTagIds', []);
+				this.workflowsStore.setActive(false);
+				this.workflowsStore.setWorkflowId(PLACEHOLDER_EMPTY_WORKFLOW_ID);
+				this.workflowsStore.setWorkflowName({ newName: '', setStateDirty: false });
+				this.workflowsStore.setWorkflowSettings({});
+				this.workflowsStore.setWorkflowTagIds([]);
 
-				this.$store.commit('setActiveExecutionId', null);
-				this.$store.commit('setExecutingNode', null);
-				this.$store.commit('removeActiveAction', 'workflowRunning');
-				this.$store.commit('setExecutionWaitingForWebhook', false);
+				this.workflowsStore.activeExecutionId = null;
+				this.workflowsStore.executingNode = null;
+				this.workflowsStore.executionWaitingForWebhook = false;
+				this.uiStore.removeActiveAction('workflowRunning');
 
-				this.$store.commit('resetSelectedNodes');
-
-				this.$store.commit('setNodeViewOffsetPosition', { newOffset: [0, 0], setStateDirty: false });
+				this.uiStore.resetSelectedNodes();
+				this.uiStore.nodeViewOffsetPosition = [0, 0];
 
+				this.credentialsUpdated = false;
 				return Promise.resolve();
 			},
 			async loadActiveWorkflows(): Promise<void> {
 				const activeWorkflows = await this.restApi().getActiveWorkflows();
-				this.$store.commit('setActiveWorkflows', activeWorkflows);
+				this.workflowsStore.activeWorkflows = activeWorkflows;
 			},
 			async loadNodeTypes(): Promise<void> {
-				await this.$store.dispatch('nodeTypes/getNodeTypes');
+				await this.nodeTypesStore.getNodeTypes();
 			},
 			async loadCredentialTypes(): Promise<void> {
 				await this.$store.dispatch('credentials/fetchCredentialTypes', true);
@@ -3150,7 +3179,7 @@ export default mixins(
 				await this.$store.dispatch('credentials/fetchForeignCredentials');
 			},
 			async loadNodesProperties(nodeInfos: INodeTypeNameVersion[]): Promise<void> {
-				const allNodes: INodeTypeDescription[] = this.$store.getters['nodeTypes/allNodeTypes'];
+				const allNodes: INodeTypeDescription[] = this.nodeTypesStore.allNodeTypes;
 
 				const nodesToBeFetched: INodeTypeNameVersion[] = [];
 				allNodes.forEach(node => {
@@ -3168,7 +3197,7 @@ export default mixins(
 				if (nodesToBeFetched.length > 0) {
 					// Only call API if node information is actually missing
 					this.startLoading();
-					await this.$store.dispatch('nodeTypes/getNodesInformation', nodesToBeFetched);
+					await this.nodeTypesStore.getNodesInformation(nodesToBeFetched);
 					this.stopLoading();
 				}
 			},
@@ -3218,7 +3247,7 @@ export default mixins(
 			},
 			addPinDataConnections(pinData: IPinData) {
 				Object.keys(pinData).forEach((nodeName) => {
-					const node = this.$store.getters.getNodeByName(nodeName);
+					const node = this.workflowsStore.getNodeByName(nodeName);
 					if (!node) {
 						return;
 					}
@@ -3238,7 +3267,7 @@ export default mixins(
 			},
 			removePinDataConnections(pinData: IPinData) {
 				Object.keys(pinData).forEach((nodeName) => {
-					const node = this.$store.getters.getNodeByName(nodeName);
+					const node = this.workflowsStore.getNodeByName(nodeName);
 					if (!node) {
 						return;
 					}
@@ -3259,7 +3288,7 @@ export default mixins(
 
 				this.createNodeActive = createNodeActive;
 				this.$externalHooks().run('nodeView.createNodeActiveChanged', { source, createNodeActive });
-				this.$telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', { source, createNodeActive, workflow_id: this.$store.getters.workflowId });
+				this.$telemetry.trackNodesPanel('nodeView.createNodeActiveChanged', { source, createNodeActive, workflow_id: this.workflowsStore.workflowId });
 			},
 			onAddNode({ nodeTypeName, position }: { nodeTypeName: string; position?: [number, number] }) {
 				this.addNode(nodeTypeName, { position });
@@ -3268,9 +3297,6 @@ export default mixins(
 		async mounted() {
 			this.$titleReset();
 			window.addEventListener('message', this.onPostMessageReceived);
-			this.$root.$on('importWorkflowData', this.onImportWorkflowDataEvent);
-			this.$root.$on('newWorkflow', this.newWorkflow);
-			this.$root.$on('importWorkflowUrl', this.onImportWorkflowUrlEvent);
 
 			this.startLoading();
 			this.resetWorkspace();
@@ -3281,7 +3307,7 @@ export default mixins(
 				this.loadCredentialTypes(),
 			];
 
-			if (this.$store.getters['nodeTypes/allNodeTypes'].length === 0) {
+			if (this.nodeTypesStore.allNodeTypes.length === 0) {
 				loadPromises.push(this.loadNodeTypes());
 			}
 
@@ -3303,7 +3329,7 @@ export default mixins(
 					} catch {} // This will break if mounted after jsplumb has been initiated from executions preview, so continue if it breaks
 					await this.initView();
 					if (window.top) {
-						window.top.postMessage(JSON.stringify({ command: 'n8nReady', version: this.$store.getters.versionCli }), '*');
+						window.top.postMessage(JSON.stringify({ command: 'n8nReady', version: this.rootStore.versionCli }), '*');
 					}
 				} catch (error) {
 					this.$showError(
@@ -3315,20 +3341,22 @@ export default mixins(
 				this.stopLoading();
 
 				setTimeout(() => {
-					this.$store.dispatch('users/showPersonalizationSurvey');
+					this.usersStore.showPersonalizationSurvey();
 					this.checkForNewVersions();
-					this.addPinDataConnections(this.$store.getters.pinData);
+					this.addPinDataConnections(this.workflowsStore.getPinData || {} as IPinData);
 				}, 0);
 			});
 
-			this.$externalHooks().run('nodeView.mount');
+			// TODO: This currently breaks since front-end hooks are still not updated to work with pinia store
+			this.$externalHooks().run('nodeView.mount').catch(e => {});
 
 			if (
-				this.currentUser.personalizationAnswers !== null &&
-				this.isOnboardingCallPromptFeatureEnabled &&
+				this.currentUser?.personalizationAnswers !== null &&
+				this.settingsStore.onboardingCallPromptEnabled &&
+				this.currentUser &&
 				getAccountAge(this.currentUser) <= ONBOARDING_PROMPT_TIMEBOX
 			) {
-				const onboardingResponse = await this.$store.dispatch('ui/getNextOnboardingPrompt');
+				const onboardingResponse = await this.uiStore.getNextOnboardingPrompt();
 				const promptTimeout = onboardingResponse.toast_sequence_number === 1 ? FIRST_ONBOARDING_PROMPT_TIMEOUT : 1000;
 
 				if (onboardingResponse.title && onboardingResponse.description) {
@@ -3346,7 +3374,7 @@ export default mixins(
 									title: onboardingResponse.title,
 									description: onboardingResponse.description,
 								});
-								this.$store.commit('ui/openModal', ONBOARDING_CALL_SIGNUP_MODAL_KEY, { root: true });
+								this.uiStore.openModal(ONBOARDING_CALL_SIGNUP_MODAL_KEY);
 							},
 						});
 					}, promptTimeout);
@@ -3356,11 +3384,11 @@ export default mixins(
 			dataPinningEventBus.$on('unpin-data', this.removePinDataConnections);
 		},
 		activated() {
-			const openSideMenu = this.$store.getters['ui/getAddFirstStepOnLoad'];
+			const openSideMenu = this.uiStore.addFirstStepOnLoad;
 			if (openSideMenu) {
 				this.showTriggerCreator('trigger_placeholder_button');
 			}
-			this.$store.commit('ui/setAddFirstStepOnLoad', false);
+			this.uiStore.addFirstStepOnLoad = false;
 
 			document.addEventListener('keydown', this.keyDown);
 			document.addEventListener('keyup', this.keyUp);
@@ -3384,7 +3412,7 @@ export default mixins(
 		},
 		destroyed() {
 			this.resetWorkspace();
-			this.$store.commit('setStateDirty', false);
+			this.uiStore.stateIsDirty = false;
 			window.removeEventListener('message', this.onPostMessageReceived);
 			this.$root.$off('newWorkflow', this.newWorkflow);
 			this.$root.$off('importWorkflowData', this.onImportWorkflowDataEvent);
diff --git a/packages/editor-ui/src/views/SettingsApiView.vue b/packages/editor-ui/src/views/SettingsApiView.vue
index e66185d6e3..7d3df4fac5 100644
--- a/packages/editor-ui/src/views/SettingsApiView.vue
+++ b/packages/editor-ui/src/views/SettingsApiView.vue
@@ -73,6 +73,10 @@ import mixins from 'vue-typed-mixins';
 
 import SettingsView from './SettingsView.vue';
 import CopyInput from '../components/CopyInput.vue';
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useRootStore } from '@/stores/n8nRootStore';
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(
 	showMessage,
@@ -92,14 +96,19 @@ export default mixins(
 	},
 	mounted() {
 		this.getApiKey();
-		const baseUrl = this.$store.getters.getBaseUrl;
-		const apiPath = this.$store.getters['settings/publicApiPath'];
-		const latestVersion = this.$store.getters['settings/publicApiLatestVersion'];
+		const baseUrl = this.rootStore.baseUrl;
+		const apiPath = this.settingsStore.publicApiPath;
+		const latestVersion = this.settingsStore.publicApiLatestVersion;
 		this.apiPlaygroundPath = `${baseUrl}${apiPath}/v${latestVersion}/docs`;
 	},
 	computed: {
-		currentUser(): IUser {
-			return this.$store.getters['users/currentUser'];
+		...mapStores(
+			useRootStore,
+			useSettingsStore,
+			useUsersStore,
+		),
+		currentUser(): IUser | null {
+			return this.usersStore.currentUser;
 		},
 	},
 	methods: {
@@ -117,7 +126,7 @@ export default mixins(
 		},
 		async getApiKey() {
 			try {
-				this.apiKey = await this.$store.dispatch('settings/getApiKey');
+				this.apiKey = await this.settingsStore.getApiKey() || '';
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('settings.api.view.error'));
 			} finally {
@@ -128,7 +137,7 @@ export default mixins(
 			this.loading = true;
 
 			try {
-				this.apiKey = await this.$store.dispatch('settings/createApiKey');
+				this.apiKey = await this.settingsStore.createApiKey() || '';
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('settings.api.create.error'));
 			} finally {
@@ -138,7 +147,7 @@ export default mixins(
 		},
 		async deleteApiKey() {
 			try {
-				await this.$store.dispatch('settings/deleteApiKey');
+				await this.settingsStore.deleteApiKey();
 				this.$showMessage({ title: this.$locale.baseText("settings.api.delete.toast"), type: 'success' });
 				this.apiKey = '';
 			} catch (error) {
diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
index 1128293482..50f6f859be 100644
--- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -4,13 +4,13 @@
 			<div :class="$style.headingContainer">
 				<n8n-heading size="2xlarge">{{ $locale.baseText('settings.communityNodes') }}</n8n-heading>
 				<n8n-button
-					v-if="!isQueueModeEnabled && getInstalledPackages.length > 0 && !loading"
+					v-if="!settingsStore.isQueueModeEnabled && communityNodesStore.getInstalledPackages.length > 0 && !loading"
 					:label="$locale.baseText('settings.communityNodes.installModal.installButton.label')"
 					size="large"
 					@click="openInstallModal"
 				/>
 			</div>
-			<div v-if="isQueueModeEnabled" :class="$style.actionBoxContainer">
+			<div v-if="settingsStore.isQueueModeEnabled" :class="$style.actionBoxContainer">
 				<n8n-action-box
 					:heading="$locale.baseText('settings.communityNodes.empty.title')"
 					:description="getEmptyStateDescription"
@@ -29,7 +29,7 @@
 				></community-package-card>
 			</div>
 			<div
-				v-else-if="getInstalledPackages.length === 0"
+				v-else-if="communityNodesStore.getInstalledPackages.length === 0"
 				:class="$style.actionBoxContainer"
 			>
 				<n8n-action-box
@@ -50,7 +50,7 @@
 				v-else
 			>
 				<community-package-card
-					v-for="communityPackage in getInstalledPackages"
+					v-for="communityPackage in communityNodesStore.getInstalledPackages"
 					:key="communityPackage.packageName"
 					:communityPackage="communityPackage"
 				></community-package-card>
@@ -60,18 +60,23 @@
 </template>
 
 <script lang="ts">
-import { mapGetters } from 'vuex';
-import SettingsView from './SettingsView.vue';
-import CommunityPackageCard from '../components/CommunityPackageCard.vue';
-import { showMessage } from '@/components/mixins/showMessage';
-import mixins from 'vue-typed-mixins';
 import {
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
 	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
 	COMMUNITY_NODES_NPM_INSTALLATION_URL,
 } from '../constants';
+import { mapGetters } from 'vuex';
+import SettingsView from './SettingsView.vue';
+import CommunityPackageCard from '../components/CommunityPackageCard.vue';
+import { showMessage } from '@/components/mixins/showMessage';
+import mixins from 'vue-typed-mixins';
 import { PublicInstalledPackage } from 'n8n-workflow';
 
+import { useCommunityNodesStore } from '@/stores/communityNodes';
+import { useUIStore } from '@/stores/ui';
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+
 const PACKAGE_COUNT_THRESHOLD = 31;
 
 export default mixins(
@@ -90,9 +95,9 @@ export default mixins(
 	async mounted() {
 		try {
 			this.$data.loading = true;
-			await this.$store.dispatch('communityNodes/fetchInstalledPackages');
+			await this.communityNodesStore.fetchInstalledPackages();
 
-			const installedPackages: PublicInstalledPackage[] = this.getInstalledPackages;
+			const installedPackages: PublicInstalledPackage[] = this.communityNodesStore.getInstalledPackages;
 			const packagesToUpdate: PublicInstalledPackage[] = installedPackages.filter(p => p.updateAvailable );
 			this.$telemetry.track('user viewed cnr settings page', {
 				num_of_packages_installed: installedPackages.length,
@@ -123,16 +128,19 @@ export default mixins(
 			this.$data.loading = false;
 		}
 		try {
-			await this.$store.dispatch('communityNodes/fetchAvailableCommunityPackageCount');
+			await this.communityNodesStore.fetchAvailableCommunityPackageCount();
 		} finally {
 			this.$data.loading = false;
 		}
 	},
 	computed: {
-		...mapGetters('settings', ['isNpmAvailable', 'isQueueModeEnabled']),
-		...mapGetters('communityNodes', ['getInstalledPackages']),
+		...mapStores(
+			useCommunityNodesStore,
+			useSettingsStore,
+			useUIStore,
+		),
 		getEmptyStateDescription() {
-			const packageCount = this.$store.getters['communityNodes/availablePackageCount'];
+			const packageCount = this.communityNodesStore.availablePackageCount;
 			return  packageCount < PACKAGE_COUNT_THRESHOLD ?
 				this.$locale.baseText('settings.communityNodes.empty.description.no-packages', {
 					interpolate: {
@@ -146,14 +154,11 @@ export default mixins(
 					},
 				});
 		},
-		isDesktopDeployment() {
-			return this.$store.getters['settings/isDesktopDeployment'];
-		},
 		shouldShowInstallButton() {
-			return !this.isDesktopDeployment && this.isNpmAvailable;
+			return !this.settingsStore.isDesktopDeployment && this.settingsStore.isNpmAvailable;
 		},
 		actionBoxConfig() {
-			if (this.isDesktopDeployment) {
+			if (this.settingsStore.isDesktopDeployment) {
 				return {
 					calloutText: this.$locale.baseText('settings.communityNodes.notAvailableOnDesktop'),
 					calloutTheme: 'warning',
@@ -161,7 +166,7 @@ export default mixins(
 				};
 			}
 
-			if (!this.isNpmAvailable) {
+			if (!this.settingsStore.isNpmAvailable) {
 				return {
 					calloutText: this.$locale.baseText(
 						'settings.communityNodes.npmUnavailable.warning',
@@ -172,7 +177,7 @@ export default mixins(
 				};
 			}
 
-			if (this.isQueueModeEnabled) {
+			if (this.settingsStore.isQueueModeEnabled) {
 				return {
 					calloutText: this.$locale.baseText(
 						'settings.communityNodes.queueMode.warning',
@@ -192,10 +197,10 @@ export default mixins(
 	},
 	methods: {
 		openInstallModal(event: MouseEvent) {
-			const telemetryPayload = { is_empty_state: this.getInstalledPackages.length === 0 };
+			const telemetryPayload = { is_empty_state: this.communityNodesStore.getInstalledPackages.length === 0 };
 			this.$telemetry.track('user clicked cnr install button', telemetryPayload);
 			this.$externalHooks().run('settingsCommunityNodesView.openInstallModal', telemetryPayload);
-			this.$store.dispatch('ui/openModal', COMMUNITY_PACKAGE_INSTALL_MODAL_KEY);
+			this.uiStore.openModal(COMMUNITY_PACKAGE_INSTALL_MODAL_KEY);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/views/SettingsFakeDoorView.vue b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
index ccd5cb1929..5ab16b3b24 100644
--- a/packages/editor-ui/src/views/SettingsFakeDoorView.vue
+++ b/packages/editor-ui/src/views/SettingsFakeDoorView.vue
@@ -9,6 +9,8 @@ import { IFakeDoor } from '@/Interface';
 import Vue from 'vue';
 import SettingsView from './SettingsView.vue';
 import FeatureComingSoon from '../components/FeatureComingSoon.vue';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
 
 export default Vue.extend({
 	name: 'SettingsFakeDoorView',
@@ -23,13 +25,16 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		featureInfo(): IFakeDoor {
-			return this.$store.getters['ui/getFakeDoorFeatures'][this.featureId] as IFakeDoor;
+		...mapStores(useUIStore),
+		featureInfo(): IFakeDoor|undefined {
+			return this.uiStore.getFakeDoorById(this.featureId);
 		},
 	},
 	methods: {
 		openLinkPage() {
-			window.open(this.featureInfo.linkURL, '_blank');
+			if (this.featureInfo) {
+				window.open(this.featureInfo.linkURL, '_blank');
+			}
 		},
 	},
 });
diff --git a/packages/editor-ui/src/views/SettingsPersonalView.vue b/packages/editor-ui/src/views/SettingsPersonalView.vue
index 4cfe58322c..df0f6b3430 100644
--- a/packages/editor-ui/src/views/SettingsPersonalView.vue
+++ b/packages/editor-ui/src/views/SettingsPersonalView.vue
@@ -46,6 +46,9 @@
 import { showMessage } from '@/components/mixins/showMessage';
 import { CHANGE_PASSWORD_MODAL_KEY } from '@/constants';
 import { IFormInputs, IUser } from '@/Interface';
+import { useUIStore } from '@/stores/ui';
+import { useUsersStore } from '@/stores/users';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 import mixins from 'vue-typed-mixins';
 
@@ -70,7 +73,7 @@ export default mixins(
 		this.formInputs = [
 			{
 				name: 'firstName',
-				initialValue: this.currentUser.firstName,
+				initialValue: this.currentUser?.firstName,
 				properties: {
 					label: this.$locale.baseText('auth.firstName'),
 					maxlength: 32,
@@ -81,7 +84,7 @@ export default mixins(
 			},
 			{
 				name: 'lastName',
-				initialValue: this.currentUser.lastName,
+				initialValue: this.currentUser?.lastName,
 				properties: {
 					label: this.$locale.baseText('auth.lastName'),
 					maxlength: 32,
@@ -92,7 +95,7 @@ export default mixins(
 			},
 			{
 				name: 'email',
-				initialValue: this.currentUser.email,
+				initialValue: this.currentUser?.email,
 				properties: {
 					label: this.$locale.baseText('auth.email'),
 					type: 'email',
@@ -105,8 +108,12 @@ export default mixins(
 		];
 	},
 	computed: {
-		currentUser() {
-			return this.$store.getters['users/currentUser'] as IUser;
+		...mapStores(
+			useUIStore,
+			useUsersStore,
+		),
+		currentUser(): IUser | null {
+			return this.usersStore.currentUser;
 		},
 	},
 	methods: {
@@ -117,12 +124,12 @@ export default mixins(
 			this.readyToSubmit = ready;
 		},
 		async onSubmit(form: {firstName: string, lastName: string, email: string}) {
-			if (!this.hasAnyChanges) {
+			if (!this.hasAnyChanges || !this.usersStore.currentUserId) {
 				return;
 			}
 			try {
-				await this.$store.dispatch('users/updateUser', {
-					id: this.currentUser.id,
+				await this.usersStore.updateUser({
+					id: this.usersStore.currentUserId,
 					firstName: form.firstName,
 					lastName: form.lastName,
 					email: form.email,
@@ -142,7 +149,7 @@ export default mixins(
 			this.formBus.$emit('submit');
 		},
 		openPasswordModal() {
-			this.$store.dispatch('ui/openModal', CHANGE_PASSWORD_MODAL_KEY);
+			this.uiStore.openModal(CHANGE_PASSWORD_MODAL_KEY);
 		},
 	},
 });
diff --git a/packages/editor-ui/src/views/SettingsUsersView.vue b/packages/editor-ui/src/views/SettingsUsersView.vue
index eae2091933..64b32619ef 100644
--- a/packages/editor-ui/src/views/SettingsUsersView.vue
+++ b/packages/editor-ui/src/views/SettingsUsersView.vue
@@ -3,8 +3,8 @@
 		<div :class="$style.container">
 			<div>
 				<n8n-heading size="2xlarge">{{ $locale.baseText('settings.users') }}</n8n-heading>
-				<div :class="$style.buttonContainer" v-if="!showUMSetupWarning">
-						<n8n-tooltip :disabled="isSmtpSetup" placement="bottom">
+				<div :class="$style.buttonContainer" v-if="!usersStore.showUMSetupWarning">
+						<n8n-tooltip :disabled="settingsStore.isSmtpSetup" placement="bottom">
 							<i18n slot="content" path="settings.users.setupSMTPToInviteUsers" tag="span">
 								<template #action>
 									<a
@@ -15,12 +15,12 @@
 								</template>
 							</i18n>
 							<div>
-								<n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!isSmtpSetup" />
+								<n8n-button :label="$locale.baseText('settings.users.invite')" @click="onInvite" size="large" :disabled="!settingsStore.isSmtpSetup" />
 							</div>
 						</n8n-tooltip>
 				</div>
 			</div>
-			<div v-if="showUMSetupWarning" :class="$style.setupInfoContainer">
+			<div v-if="usersStore.showUMSetupWarning" :class="$style.setupInfoContainer">
 				<n8n-action-box
 					:heading="$locale.baseText('settings.users.setupToInviteUsers')"
 					:buttonText="$locale.baseText('settings.users.setupMyAccount')"
@@ -30,11 +30,11 @@
 			</div>
 			<div :class="$style.usersContainer" v-else>
 				<PageAlert
-					v-if="!isSmtpSetup"
+					v-if="!settingsStore.isSmtpSetup"
 					:message="$locale.baseText('settings.users.smtpToAddUsersWarning')"
 					:popupClass="$style.alert"
 				/>
-				<n8n-users-list :users="allUsers" :currentUserId="currentUserId" @delete="onDelete" @reinvite="onReinvite" />
+				<n8n-users-list :users="usersStore.allUsers" :currentUserId="usersStore.currentUserId" @delete="onDelete" @reinvite="onReinvite" />
 			</div>
 		</div>
 	</SettingsView>
@@ -42,13 +42,16 @@
 
 <script lang="ts">
 import { INVITE_USER_MODAL_KEY, VIEWS } from '@/constants';
-import { mapGetters } from 'vuex';
 
 import SettingsView from './SettingsView.vue';
 import PageAlert from '../components/PageAlert.vue';
 import { IUser } from '@/Interface';
 import mixins from 'vue-typed-mixins';
 import { showMessage } from '@/components/mixins/showMessage';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(showMessage).extend({
 	name: 'SettingsUsersView',
@@ -57,34 +60,35 @@ export default mixins(showMessage).extend({
 		PageAlert,
 	},
 	async mounted() {
-		if (!this.showUMSetupWarning) {
-			await this.$store.dispatch('users/fetchUsers');
+		if (!this.usersStore.showUMSetupWarning) {
+			await this.usersStore.fetchUsers();
 		}
 	},
 	computed: {
-		...mapGetters('users', ['allUsers', 'currentUserId', 'showUMSetupWarning']),
-		...mapGetters('settings', ['isSmtpSetup']),
+		...mapStores(
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+		),
 	},
 	methods: {
 		redirectToSetup() {
 			this.$router.push({name: VIEWS.SETUP});
 		},
 		onInvite() {
-			this.$store.dispatch('ui/openModal', INVITE_USER_MODAL_KEY);
+			this.uiStore.openModal(INVITE_USER_MODAL_KEY);
 		},
 		async onDelete(userId: string) {
-			const getUserById = this.$store.getters['users/getUserById'];
-			const user = getUserById(userId) as IUser | null;
+			const user = this.usersStore.getUserById(userId) as IUser | null;
 			if (user) {
-				this.$store.dispatch('ui/openDeleteUserModal', { id: userId });
+				this.uiStore.openDeleteUserModal(userId);
 			}
 		},
 		async onReinvite(userId: string) {
-			const getUserById = this.$store.getters['users/getUserById'];
-			const user = getUserById(userId) as IUser | null;
+			const user = this.usersStore.getUserById(userId) as IUser | null;
 			if (user) {
 				try {
-					await this.$store.dispatch('users/reinviteUser', { id: user.id });
+					await this.usersStore.reinviteUser({ id: user.id });
 
 					this.$showToast({
 						type: 'success',
diff --git a/packages/editor-ui/src/views/SetupView.vue b/packages/editor-ui/src/views/SetupView.vue
index ab508f52db..ec14c7b6b7 100644
--- a/packages/editor-ui/src/views/SetupView.vue
+++ b/packages/editor-ui/src/views/SetupView.vue
@@ -15,6 +15,10 @@ import mixins from 'vue-typed-mixins';
 import { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
 import { restApi } from '@/components/mixins/restApi';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
 
 
 export default mixins(
@@ -96,6 +100,13 @@ export default mixins(
 			credentialsCount: 0,
 		};
 	},
+	computed: {
+		...mapStores(
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+		),
+	},
 	methods: {
 		async getAllCredentials() {
 			const credentials = await this.$store.dispatch('credentials/fetchAllCredentials');
@@ -144,13 +155,13 @@ export default mixins(
 					return;
 				}
 
-				const forceRedirectedHere = this.$store.getters['settings/showSetupPage'];
+				const forceRedirectedHere = this.settingsStore.showSetupPage;
 				this.loading = true;
-				await this.$store.dispatch('users/createOwner', values);
+				await this.usersStore.createOwner(values as { firstName: string; lastName: string; email: string; password: string;});
 
 				if (values.agree === true) {
 					try {
-						await this.$store.dispatch('ui/submitContactEmail', { email: values.email, agree: values.agree });
+						await this.uiStore.submitContactEmail(values.email.toString(), values.agree);
 					} catch { }
 				}
 
@@ -179,7 +190,7 @@ export default mixins(
 			}
 		},
 		onSkip() {
-			this.$store.dispatch('users/skipOwnerSetup');
+			this.usersStore.skipOwnerSetup();
 			this.$router.push({
 				name: VIEWS.HOMEPAGE,
 			});
diff --git a/packages/editor-ui/src/views/SigninView.vue b/packages/editor-ui/src/views/SigninView.vue
index 1023ae1336..a013d13f5a 100644
--- a/packages/editor-ui/src/views/SigninView.vue
+++ b/packages/editor-ui/src/views/SigninView.vue
@@ -13,6 +13,8 @@ import { showMessage } from '@/components/mixins/showMessage';
 import mixins from 'vue-typed-mixins';
 import { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(
 	showMessage,
@@ -61,11 +63,14 @@ export default mixins(
 			loading: false,
 		};
 	},
+	computed: {
+		...mapStores(useUsersStore),
+	},
 	methods: {
 		async onSubmit(values: {[key: string]: string}) {
 			try {
 				this.loading = true;
-				await this.$store.dispatch('users/loginWithCreds', values);
+				await this.usersStore.loginWithCreds(values as {email: string, password: string});
 				this.clearAllStickyNotifications();
 				this.loading = false;
 
diff --git a/packages/editor-ui/src/views/SignupView.vue b/packages/editor-ui/src/views/SignupView.vue
index 9553a2b566..9f03b39457 100644
--- a/packages/editor-ui/src/views/SignupView.vue
+++ b/packages/editor-ui/src/views/SignupView.vue
@@ -14,6 +14,9 @@ import { showMessage } from '@/components/mixins/showMessage';
 import mixins from 'vue-typed-mixins';
 import { IFormBoxConfig } from '@/Interface';
 import { VIEWS } from '@/constants';
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useUsersStore } from '@/stores/users';
 
 export default mixins(
 	showMessage,
@@ -72,17 +75,21 @@ export default mixins(
 			FORM_CONFIG,
 			loading: false,
 			inviter: null as null | {firstName: string, lastName: string},
+			inviterId: null as string | null,
+			inviteeId: null as string | null,
 		};
 	},
 	async mounted() {
-		const inviterId = this.$route.query.inviterId;
-		const inviteeId = this.$route.query.inviteeId;
+		const inviterId = (!this.$route.query.inviterId || typeof this.$route.query.inviterId !== 'string') ? null : this.$route.query.inviterId;
+		const inviteeId = (!this.$route.query.inviteeId || typeof this.$route.query.inviteeId !== 'string') ? null : this.$route.query.inviteeId;
 		try {
 			if (!inviterId || !inviteeId) {
 				throw new Error(this.$locale.baseText('auth.signup.missingTokenError'));
 			}
+			this.inviterId = inviterId;
+			this.inviteeId = inviteeId;
 
-			const invite = await this.$store.dispatch('users/validateSignupToken', { inviterId, inviteeId});
+			const invite = await this.usersStore.validateSignupToken({ inviteeId, inviterId });
 			this.inviter = invite.inviter as {firstName: string, lastName: string};
 		} catch (e) {
 			this.$showError(e, this.$locale.baseText('auth.signup.tokenValidationError'));
@@ -90,6 +97,10 @@ export default mixins(
 		}
 	},
 	computed: {
+		...mapStores(
+			useUIStore,
+			useUsersStore,
+		),
 		inviteMessage(): null | string {
 			if (!this.inviter) {
 				return null;
@@ -103,15 +114,18 @@ export default mixins(
 	},
 	methods: {
 		async onSubmit(values: {[key: string]: string | boolean}) {
+			if (!this.inviterId || !this.inviteeId) {
+				this.$showError(new Error(this.$locale.baseText('auth.changePassword.tokenValidationError')), this.$locale.baseText('auth.signup.setupYourAccountError'));
+				return;
+			}
+
 			try {
 				this.loading = true;
-				const inviterId = this.$route.query.inviterId;
-				const inviteeId = this.$route.query.inviteeId;
-				await this.$store.dispatch('users/signup', {...values, inviterId, inviteeId});
+				await this.usersStore.signup({...values, inviterId: this.inviterId,  inviteeId: this.inviteeId} as { inviteeId: string; inviterId: string; firstName: string; lastName: string; password: string;});
 
 				if (values.agree === true) {
 					try {
-						await this.$store.dispatch('ui/submitContactEmail', { email: values.email, agree: values.agree });
+						await this.uiStore.submitContactEmail(values.email.toString(), values.agree);
 					} catch { }
 				}
 
diff --git a/packages/editor-ui/src/views/TemplatesCollectionView.vue b/packages/editor-ui/src/views/TemplatesCollectionView.vue
index 35dd36cc65..2340d93b30 100644
--- a/packages/editor-ui/src/views/TemplatesCollectionView.vue
+++ b/packages/editor-ui/src/views/TemplatesCollectionView.vue
@@ -63,6 +63,8 @@ import {
 import mixins from 'vue-typed-mixins';
 import { setPageTitle } from '@/components/helpers';
 import { VIEWS } from '@/constants';
+import { mapStores } from 'pinia';
+import { useTemplatesStore } from '@/stores/templates';
 
 export default mixins(workflowHelpers).extend({
 	name: 'TemplatesCollectionView',
@@ -72,18 +74,21 @@ export default mixins(workflowHelpers).extend({
 		TemplatesView,
 	},
 	computed: {
-		collection(): null | ITemplatesCollection | ITemplatesCollectionFull {
-			return this.$store.getters['templates/getCollectionById'](this.collectionId);
+		...mapStores(
+			useTemplatesStore,
+		),
+		collection(): null | ITemplatesCollectionFull {
+			return this.templatesStore.getCollectionById(this.collectionId);
 		},
 		collectionId(): string {
 			return this.$route.params.id;
 		},
-		collectionWorkflows(): Array<ITemplatesWorkflow | ITemplatesWorkflowFull> | null {
+		collectionWorkflows(): Array<ITemplatesWorkflow | ITemplatesWorkflowFull | null> | null {
 			if (!this.collection) {
 				return null;
 			}
 			return this.collection.workflows.map(({ id }) => {
-				return this.$store.getters['templates/getTemplateById'](id) as ITemplatesWorkflow;
+				return this.templatesStore.getTemplateById(id.toString());
 			});
 		},
 	},
@@ -111,7 +116,7 @@ export default mixins(workflowHelpers).extend({
 		onUseWorkflow({event, id}: {event: MouseEvent, id: string}) {
 			const telemetryPayload = {
 				template_id: id,
-				wf_template_repo_session_id: this.$store.getters['templates/currentSessionId'],
+				wf_template_repo_session_id: this.workflowsStore.currentSessionId,
 				source: 'collection',
 			};
 			this.$externalHooks().run('templatesCollectionView.onUseWorkflow', telemetryPayload);
@@ -148,7 +153,7 @@ export default mixins(workflowHelpers).extend({
 		}
 
 		try {
-			await this.$store.dispatch('templates/getCollectionById', this.collectionId);
+			await this.templatesStore.fetchCollectionById(this.collectionId);
 		} catch (e) {
 			this.notFoundError = true;
 		}
diff --git a/packages/editor-ui/src/views/TemplatesSearchView.vue b/packages/editor-ui/src/views/TemplatesSearchView.vue
index d6b1b3a298..95a579b5e7 100644
--- a/packages/editor-ui/src/views/TemplatesSearchView.vue
+++ b/packages/editor-ui/src/views/TemplatesSearchView.vue
@@ -20,7 +20,7 @@
 			<div :class="$style.contentWrapper">
 				<div :class="$style.filters">
 					<TemplateFilters
-						:categories="allCategories"
+						:categories="templatesStore.allCategories"
 						:sortOnPopulate="areCategoriesPrepopulated"
 						:loading="loadingCategories"
 						:selected="categories"
@@ -81,18 +81,22 @@ import TemplatesView from './TemplatesView.vue';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { ITemplatesCollection, ITemplatesWorkflow, ITemplatesQuery, ITemplatesCategory } from '@/Interface';
 import mixins from 'vue-typed-mixins';
-import { mapGetters } from 'vuex';
 import { IDataObject } from 'n8n-workflow';
 import { setPageTitle } from '@/components/helpers';
 import { VIEWS } from '@/constants';
 import { debounceHelper } from '@/components/mixins/debounce';
+import { mapStores } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
+import { useTemplatesStore } from '@/stores/templates';
+import { useUIStore } from '@/stores/ui';
 
 interface ISearchEvent {
 	search_string: string;
 	workflow_results_count: number;
 	collection_results_count: number;
 	categories_applied: ITemplatesCategory[];
-	wf_template_repo_session_id: number;
+	wf_template_repo_session_id: string;
 }
 
 export default mixins(genericHelpers, debounceHelper).extend({
@@ -103,11 +107,34 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		TemplateList,
 		TemplatesView,
 	},
+	data() {
+		return {
+			areCategoriesPrepopulated: false,
+			categories: [] as number[],
+			loading: true,
+			loadingCategories: true,
+			loadingCollections: true,
+			loadingWorkflows: true,
+			search: '',
+			searchEventToTrack: null as null | ISearchEvent,
+			errorLoadingWorkflows: false,
+		};
+	},
 	computed: {
-		...mapGetters('templates', ['allCategories', 'getSearchedWorkflowsTotal', 'getSearchedWorkflows', 'getSearchedCollections']),
-		...mapGetters('settings', ['isTemplatesEndpointReachable']),
+		...mapStores(
+			useSettingsStore,
+			useTemplatesStore,
+			useUIStore,
+			useUsersStore,
+		),
+		totalWorkflows(): number {
+			return this.templatesStore.getSearchedWorkflowsTotal(this.query);
+		},
+		workflows(): ITemplatesWorkflow[] {
+			return this.templatesStore.getSearchedWorkflows(this.query) || [];
+		},
 		collections(): ITemplatesCollection[] {
-			return this.getSearchedCollections(this.query) || [];
+			return this.templatesStore.getSearchedCollections(this.query) || [];
 		},
 		endOfSearchMessage(): string | null {
 			if (this.loadingWorkflows) {
@@ -117,7 +144,7 @@ export default mixins(genericHelpers, debounceHelper).extend({
 				return this.$locale.baseText('templates.endResult');
 			}
 			if (!this.loadingCollections && this.workflows.length === 0 && this.collections.length === 0) {
-				if (!this.isTemplatesEndpointReachable && this.errorLoadingWorkflows) {
+				if (!this.settingsStore.isTemplatesEndpointReachable && this.errorLoadingWorkflows) {
 					return this.$locale.baseText('templates.connectionWarning');
 				}
 				return this.$locale.baseText('templates.noSearchResults');
@@ -139,25 +166,6 @@ export default mixins(genericHelpers, debounceHelper).extend({
 				this.collections.length === 0
 			);
 		},
-		totalWorkflows(): number {
-			return this.getSearchedWorkflowsTotal(this.query);
-		},
-		workflows(): ITemplatesWorkflow[] {
-			return this.getSearchedWorkflows(this.query) || [];
-		},
-	},
-	data() {
-		return {
-			areCategoriesPrepopulated: false,
-			categories: [] as number[],
-			loading: true,
-			loadingCategories: true,
-			loadingCollections: true,
-			loadingWorkflows: true,
-			search: '',
-			searchEventToTrack: null as null | ISearchEvent,
-			errorLoadingWorkflows: false,
-		};
 	},
 	methods: {
 		onOpenCollection({event, id}: {event: MouseEvent, id: string}) {
@@ -189,12 +197,12 @@ export default mixins(genericHelpers, debounceHelper).extend({
 
 			this.searchEventToTrack = {
 				search_string: search,
-				workflow_results_count: this.getSearchedWorkflowsTotal({search, categories}),
-				collection_results_count: this.getSearchedCollections({search, categories}).length,
+				workflow_results_count: this.workflows.length,
+				collection_results_count: this.collections.length,
 				categories_applied: categories.map((categoryId) =>
-					this.$store.getters['templates/getCategoryById'](categoryId),
+					this.templatesStore.getCategoryById(categoryId.toString()),
 				) as ITemplatesCategory[],
-				wf_template_repo_session_id: this.$store.getters['templates/currentSessionId'],
+				wf_template_repo_session_id: this.templatesStore.currentSessionId,
 			};
 		},
 		trackSearch() {
@@ -204,7 +212,7 @@ export default mixins(genericHelpers, debounceHelper).extend({
 			}
 		},
 		openNewWorkflow() {
-			this.$store.commit('ui/setNodeViewInitialized', false);
+			this.uiStore.nodeViewInitialized = false;
 			this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 		},
 		onSearchInput(search: string) {
@@ -236,9 +244,9 @@ export default mixins(genericHelpers, debounceHelper).extend({
 				this.$telemetry.track('User changed template filters', {
 					search_string: this.search,
 					categories_applied: this.categories.map((categoryId: number) =>
-						this.$store.getters['templates/getCategoryById'](categoryId),
+						this.templatesStore.getCollectionById(categoryId.toString()),
 					),
-					wf_template_repo_session_id: this.$store.getters['templates/currentSessionId'],
+					wf_template_repo_session_id: this.templatesStore.currentSessionId,
 				});
 			}
 		},
@@ -265,7 +273,7 @@ export default mixins(genericHelpers, debounceHelper).extend({
 			}
 			try {
 				this.loadingWorkflows = true;
-				await this.$store.dispatch('templates/getMoreWorkflows', {
+				await this.templatesStore.getMoreWorkflows({
 					categories: this.categories,
 					search: this.search,
 				});
@@ -281,16 +289,14 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		},
 		async loadCategories() {
 			try {
-				await this.$store.dispatch('templates/getCategories');
-			} catch (e) {
-			}
-
+				await this.templatesStore.getCategories();
+			} catch (e) { }
 			this.loadingCategories = false;
 		},
 		async loadCollections() {
 			try {
 				this.loadingCollections = true;
-				await this.$store.dispatch('templates/getCollections', {
+				await this.templatesStore.getCollections({
 					categories: this.categories,
 					search: this.search,
 				});
@@ -302,7 +308,7 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		async loadWorkflows() {
 			try {
 				this.loadingWorkflows = true;
-				await this.$store.dispatch('templates/getWorkflows', {
+				await this.templatesStore.getWorkflows({
 					search: this.search,
 					categories: this.categories,
 				});
@@ -356,7 +362,7 @@ export default mixins(genericHelpers, debounceHelper).extend({
 		setPageTitle('n8n - Templates');
 		this.loadCategories();
 		this.loadWorkflowsAndCollections(true);
-		this.$store.dispatch('users/showPersonalizationSurvey');
+		this.usersStore.showPersonalizationSurvey();
 
 		setTimeout(() => {
 			// Check if there is scroll position saved in route and scroll to it
diff --git a/packages/editor-ui/src/views/TemplatesWorkflowView.vue b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
index 79e0ce735d..5f391b4041 100644
--- a/packages/editor-ui/src/views/TemplatesWorkflowView.vue
+++ b/packages/editor-ui/src/views/TemplatesWorkflowView.vue
@@ -64,6 +64,8 @@ import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import mixins from 'vue-typed-mixins';
 import { setPageTitle } from '@/components/helpers';
 import { VIEWS } from '@/constants';
+import { mapStores } from 'pinia';
+import { useTemplatesStore } from '@/stores/templates';
 
 export default mixins(workflowHelpers).extend({
 	name: 'TemplatesWorkflowView',
@@ -73,8 +75,11 @@ export default mixins(workflowHelpers).extend({
 		WorkflowPreview,
 	},
 	computed: {
+		...mapStores(
+			useTemplatesStore,
+		),
 		template(): ITemplatesWorkflow | ITemplatesWorkflowFull {
-			return this.$store.getters['templates/getTemplateById'](this.templateId);
+			return this.templatesStore.getTemplateById(this.templateId);
 		},
 		templateId() {
 			return this.$route.params.id;
@@ -92,7 +97,7 @@ export default mixins(workflowHelpers).extend({
 			const telemetryPayload = {
 				source: 'workflow',
 				template_id: id,
-				wf_template_repo_session_id: this.$store.getters['templates/currentSessionId'],
+				wf_template_repo_session_id: this.templatesStore.currentSessionId,
 			};
 
 			this.$externalHooks().run('templatesWorkflowView.openWorkflow', telemetryPayload);
@@ -138,7 +143,7 @@ export default mixins(workflowHelpers).extend({
 		}
 
 		try {
-			await this.$store.dispatch('templates/getTemplateById', this.templateId);
+			await this.templatesStore.fetchTemplateById(this.templateId);
 		} catch (e) {
 			this.notFoundError = true;
 		}
diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
index ea90f10fb7..822157c0ab 100644
--- a/packages/editor-ui/src/views/WorkflowsView.vue
+++ b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -39,7 +39,7 @@
 			</div>
 		</template>
 		<template v-slot:filters="{ setKeyValue }">
-			<div class="mb-s" v-if="areTagsEnabled">
+			<div class="mb-s" v-if="settingsStore.areTagsEnabled">
 				<n8n-input-label
 					:label="$locale.baseText('workflows.filters.tags')"
 					:bold="false"
@@ -73,6 +73,11 @@ import {VIEWS} from '@/constants';
 import Vue from "vue";
 import {ITag, IUser, IWorkflowDb} from "@/Interface";
 import TagsDropdown from "@/components/TagsDropdown.vue";
+import { mapStores } from 'pinia';
+import { useUIStore } from '@/stores/ui';
+import { useSettingsStore } from '@/stores/settings';
+import { useUsersStore } from '@/stores/users';
+import { useWorkflowsStore } from '@/stores/workflows';
 
 type IResourcesListLayoutInstance = Vue & { sendFiltersTelemetry: (source: string) => void };
 
@@ -101,19 +106,22 @@ export default mixins(
 		};
 	},
 	computed: {
+		...mapStores(
+			useSettingsStore,
+			useUIStore,
+			useUsersStore,
+			useWorkflowsStore,
+		),
 		currentUser(): IUser {
-			return this.$store.getters['users/currentUser'];
-		},
-		areTagsEnabled(): boolean {
-			return this.$store.getters['settings/areTagsEnabled'];
+			return this.usersStore.currentUser || {} as IUser;
 		},
 		allWorkflows(): IWorkflowDb[] {
-			return this.$store.getters['allWorkflows'];
+			return this.workflowsStore.allWorkflows;
 		},
 	},
 	methods: {
 		addWorkflow() {
-			this.$store.commit('ui/setNodeViewInitialized', false);
+			this.uiStore.nodeViewInitialized = false;
 			this.$router.push({ name: VIEWS.NEW_WORKFLOW });
 
 			this.$telemetry.track('User clicked add workflow button', {
@@ -124,11 +132,11 @@ export default mixins(
 			this.$router.push({ name: VIEWS.TEMPLATES });
 		},
 		async initialize() {
-			this.$store.dispatch('users/fetchUsers'); // Can be loaded in the background, used for filtering
+			this.usersStore.fetchUsers(); // Can be loaded in the background, used for filtering
 
 			return await Promise.all([
-				this.$store.dispatch('fetchAllWorkflows'),
-				this.$store.dispatch('fetchActiveWorkflows'),
+				this.workflowsStore.fetchAllWorkflows(),
+				this.workflowsStore.fetchActiveWorkflows(),
 			]);
 		},
 		onClickTag(tagId: string, event: PointerEvent) {
@@ -137,7 +145,7 @@ export default mixins(
 			}
 		},
 		onFilter(resource: IWorkflowDb, filters: { tags: string[]; search: string; }, matches: boolean): boolean {
-			if (this.areTagsEnabled && filters.tags.length > 0) {
+			if (this.settingsStore.areTagsEnabled && filters.tags.length > 0) {
 				matches = matches && filters.tags.every(
 					(tag) => (resource.tags as ITag[])?.find((resourceTag) => typeof resourceTag === 'object' ? `${resourceTag.id}` === `${tag}` : `${resourceTag}` === `${tag}`),
 				);
@@ -155,7 +163,7 @@ export default mixins(
 		},
 	},
 	mounted() {
-		this.$store.dispatch('users/showPersonalizationSurvey');
+		this.usersStore.showPersonalizationSurvey();
 	},
 });
 </script>