From ab5a6752a51732f48deab8cedf28b9cacd1833d0 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <50302941+JammingBen@users.noreply.github.com>
Date: Fri, 22 Dec 2023 14:50:51 +0100
Subject: [PATCH] refactor: modal implementation (#10212)

* refactor: modal implementation

* refactor: rename registerModal to dispatchModal

* refactor: remove explicit active property from modals

* style: run linter

* fix: importer modal not rendering content

* test: align modal.ts test file name with actual file name
---
 changelog/unreleased/change-creating-modals   |   8 +
 .../src/components/OcModal/OcModal.vue        | 128 +++------------
 .../__snapshots__/OcModal.spec.ts.snap        |  24 ++-
 .../components/Groups/CreateGroupModal.vue    |  57 +++----
 .../src/components/Spaces/ContextActions.vue  |   2 +-
 .../Spaces/SideBar/ActionsPanel.vue           |   2 +-
 .../src/components/Users/AddToGroupsModal.vue |  51 +++---
 .../src/components/Users/CreateUserModal.vue  |  58 +++----
 .../src/components/Users/LoginModal.vue       |  75 ++++-----
 .../Users/RemoveFromGroupsModal.vue           |  51 +++---
 .../groups/useGroupActionsCreateGroup.ts      |  21 +--
 .../actions/groups/useGroupActionsDelete.ts   |  21 +--
 .../users/useUserActionsAddToGroups.ts        |   8 +-
 .../actions/users/useUserActionsCreateUser.ts |  20 +--
 .../actions/users/useUserActionsDelete.ts     |  20 +--
 .../actions/users/useUserActionsEditLogin.ts  |   8 +-
 .../actions/users/useUserActionsEditQuota.ts  |  12 +-
 .../users/useUserActionsRemoveFromGroups.ts   |   8 +-
 .../src/views/Spaces.vue                      |   2 +-
 .../Groups/CreateGroupModal.spec.ts           |  17 +-
 .../components/Users/AddToGroupsModal.spec.ts |  10 +-
 .../components/Users/CreateUserModal.spec.ts  |  17 +-
 .../unit/components/Users/LoginModal.spec.ts  |  10 +-
 .../Users/RemoveFromGroupsModal.spec.ts       |  10 +-
 .../__snapshots__/LoginModal.spec.ts.snap     |   7 +-
 .../groups/useGroupActionsCreateGroup.spec.ts |  24 ++-
 .../groups/useGroupActionsDelete.spec.ts      |   6 +-
 .../users/useUserActionsAddToGroups.spec.ts   |  30 ++--
 .../users/useUserActionsCreateUser.spec.ts    |  25 ++-
 .../users/useUserActionsDelete.spec.ts        |   6 +-
 .../users/useUserActionsEditLogin.spec.ts     |   7 +-
 .../users/useUserActionsEditQuota.spec.ts     |   6 +-
 .../useUserActionsRemoveFromGroups.spec.ts    |  30 ++--
 .../src/components/AppBar/CreateAndUpload.vue |   4 +-
 .../src/components/AppBar/CreateSpace.vue     |  71 ++++----
 .../Modals/SetLinkPasswordModal.vue           |  45 ++----
 .../SideBar/Actions/SpaceActions.vue          |   2 +-
 .../SideBar/Shares/Collaborators/ListItem.vue |  14 +-
 .../components/SideBar/Shares/FileLinks.vue   |  33 ++--
 .../components/SideBar/Shares/FileShares.vue  |  18 +--
 .../SideBar/Shares/Links/DetailsAndEdit.vue   |  98 +++++------
 .../SideBar/Shares/SpaceMembers.vue           |  24 ++-
 .../components/Spaces/SpaceContextActions.vue |   2 +-
 .../src/helpers/resource/actions/transfer.ts  |   4 +-
 .../src/helpers/resource/actions/upload.ts    |   2 -
 packages/web-app-files/src/store/actions.ts   |   4 -
 .../src/views/spaces/GenericSpace.vue         |   4 +-
 .../components/AppBar/CreateSpace.spec.ts     |  21 ++-
 .../Modals/SetLinkPasswordModal.spec.ts       |   3 +
 .../Shares/Links/DetailsAndEdit.spec.ts       |  15 --
 .../resource/resourcesTransfer.spec.ts        |   8 -
 .../tests/unit/views/FilesDrop.spec.ts        |   3 +-
 .../unit/views/spaces/GenericSpace.spec.ts    |   3 +-
 .../unit/views/spaces/GenericTrash.spec.ts    |   3 +-
 packages/web-app-importer/src/extensions.ts   |  22 +--
 .../web-pkg/src/components/AppBar/AppBar.vue  |   2 +-
 .../components/AppTemplates/AppWrapper.vue    |  11 +-
 .../src/components/CreateLinkModal.vue        |  58 +++----
 .../src/components/CreateShortcutModal.vue    |  61 ++++---
 .../Modals/ResourceConflictModal.vue          |  69 ++++----
 .../components/Modals/SpaceMoveInfoModal.vue  |  22 +++
 .../web-pkg/src/components/Modals/index.ts    |   1 +
 .../src/components/Spaces/QuotaModal.vue      |  56 +++----
 .../components/Spaces/ReadmeContentModal.vue  |  17 +-
 .../actions/files/useFileActionsCreateLink.ts |   6 +-
 .../files/useFileActionsCreateNewFile.ts      |  34 ++--
 .../files/useFileActionsCreateNewFolder.ts    |  37 ++---
 .../files/useFileActionsCreateNewShortcut.ts  |  21 ++-
 .../useFileActionsCreateSpaceFromResource.ts  |  17 +-
 .../files/useFileActionsEmptyTrashBin.ts      |  19 +--
 .../actions/files/useFileActionsPaste.ts      |   2 -
 .../actions/files/useFileActionsRename.ts     |  67 +++-----
 .../actions/files/useFileActionsRestore.ts    |   4 +-
 .../helpers/useFileActionsDeleteResources.ts  |  23 +--
 .../actions/spaces/useSpaceActionsDelete.ts   |  22 +--
 .../actions/spaces/useSpaceActionsDisable.ts  |  23 +--
 .../spaces/useSpaceActionsEditDescription.ts  |  14 +-
 .../spaces/useSpaceActionsEditQuota.ts        |  13 +-
 .../useSpaceActionsEditReadmeContent.ts       |   5 +-
 .../actions/spaces/useSpaceActionsRename.ts   |  17 +-
 .../actions/spaces/useSpaceActionsRestore.ts  |  13 +-
 .../src/composables/piniaStores/index.ts      |   1 +
 .../src/composables/piniaStores/modals.ts     |  90 +++++++++++
 .../src/composables/piniaStores/theme.ts      |   4 +-
 .../src/composables/spaces/useSpaceHelpers.ts |  16 +-
 .../conflictHandling/conflictDialog.ts        |  29 ++--
 .../tests/unit/components/AppBanner.spec.ts   |  24 +--
 .../unit/components/CreateLinkModal.spec.ts   |  39 ++---
 .../Modals/ResourceConflictModal.spec.ts      |  10 +-
 .../files/useFileActionsCreateLink.spec.ts    |  11 +-
 .../files/useFileActionsCreateNewFile.spec.ts |  19 +--
 .../useFileActionsCreateNewFolder.spec.ts     |  20 +--
 .../useFileActionsCreateNewShortcut.spec.ts   |   7 +-
 .../files/useFileActionsEmptyTrashBin.spec.ts |  23 +--
 .../files/useFileActionsRename.spec.ts        |  70 ++++----
 .../spaces/useSpaceActionsDelete.spec.ts      |  38 ++---
 .../spaces/useSpaceActionsDisable.spec.ts     |  37 +++--
 .../useSpaceActionsEditDescription.spec.ts    |  25 +--
 .../spaces/useSpaceActionsEditQuota.spec.ts   |   8 +-
 .../useSpaceActionsEditReadmeContent.spec.ts  |   6 +-
 .../spaces/useSpaceActionsRename.spec.ts      |  30 ++--
 .../spaces/useSpaceActionsRestore.spec.ts     |  35 ++--
 .../composables/piniaStores/modals.spec.ts    |  73 +++++++++
 .../spaces/useSpaceHelpers.spec.ts            |  54 +++----
 .../conflictHandling/conflictDialog.spec.ts   |  14 +-
 packages/web-runtime/src/App.vue              |  77 +--------
 .../src/components/EditPasswordModal.vue      | 128 +++++++++------
 .../src/components/ModalWrapper.vue           | 107 ++++++++++++
 .../web-runtime/src/container/bootstrap.ts    |   6 +-
 packages/web-runtime/src/index.ts             |   2 +
 packages/web-runtime/src/pages/account.vue    |  50 ++----
 .../src/services/auth/authService.ts          |   5 +-
 packages/web-runtime/src/store/index.ts       |   2 -
 packages/web-runtime/src/store/modal.ts       | 106 ------------
 .../unit/components/EditPasswordModal.spec.ts |  10 +-
 .../unit/components/ModalWrapper.spec.ts      | 153 ++++++++++++++++++
 .../components/Topbar/ThemeSwitcher.spec.ts   |  22 ++-
 .../unit/components/Topbar/TopBar.spec.ts     |   3 +-
 .../unit/components/Topbar/UserMenu.spec.ts   |  12 +-
 .../tests/unit/pages/accessDenied.spec.ts     |   3 +-
 .../tests/unit/pages/account.spec.ts          |  31 ----
 .../tests/unit/pages/oidcCallback.spec.ts     |   3 +-
 .../unit/pages/resolvePublicLink.spec.ts      |   3 +-
 .../web-test-helpers/src/defaultPlugins.ts    |   9 +-
 packages/web-test-helpers/src/mocks/index.ts  |   1 +
 packages/web-test-helpers/src/mocks/pinia.ts  |  31 ++--
 .../mocks/store/defaultStoreMockOptions.ts    |   5 -
 127 files changed, 1553 insertions(+), 1717 deletions(-)
 create mode 100644 changelog/unreleased/change-creating-modals
 create mode 100644 packages/web-pkg/src/components/Modals/SpaceMoveInfoModal.vue
 create mode 100644 packages/web-pkg/src/composables/piniaStores/modals.ts
 create mode 100644 packages/web-pkg/tests/unit/composables/piniaStores/modals.spec.ts
 create mode 100644 packages/web-runtime/src/components/ModalWrapper.vue
 delete mode 100644 packages/web-runtime/src/store/modal.ts
 create mode 100644 packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts

diff --git a/changelog/unreleased/change-creating-modals b/changelog/unreleased/change-creating-modals
new file mode 100644
index 00000000000..49a39eac2c7
--- /dev/null
+++ b/changelog/unreleased/change-creating-modals
@@ -0,0 +1,8 @@
+Change: Creating modals
+
+BREAKING CHANGE for developers: The way how to work with modals has been reworked. Modals can now be registered via the `dispatchModal` method provided by the `useModals` composable, instead of calling `createModal` or `hideModal` from the store.
+
+For more details on how to use the modal please see the linked PR down below.
+
+https://github.com/owncloud/web/pull/10212
+https://github.com/owncloud/web/issues/10095
diff --git a/packages/design-system/src/components/OcModal/OcModal.vue b/packages/design-system/src/components/OcModal/OcModal.vue
index c8cfaae15e9..98e81417e5f 100644
--- a/packages/design-system/src/components/OcModal/OcModal.vue
+++ b/packages/design-system/src/components/OcModal/OcModal.vue
@@ -40,11 +40,9 @@
               v-model="userInputValue"
               class="oc-modal-body-input"
               :error-message="inputError"
-              :placeholder="inputPlaceholder"
               :label="inputLabel"
               :type="inputType"
               :description-message="inputDescription"
-              :disabled="inputDisabled"
               :fix-message-line="true"
               :selection-range="inputSelectionRange"
               @update:model-value="inputOnInput"
@@ -54,24 +52,24 @@
         </div>
 
         <div v-if="!hideActions" class="oc-modal-body-actions oc-flex oc-flex-right">
-          <oc-button
-            ref="cancelButton"
-            class="oc-modal-body-actions-cancel"
-            :variation="buttonCancelVariation"
-            :appearance="buttonCancelAppearance"
-            @click="cancelModalAction"
-            v-text="buttonCancelText"
-          />
-          <oc-button
-            v-if="!withoutButtonConfirm"
-            ref="primaryButton"
-            class="oc-modal-body-actions-confirm oc-ml-s"
-            variation="primary"
-            :appearance="buttonConfirmAppearance"
-            :disabled="buttonConfirmDisabled || !!inputError"
-            @click="confirm"
-            v-text="buttonConfirmText"
-          />
+          <div class="oc-modal-body-actions-grid">
+            <oc-button
+              class="oc-modal-body-actions-cancel"
+              variation="passive"
+              appearance="outline"
+              @click="cancelModalAction"
+              >{{ buttonCancelText }}</oc-button
+            >
+            <oc-button
+              v-if="!hideConfirmButton"
+              class="oc-modal-body-actions-confirm oc-ml-s"
+              variation="primary"
+              appearance="filled"
+              :disabled="buttonConfirmDisabled || !!inputError"
+              @click="confirm"
+              >{{ buttonConfirmText }}</oc-button
+            >
+          </div>
         </div>
       </div>
     </focus-trap>
@@ -79,7 +77,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ComponentPublicInstance, ref, onMounted, unref } from 'vue'
+import { defineComponent, PropType, ComponentPublicInstance } from 'vue'
 import OcButton from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcTextInput from '../OcTextInput/OcTextInput.vue'
@@ -174,28 +172,6 @@ export default defineComponent({
       required: false,
       default: 'Cancel'
     },
-    /**
-     * Variation type of the cancel button
-     */
-    buttonCancelVariation: {
-      type: String,
-      required: false,
-      default: 'passive',
-      validator: (value: string) => {
-        return ['passive', 'primary', 'danger', 'success', 'warning'].includes(value)
-      }
-    },
-    /**
-     * Appearance of the cancel button
-     */
-    buttonCancelAppearance: {
-      type: String,
-      required: false,
-      default: 'outline',
-      validator: (value: string) => {
-        return ['outline', 'filled', 'raw'].includes(value)
-      }
-    },
     /**
      * Text of the confirm button
      */
@@ -204,17 +180,6 @@ export default defineComponent({
       required: false,
       default: 'Confirm'
     },
-    /**
-     * Appearance of the confirm button
-     */
-    buttonConfirmAppearance: {
-      type: String,
-      required: false,
-      default: 'filled',
-      validator: (value: string) => {
-        return ['outline', 'filled', 'raw'].includes(value)
-      }
-    },
     /**
      * Asserts whether the confirm action is disabled
      */
@@ -226,7 +191,7 @@ export default defineComponent({
     /**
      * Asserts whether the modal should render a confirm button
      */
-    withoutButtonConfirm: {
+    hideConfirmButton: {
       type: Boolean,
       required: false,
       default: false
@@ -270,14 +235,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    /**
-     * Placeholder of the text input field
-     */
-    inputPlaceholder: {
-      type: String,
-      required: false,
-      default: null
-    },
     /**
      * Additional description message for the input field
      */
@@ -294,14 +251,6 @@ export default defineComponent({
       required: false,
       default: null
     },
-    /**
-     * Asserts whether the input is disabled
-     */
-    inputDisabled: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     /**
      * Overwrite default focused element
      * Can be `#id, .class`.
@@ -320,34 +269,6 @@ export default defineComponent({
     }
   },
   emits: ['cancel', 'confirm', 'input'],
-  setup() {
-    const primaryButton = ref(null)
-    const cancelButton = ref(null)
-
-    const setButtonsEqualWidth = () => {
-      const _primaryButton = unref(primaryButton)
-      const _cancelButton = unref(cancelButton)
-
-      const primaryWidth = _primaryButton?.$el?.offsetWidth || 0
-      const cancelWidth = _cancelButton?.$el?.offsetWidth || 0
-      const maxWidth = Math.max(primaryWidth, cancelWidth)
-
-      if (_primaryButton?.$el) {
-        _primaryButton.$el.style.minWidth = `${maxWidth}px`
-      }
-      if (_cancelButton?.$el) {
-        _cancelButton.$el.style.minWidth = `${maxWidth}px`
-      }
-    }
-    onMounted(() => {
-      setButtonsEqualWidth()
-    })
-
-    return {
-      primaryButton,
-      cancelButton
-    }
-  },
   data() {
     return {
       userInputValue: null
@@ -537,6 +458,12 @@ export default defineComponent({
       .oc-button {
         border-radius: 4px;
       }
+
+      &-grid {
+        display: inline-grid;
+        grid-auto-flow: column;
+        grid-auto-columns: 1fr;
+      }
     }
   }
 
@@ -570,8 +497,6 @@ export default defineComponent({
     message="Are you sure you want to delete this file? All its content will be permanently removed. This action cannot be undone."
     button-cancel-text="Cancel"
     button-confirm-text="Delete"
-    button-confirm-appearance="filled"
-    button-confirm-variation="danger"
     class="oc-mb-l oc-position-relative"
   />
 </div>
@@ -597,7 +522,6 @@ export default defineComponent({
   <oc-modal
     title="Rename file lorem.txt"
     button-cancel-text="Cancel"
-    button-cancel-variation="warning"
     button-confirm-text="Rename"
     class="oc-position-relative"
   >
diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index 363a132da16..2edb3b6e625 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -14,8 +14,10 @@ exports[`OcModal displays input 1`] = `
         <oc-text-input-stub class="oc-modal-body-input" clearbuttonaccessiblelabel="" clearbuttonenabled="false" disabled="false" fixmessageline="true" id="oc-textinput-1" label="Folder name" modelvalue="New folder" passwordpolicy="[object Object]" readonly="false" type="text"></oc-text-input-stub>
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <div class="oc-modal-body-actions-grid">
+          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        </div>
       </div>
     </div>
   </focus-trap-stub>
@@ -36,8 +38,10 @@ exports[`OcModal hides icon if not specified 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <div class="oc-modal-body-actions-grid">
+          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        </div>
       </div>
     </div>
   </focus-trap-stub>
@@ -58,8 +62,10 @@ exports[`OcModal matches snapshot 1`] = `
         <!--v-if-->
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <div class="oc-modal-body-actions-grid">
+          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        </div>
       </div>
     </div>
   </focus-trap-stub>
@@ -80,8 +86,10 @@ exports[`OcModal overrides props message with slot 1`] = `
         </div>
       </div>
       <div class="oc-modal-body-actions oc-flex oc-flex-right">
-        <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
-        <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" style="min-width: 0px;" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        <div class="oc-modal-body-actions-grid">
+          <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive">Cancel</oc-button-stub>
+          <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary">Confirm</oc-button-stub>
+        </div>
       </div>
     </div>
   </focus-trap-stub>
diff --git a/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue b/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
index 40e1f4adc17..bbf257b1c4b 100644
--- a/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/CreateGroupModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <form autocomplete="off" @submit.prevent="onConfirm">
+  <form autocomplete="off" @submit.prevent="$emit('confirm')">
     <oc-text-input
       id="create-group-input-display-name"
       v-model="group.displayName"
@@ -10,35 +10,22 @@
       @update:model-value="validateDisplayName"
     />
     <input type="submit" class="oc-hidden" />
-    <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-      <oc-button
-        class="oc-modal-body-actions-cancel oc-ml-s"
-        appearance="outline"
-        variation="passive"
-        @click="onCancel"
-        >{{ $gettext('Cancel') }}
-      </oc-button>
-      <oc-button
-        class="oc-modal-body-actions-confirm oc-ml-s"
-        appearance="filled"
-        variation="primary"
-        :disabled="isFormInvalid"
-        @click="onConfirm"
-        >{{ $gettext('Confirm') }}
-      </oc-button>
-    </div>
   </form>
 </template>
 
 <script lang="ts">
 import { useGettext } from 'vue3-gettext'
-import { computed, defineComponent, ref, unref } from 'vue'
+import { computed, defineComponent, ref, PropType, unref, watch } from 'vue'
 import { Group } from '@ownclouders/web-client/src/generated'
-import { MaybeRef, useClientService, useEventBus, useStore } from '@ownclouders/web-pkg'
+import { MaybeRef, Modal, useClientService, useEventBus, useStore } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'CreateGroupModal',
-  setup(props, { expose }) {
+  props: {
+    modal: { type: Object as PropType<Modal>, required: true }
+  },
+  emits: ['confirm', 'update:confirmDisabled'],
+  setup(props, { emit, expose }) {
     const { $gettext } = useGettext()
     const store = useStore()
     const eventBus = useEventBus()
@@ -58,9 +45,17 @@ export default defineComponent({
         .includes(false)
     })
 
+    watch(
+      isFormInvalid,
+      () => {
+        emit('update:confirmDisabled', unref(isFormInvalid))
+      },
+      { immediate: true }
+    )
+
     const onConfirm = async () => {
       if (unref(isFormInvalid)) {
-        return
+        return Promise.reject(new Promise((reject) => reject('')))
       }
 
       try {
@@ -76,32 +71,26 @@ export default defineComponent({
           title: $gettext('Failed to create group'),
           error
         })
-      } finally {
-        store.dispatch('hideModal')
       }
     }
 
-    const onCancel = () => {
-      store.dispatch('hideModal')
-    }
-
-    expose({ onConfirm, onCancel })
+    expose({ onConfirm })
 
     return {
       clientService,
       group,
       formData,
       isFormInvalid,
-      onConfirm,
-      onCancel
+
+      // unit tests
+      onConfirm
     }
   },
   methods: {
     async validateDisplayName() {
-      this.formData.displayName.valid = false
-
       if (this.group.displayName.trim() === '') {
         this.formData.displayName.errorMessage = this.$gettext('Group name cannot be empty')
+        this.formData.displayName.valid = false
         return false
       }
 
@@ -109,6 +98,7 @@ export default defineComponent({
         this.formData.displayName.errorMessage = this.$gettext(
           'Group name cannot exceed 255 characters'
         )
+        this.formData.displayName.valid = false
         return false
       }
 
@@ -121,6 +111,7 @@ export default defineComponent({
             groupName: this.group.displayName
           }
         )
+        this.formData.displayName.valid = false
         return false
       } catch (e) {}
 
diff --git a/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue b/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue
index f832dd18af8..51384ab6343 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/ContextActions.vue
@@ -35,7 +35,7 @@ export default defineComponent({
 
     const { actions: deleteActions } = useSpaceActionsDelete({ store })
     const { actions: disableActions } = useSpaceActionsDisable({ store })
-    const { actions: editQuotaActions } = useSpaceActionsEditQuota({ store })
+    const { actions: editQuotaActions } = useSpaceActionsEditQuota()
     const { actions: editDescriptionActions } = useSpaceActionsEditDescription({ store })
     const { actions: renameActions } = useSpaceActionsRename({ store })
     const { actions: restoreActions } = useSpaceActionsRestore({ store })
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue b/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
index 7bffcc2b5b8..84b1c4a8fa6 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SideBar/ActionsPanel.vue
@@ -42,7 +42,7 @@ export default defineComponent({
     const { actions: deleteActions } = useSpaceActionsDelete({ store })
     const { actions: disableActions } = useSpaceActionsDisable({ store })
     const { actions: editDescriptionActions } = useSpaceActionsEditDescription({ store })
-    const { actions: editQuotaActions } = useSpaceActionsEditQuota({ store })
+    const { actions: editQuotaActions } = useSpaceActionsEditQuota()
     const { actions: renameActions } = useSpaceActionsRename({ store })
     const { actions: restoreActions } = useSpaceActionsRestore({ store })
 
diff --git a/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
index 64bd5aa6f5c..bf656e28494 100644
--- a/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/AddToGroupsModal.vue
@@ -4,27 +4,10 @@
     :group-options="groups"
     @selected-option-change="changeSelectedGroupOption"
   />
-  <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-    <oc-button
-      class="oc-modal-body-actions-cancel oc-ml-s"
-      appearance="outline"
-      variation="passive"
-      @click="onCancel"
-      >{{ $gettext('Cancel') }}
-    </oc-button>
-    <oc-button
-      class="oc-modal-body-actions-confirm oc-ml-s"
-      appearance="filled"
-      variation="primary"
-      :disabled="!selectedOptions.length"
-      @click="onConfirm"
-      >{{ $gettext('Confirm') }}
-    </oc-button>
-  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, unref } from 'vue'
+import { defineComponent, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@ownclouders/web-client/src/generated'
 import GroupSelect from './GroupSelect.vue'
@@ -33,13 +16,14 @@ import {
   useEventBus,
   useClientService,
   useConfigurationManager,
-  useLoadingService
+  Modal
 } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'AddToGroupsModal',
   components: { GroupSelect },
   props: {
+    modal: { type: Object as PropType<Modal>, required: true },
     groups: {
       type: Array as PropType<Group[]>,
       required: true
@@ -49,11 +33,11 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props, { expose }) {
+  emits: ['update:confirmDisabled'],
+  setup(props, { emit, expose }) {
     const store = useStore()
     const clientService = useClientService()
     const configurationManager = useConfigurationManager()
-    const loadingService = useLoadingService()
     const eventBus = useEventBus()
     const { $gettext, $ngettext } = useGettext()
 
@@ -62,6 +46,14 @@ export default defineComponent({
       selectedOptions.value = options
     }
 
+    watch(
+      selectedOptions,
+      () => {
+        emit('update:confirmDisabled', !unref(selectedOptions).length)
+      },
+      { immediate: true }
+    )
+
     const onConfirm = async () => {
       const client = clientService.graphAuthenticated
       const usersToFetch = []
@@ -87,9 +79,7 @@ export default defineComponent({
         return
       }
 
-      const results = await loadingService.addTask(() => {
-        return Promise.allSettled(promises)
-      })
+      const results = await Promise.allSettled(promises)
 
       const succeeded = results.filter((r) => r.status === 'fulfilled')
       if (succeeded.length) {
@@ -140,22 +130,17 @@ export default defineComponent({
         )
       } catch (e) {
         console.error(e)
-      } finally {
-        store.dispatch('hideModal')
       }
     }
 
-    const onCancel = () => {
-      store.dispatch('hideModal')
-    }
-
-    expose({ onConfirm, onCancel })
+    expose({ onConfirm })
 
     return {
       selectedOptions,
       changeSelectedGroupOption,
-      onConfirm,
-      onCancel
+
+      // unit tests
+      onConfirm
     }
   }
 })
diff --git a/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue b/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue
index df62844b987..4d4cdd27f8d 100644
--- a/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/CreateUserModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <form autocomplete="off" @submit.prevent="onConfirm">
+  <form autocomplete="off" @submit.prevent="$emit('confirm')">
     <oc-text-input
       id="create-user-input-user-name"
       v-model="user.onPremisesSamAccountName"
@@ -40,35 +40,20 @@
       @update:model-value="validatePassword"
     />
     <input type="submit" class="oc-hidden" />
-    <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-      <oc-button
-        class="oc-modal-body-actions-cancel oc-ml-s"
-        appearance="outline"
-        variation="passive"
-        @click="onCancel"
-        >{{ $gettext('Cancel') }}
-      </oc-button>
-      <oc-button
-        class="oc-modal-body-actions-confirm oc-ml-s"
-        appearance="filled"
-        variation="primary"
-        :disabled="isFormInvalid"
-        @click="onConfirm"
-        >{{ $gettext('Confirm') }}
-      </oc-button>
-    </div>
   </form>
 </template>
 
 <script lang="ts">
 import { useGettext } from 'vue3-gettext'
-import { computed, defineComponent, ref, unref } from 'vue'
+import { computed, defineComponent, ref, unref, PropType, watch } from 'vue'
 import * as EmailValidator from 'email-validator'
-import { useClientService, useEventBus, useStore } from '@ownclouders/web-pkg'
+import { Modal, useClientService, useEventBus, useStore } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'CreateUserModal',
-  setup(props, { expose }) {
+  props: { modal: { type: Object as PropType<Modal>, required: true } },
+  emits: ['confirm', 'update:confirmDisabled'],
+  setup(props, { emit, expose }) {
     const store = useStore()
     const eventBus = useEventBus()
     const clientService = useClientService()
@@ -108,9 +93,17 @@ export default defineComponent({
         .includes(false)
     })
 
+    watch(
+      isFormInvalid,
+      () => {
+        emit('update:confirmDisabled', unref(isFormInvalid))
+      },
+      { immediate: true }
+    )
+
     const onConfirm = async () => {
       if (unref(isFormInvalid)) {
-        return
+        return Promise.reject(new Promise((reject) => reject('')))
       }
 
       try {
@@ -128,24 +121,19 @@ export default defineComponent({
           title: $gettext('Failed to create user'),
           error
         })
-      } finally {
-        store.dispatch('hideModal')
       }
     }
 
-    const onCancel = () => {
-      store.dispatch('hideModal')
-    }
-
-    expose({ onConfirm, onCancel })
+    expose({ onConfirm })
 
     return {
       clientService,
       formData,
       user,
       isFormInvalid,
-      onConfirm,
-      onCancel
+
+      // unit tests
+      onConfirm
     }
   },
   methods: {
@@ -158,15 +146,15 @@ export default defineComponent({
       this.formData.email.valid = true
     },
     async validateUserName() {
-      this.formData.userName.valid = false
-
       if (this.user.onPremisesSamAccountName.trim() === '') {
         this.formData.userName.errorMessage = this.$gettext('User name cannot be empty')
+        this.formData.userName.valid = false
         return false
       }
 
       if (this.user.onPremisesSamAccountName.includes(' ')) {
         this.formData.userName.errorMessage = this.$gettext('User name cannot contain white spaces')
+        this.formData.userName.valid = false
         return false
       }
 
@@ -174,6 +162,7 @@ export default defineComponent({
         this.formData.userName.errorMessage = this.$gettext(
           'User name cannot exceed 255 characters'
         )
+        this.formData.userName.valid = false
         return false
       }
 
@@ -187,6 +176,7 @@ export default defineComponent({
         this.formData.userName.errorMessage = this.$gettext(
           'User name cannot contain special characters'
         )
+        this.formData.userName.valid = false
         return false
       }
 
@@ -195,6 +185,7 @@ export default defineComponent({
         !isNaN(parseInt(this.user.onPremisesSamAccountName[0]))
       ) {
         this.formData.userName.errorMessage = this.$gettext('User name cannot start with a number')
+        this.formData.userName.valid = false
         return false
       }
 
@@ -205,6 +196,7 @@ export default defineComponent({
         this.formData.userName.errorMessage = this.$gettext('User "%{userName}" already exists', {
           userName: this.user.onPremisesSamAccountName
         })
+        this.formData.userName.valid = false
         return false
       } catch (e) {}
 
diff --git a/packages/web-app-admin-settings/src/components/Users/LoginModal.vue b/packages/web-app-admin-settings/src/components/Users/LoginModal.vue
index fda31d33da2..43ef8dc1207 100644
--- a/packages/web-app-admin-settings/src/components/Users/LoginModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/LoginModal.vue
@@ -1,38 +1,23 @@
 <template>
-  <oc-select
-    :model-value="selectedOption"
-    :label="$gettext('Login')"
-    :options="options"
-    :placeholder="$gettext('Select...')"
-    :warning-message="
-      currentUserSelected ? $gettext('Your own login status will remain unchanged.') : ''
-    "
-    @update:model-value="changeSelectedOption"
-  />
-  <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-    <oc-button
-      class="oc-modal-body-actions-cancel oc-ml-s"
-      appearance="outline"
-      variation="passive"
-      @click="onCancel"
-      >{{ $gettext('Cancel') }}
-    </oc-button>
-    <oc-button
-      class="oc-modal-body-actions-confirm oc-ml-s"
-      appearance="filled"
-      variation="primary"
-      :disabled="!selectedOption"
-      @click="onConfirm"
-      >{{ $gettext('Confirm') }}
-    </oc-button>
+  <div>
+    <oc-select
+      :model-value="selectedOption"
+      :label="$gettext('Login')"
+      :options="options"
+      :placeholder="$gettext('Select...')"
+      :warning-message="
+        currentUserSelected ? $gettext('Your own login status will remain unchanged.') : ''
+      "
+      @update:model-value="changeSelectedOption"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, onMounted, PropType, ref, unref } from 'vue'
+import { computed, defineComponent, onMounted, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { User } from '@ownclouders/web-client/src/generated'
-import { useClientService, useLoadingService, useStore, useEventBus } from '@ownclouders/web-pkg'
+import { useClientService, useStore, useEventBus, Modal } from '@ownclouders/web-pkg'
 
 type LoginOption = {
   label: string
@@ -42,24 +27,33 @@ type LoginOption = {
 export default defineComponent({
   name: 'LoginModal',
   props: {
+    modal: { type: Object as PropType<Modal>, required: true },
     users: {
       type: Array as PropType<User[]>,
       required: true
     }
   },
-  setup(props, { expose }) {
+  emits: ['update:confirmDisabled'],
+  setup(props, { emit, expose }) {
     const store = useStore()
     const clientService = useClientService()
-    const loadingService = useLoadingService()
     const eventBus = useEventBus()
     const { $gettext, $ngettext } = useGettext()
 
-    const selectedOption = ref()
+    const selectedOption = ref<LoginOption>()
     const options = ref([
       { label: $gettext('Allowed'), value: true },
       { label: $gettext('Forbidden'), value: false }
     ])
 
+    watch(
+      selectedOption,
+      () => {
+        emit('update:confirmDisabled', !unref(selectedOption))
+      },
+      { immediate: true }
+    )
+
     const changeSelectedOption = (option: LoginOption) => {
       selectedOption.value = option
     }
@@ -82,7 +76,7 @@ export default defineComponent({
       const promises = affectedUsers.map(({ id }) =>
         client.users.editUser(id, { accountEnabled: unref(selectedOption).value })
       )
-      const results = await loadingService.addTask(() => Promise.allSettled(promises))
+      const results = await Promise.allSettled(promises)
 
       const succeeded = results.filter((r) => r.status === 'fulfilled') as any
       if (succeeded.length) {
@@ -124,8 +118,8 @@ export default defineComponent({
       }
 
       try {
-        const usersResponse = await loadingService.addTask(() =>
-          Promise.all(succeeded.map(({ value }) => client.users.getUser(value.data.id)))
+        const usersResponse = await Promise.all(
+          succeeded.map(({ value }) => client.users.getUser(value.data.id))
         )
 
         eventBus.publish(
@@ -134,24 +128,19 @@ export default defineComponent({
         )
       } catch (e) {
         console.error(e)
-      } finally {
-        store.dispatch('hideModal')
       }
     }
 
-    const onCancel = () => {
-      store.dispatch('hideModal')
-    }
-
-    expose({ onConfirm, onCancel })
+    expose({ onConfirm })
 
     return {
       selectedOption,
       options,
       changeSelectedOption,
       currentUserSelected,
-      onConfirm,
-      onCancel
+
+      // unit tests
+      onConfirm
     }
   }
 })
diff --git a/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue b/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
index 047a03a5cb9..a56cf7e85ce 100644
--- a/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
+++ b/packages/web-app-admin-settings/src/components/Users/RemoveFromGroupsModal.vue
@@ -4,36 +4,20 @@
     :group-options="groups"
     @selected-option-change="changeSelectedGroupOption"
   />
-  <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-    <oc-button
-      class="oc-modal-body-actions-cancel oc-ml-s"
-      appearance="outline"
-      variation="passive"
-      @click="onCancel"
-      >{{ $gettext('Cancel') }}
-    </oc-button>
-    <oc-button
-      class="oc-modal-body-actions-confirm oc-ml-s"
-      appearance="filled"
-      variation="primary"
-      :disabled="!selectedOptions.length"
-      @click="onConfirm"
-      >{{ $gettext('Confirm') }}
-    </oc-button>
-  </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, ref, unref } from 'vue'
+import { defineComponent, PropType, ref, unref, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { Group, User } from '@ownclouders/web-client/src/generated'
 import GroupSelect from './GroupSelect.vue'
-import { useStore, useEventBus, useClientService, useLoadingService } from '@ownclouders/web-pkg'
+import { useStore, useEventBus, useClientService, Modal } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'RemoveFromGroupsModal',
   components: { GroupSelect },
   props: {
+    modal: { type: Object as PropType<Modal>, required: true },
     groups: {
       type: Array as PropType<Group[]>,
       required: true
@@ -43,10 +27,10 @@ export default defineComponent({
       required: true
     }
   },
-  setup(props, { expose }) {
+  emits: ['update:confirmDisabled'],
+  setup(props, { emit, expose }) {
     const store = useStore()
     const clientService = useClientService()
-    const loadingService = useLoadingService()
     const eventBus = useEventBus()
     const { $gettext, $ngettext } = useGettext()
 
@@ -55,6 +39,14 @@ export default defineComponent({
       selectedOptions.value = options
     }
 
+    watch(
+      selectedOptions,
+      () => {
+        emit('update:confirmDisabled', !unref(selectedOptions).length)
+      },
+      { immediate: true }
+    )
+
     const onConfirm = async () => {
       const client = clientService.graphAuthenticated
       const usersToFetch = []
@@ -80,9 +72,7 @@ export default defineComponent({
         return
       }
 
-      const results = await loadingService.addTask(() => {
-        return Promise.allSettled(promises)
-      })
+      const results = await Promise.allSettled(promises)
 
       const succeeded = results.filter((r) => r.status === 'fulfilled')
       if (succeeded.length) {
@@ -133,22 +123,17 @@ export default defineComponent({
         )
       } catch (e) {
         console.error(e)
-      } finally {
-        store.dispatch('hideModal')
       }
     }
 
-    const onCancel = () => {
-      store.dispatch('hideModal')
-    }
-
-    expose({ onConfirm, onCancel })
+    expose({ onConfirm })
 
     return {
       selectedOptions,
       changeSelectedGroupOption,
-      onConfirm,
-      onCancel
+
+      // unit tests
+      onConfirm
     }
   }
 })
diff --git a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts
index 502226fc37a..9c620001ac3 100644
--- a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsCreateGroup.ts
@@ -1,22 +1,12 @@
-import { useStore } from '@ownclouders/web-pkg'
+import { useModals, UserAction } from '@ownclouders/web-pkg'
 import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { UserAction } from '@ownclouders/web-pkg'
 import CreateGroupModal from '../../../components/Groups/CreateGroupModal.vue'
 
 export const useGroupActionsCreateGroup = () => {
-  const store = useStore()
+  const { dispatchModal } = useModals()
   const { $gettext } = useGettext()
 
-  const handler = () => {
-    return store.dispatch('createModal', {
-      variation: 'passive',
-      title: $gettext('Create group'),
-      hideActions: true,
-      customComponent: CreateGroupModal
-    })
-  }
-
   const actions = computed((): UserAction[] => [
     {
       name: 'create-group',
@@ -25,7 +15,12 @@ export const useGroupActionsCreateGroup = () => {
       class: 'oc-groups-actions-create-group',
       label: () => $gettext('New group'),
       isEnabled: () => true,
-      handler
+      handler: () => {
+        dispatchModal({
+          title: $gettext('Create group'),
+          customComponent: CreateGroupModal
+        })
+      }
     }
   ])
 
diff --git a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsDelete.ts b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsDelete.ts
index b167252c391..6055f227325 100644
--- a/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsDelete.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/groups/useGroupActionsDelete.ts
@@ -1,23 +1,21 @@
 import { computed } from 'vue'
 import { Store } from 'vuex'
-import { eventBus, useLoadingService } from '@ownclouders/web-pkg'
+import { eventBus, useModals } from '@ownclouders/web-pkg'
 import { useClientService, useStore } from '@ownclouders/web-pkg'
 import { GroupAction, GroupActionOptions } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
+import { Group } from '@ownclouders/web-client/src/generated'
 
 export const useGroupActionsDelete = ({ store }: { store?: Store<any> }) => {
   store = store || useStore()
   const { $gettext, $ngettext } = useGettext()
   const clientService = useClientService()
-  const loadingService = useLoadingService()
+  const { dispatchModal } = useModals()
 
-  const deleteGroups = async (groups) => {
+  const deleteGroups = async (groups: Group[]) => {
     const graphClient = clientService.graphAuthenticated
     const promises = groups.map((group) => graphClient.groups.deleteGroup(group.id))
-
-    const results = await loadingService.addTask(() => {
-      return Promise.allSettled(promises)
-    })
+    const results = await Promise.allSettled(promises)
 
     const succeeded = results.filter((r) => r.status === 'fulfilled')
     if (succeeded.length) {
@@ -54,7 +52,6 @@ export const useGroupActionsDelete = ({ store }: { store?: Store<any> }) => {
       })
     }
 
-    store.dispatch('hideModal')
     eventBus.publish('app.admin-settings.list.load')
   }
 
@@ -63,7 +60,7 @@ export const useGroupActionsDelete = ({ store }: { store?: Store<any> }) => {
       return
     }
 
-    const modal = {
+    dispatchModal({
       variation: 'danger',
       title: $ngettext(
         'Delete group "%{group}"?',
@@ -74,7 +71,6 @@ export const useGroupActionsDelete = ({ store }: { store?: Store<any> }) => {
           groupCount: resources.length.toString()
         }
       ),
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Delete'),
       message: $ngettext(
         'Are you sure you want to delete this group?',
@@ -85,11 +81,8 @@ export const useGroupActionsDelete = ({ store }: { store?: Store<any> }) => {
         }
       ),
       hasInput: false,
-      onCancel: () => store.dispatch('hideModal'),
       onConfirm: () => deleteGroups(resources)
-    }
-
-    store.dispatch('createModal', modal)
+    })
   }
 
   const actions = computed((): GroupAction[] => [
diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsAddToGroups.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsAddToGroups.ts
index 9f40356fb3f..50ed825c49d 100644
--- a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsAddToGroups.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsAddToGroups.ts
@@ -1,16 +1,15 @@
 import { computed, Ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { UserAction, useStore } from '@ownclouders/web-pkg'
+import { UserAction, useModals } from '@ownclouders/web-pkg'
 import { Group } from '@ownclouders/web-client/src/generated'
 import AddToGroupsModal from '../../../components/Users/AddToGroupsModal.vue'
 
 export const useUserActionsAddToGroups = ({ groups }: { groups: Ref<Group[]> }) => {
-  const store = useStore()
+  const { dispatchModal } = useModals()
   const { $gettext, $ngettext } = useGettext()
 
   const handler = ({ resources }) => {
-    return store.dispatch('createModal', {
-      variation: 'passive',
+    dispatchModal({
       title: $ngettext(
         'Add user "%{user}" to groups',
         'Add %{userCount} users to groups ',
@@ -20,7 +19,6 @@ export const useUserActionsAddToGroups = ({ groups }: { groups: Ref<Group[]> })
           userCount: resources.length.toString()
         }
       ),
-      hideActions: true,
       customComponent: AddToGroupsModal,
       customComponentAttrs: () => ({
         users: resources,
diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsCreateUser.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsCreateUser.ts
index 4cba9288e1b..0081d9e0ba4 100644
--- a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsCreateUser.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsCreateUser.ts
@@ -1,4 +1,4 @@
-import { useStore } from '@ownclouders/web-pkg'
+import { useModals } from '@ownclouders/web-pkg'
 import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction } from '@ownclouders/web-pkg'
@@ -6,19 +6,10 @@ import { useCapabilityCreateUsersDisabled } from '@ownclouders/web-pkg'
 import CreateUserModal from '../../../components/Users/CreateUserModal.vue'
 
 export const useUserActionsCreateUser = () => {
-  const store = useStore()
+  const { dispatchModal } = useModals()
   const createUsersDisabled = useCapabilityCreateUsersDisabled()
   const { $gettext } = useGettext()
 
-  const handler = () => {
-    return store.dispatch('createModal', {
-      variation: 'passive',
-      title: $gettext('Create user'),
-      hideActions: true,
-      customComponent: CreateUserModal
-    })
-  }
-
   const actions = computed((): UserAction[] => [
     {
       name: 'create-user',
@@ -27,7 +18,12 @@ export const useUserActionsCreateUser = () => {
       class: 'oc-users-actions-create-user',
       label: () => $gettext('New user'),
       isEnabled: () => !unref(createUsersDisabled),
-      handler
+      handler: () => {
+        dispatchModal({
+          title: $gettext('Create user'),
+          customComponent: CreateUserModal
+        })
+      }
     }
   ])
 
diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsDelete.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsDelete.ts
index 01d56697659..8dc8f3aadeb 100644
--- a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsDelete.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsDelete.ts
@@ -1,22 +1,21 @@
 import { computed, unref } from 'vue'
 import { Store } from 'vuex'
-import { eventBus, useCapabilityDeleteUsersDisabled, useLoadingService } from '@ownclouders/web-pkg'
+import { eventBus, useCapabilityDeleteUsersDisabled, useModals } from '@ownclouders/web-pkg'
 import { useClientService, useStore } from '@ownclouders/web-pkg'
 import { UserAction, UserActionOptions } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
+import { User } from '@ownclouders/web-client/src/generated'
 
 export const useUserActionsDelete = ({ store }: { store?: Store<any> }) => {
   store = store || useStore()
   const { $gettext, $ngettext } = useGettext()
   const clientService = useClientService()
-  const loadingService = useLoadingService()
+  const { dispatchModal } = useModals()
 
-  const deleteUsers = async (users) => {
+  const deleteUsers = async (users: User[]) => {
     const graphClient = clientService.graphAuthenticated
     const promises = users.map((user) => graphClient.users.deleteUser(user.id))
-    const results = await loadingService.addTask(() => {
-      return Promise.allSettled(promises)
-    })
+    const results = await Promise.allSettled(promises)
 
     const succeeded = results.filter((r) => r.status === 'fulfilled')
     if (succeeded.length) {
@@ -53,7 +52,6 @@ export const useUserActionsDelete = ({ store }: { store?: Store<any> }) => {
       })
     }
 
-    store.dispatch('hideModal')
     eventBus.publish('app.admin-settings.list.load')
   }
 
@@ -62,13 +60,12 @@ export const useUserActionsDelete = ({ store }: { store?: Store<any> }) => {
       return
     }
 
-    const modal = {
+    dispatchModal({
       variation: 'danger',
       title: $ngettext('Delete user "%{user}"?', 'Delete %{userCount} users?', resources.length, {
         user: resources[0].displayName,
         userCount: resources.length.toString()
       }),
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Delete'),
       message: $ngettext(
         'Are you sure you want to delete this user?',
@@ -79,11 +76,8 @@ export const useUserActionsDelete = ({ store }: { store?: Store<any> }) => {
         }
       ),
       hasInput: false,
-      onCancel: () => store.dispatch('hideModal'),
       onConfirm: () => deleteUsers(resources)
-    }
-
-    store.dispatch('createModal', modal)
+    })
   }
 
   const actions = computed((): UserAction[] => [
diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditLogin.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditLogin.ts
index c07d21e0899..6cfce8daf5b 100644
--- a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditLogin.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditLogin.ts
@@ -1,16 +1,15 @@
 import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { UserAction, useCapabilityReadOnlyUserAttributes, useStore } from '@ownclouders/web-pkg'
+import { UserAction, useCapabilityReadOnlyUserAttributes, useModals } from '@ownclouders/web-pkg'
 import LoginModal from '../../../components/Users/LoginModal.vue'
 
 export const useUserActionsEditLogin = () => {
-  const store = useStore()
+  const { dispatchModal } = useModals()
   const readOnlyUserAttributes = useCapabilityReadOnlyUserAttributes()
   const { $gettext, $ngettext } = useGettext()
 
   const handler = ({ resources }) => {
-    return store.dispatch('createModal', {
-      variation: 'passive',
+    dispatchModal({
       title: $ngettext(
         'Edit login for "%{user}"',
         'Edit login for %{userCount} users',
@@ -20,7 +19,6 @@ export const useUserActionsEditLogin = () => {
           userCount: resources.length.toString()
         }
       ),
-      hideActions: true,
       customComponent: LoginModal,
       customComponentAttrs: () => ({
         users: resources
diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditQuota.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditQuota.ts
index 9e3d0144095..1345ab5a808 100644
--- a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditQuota.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsEditQuota.ts
@@ -4,16 +4,16 @@ import {
   QuotaModal,
   useAbility,
   useCapabilityReadOnlyUserAttributes,
-  useStore,
   UserAction,
-  UserActionOptions
+  UserActionOptions,
+  useModals
 } from '@ownclouders/web-pkg'
 import { SpaceResource } from '@ownclouders/web-client'
 import { isPersonalSpaceResource } from '@ownclouders/web-client/src/helpers'
 import { User } from '@ownclouders/web-client/src/generated'
 
 export const useUserActionsEditQuota = () => {
-  const store = useStore()
+  const { dispatchModal } = useModals()
   const { $gettext } = useGettext()
   const ability = useAbility()
   const readOnlyUserAttributes = useCapabilityReadOnlyUserAttributes()
@@ -51,8 +51,7 @@ export const useUserActionsEditQuota = () => {
       ({ drive }) => !isPersonalSpaceResource(drive as SpaceResource)
     )
 
-    return store.dispatch('createModal', {
-      variation: 'passive',
+    dispatchModal({
       title: getModalTitle({ resources }),
       customComponent: QuotaModal,
       customComponentAttrs: () => ({
@@ -70,8 +69,7 @@ export const useUserActionsEditQuota = () => {
                 .join(', ')
             }
           : {}
-      }),
-      hideActions: true
+      })
     })
   }
 
diff --git a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
index 95e7d1c9270..1d6b727db1f 100644
--- a/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
+++ b/packages/web-app-admin-settings/src/composables/actions/users/useUserActionsRemoveFromGroups.ts
@@ -1,16 +1,15 @@
 import { computed, Ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { UserAction, useStore } from '@ownclouders/web-pkg'
+import { UserAction, useModals } from '@ownclouders/web-pkg'
 import { Group } from '@ownclouders/web-client/src/generated'
 import RemoveFromGroupsModal from '../../../components/Users/RemoveFromGroupsModal.vue'
 
 export const useUserActionsRemoveFromGroups = ({ groups }: { groups: Ref<Group[]> }) => {
-  const store = useStore()
+  const { dispatchModal } = useModals()
   const { $gettext, $ngettext } = useGettext()
 
   const handler = ({ resources }) => {
-    return store.dispatch('createModal', {
-      variation: 'passive',
+    dispatchModal({
       title: $ngettext(
         'Remove user "%{user}" from groups',
         'Remove %{userCount} users from groups ',
@@ -20,7 +19,6 @@ export const useUserActionsRemoveFromGroups = ({ groups }: { groups: Ref<Group[]
           userCount: resources.length.toString()
         }
       ),
-      hideActions: true,
       customComponent: RemoveFromGroupsModal,
       customComponentAttrs: () => ({
         users: resources,
diff --git a/packages/web-app-admin-settings/src/views/Spaces.vue b/packages/web-app-admin-settings/src/views/Spaces.vue
index d8adb92a401..7c8efdff6ff 100644
--- a/packages/web-app-admin-settings/src/views/Spaces.vue
+++ b/packages/web-app-admin-settings/src/views/Spaces.vue
@@ -164,7 +164,7 @@ export default defineComponent({
 
     const { actions: deleteActions } = useSpaceActionsDelete({ store })
     const { actions: disableActions } = useSpaceActionsDisable({ store })
-    const { actions: editQuotaActions } = useSpaceActionsEditQuota({ store })
+    const { actions: editQuotaActions } = useSpaceActionsEditQuota()
     const { actions: restoreActions } = useSpaceActionsRestore({ store })
 
     const batchActions = computed((): SpaceAction[] => {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts
index 217fe4fcfc1..d2b34e85ae7 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Groups/CreateGroupModal.spec.ts
@@ -10,7 +10,7 @@ import {
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { AxiosResponse } from 'axios'
-import { eventBus } from '@ownclouders/web-pkg'
+import { Modal, eventBus } from '@ownclouders/web-pkg'
 
 describe('CreateGroupModal', () => {
   describe('computed method "isFormInvalid"', () => {
@@ -59,10 +59,13 @@ describe('CreateGroupModal', () => {
   })
   describe('method "onConfirm"', () => {
     it('should not create group if form is invalid', async () => {
+      jest.spyOn(console, 'error').mockImplementation(() => undefined)
       const { wrapper, storeOptions } = getWrapper()
 
       const eventSpy = jest.spyOn(eventBus, 'publish')
-      await wrapper.vm.onConfirm()
+      try {
+        await wrapper.vm.onConfirm()
+      } catch (error) {}
 
       expect(storeOptions.actions.showMessage).not.toHaveBeenCalled()
       expect(eventSpy).not.toHaveBeenCalled()
@@ -104,13 +107,6 @@ describe('CreateGroupModal', () => {
       expect(eventSpy).not.toHaveBeenCalled()
     })
   })
-  describe('method "onCancel"', () => {
-    it('hides the modal', async () => {
-      const { wrapper, storeOptions } = getWrapper()
-      await wrapper.vm.onCancel()
-      expect(storeOptions.actions.hideModal).toHaveBeenCalled()
-    })
-  })
 })
 
 function getWrapper() {
@@ -123,8 +119,7 @@ function getWrapper() {
     storeOptions,
     wrapper: shallowMount(CreateGroupModal, {
       props: {
-        cancel: jest.fn(),
-        confirm: jest.fn()
+        modal: mock<Modal>()
       },
       global: {
         mocks,
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
index 505d6205247..88531779a2c 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/AddToGroupsModal.spec.ts
@@ -9,7 +9,7 @@ import {
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { Group, User } from '@ownclouders/web-client/src/generated'
-import { eventBus } from '@ownclouders/web-pkg'
+import { Modal, eventBus } from '@ownclouders/web-pkg'
 
 describe('AddToGroupsModal', () => {
   it('renders the input', () => {
@@ -52,13 +52,6 @@ describe('AddToGroupsModal', () => {
       expect(eventSpy).not.toHaveBeenCalled()
     })
   })
-  describe('method "onCancel"', () => {
-    it('hides the modal', async () => {
-      const { wrapper, storeOptions } = getWrapper()
-      await wrapper.vm.onCancel()
-      expect(storeOptions.actions.hideModal).toHaveBeenCalled()
-    })
-  })
 })
 
 function getWrapper({ users = [mock<User>()], groups = [mock<Group>()] } = {}) {
@@ -72,6 +65,7 @@ function getWrapper({ users = [mock<User>()], groups = [mock<Group>()] } = {}) {
     storeOptions,
     wrapper: shallowMount(AddToGroupsModal, {
       props: {
+        modal: mock<Modal>(),
         users,
         groups
       },
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/CreateUserModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/CreateUserModal.spec.ts
index a861b3f8034..971df49a7ec 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/CreateUserModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/CreateUserModal.spec.ts
@@ -10,7 +10,7 @@ import {
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { AxiosResponse } from 'axios'
-import { eventBus } from '@ownclouders/web-pkg'
+import { Modal, eventBus } from '@ownclouders/web-pkg'
 
 describe('CreateUserModal', () => {
   describe('computed method "isFormInvalid"', () => {
@@ -116,10 +116,13 @@ describe('CreateUserModal', () => {
   })
   describe('method "onConfirm"', () => {
     it('should not create user if form is invalid', async () => {
+      jest.spyOn(console, 'error').mockImplementation(() => undefined)
       const { wrapper, storeOptions } = getWrapper()
 
       const eventSpy = jest.spyOn(eventBus, 'publish')
-      await wrapper.vm.onConfirm()
+      try {
+        await wrapper.vm.onConfirm()
+      } catch (error) {}
 
       expect(storeOptions.actions.showMessage).not.toHaveBeenCalled()
       expect(eventSpy).not.toHaveBeenCalled()
@@ -176,13 +179,6 @@ describe('CreateUserModal', () => {
       expect(eventSpy).not.toHaveBeenCalled()
     })
   })
-  describe('method "onCancel"', () => {
-    it('hides the modal', async () => {
-      const { wrapper, storeOptions } = getWrapper()
-      await wrapper.vm.onCancel()
-      expect(storeOptions.actions.hideModal).toHaveBeenCalled()
-    })
-  })
 })
 
 function getWrapper() {
@@ -194,6 +190,9 @@ function getWrapper() {
     mocks,
     storeOptions,
     wrapper: shallowMount(CreateUserModal, {
+      props: {
+        modal: mock<Modal>()
+      },
       global: {
         mocks,
         provide: mocks,
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/LoginModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/LoginModal.spec.ts
index cfb2fe06b73..20ffa35bd94 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/LoginModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/LoginModal.spec.ts
@@ -9,7 +9,7 @@ import {
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { User } from '@ownclouders/web-client/src/generated'
-import { eventBus } from '@ownclouders/web-pkg'
+import { Modal, eventBus } from '@ownclouders/web-pkg'
 
 describe('LoginModal', () => {
   it('renders the input including two options', () => {
@@ -65,13 +65,6 @@ describe('LoginModal', () => {
       expect(storeOptions.actions.showErrorMessage).toHaveBeenCalled()
     })
   })
-  describe('method "onCancel"', () => {
-    it('hides the modal', async () => {
-      const { wrapper, storeOptions } = getWrapper()
-      await wrapper.vm.onCancel()
-      expect(storeOptions.actions.hideModal).toHaveBeenCalled()
-    })
-  })
 })
 
 function getWrapper(users = [mock<User>()]) {
@@ -85,6 +78,7 @@ function getWrapper(users = [mock<User>()]) {
     storeOptions,
     wrapper: shallowMount(LoginModal, {
       props: {
+        modal: mock<Modal>(),
         users
       },
       global: {
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
index 512d4d71c8c..f9b8025bfed 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/RemoveFromGroupsModal.spec.ts
@@ -9,7 +9,7 @@ import {
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
 import { Group, User } from '@ownclouders/web-client/src/generated'
-import { eventBus } from '@ownclouders/web-pkg'
+import { Modal, eventBus } from '@ownclouders/web-pkg'
 
 describe('RemoveFromGroupsModal', () => {
   it('renders the input', () => {
@@ -58,13 +58,6 @@ describe('RemoveFromGroupsModal', () => {
       expect(eventSpy).not.toHaveBeenCalled()
     })
   })
-  describe('method "onCancel"', () => {
-    it('hides the modal', async () => {
-      const { wrapper, storeOptions } = getWrapper()
-      await wrapper.vm.onCancel()
-      expect(storeOptions.actions.hideModal).toHaveBeenCalled()
-    })
-  })
 })
 
 function getWrapper({ users = [mock<User>()], groups = [mock<Group>()] } = {}) {
@@ -78,6 +71,7 @@ function getWrapper({ users = [mock<User>()], groups = [mock<Group>()] } = {}) {
     storeOptions,
     wrapper: shallowMount(RemoveFromGroupsModal, {
       props: {
+        modal: mock<Modal>(),
         users,
         groups
       },
diff --git a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
index 47632ddf5b4..29a0b7139cc 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
+++ b/packages/web-app-admin-settings/tests/unit/components/Users/__snapshots__/LoginModal.spec.ts.snap
@@ -1,10 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LoginModal renders the input including two options 1`] = `
-<oc-select-stub clearable="false" disabled="false" filter="[Function]" fixmessageline="false" getoptionlabel="[Function]" id="oc-select-1" label="Login" loading="false" multiple="false" optionlabel="label" options="[object Object],[object Object]" placeholder="Select..." readonly="false" searchable="true" warningmessage=""></oc-select-stub>
-
-<div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-  <oc-button-stub appearance="outline" class="oc-modal-body-actions-cancel oc-ml-s" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="passive"></oc-button-stub>
-  <oc-button-stub appearance="filled" class="oc-modal-body-actions-confirm oc-ml-s" disabled="true" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" variation="primary"></oc-button-stub>
+<div>
+  <oc-select-stub clearable="false" disabled="false" filter="[Function]" fixmessageline="false" getoptionlabel="[Function]" id="oc-select-1" label="Login" loading="false" multiple="false" optionlabel="label" options="[object Object],[object Object]" placeholder="Select..." readonly="false" searchable="true" warningmessage=""></oc-select-stub>
 </div>
 `;
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsCreateGroup.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsCreateGroup.spec.ts
index d468408164e..6230c0b2494 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsCreateGroup.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsCreateGroup.spec.ts
@@ -1,14 +1,16 @@
+import { useModals } from '@ownclouders/web-pkg'
 import { useGroupActionsCreateGroup } from '../../../../../src/composables/actions/groups/useGroupActionsCreateGroup'
 import { unref } from 'vue'
-import { defaultStoreMockOptions, getComposableWrapper, createStore } from 'web-test-helpers'
+import { getComposableWrapper } from 'web-test-helpers'
 
 describe('useGroupActionsCreateGroup', () => {
   describe('method "handler"', () => {
     it('creates a modal', () => {
       getWrapper({
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler()
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
@@ -18,18 +20,12 @@ describe('useGroupActionsCreateGroup', () => {
 function getWrapper({
   setup
 }: {
-  setup: (instance: ReturnType<typeof useGroupActionsCreateGroup>, { storeOptions }) => void
+  setup: (instance: ReturnType<typeof useGroupActionsCreateGroup>) => void
 }) {
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
-
   return {
-    wrapper: getComposableWrapper(
-      () => {
-        const instance = useGroupActionsCreateGroup()
-        setup(instance, { storeOptions })
-      },
-      { store }
-    )
+    wrapper: getComposableWrapper(() => {
+      const instance = useGroupActionsCreateGroup()
+      setup(instance)
+    })
   }
 }
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts
index fb81dccaed6..c0cf7e8c98c 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/groups/useGroupActionsDelete.spec.ts
@@ -39,11 +39,10 @@ describe('useGroupActionsDelete', () => {
     it('should successfully delete all given gropups and reload the groups list', () => {
       const eventSpy = jest.spyOn(eventBus, 'publish')
       getWrapper({
-        setup: async ({ deleteGroups }, { storeOptions, clientService }) => {
+        setup: async ({ deleteGroups }, { clientService }) => {
           const group = mock<Group>({ id: '1' })
           await deleteGroups([group])
           expect(clientService.graphAuthenticated.groups.deleteGroup).toHaveBeenCalledWith(group.id)
-          expect(storeOptions.actions.hideModal).toHaveBeenCalled()
           expect(eventSpy).toHaveBeenCalledWith('app.admin-settings.list.load')
         }
       })
@@ -52,12 +51,11 @@ describe('useGroupActionsDelete', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
       const eventSpy = jest.spyOn(eventBus, 'publish')
       getWrapper({
-        setup: async ({ deleteGroups }, { storeOptions, clientService }) => {
+        setup: async ({ deleteGroups }, { clientService }) => {
           clientService.graphAuthenticated.groups.deleteGroup.mockRejectedValue({})
           const group = mock<Group>({ id: '1' })
           await deleteGroups([group])
           expect(clientService.graphAuthenticated.groups.deleteGroup).toHaveBeenCalledWith(group.id)
-          expect(storeOptions.actions.hideModal).toHaveBeenCalled()
           expect(eventSpy).toHaveBeenCalledWith('app.admin-settings.list.load')
         }
       })
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsAddToGroups.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsAddToGroups.spec.ts
index 609e99015f9..994ed051e01 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsAddToGroups.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsAddToGroups.spec.ts
@@ -2,7 +2,8 @@ import { useUserActionsAddToGroups } from '../../../../../src/composables/action
 import { mock } from 'jest-mock-extended'
 import { ref, unref } from 'vue'
 import { User } from '@ownclouders/web-client/src/generated'
-import { createStore, defaultStoreMockOptions, getComposableWrapper } from 'web-test-helpers'
+import { getComposableWrapper } from 'web-test-helpers'
+import { useModals } from '@ownclouders/web-pkg'
 
 describe('useUserActionsAddToGroups', () => {
   describe('method "isEnabled"', () => {
@@ -21,9 +22,10 @@ describe('useUserActionsAddToGroups', () => {
   describe('method "handler"', () => {
     it('creates a modal', () => {
       getWrapper({
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({ resources: [mock<User>()] })
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
@@ -33,24 +35,12 @@ describe('useUserActionsAddToGroups', () => {
 function getWrapper({
   setup
 }: {
-  setup: (
-    instance: ReturnType<typeof useUserActionsAddToGroups>,
-    {
-      storeOptions
-    }: {
-      storeOptions: typeof defaultStoreMockOptions
-    }
-  ) => void
+  setup: (instance: ReturnType<typeof useUserActionsAddToGroups>) => void
 }) {
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
   return {
-    wrapper: getComposableWrapper(
-      () => {
-        const instance = useUserActionsAddToGroups({ groups: ref([]) })
-        setup(instance, { storeOptions })
-      },
-      { store }
-    )
+    wrapper: getComposableWrapper(() => {
+      const instance = useUserActionsAddToGroups({ groups: ref([]) })
+      setup(instance)
+    })
   }
 }
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsCreateUser.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsCreateUser.spec.ts
index 0a099e3a7f4..2935358f83e 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsCreateUser.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsCreateUser.spec.ts
@@ -1,7 +1,7 @@
-import { useCapabilityCreateUsersDisabled } from '@ownclouders/web-pkg'
+import { useCapabilityCreateUsersDisabled, useModals } from '@ownclouders/web-pkg'
 import { useUserActionsCreateUser } from '../../../../../src/composables/actions/users/useUserActionsCreateUser'
 import { computed, unref } from 'vue'
-import { defaultStoreMockOptions, getComposableWrapper, createStore } from 'web-test-helpers'
+import { getComposableWrapper } from 'web-test-helpers'
 
 jest.mock('@ownclouders/web-pkg', () => ({
   ...jest.requireActual('@ownclouders/web-pkg'),
@@ -25,9 +25,10 @@ describe('useUserActionsCreateUser', () => {
   describe('method "handler"', () => {
     it('creates a modal', () => {
       getWrapper({
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler()
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
@@ -38,23 +39,17 @@ function getWrapper({
   setup,
   capabilityCreateUsersDisabled = false
 }: {
-  setup: (instance: ReturnType<typeof useUserActionsCreateUser>, { storeOptions }) => void
+  setup: (instance: ReturnType<typeof useUserActionsCreateUser>) => void
   capabilityCreateUsersDisabled?: boolean
 }) {
   jest
     .mocked(useCapabilityCreateUsersDisabled)
     .mockReturnValue(computed(() => capabilityCreateUsersDisabled))
 
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
-
   return {
-    wrapper: getComposableWrapper(
-      () => {
-        const instance = useUserActionsCreateUser()
-        setup(instance, { storeOptions })
-      },
-      { store }
-    )
+    wrapper: getComposableWrapper(() => {
+      const instance = useUserActionsCreateUser()
+      setup(instance)
+    })
   }
 }
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts
index 6c1765d13eb..04dc9590eb0 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsDelete.spec.ts
@@ -35,11 +35,10 @@ describe('useUserActionsDelete', () => {
     it('should successfully delete all given users and reload the users list', () => {
       const eventSpy = jest.spyOn(eventBus, 'publish')
       getWrapper({
-        setup: async ({ deleteUsers }, { storeOptions, clientService }) => {
+        setup: async ({ deleteUsers }, { clientService }) => {
           const user = mock<User>({ id: '1' })
           await deleteUsers([user])
           expect(clientService.graphAuthenticated.users.deleteUser).toHaveBeenCalledWith(user.id)
-          expect(storeOptions.actions.hideModal).toHaveBeenCalled()
           expect(eventSpy).toHaveBeenCalledWith('app.admin-settings.list.load')
         }
       })
@@ -48,12 +47,11 @@ describe('useUserActionsDelete', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
       const eventSpy = jest.spyOn(eventBus, 'publish')
       getWrapper({
-        setup: async ({ deleteUsers }, { storeOptions, clientService }) => {
+        setup: async ({ deleteUsers }, { clientService }) => {
           clientService.graphAuthenticated.users.deleteUser.mockRejectedValue({})
           const user = mock<User>({ id: '1' })
           await deleteUsers([user])
           expect(clientService.graphAuthenticated.users.deleteUser).toHaveBeenCalledWith(user.id)
-          expect(storeOptions.actions.hideModal).toHaveBeenCalled()
           expect(eventSpy).toHaveBeenCalledWith('app.admin-settings.list.load')
         }
       })
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditLogin.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditLogin.spec.ts
index 8f29251dfc8..33b71486426 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditLogin.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditLogin.spec.ts
@@ -3,6 +3,7 @@ import { mock } from 'jest-mock-extended'
 import { unref } from 'vue'
 import { User } from '@ownclouders/web-client/src/generated'
 import { createStore, defaultStoreMockOptions, getComposableWrapper } from 'web-test-helpers'
+import { useModals } from '@ownclouders/web-pkg'
 
 describe('useUserActionsEditLogin', () => {
   describe('method "isEnabled"', () => {
@@ -34,9 +35,10 @@ describe('useUserActionsEditLogin', () => {
   describe('method "handler"', () => {
     it('creates a modal', () => {
       getWrapper({
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({ resources: [mock<User>()] })
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
@@ -57,6 +59,7 @@ function getWrapper({
 }) {
   const storeOptions = defaultStoreMockOptions
   const store = createStore(storeOptions)
+
   return {
     wrapper: getComposableWrapper(
       () => {
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditQuota.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditQuota.spec.ts
index b7cb8faec92..930fcef0e55 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditQuota.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsEditQuota.spec.ts
@@ -7,6 +7,7 @@ import {
   getComposableWrapper
 } from 'web-test-helpers'
 import { unref } from 'vue'
+import { useModals } from '@ownclouders/web-pkg'
 
 describe('useUserActionsEditQuota', () => {
   describe('isEnabled property', () => {
@@ -70,9 +71,10 @@ describe('useUserActionsEditQuota', () => {
   describe('handler', () => {
     it('should create a modal', () => {
       getWrapper({
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({ resources: [] })
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
diff --git a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts
index b425da0ac75..a0acb14a96a 100644
--- a/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/composables/actions/users/useUserActionsRemoveFromGroups.spec.ts
@@ -2,7 +2,8 @@ import { useUserActionsRemoveFromGroups } from '../../../../../src/composables/a
 import { mock } from 'jest-mock-extended'
 import { ref, unref } from 'vue'
 import { User } from '@ownclouders/web-client/src/generated'
-import { createStore, defaultStoreMockOptions, getComposableWrapper } from 'web-test-helpers'
+import { getComposableWrapper } from 'web-test-helpers'
+import { useModals } from '@ownclouders/web-pkg'
 
 describe('useUserActionsRemoveFromGroups', () => {
   describe('method "isEnabled"', () => {
@@ -21,9 +22,10 @@ describe('useUserActionsRemoveFromGroups', () => {
   describe('method "handler"', () => {
     it('creates a modal', () => {
       getWrapper({
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({ resources: [mock<User>()] })
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
@@ -33,24 +35,12 @@ describe('useUserActionsRemoveFromGroups', () => {
 function getWrapper({
   setup
 }: {
-  setup: (
-    instance: ReturnType<typeof useUserActionsRemoveFromGroups>,
-    {
-      storeOptions
-    }: {
-      storeOptions: typeof defaultStoreMockOptions
-    }
-  ) => void
+  setup: (instance: ReturnType<typeof useUserActionsRemoveFromGroups>) => void
 }) {
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
   return {
-    wrapper: getComposableWrapper(
-      () => {
-        const instance = useUserActionsRemoveFromGroups({ groups: ref([]) })
-        setup(instance, { storeOptions })
-      },
-      { store }
-    )
+    wrapper: getComposableWrapper(() => {
+      const instance = useUserActionsRemoveFromGroups({ groups: ref([]) })
+      setup(instance)
+    })
   }
 }
diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
index a3f03569d04..d916ac89e9a 100644
--- a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -362,7 +362,6 @@ export default defineComponent({
           return
         }
 
-        store.dispatch('hideModal')
         const { spaceId, currentFolder, currentFolderId, driveType } = file.meta
         if (unref(hasSpaces)) {
           const spaces = store.getters['runtime/spaces/spaces']
@@ -508,8 +507,7 @@ export default defineComponent({
     }
   },
   methods: {
-    ...mapActions('Files', ['clearClipboardFiles', 'pasteSelectedFiles']),
-    ...mapActions(['showMessage', 'createModal', 'hideModal']),
+    ...mapActions('Files', ['clearClipboardFiles']),
 
     getIconResource(fileHandler) {
       return { type: 'file', extension: fileHandler.ext } as Resource
diff --git a/packages/web-app-files/src/components/AppBar/CreateSpace.vue b/packages/web-app-files/src/components/AppBar/CreateSpace.vue
index c935cd3724f..ca6248cbbcb 100644
--- a/packages/web-app-files/src/components/AppBar/CreateSpace.vue
+++ b/packages/web-app-files/src/components/AppBar/CreateSpace.vue
@@ -14,65 +14,48 @@
 </template>
 
 <script lang="ts">
-import { mapActions, mapMutations } from 'vuex'
 import { defineComponent } from 'vue'
-import { useClientService, useLoadingService } from '@ownclouders/web-pkg'
-import { useCreateSpace } from '@ownclouders/web-pkg'
-import { useSpaceHelpers } from '@ownclouders/web-pkg'
+import { useGettext } from 'vue3-gettext'
+import { useModals, useCreateSpace, useSpaceHelpers, useStore } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   setup() {
-    const clientService = useClientService()
+    const store = useStore()
+    const { $gettext } = useGettext()
     const { createSpace } = useCreateSpace()
     const { checkSpaceNameModalInput } = useSpaceHelpers()
-    const loadingService = useLoadingService()
-    return { clientService, createSpace, checkSpaceNameModalInput, loadingService }
-  },
-  methods: {
-    ...mapActions([
-      'showMessage',
-      'showErrorMessage',
-      'createModal',
-      'hideModal',
-      'setModalInputErrorMessage'
-    ]),
-    ...mapMutations('runtime/spaces', ['UPSERT_SPACE']),
-    ...mapMutations('Files', ['UPSERT_RESOURCE', 'UPDATE_RESOURCE_FIELD']),
+    const { dispatchModal } = useModals()
 
-    showCreateSpaceModal() {
-      const modal = {
-        variation: 'passive',
-        title: this.$gettext('Create a new space'),
-        cancelText: this.$gettext('Cancel'),
-        confirmText: this.$gettext('Create'),
-        hasInput: true,
-        inputLabel: this.$gettext('Space name'),
-        inputValue: this.$gettext('New space'),
-        onCancel: this.hideModal,
-        onConfirm: (name) => this.loadingService.addTask(() => this.addNewSpace(name)),
-        onInput: this.checkSpaceNameModalInput
-      }
-
-      this.createModal(modal)
-    },
-
-    async addNewSpace(name) {
+    const addNewSpace = async (name: string) => {
       try {
-        this.hideModal()
-        const createdSpace = await this.createSpace(name)
-        this.UPSERT_RESOURCE(createdSpace)
-        this.UPSERT_SPACE(createdSpace)
-        this.showMessage({
-          title: this.$gettext('Space was created successfully')
+        const createdSpace = await createSpace(name)
+        store.commit('Files/UPSERT_RESOURCE', createdSpace)
+        store.commit('runtime/spaces/UPSERT_SPACE', createdSpace)
+        store.dispatch('showMessage', {
+          title: $gettext('Space was created successfully')
         })
       } catch (error) {
         console.error(error)
-        this.showErrorMessage({
-          title: this.$gettext('Creating space failed…'),
+        store.dispatch('showErrorMessage', {
+          title: $gettext('Creating space failed…'),
           error
         })
       }
     }
+
+    const showCreateSpaceModal = () => {
+      dispatchModal({
+        title: $gettext('Create a new space'),
+        confirmText: $gettext('Create'),
+        hasInput: true,
+        inputLabel: $gettext('Space name'),
+        inputValue: $gettext('New space'),
+        onConfirm: (name: string) => addNewSpace(name),
+        onInput: checkSpaceNameModalInput
+      })
+    }
+
+    return { showCreateSpaceModal }
   }
 })
 </script>
diff --git a/packages/web-app-files/src/components/Modals/SetLinkPasswordModal.vue b/packages/web-app-files/src/components/Modals/SetLinkPasswordModal.vue
index ec8d6886cf7..eebccd95d53 100644
--- a/packages/web-app-files/src/components/Modals/SetLinkPasswordModal.vue
+++ b/packages/web-app-files/src/components/Modals/SetLinkPasswordModal.vue
@@ -9,41 +9,26 @@
     :placeholder="link.password ? '●●●●●●●●' : null"
     :error-message="errorMessage"
     class="oc-modal-body-input"
-    @password-challenge-completed="confirmDisabled = false"
-    @password-challenge-failed="confirmDisabled = true"
-    @keydown.enter.prevent="onConfirm"
+    @password-challenge-completed="$emit('update:confirmDisabled', false)"
+    @password-challenge-failed="$emit('update:confirmDisabled', true)"
+    @keydown.enter.prevent="$emit('confirm')"
     @update:model-value="onInput"
   />
-  <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-    <oc-button
-      class="oc-modal-body-actions-cancel oc-ml-s"
-      appearance="outline"
-      variation="passive"
-      @click="onCancel"
-      >{{ $gettext('Cancel') }}
-    </oc-button>
-    <oc-button
-      class="oc-modal-body-actions-confirm oc-ml-s"
-      appearance="filled"
-      variation="primary"
-      :disabled="confirmDisabled"
-      @click="onConfirm"
-      >{{ link.password ? $gettext('Apply') : $gettext('Set') }}
-    </oc-button>
-  </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref, unref, PropType } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { useClientService, usePasswordPolicyService, useStore } from '@ownclouders/web-pkg'
+import { Modal, useClientService, usePasswordPolicyService, useStore } from '@ownclouders/web-pkg'
 import { Share } from '@ownclouders/web-client/src/helpers'
 
 export default defineComponent({
   name: 'SetLinkPasswordModal',
   props: {
+    modal: { type: Object as PropType<Modal>, required: true },
     link: { type: Object as PropType<Share>, required: true }
   },
+  emits: ['confirm', 'update:confirmDisabled'],
   setup(props, { expose }) {
     const store = useStore()
     const clientService = useClientService()
@@ -52,7 +37,6 @@ export default defineComponent({
 
     const password = ref('')
     const errorMessage = ref<string>()
-    const confirmDisabled = ref(true)
 
     const onInput = (value: string) => {
       password.value = value
@@ -66,7 +50,6 @@ export default defineComponent({
           client: clientService.owncloudSdk,
           params: { ...props.link, password: unref(password) }
         })
-        store.dispatch('hideModal')
         store.dispatch('showMessage', {
           title: $gettext('Link was updated successfully')
         })
@@ -74,7 +57,7 @@ export default defineComponent({
         // Human-readable error message is provided, for example when password is on banned list
         if (e.statusCode === 400) {
           errorMessage.value = $gettext(e.message)
-          return
+          return Promise.reject(new Promise((reject) => reject('')))
         }
 
         store.dispatch('showErrorMessage', {
@@ -84,22 +67,18 @@ export default defineComponent({
       }
     }
 
-    const onCancel = () => {
-      store.dispatch('hideModal')
-    }
-
-    expose({ onConfirm, onCancel })
+    expose({ onConfirm })
 
     return {
       password,
-      confirmDisabled,
       onInput,
-      onConfirm,
-      onCancel,
       errorMessage,
       passwordPolicyService,
       inputPasswordPolicy: passwordPolicyService.getPolicy(),
-      inputGeneratePasswordMethod: () => passwordPolicyService.generatePassword()
+      inputGeneratePasswordMethod: () => passwordPolicyService.generatePassword(),
+
+      // unit tests
+      onConfirm
     }
   }
 })
diff --git a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
index 9730c96a043..38f5cc2f839 100644
--- a/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
+++ b/packages/web-app-files/src/components/SideBar/Actions/SpaceActions.vue
@@ -59,7 +59,7 @@ export default defineComponent({
     const { actions: disableActions } = useSpaceActionsDisable({ store })
     const { actions: duplicateActions } = useSpaceActionsDuplicate({ store })
     const { actions: editDescriptionActions } = useSpaceActionsEditDescription({ store })
-    const { actions: editQuotaActions } = useSpaceActionsEditQuota({ store })
+    const { actions: editQuotaActions } = useSpaceActionsEditQuota()
     const { actions: editReadmeContentActions } = useSpaceActionsEditReadmeContent({ store })
     const { actions: renameActions } = useSpaceActionsRename({ store })
     const { actions: restoreActions } = useSpaceActionsRestore({ store })
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
index e46e5b5e776..cfd91b5a132 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/ListItem.vue
@@ -138,6 +138,7 @@ import {
   queryItemAsString,
   useCapabilityFilesSharingResharing,
   useCapabilityFilesSharingResharingDefault,
+  useModals,
   useStore
 } from '@ownclouders/web-pkg'
 import { extractDomSelector } from '@ownclouders/web-client/src/helpers/resource'
@@ -186,6 +187,7 @@ export default defineComponent({
     const store = useStore()
     const clientService = useClientService()
     const { $gettext } = useGettext()
+    const { dispatchModal } = useModals()
 
     const sharedParentDir = computed(() => {
       return queryItemAsString(props.sharedParentRoute?.params?.driveAliasAndItem)
@@ -198,18 +200,14 @@ export default defineComponent({
     }
 
     const showNotifyShareModal = () => {
-      const modal = {
+      dispatchModal({
         variation: 'warning',
         icon: 'mail-send',
         title: $gettext('Send a reminder'),
-        cancelText: $gettext('Cancel'),
         confirmText: $gettext('Send'),
         message: $gettext('Are you sure you want to send a reminder about this share?'),
-        hasInput: false,
-        onCancel: () => store.dispatch('hideModal'),
-        onConfirm: () => notifyShare()
-      }
-      store.dispatch('createModal', modal)
+        onConfirm: notifyShare
+      })
     }
     const notifyShare = async () => {
       try {
@@ -226,8 +224,6 @@ export default defineComponent({
           desc: $gettext('Email notification could not be sent'),
           error
         })
-      } finally {
-        store.dispatch('hideModal')
       }
     }
 
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
index e26e062b238..b91d616c259 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileLinks.vue
@@ -127,7 +127,8 @@ import {
   useDefaultLinkPermissions,
   useFileActionsCreateLink,
   FileAction,
-  useClientService
+  useClientService,
+  useModals
 } from '@ownclouders/web-pkg'
 import { shareViaLinkHelp, shareViaIndirectLinkHelp } from '../../../helpers/contextualHelpers'
 import {
@@ -172,6 +173,7 @@ export default defineComponent({
     const hasResharing = useCapabilityFilesSharingResharing()
     const hasShareJail = useCapabilityShareJailEnabled()
     const { defaultLinkPermissions } = useDefaultLinkPermissions()
+    const { dispatchModal } = useModals()
 
     const { actions: createLinkActions } = useFileActionsCreateLink({ store })
     const createLinkAction = computed<FileAction>(() =>
@@ -251,16 +253,10 @@ export default defineComponent({
           client: clientService.owncloudSdk,
           params
         })
-        store.dispatch('hideModal')
         store.dispatch('showMessage', {
           title: $gettext('Link was updated successfully')
         })
       } catch (e) {
-        // Human-readable error message is provided, for example when password is on banned list
-        if (e.statusCode === 400) {
-          return store.dispatch('setModalInputErrorMessage', $gettext(e.message))
-        }
-
         store.dispatch('showErrorMessage', {
           title: $gettext('Failed to update link'),
           error: e
@@ -269,10 +265,8 @@ export default defineComponent({
     }
 
     const showPasswordModal = (params) => {
-      return store.dispatch('createModal', {
-        variation: 'passive',
+      dispatchModal({
         title: $gettext('Set password'),
-        hideActions: true,
         customComponent: SetLinkPasswordModal,
         customComponentAttrs: () => ({ link: params })
       })
@@ -303,7 +297,8 @@ export default defineComponent({
       updatePublicLink,
       showPasswordModal,
       defaultLinkPermissions,
-      addNewLink
+      addNewLink,
+      dispatchModal
     }
   },
   computed: {
@@ -385,13 +380,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions('Files', ['addLink', 'updateLink', 'removeLink']),
-    ...mapActions([
-      'showMessage',
-      'showErrorMessage',
-      'createModal',
-      'hideModal',
-      'setModalInputErrorMessage'
-    ]),
+    ...mapActions(['showMessage', 'showErrorMessage']),
     ...mapMutations('Files', ['REMOVE_FILES']),
 
     toggleLinkListCollapsed() {
@@ -508,27 +497,23 @@ export default defineComponent({
     },
 
     deleteLinkConfirmation({ link }) {
-      const modal = {
+      this.dispatchModal({
         variation: 'danger',
         title: this.$gettext('Delete link'),
         message: this.$gettext(
           'Are you sure you want to delete this link? Recreating the same link again is not possible.'
         ),
-        cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Delete'),
-        onCancel: this.hideModal,
         onConfirm: () =>
           this.deleteLink({
             client: this.$client,
             share: link,
             resource: this.resource
           })
-      }
-      this.createModal(modal)
+      })
     },
 
     async deleteLink({ client, share, resource }) {
-      this.hideModal()
       let path = resource.path
       // sharing a share root from the share jail -> use resource name as path
       if (this.hasShareJail && path === '/') {
diff --git a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
index 521cc41df18..2d10dc1f1f3 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/FileShares.vue
@@ -95,7 +95,8 @@ import {
   useCapabilityShareJailEnabled,
   useCapabilityFilesSharingResharing,
   useCapabilityFilesSharingCanDenyAccess,
-  useGetMatchingSpace
+  useGetMatchingSpace,
+  useModals
 } from '@ownclouders/web-pkg'
 import { isLocationSharesActive } from '@ownclouders/web-pkg'
 import { textUtils } from '../../../helpers/textUtils'
@@ -128,6 +129,7 @@ export default defineComponent({
     const store = useStore()
     const ability = useAbility()
     const { getMatchingSpace } = useGetMatchingSpace()
+    const { dispatchModal } = useModals()
 
     const resource = inject<Ref<Resource>>('resource')
 
@@ -180,7 +182,8 @@ export default defineComponent({
       hasResharing: useCapabilityFilesSharingResharing(),
       hasShareCanDenyAccess: useCapabilityFilesSharingCanDenyAccess(),
       getSharedAncestor,
-      configurationManager
+      configurationManager,
+      dispatchModal
     }
   },
   computed: {
@@ -296,7 +299,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions('Files', ['deleteShare', 'addShare']),
-    ...mapActions(['createModal', 'hideModal', 'showMessage', 'showErrorMessage']),
+    ...mapActions(['showMessage', 'showErrorMessage']),
     ...mapMutations('Files', ['REMOVE_FILES']),
 
     getDeniedShare(collaborator: Share): Share {
@@ -431,18 +434,14 @@ export default defineComponent({
     },
 
     $_ocCollaborators_deleteShare_trigger(share) {
-      const modal = {
+      this.dispatchModal({
         variation: 'danger',
         title: this.$gettext('Remove share'),
-        cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Remove'),
         message: this.$gettext('Are you sure you want to remove this share?'),
         hasInput: false,
-        onCancel: this.hideModal,
         onConfirm: () => this.$_ocCollaborators_deleteShare(share)
-      }
-
-      this.createModal(modal)
+      })
     },
 
     async $_ocCollaborators_deleteShare(share) {
@@ -464,7 +463,6 @@ export default defineComponent({
           loadIndicators
         })
 
-        this.hideModal()
         this.showMessage({
           title: this.$gettext('Share was removed successfully')
         })
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
index 2d41f1e630c..0d4acd50da4 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/DetailsAndEdit.vue
@@ -149,13 +149,13 @@
 <script lang="ts">
 import { basename } from 'path'
 import { DateTime } from 'luxon'
-import { mapActions, mapGetters } from 'vuex'
+import { mapGetters } from 'vuex'
 import * as EmailValidator from 'email-validator'
 import {
   createLocationSpaces,
   useConfigurationManager,
   LinkRoleDropdown,
-  useStore
+  useModals
 } from '@ownclouders/web-pkg'
 import {
   linkRoleInternalFile,
@@ -212,7 +212,7 @@ export default defineComponent({
   },
   emits: ['removePublicLink', 'updateLink'],
   setup(props, { emit }) {
-    const store = useStore()
+    const { dispatchModal } = useModals()
     const { $gettext, current } = useGettext()
     const configurationManager = useConfigurationManager()
     const passwordPolicyService = usePasswordPolicyService()
@@ -240,10 +240,8 @@ export default defineComponent({
     }
 
     const showPasswordModal = () => {
-      return store.dispatch('createModal', {
-        variation: 'passive',
+      dispatchModal({
         title: props.link.password ? $gettext('Edit password') : $gettext('Add password'),
-        hideActions: true,
         customComponent: SetLinkPasswordModal,
         customComponentAttrs: () => ({ link: props.link })
       })
@@ -258,7 +256,8 @@ export default defineComponent({
       updateSelectedRole,
       currentLinkRole,
       isRunningOnEos: computed(() => configurationManager.options.isRunningOnEos),
-      showPasswordModal
+      showPasswordModal,
+      dispatchModal
     }
   },
   data() {
@@ -475,46 +474,33 @@ export default defineComponent({
     }
   },
   methods: {
-    ...mapActions([
-      'createModal',
-      'hideModal',
-      'setModalInputErrorMessage',
-      'setModalConfirmButtonDisabled'
-    ]),
-
     deleteLink() {
       this.$emit('removePublicLink', { link: this.link })
       ;(this.$refs.editPublicLinkDropdown as InstanceType<typeof OcDrop>).hide()
     },
-    checkInputValue(value) {
-      if (value.length > 255) {
-        return this.setModalInputErrorMessage(
-          this.$gettext('Link name cannot exceed 255 characters')
-        )
-      }
-      this.setModalInputErrorMessage(null)
-    },
     showRenameModal() {
-      const modal = {
-        variation: 'passive',
+      this.dispatchModal({
         title: this.$gettext('Edit name'),
-        cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Save'),
         hasInput: true,
         inputValue: this.link.name,
         inputLabel: this.$gettext('Link name'),
-        onCancel: this.hideModal,
-        onInput: this.checkInputValue,
-        onConfirm: (name) =>
-          this.updateLink({
-            link: {
-              ...this.link,
-              name
-            }
-          })
-      }
-
-      this.createModal(modal)
+        onInput: (name, setError) => {
+          if (name.length > 255) {
+            return setError(this.$gettext('Link name cannot exceed 255 characters'))
+          }
+          return setError(null)
+        },
+        onConfirm: (name: string) =>
+          Promise.resolve(
+            this.updateLink({
+              link: {
+                ...this.link,
+                name
+              }
+            })
+          )
+      })
     },
 
     toggleNotifyUploads() {
@@ -534,11 +520,9 @@ export default defineComponent({
       )
     },
     showNotifyUploadsExtraRecipientsModal() {
-      const modal = {
-        variation: 'passive',
+      this.dispatchModal({
         icon: 'mail-add',
         title: this.$gettext('Notify a third party about uploads'),
-        cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Apply'),
         hasInput: true,
         inputDescription: this.$gettext(
@@ -547,30 +531,26 @@ export default defineComponent({
         inputValue: this.currentLinkNotifyUploadsExtraRecipients,
         inputLabel: this.$gettext('Email address'),
         inputType: 'email',
-        onCancel: this.hideModal,
-        onInput: (value) => this.checkEmailValid(value),
-        onConfirm: (value) => {
-          this.updateLink({
-            link: {
-              ...this.link,
-              notifyUploadsExtraRecipients: value
-            },
-            onSuccess: () => {
-              this.hideModal()
-            }
-          })
-        }
-      }
-      this.createModal(modal)
+        onInput: (value, setError) => setError(this.getEmailValidationMsg(value)),
+        onConfirm: (value: string) =>
+          Promise.resolve(
+            this.updateLink({
+              link: {
+                ...this.link,
+                notifyUploadsExtraRecipients: value
+              }
+            })
+          )
+      })
     },
-    checkEmailValid(email) {
+    getEmailValidationMsg(email: string) {
       if (!EmailValidator.validate(email)) {
-        return this.setModalInputErrorMessage(this.$gettext('Email is invalid'))
+        return this.$gettext('Email is invalid')
       }
       if (email === '') {
-        return this.setModalInputErrorMessage(this.$gettext("Email can't be empty"))
+        return this.$gettext("Email can't be empty")
       }
-      return this.setModalInputErrorMessage(null)
+      return null
     }
   }
 })
diff --git a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
index bc5271083e6..bad53766e0c 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/SpaceMembers.vue
@@ -66,7 +66,7 @@ import { mapGetters, mapActions, mapState } from 'vuex'
 import CollaboratorListItem from './Collaborators/ListItem.vue'
 import InviteCollaboratorForm from './Collaborators/InviteCollaborator/InviteCollaboratorForm.vue'
 import { spaceRoleManager } from '@ownclouders/web-client/src/helpers/share'
-import { createLocationSpaces, isLocationSpacesActive } from '@ownclouders/web-pkg'
+import { createLocationSpaces, isLocationSpacesActive, useModals } from '@ownclouders/web-pkg'
 import { defineComponent, inject, Ref } from 'vue'
 import { shareSpaceAddMemberHelp } from '../../../helpers/contextualHelpers'
 import { ProjectSpaceResource } from '@ownclouders/web-client/src/helpers'
@@ -83,10 +83,13 @@ export default defineComponent({
   },
   setup() {
     const clientService = useClientService()
+    const { dispatchModal } = useModals()
+
     return {
       clientService,
       configurationManager,
-      resource: inject<Ref<ProjectSpaceResource>>('resource')
+      resource: inject<Ref<ProjectSpaceResource>>('resource'),
+      dispatchModal
     }
   },
   data: () => {
@@ -141,7 +144,7 @@ export default defineComponent({
   },
   methods: {
     ...mapActions('runtime/spaces', ['deleteSpaceMember']),
-    ...mapActions(['createModal', 'hideModal', 'showMessage', 'showErrorMessage']),
+    ...mapActions(['showMessage', 'showErrorMessage']),
 
     filter(collection, term) {
       if (!(term || '').trim()) {
@@ -174,18 +177,14 @@ export default defineComponent({
     },
 
     $_ocCollaborators_deleteShare_trigger(share) {
-      const modal = {
+      this.dispatchModal({
         variation: 'danger',
         title: this.$gettext('Remove member'),
-        cancelText: this.$gettext('Cancel'),
         confirmText: this.$gettext('Remove'),
         message: this.$gettext('Are you sure you want to remove this member?'),
         hasInput: false,
-        onCancel: this.hideModal,
         onConfirm: () => this.$_ocCollaborators_deleteShare(share)
-      }
-
-      this.createModal(modal)
+      })
     },
 
     async $_ocCollaborators_deleteShare(share) {
@@ -203,9 +202,10 @@ export default defineComponent({
 
         if (currentUserRemoved) {
           if (isLocationSpacesActive(this.$router, 'files-spaces-projects')) {
-            return this.$router.go(0)
+            await this.$router.go(0)
+            return
           }
-          return this.$router.push(createLocationSpaces('files-spaces-projects'))
+          await this.$router.push(createLocationSpaces('files-spaces-projects'))
         }
       } catch (error) {
         console.error(error)
@@ -213,8 +213,6 @@ export default defineComponent({
           title: this.$gettext('Failed to remove share'),
           error
         })
-      } finally {
-        this.hideModal()
       }
     }
   }
diff --git a/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue b/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
index 2c0b015e4a0..3dce9146a99 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceContextActions.vue
@@ -58,7 +58,7 @@ export default defineComponent({
     const { actions: deleteActions } = useSpaceActionsDelete({ store })
     const { actions: disableActions } = useSpaceActionsDisable({ store })
     const { actions: duplicateActions } = useSpaceActionsDuplicate({ store })
-    const { actions: editQuotaActions } = useSpaceActionsEditQuota({ store })
+    const { actions: editQuotaActions } = useSpaceActionsEditQuota()
     const { actions: editDescriptionActions } = useSpaceActionsEditDescription({ store })
     const { actions: editReadmeContentActions } = useSpaceActionsEditReadmeContent({ store })
     const { actions: renameActions } = useSpaceActionsRename({ store })
diff --git a/packages/web-app-files/src/helpers/resource/actions/transfer.ts b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
index 6bba8112aba..47952c43377 100644
--- a/packages/web-app-files/src/helpers/resource/actions/transfer.ts
+++ b/packages/web-app-files/src/helpers/resource/actions/transfer.ts
@@ -20,8 +20,6 @@ export class ResourceTransfer extends ConflictDialog {
     private targetFolder: Resource,
     private clientService: ClientService,
     private loadingService: LoadingService,
-    createModal: (modal: object) => void,
-    hideModal: () => void,
     showMessage: (data: object) => void,
     showErrorMessage: (data: object) => void,
     $gettext: (
@@ -41,7 +39,7 @@ export class ResourceTransfer extends ConflictDialog {
       disableHtmlEscaping?: boolean
     ) => string
   ) {
-    super(createModal, hideModal, showMessage, showErrorMessage, $gettext, $ngettext)
+    super(showMessage, showErrorMessage, $gettext, $ngettext)
   }
 
   hasRecursion(): boolean {
diff --git a/packages/web-app-files/src/helpers/resource/actions/upload.ts b/packages/web-app-files/src/helpers/resource/actions/upload.ts
index 41d5c62d993..ca0452fb1d3 100644
--- a/packages/web-app-files/src/helpers/resource/actions/upload.ts
+++ b/packages/web-app-files/src/helpers/resource/actions/upload.ts
@@ -21,8 +21,6 @@ export class ResourceConflict extends ConflictDialog {
   constructor(store: Store<any>, language: Language) {
     const { $gettext, $ngettext } = language
     super(
-      (modal) => store.dispatch('createModal', modal),
-      () => store.dispatch('hideModal'),
       (msg) => store.dispatch('showMessage', msg),
       (msg) => store.dispatch('showErrorMessage', msg),
       $gettext,
diff --git a/packages/web-app-files/src/store/actions.ts b/packages/web-app-files/src/store/actions.ts
index cdb9973d0e1..dd394ab14f7 100644
--- a/packages/web-app-files/src/store/actions.ts
+++ b/packages/web-app-files/src/store/actions.ts
@@ -80,8 +80,6 @@ export default {
       targetSpace,
       clientService,
       loadingService,
-      createModal,
-      hideModal,
       showMessage,
       showErrorMessage,
       $gettext,
@@ -97,8 +95,6 @@ export default {
       context.state.currentFolder,
       clientService,
       loadingService,
-      createModal,
-      hideModal,
       showMessage,
       showErrorMessage,
       $gettext,
diff --git a/packages/web-app-files/src/views/spaces/GenericSpace.vue b/packages/web-app-files/src/views/spaces/GenericSpace.vue
index 73bef05c018..64f7b80f528 100644
--- a/packages/web-app-files/src/views/spaces/GenericSpace.vue
+++ b/packages/web-app-files/src/views/spaces/GenericSpace.vue
@@ -608,7 +608,7 @@ export default defineComponent({
 
   methods: {
     ...mapActions('Files', ['loadPreview']),
-    ...mapActions(['showMessage', 'showErrorMessage', 'createModal', 'hideModal']),
+    ...mapActions(['showMessage', 'showErrorMessage']),
     ...mapMutations('Files', ['REMOVE_FILES', 'REMOVE_FILES_FROM_SEARCHED', 'RESET_SELECTION']),
 
     async fileDropped(fileTarget) {
@@ -653,8 +653,6 @@ export default defineComponent({
         targetFolder,
         this.$clientService,
         this.$loadingService,
-        this.createModal,
-        this.hideModal,
         this.showMessage,
         this.showErrorMessage,
         this.$gettext,
diff --git a/packages/web-app-files/tests/unit/components/AppBar/CreateSpace.spec.ts b/packages/web-app-files/tests/unit/components/AppBar/CreateSpace.spec.ts
index 80eaaea35a4..ca6f7386032 100644
--- a/packages/web-app-files/tests/unit/components/AppBar/CreateSpace.spec.ts
+++ b/packages/web-app-files/tests/unit/components/AppBar/CreateSpace.spec.ts
@@ -9,6 +9,8 @@ import {
   defaultStoreMockOptions,
   defaultComponentMocks
 } from 'web-test-helpers'
+import { useModals } from '@ownclouders/web-pkg'
+import { unref } from 'vue'
 
 const selectors = {
   newSpaceBtn: '#new-space-menu-btn'
@@ -21,27 +23,36 @@ describe('CreateSpace component', () => {
     expect(wrapper.html()).toMatchSnapshot()
   })
   it('should show a modal when clicking the "New Space" button', async () => {
-    const { wrapper, storeOptions } = getWrapper()
+    const { wrapper } = getWrapper()
+    const { dispatchModal } = useModals()
     await wrapper.find(selectors.newSpaceBtn).trigger('click')
-    expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+    expect(dispatchModal).toHaveBeenCalledTimes(1)
   })
   describe('method "addNewSpace"', () => {
     it('creates the space and updates the readme data after creation', async () => {
       const { wrapper, mocks, storeOptions } = getWrapper()
+      const { modals } = useModals()
+      await wrapper.find(selectors.newSpaceBtn).trigger('click')
+
       const graphMock = mocks.$clientService.graphAuthenticated
       const drive = mockDeep<Drive>()
       graphMock.drives.createDrive.mockResolvedValue(drive as any)
       graphMock.drives.updateDrive.mockResolvedValue(drive as any)
       mocks.$clientService.webdav.putFileContents.mockResolvedValue(mockDeep<Resource>())
-      await wrapper.vm.addNewSpace('New space')
+      await unref(modals)[0].onConfirm('New Space')
+
       expect(storeOptions.modules.runtime.modules.spaces.mutations.UPSERT_SPACE).toHaveBeenCalled()
     })
     it('shows a message when an error occurred', async () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
       const { wrapper, mocks, storeOptions } = getWrapper()
+      const { modals } = useModals()
+      await wrapper.find(selectors.newSpaceBtn).trigger('click')
+
       const graphMock = mocks.$clientService.graphAuthenticated
       graphMock.drives.createDrive.mockRejectedValue({})
-      await wrapper.vm.addNewSpace('New space')
+      await unref(modals)[0].onConfirm('New Space')
+
       expect(storeOptions.actions.showErrorMessage).toHaveBeenCalled()
     })
   })
@@ -58,7 +69,7 @@ function getWrapper() {
       global: {
         mocks,
         provide: mocks,
-        plugins: [...defaultPlugins(), store]
+        plugins: [...defaultPlugins({ piniaOptions: { stubActions: false } }), store]
       }
     })
   }
diff --git a/packages/web-app-files/tests/unit/components/Modals/SetLinkPasswordModal.spec.ts b/packages/web-app-files/tests/unit/components/Modals/SetLinkPasswordModal.spec.ts
index 7e98599e2a6..d411fc7de58 100644
--- a/packages/web-app-files/tests/unit/components/Modals/SetLinkPasswordModal.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Modals/SetLinkPasswordModal.spec.ts
@@ -1,3 +1,4 @@
+import { mock } from 'jest-mock-extended'
 import SetLinkPasswordModal from '../../../../src/components/Modals/SetLinkPasswordModal.vue'
 import {
   createStore,
@@ -6,6 +7,7 @@ import {
   defaultStoreMockOptions,
   shallowMount
 } from 'web-test-helpers'
+import { Modal } from '@ownclouders/web-pkg'
 
 describe('SetLinkPasswordModal', () => {
   it('should render a text input field for the password', () => {
@@ -42,6 +44,7 @@ function getWrapper({ link = {} } = {}) {
     storeOptions,
     wrapper: shallowMount(SetLinkPasswordModal, {
       props: {
+        modal: mock<Modal>(),
         link
       },
       global: {
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
index fb0de12dd1c..c448d88f942 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Links/DetailsAndEdit.spec.ts
@@ -35,21 +35,6 @@ describe('DetailsAndEdit component', () => {
     it.todo('test edit options, button clicks and event handling/propagation')
   })
 
-  describe('method "checkInputValue"', () => {
-    it('should not show an error if value is valid', () => {
-      const { wrapper } = getShallowMountedWrapper(exampleLink, false, true)
-      const setModalInputErrorMessageStub = jest.spyOn(wrapper.vm, 'setModalInputErrorMessage')
-      wrapper.vm.checkInputValue('New link name')
-      expect(setModalInputErrorMessageStub).toHaveBeenCalledWith(null)
-    })
-    it('should show an error if value is longer than 255 characters', () => {
-      const { wrapper } = getShallowMountedWrapper(exampleLink, false, true)
-      const setModalInputErrorMessageStub = jest.spyOn(wrapper.vm, 'setModalInputErrorMessage')
-      wrapper.vm.checkInputValue('n'.repeat(256))
-      expect(setModalInputErrorMessageStub).toHaveBeenCalledWith(expect.anything())
-    })
-  })
-
   describe('editOptions computed property', () => {
     it('does not add "add-expiration" option if isAliasLink is true', () => {
       const exampleLinkInternal = {
diff --git a/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts b/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts
index 333ee30d699..881c823c033 100644
--- a/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts
+++ b/packages/web-app-files/tests/unit/helpers/resource/resourcesTransfer.spec.ts
@@ -67,8 +67,6 @@ describe('resourcesTransfer', () => {
       jest.fn(),
       jest.fn(),
       jest.fn(),
-      jest.fn(),
-      jest.fn(),
       jest.fn()
     )
     const result = await resourcesTransfer.perform(TransferType.COPY)
@@ -96,8 +94,6 @@ describe('resourcesTransfer', () => {
           jest.fn(),
           jest.fn(),
           jest.fn(),
-          jest.fn(),
-          jest.fn(),
           jest.fn()
         )
         const movedResources = await resourcesTransfer.perform(action)
@@ -136,8 +132,6 @@ describe('resourcesTransfer', () => {
       jest.fn(),
       jest.fn(),
       jest.fn(),
-      jest.fn(),
-      jest.fn(),
       jest.fn()
     )
     resourcesTransfer.resolveFileExists = jest
@@ -166,8 +160,6 @@ describe('resourcesTransfer', () => {
       jest.fn(),
       jest.fn(),
       jest.fn(),
-      jest.fn(),
-      jest.fn(),
       jest.fn()
     )
     const namingClash = await resourcesTransfer.isOverwritingParentFolder(
diff --git a/packages/web-app-files/tests/unit/views/FilesDrop.spec.ts b/packages/web-app-files/tests/unit/views/FilesDrop.spec.ts
index b8c3304db1d..752cc85714c 100644
--- a/packages/web-app-files/tests/unit/views/FilesDrop.spec.ts
+++ b/packages/web-app-files/tests/unit/views/FilesDrop.spec.ts
@@ -10,7 +10,6 @@ import {
 } from 'web-test-helpers'
 import { mock, mockDeep } from 'jest-mock-extended'
 import { ClientService } from '@ownclouders/web-pkg'
-import { createMockThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 describe('FilesDrop view', () => {
   describe('different files view states', () => {
@@ -45,7 +44,7 @@ function getMountedWrapper() {
     storeOptions,
     wrapper: mount(FilesDrop, {
       global: {
-        plugins: [...defaultPlugins(), store, createMockThemeStore()],
+        plugins: [...defaultPlugins(), store],
         mocks: defaultMocks,
         provide: defaultMocks,
         stubs: defaultStubs
diff --git a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
index a04f91394e5..c6ce787866f 100644
--- a/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/GenericSpace.spec.ts
@@ -15,7 +15,6 @@ import {
 } from 'web-test-helpers'
 import { ConfigurationManager, useBreadcrumbsFromPath } from '@ownclouders/web-pkg'
 import { useBreadcrumbsFromPathMock } from '../../../mocks/useBreadcrumbsFromPathMock'
-import { createMockThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 const mockCreateFolder = jest.fn()
 const mockUseEmbedMode = jest.fn().mockReturnValue({ isEnabled: computed(() => false) })
@@ -332,7 +331,7 @@ function getMountedWrapper({
     wrapper: mount(GenericSpace, {
       props: propsData,
       global: {
-        plugins: [...defaultPlugins(), store, createMockThemeStore()],
+        plugins: [...defaultPlugins(), store],
         mocks: defaultMocks,
         provide: defaultMocks,
         stubs: { ...defaultStubs, 'resource-details': true, portal: true, ...stubs }
diff --git a/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts b/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
index 6a4b096afea..15c4451dcde 100644
--- a/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
+++ b/packages/web-app-files/tests/unit/views/spaces/GenericTrash.spec.ts
@@ -14,7 +14,6 @@ import {
   defaultStubs,
   RouteLocation
 } from 'web-test-helpers'
-import { createMockThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 jest.mock('web-app-files/src/composables')
 
@@ -83,7 +82,7 @@ function getMountedWrapper({ mocks = {}, props = {}, files = [], loading = false
     wrapper: mount(GenericTrash, {
       props: propsData,
       global: {
-        plugins: [...defaultPlugins(), store, createMockThemeStore()],
+        plugins: [...defaultPlugins(), store],
         mocks: defaultMocks,
         stubs: { ...defaultStubs, portal: true }
       }
diff --git a/packages/web-app-importer/src/extensions.ts b/packages/web-app-importer/src/extensions.ts
index 30e994e3c35..ffdd81a2804 100644
--- a/packages/web-app-importer/src/extensions.ts
+++ b/packages/web-app-importer/src/extensions.ts
@@ -1,8 +1,8 @@
 import { storeToRefs } from 'pinia'
-import { useStore, usePublicLinkContext, useThemeStore } from '@ownclouders/web-pkg'
+import { useStore, usePublicLinkContext, useThemeStore, useModals } from '@ownclouders/web-pkg'
 import { useGettext } from 'vue3-gettext'
 import { useService } from '@ownclouders/web-pkg'
-import { computed, unref } from 'vue'
+import { computed, nextTick, unref } from 'vue'
 import { Resource } from '@ownclouders/web-client/src'
 import type { UppyService } from '@ownclouders/web-pkg'
 import '@uppy/dashboard/dist/style.min.css'
@@ -20,6 +20,7 @@ export const extensions = ({ applicationConfig }: ApplicationSetupOptions) => {
   const publicLinkContext = usePublicLinkContext({ store })
   const themeStore = useThemeStore()
   const { currentTheme } = storeToRefs(themeStore)
+  const { dispatchModal, removeModal, activeModal } = useModals()
 
   const { companionUrl, webdavCloudType } = applicationConfig
   let { supportedClouds } = applicationConfig
@@ -46,7 +47,9 @@ export const extensions = ({ applicationConfig }: ApplicationSetupOptions) => {
   }
 
   uppyService.subscribe('addedForUpload', () => {
-    store.dispatch('hideModal')
+    if (unref(activeModal)) {
+      removeModal(unref(activeModal).id)
+    }
   })
 
   uppyService.subscribe('uploadCompleted', () => {
@@ -56,17 +59,16 @@ export const extensions = ({ applicationConfig }: ApplicationSetupOptions) => {
   const handler = async () => {
     const renderDarkTheme = currentTheme.value.isDark
 
-    const modal = {
-      variation: 'passive',
+    dispatchModal({
       title: $gettext('Import files'),
-      cancelText: $gettext('Cancel'),
-      withoutButtonConfirm: true,
+      hideConfirmButton: true,
       onCancel: () => {
         removeUppyPlugins()
-        return store.dispatch('hideModal')
       }
-    }
-    await store.dispatch('createModal', modal)
+    })
+
+    await nextTick()
+
     uppyService.addPlugin(Dashboard, {
       uppyService,
       inline: true,
diff --git a/packages/web-pkg/src/components/AppBar/AppBar.vue b/packages/web-pkg/src/components/AppBar/AppBar.vue
index 5d9611ad2e8..e0bacafc983 100644
--- a/packages/web-pkg/src/components/AppBar/AppBar.vue
+++ b/packages/web-pkg/src/components/AppBar/AppBar.vue
@@ -164,7 +164,7 @@ export default defineComponent({
     const { actions: restoreActions } = useFileActionsRestore({ store })
     const { actions: deleteSpaceActions } = useSpaceActionsDelete({ store })
     const { actions: disableSpaceActions } = useSpaceActionsDisable({ store })
-    const { actions: editSpaceQuotaActions } = useSpaceActionsEditQuota({ store })
+    const { actions: editSpaceQuotaActions } = useSpaceActionsEditQuota()
     const { actions: restoreSpaceActions } = useSpaceActionsRestore({ store })
 
     const breadcrumbMaxWidth = ref<number>(0)
diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
index 37a66bf3d19..7919dca8a00 100644
--- a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -51,7 +51,8 @@ import {
   useRouteQuery,
   useStore,
   useSelectedResources,
-  useSideBar
+  useSideBar,
+  useModals
 } from '../../composables'
 import {
   Action,
@@ -108,6 +109,7 @@ export default defineComponent({
     const clientService = useClientService()
     const { getResourceContext } = useGetResourceContext()
     const { selectedResources } = useSelectedResources({ store })
+    const { dispatchModal } = useModals()
 
     const applicationName = ref('')
     const resource: Ref<Resource> = ref()
@@ -412,7 +414,7 @@ export default defineComponent({
 
     onBeforeRouteLeave((_to, _from, next) => {
       if (unref(isDirty)) {
-        const modal = {
+        dispatchModal({
           variation: 'danger',
           icon: 'warning',
           title: $gettext('Unsaved changes'),
@@ -420,16 +422,13 @@ export default defineComponent({
           cancelText: $gettext("Don't Save"),
           confirmText: $gettext('Save'),
           onCancel() {
-            store.dispatch('hideModal')
             next()
           },
           async onConfirm() {
             await save()
-            store.dispatch('hideModal')
             next()
           }
-        }
-        store.dispatch('createModal', modal)
+        })
       } else {
         next()
       }
diff --git a/packages/web-pkg/src/components/CreateLinkModal.vue b/packages/web-pkg/src/components/CreateLinkModal.vue
index afa04a103df..17cfb73927b 100644
--- a/packages/web-pkg/src/components/CreateLinkModal.vue
+++ b/packages/web-pkg/src/components/CreateLinkModal.vue
@@ -122,14 +122,14 @@
       class="link-modal-cancel oc-modal-body-actions-cancel oc-ml-s"
       appearance="outline"
       variation="passive"
-      @click="cancel"
+      @click="$emit('cancel')"
       >{{ $gettext('Cancel') }}
     </oc-button>
     <oc-button
       class="link-modal-confirm oc-modal-body-actions-confirm oc-ml-s"
       appearance="filled"
       variation="primary"
-      @click="confirm"
+      @click="$emit('confirm')"
       >{{ $gettext('Share') }}
     </oc-button>
   </div>
@@ -156,13 +156,12 @@ import {
   useCapabilityFilesSharingPublicCanContribute,
   useCapabilityFilesSharingPublicCanEdit,
   useCapabilityFilesSharingPublicPasswordEnforcedFor,
-  useLoadingService,
   usePasswordPolicyService,
-  useStore,
   useEmbedMode,
   useExpirationRules,
   useDefaultLinkPermissions,
-  useCreateLink
+  useCreateLink,
+  Modal
 } from '../composables'
 import { formatRelativeDateFromDateTime } from '../helpers'
 import {
@@ -179,8 +178,9 @@ import {
 import { Resource } from '@ownclouders/web-client'
 
 export default defineComponent({
-  name: 'CreatePublicLinksModal',
+  name: 'CreateLinkModal',
   props: {
+    modal: { type: Object as PropType<Modal>, required: true },
     resources: { type: Array as PropType<Resource[]>, required: true },
     space: { type: Object as PropType<SpaceResource>, default: undefined },
     isQuickLink: { type: Boolean, default: false },
@@ -189,10 +189,9 @@ export default defineComponent({
       default: undefined
     }
   },
-  setup(props) {
-    const store = useStore()
+  emits: ['cancel', 'confirm'],
+  setup(props, { expose }) {
     const { $gettext, current: currentLanguage } = useGettext()
-    const loadingService = useLoadingService()
     const ability = useAbility()
     const passwordPolicyService = usePasswordPolicyService()
     const { isEnabled: isEmbedEnabled, postMessage } = useEmbedMode()
@@ -271,31 +270,29 @@ export default defineComponent({
     })
 
     const createLinks = () => {
-      return loadingService.addTask(() =>
-        Promise.allSettled<Share>(
-          props.resources.map((resource) =>
-            createLink({
-              resource,
-              space: props.space,
-              quicklink: props.isQuickLink,
-              permissions: unref(selectedRole).bitmask(false),
-              password: unref(password).value,
-              expireDate: unref(selectedExpiry)
-            })
-          )
+      return Promise.allSettled<Share>(
+        props.resources.map((resource) =>
+          createLink({
+            resource,
+            space: props.space,
+            quicklink: props.isQuickLink,
+            permissions: unref(selectedRole).bitmask(false),
+            password: unref(password).value,
+            expireDate: unref(selectedExpiry)
+          })
         )
       )
     }
 
-    const confirm = async () => {
+    const onConfirm = async () => {
       if (!unref(selectedRoleIsInternal)) {
         if (unref(passwordEnforced) && !unref(password).value) {
           password.error = $gettext('Password must not be empty')
-          return
+          return Promise.reject(new Promise((reject) => reject('')))
         }
 
         if (!passwordPolicy.check(unref(password).value)) {
-          return
+          return Promise.reject(new Promise((reject) => reject('')))
         }
       }
 
@@ -325,19 +322,15 @@ export default defineComponent({
 
       if (userFacingErrors.length) {
         password.error = $gettext(userFacingErrors[0].message)
-        return
+        return Promise.reject(new Promise((reject) => reject('')))
       }
 
       if (props.callbackFn) {
         props.callbackFn(result)
       }
-
-      return store.dispatch('hideModal')
     }
 
-    const cancel = () => {
-      return store.dispatch('hideModal')
-    }
+    expose({ onConfirm })
 
     const isSelectedRole = (role: ShareRole) => {
       return unref(selectedRole)?.bitmask(false) === role.bitmask(false)
@@ -387,8 +380,9 @@ export default defineComponent({
       isSelectedRole,
       updateSelectedRole,
       updatePassword,
-      confirm,
-      cancel
+
+      // unit tests
+      onConfirm
     }
   }
 })
diff --git a/packages/web-pkg/src/components/CreateShortcutModal.vue b/packages/web-pkg/src/components/CreateShortcutModal.vue
index 5095d43037f..b9ab054c841 100644
--- a/packages/web-pkg/src/components/CreateShortcutModal.vue
+++ b/packages/web-pkg/src/components/CreateShortcutModal.vue
@@ -75,23 +75,6 @@
     />
     <span class="oc-ml-s oc-flex oc-flex-bottom create-shortcut-modal-url-extension">.url</span>
   </div>
-  <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-    <oc-button
-      class="oc-modal-body-actions-cancel oc-ml-s"
-      appearance="outline"
-      variation="passive"
-      @click="onCancel"
-      >{{ $gettext('Cancel') }}
-    </oc-button>
-    <oc-button
-      class="oc-modal-body-actions-confirm oc-ml-s"
-      appearance="filled"
-      variation="primary"
-      :disabled="confirmButtonDisabled"
-      @click="onConfirm"
-      >{{ $gettext('Create') }}
-    </oc-button>
-  </div>
 </template>
 
 <script lang="ts">
@@ -107,7 +90,14 @@ import {
   onMounted
 } from 'vue'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
-import { useClientService, useFolderLink, useRouter, useSearch, useStore } from '../composables'
+import {
+  Modal,
+  useClientService,
+  useFolderLink,
+  useRouter,
+  useSearch,
+  useStore
+} from '../composables'
 import { urlJoin } from '@ownclouders/web-client/src/utils'
 import { useGettext } from 'vue3-gettext'
 import DOMPurify from 'dompurify'
@@ -127,12 +117,14 @@ export default defineComponent({
   name: 'CreateShortcutModal',
   components: { ResourcePreview },
   props: {
+    modal: { type: Object as PropType<Modal>, required: true },
     space: {
       type: Object as PropType<SpaceResource>,
       required: true
     }
   },
-  setup(props, { expose }) {
+  emits: ['update:confirmDisabled'],
+  setup(props, { emit, expose }) {
     const clientService = useClientService()
     const { $gettext } = useGettext()
     const store = useStore()
@@ -164,15 +156,22 @@ export default defineComponent({
       return `https://${url}`
     })
 
+    const currentFolder = computed<Resource>(() => store.getters['Files/currentFolder'])
+    const files = computed((): Array<Resource> => store.getters['Files/files'])
+    const fileAlreadyExists = computed(
+      () => !!unref(files).find((file) => file.name === `${unref(inputFilename)}.url`)
+    )
+
     const confirmButtonDisabled = computed(
       () => unref(fileAlreadyExists) || !unref(inputFilename) || !unref(inputUrl)
     )
-    const currentFolder = computed(() => store.getters['Files/currentFolder'])
-
-    const files = computed((): Array<Resource> => store.getters['Files/files'])
 
-    const fileAlreadyExists = computed(
-      () => !!unref(files).find((file) => file.name === `${unref(inputFilename)}.url`)
+    watch(
+      confirmButtonDisabled,
+      () => {
+        emit('update:confirmDisabled', unref(confirmButtonDisabled))
+      },
+      { immediate: true }
     )
 
     const inputFileNameErrorMessage = computed(() => {
@@ -336,7 +335,6 @@ export default defineComponent({
           content
         })
         store.commit('Files/UPSERT_RESOURCE', resource)
-        store.dispatch('hideModal')
         store.dispatch('showMessage', {
           title: $gettext('Shortcut was created successfully')
         })
@@ -349,10 +347,6 @@ export default defineComponent({
       }
     }
 
-    const onCancel = () => {
-      store.dispatch('hideModal')
-    }
-
     onMounted(async () => {
       await nextTick()
       markInstance = new Mark(unref(dropRef)?.$refs?.drop)
@@ -392,7 +386,7 @@ export default defineComponent({
       )
     })
 
-    expose({ onConfirm, onCancel })
+    expose({ onConfirm })
 
     return {
       inputUrl,
@@ -403,8 +397,6 @@ export default defineComponent({
       confirmButtonDisabled,
       inputFileNameErrorMessage,
       searchTask,
-      onConfirm,
-      onCancel,
       dropItemUrlClicked,
       dropItemResourceClicked,
       getPathPrefix,
@@ -420,7 +412,10 @@ export default defineComponent({
       onShowDrop,
       onInputUrlInput,
       onClickUrlInput,
-      isDropItemActive
+      isDropItemActive,
+
+      // unit tests
+      onConfirm
     }
   }
 })
diff --git a/packages/web-pkg/src/components/Modals/ResourceConflictModal.vue b/packages/web-pkg/src/components/Modals/ResourceConflictModal.vue
index 7681f2675d0..de7eef09f62 100644
--- a/packages/web-pkg/src/components/Modals/ResourceConflictModal.vue
+++ b/packages/web-pkg/src/components/Modals/ResourceConflictModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <span v-text="message" />
+  <span class="oc-display-inline-block oc-mb-m" v-text="message" />
   <div class="oc-my-m">
     <oc-checkbox
       v-if="conflictCount > 1"
@@ -10,40 +10,43 @@
     />
   </div>
   <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-    <oc-button
-      class="oc-modal-body-actions-cancel oc-ml-s"
-      appearance="outline"
-      variation="passive"
-      @click="onCancel"
-      >{{ $gettext('Skip') }}
-    </oc-button>
-    <oc-button
-      class="oc-modal-body-actions-secondary oc-ml-s"
-      appearance="outline"
-      variation="passive"
-      @click="onConfirmSecondary"
-      >{{ $gettext('Replace') }}
-    </oc-button>
-    <oc-button
-      class="oc-modal-body-actions-confirm oc-ml-s"
-      appearance="filled"
-      variation="primary"
-      @click="onConfirm"
-      >{{ $gettext('Keep both') }}
-    </oc-button>
+    <div class="oc-modal-body-actions-grid">
+      <oc-button
+        class="oc-modal-body-actions-cancel oc-ml-s"
+        appearance="outline"
+        variation="passive"
+        @click="onCancel"
+        >{{ $gettext('Skip') }}
+      </oc-button>
+      <oc-button
+        class="oc-modal-body-actions-secondary oc-ml-s"
+        appearance="outline"
+        variation="passive"
+        @click="onConfirmSecondary"
+        >{{ $gettext('Replace') }}
+      </oc-button>
+      <oc-button
+        class="oc-modal-body-actions-confirm oc-ml-s"
+        appearance="filled"
+        variation="primary"
+        @click="onConfirm"
+        >{{ $gettext('Keep both') }}
+      </oc-button>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
-import { useStore } from '../../composables'
+import { Modal, useModals } from '../../composables'
 import { Resource } from '@ownclouders/web-client/src'
 import { ResolveConflict, ResolveStrategy } from '../../helpers/resource'
 
 export default defineComponent({
   name: 'ResourceConflictModal',
   props: {
+    modal: { type: Object as PropType<Modal>, required: true },
     resource: { type: Object as PropType<Resource>, required: true },
     conflictCount: { type: Number, required: true },
     callbackFn: {
@@ -53,11 +56,11 @@ export default defineComponent({
     suggestMerge: { type: Boolean, default: true },
     separateSkipHandling: { type: Boolean, default: false }
   },
-  setup(props, { expose }) {
-    const store = useStore()
+  setup(props) {
+    const { removeModal } = useModals()
     const { $gettext } = useGettext()
 
-    const checkboxValue = ref()
+    const checkboxValue = ref(false)
     const checkboxLabel = computed(() => {
       if (props.conflictCount < 2) {
         return ''
@@ -93,16 +96,16 @@ export default defineComponent({
         : $gettext('File with name "%{name}" already exists.', { name: props.resource.name }, true)
     )
 
-    const onConfirm = async () => {
-      await store.dispatch('hideModal')
+    const onConfirm = () => {
+      removeModal(props.modal.id)
       props.callbackFn({
         strategy: ResolveStrategy.KEEP_BOTH,
         doForAllConflicts: unref(checkboxValue)
       })
     }
 
-    const onConfirmSecondary = async () => {
-      await store.dispatch('hideModal')
+    const onConfirmSecondary = () => {
+      removeModal(props.modal.id)
       const strategy = props.suggestMerge ? ResolveStrategy.MERGE : ResolveStrategy.REPLACE
       props.callbackFn({
         strategy,
@@ -110,16 +113,14 @@ export default defineComponent({
       })
     }
 
-    const onCancel = async () => {
-      await store.dispatch('hideModal')
+    const onCancel = () => {
+      removeModal(props.modal.id)
       props.callbackFn({
         strategy: ResolveStrategy.SKIP,
         doForAllConflicts: unref(checkboxValue)
       })
     }
 
-    expose({ onConfirm, onConfirmSecondary, onCancel })
-
     return {
       message,
       checkboxValue,
diff --git a/packages/web-pkg/src/components/Modals/SpaceMoveInfoModal.vue b/packages/web-pkg/src/components/Modals/SpaceMoveInfoModal.vue
new file mode 100644
index 00000000000..60f7c225daf
--- /dev/null
+++ b/packages/web-pkg/src/components/Modals/SpaceMoveInfoModal.vue
@@ -0,0 +1,22 @@
+<template>
+  <p
+    class="oc-mt-rm"
+    v-text="
+      $gettext(
+        'Moving files from one space to another is not possible. Do you want to copy instead?'
+      )
+    "
+  />
+  <p
+    class="oc-mb-rm"
+    v-text="$gettext('Note: Links and shares of the original file are not copied.')"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'SpaceMoveInfoModal'
+})
+</script>
diff --git a/packages/web-pkg/src/components/Modals/index.ts b/packages/web-pkg/src/components/Modals/index.ts
index 9f20b06fe93..f63c0388f67 100644
--- a/packages/web-pkg/src/components/Modals/index.ts
+++ b/packages/web-pkg/src/components/Modals/index.ts
@@ -1 +1,2 @@
 export { default as ResourceConflictModal } from './ResourceConflictModal.vue'
+export { default as SpaceMoveInfoModal } from './SpaceMoveInfoModal.vue'
diff --git a/packages/web-pkg/src/components/Spaces/QuotaModal.vue b/packages/web-pkg/src/components/Spaces/QuotaModal.vue
index c93eb084776..cb41746ac89 100644
--- a/packages/web-pkg/src/components/Spaces/QuotaModal.vue
+++ b/packages/web-pkg/src/components/Spaces/QuotaModal.vue
@@ -14,35 +14,17 @@
       v-bind="warningMessageContextualHelperData"
     />
   </div>
-
-  <div class="oc-flex oc-flex-right oc-flex-middle oc-mt-m">
-    <oc-button
-      class="oc-modal-body-actions-cancel oc-ml-s"
-      appearance="outline"
-      variation="passive"
-      @click="onCancel"
-      >{{ $gettext('Cancel') }}
-    </oc-button>
-    <oc-button
-      class="oc-modal-body-actions-confirm oc-ml-s"
-      appearance="filled"
-      variation="primary"
-      :disabled="confirmButtonDisabled"
-      @click="onConfirm"
-      >{{ $gettext('Confirm') }}
-    </oc-button>
-  </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, unref, PropType, ref, onMounted } from 'vue'
+import { computed, defineComponent, unref, PropType, ref, onMounted, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import QuotaSelect from '../QuotaSelect.vue'
 import { SpaceResource } from '@ownclouders/web-client/src'
-import { useCapabilitySpacesMaxQuota, useClientService } from '../../composables'
+import { Modal, useCapabilitySpacesMaxQuota, useClientService } from '../../composables'
 import { useRouter } from '../../composables/router'
 import { eventBus } from '../../services'
-import { useStore, useLoadingService } from '../../composables'
+import { useStore } from '../../composables'
 import { Drive } from '@ownclouders/web-client/src/generated'
 
 export default defineComponent({
@@ -51,6 +33,7 @@ export default defineComponent({
     QuotaSelect
   },
   props: {
+    modal: { type: Object as PropType<Modal>, required: true },
     spaces: {
       type: Array as PropType<SpaceResource[]>,
       required: true
@@ -72,11 +55,11 @@ export default defineComponent({
       }
     }
   },
-  setup(props, { expose }) {
+  emits: ['update:confirmDisabled'],
+  setup(props, { emit, expose }) {
     const store = useStore()
     const { $gettext, $ngettext } = useGettext()
     const clientService = useClientService()
-    const loadingService = useLoadingService()
     const router = useRouter()
     const maxQuota = useCapabilitySpacesMaxQuota()
 
@@ -125,6 +108,14 @@ export default defineComponent({
       return !props.spaces.some((space) => space.spaceQuota.total !== unref(selectedOption))
     })
 
+    watch(
+      confirmButtonDisabled,
+      () => {
+        emit('update:confirmDisabled', unref(confirmButtonDisabled))
+      },
+      { immediate: true }
+    )
+
     const changeSelectedQuotaOption = (option) => {
       selectedOption.value = option.value
     }
@@ -160,9 +151,7 @@ export default defineComponent({
           value: driveData.quota
         })
       })
-      const results = await loadingService.addTask(() => {
-        return Promise.allSettled<Array<unknown>>(requests)
-      })
+      const results = await Promise.allSettled<Array<unknown>>(requests)
       const succeeded = results.filter((r) => r.status === 'fulfilled')
       if (succeeded.length) {
         store.dispatch('showMessage', { title: getSuccessMessage(succeeded.length) })
@@ -176,15 +165,9 @@ export default defineComponent({
           errors: (errors as PromiseRejectedResult[]).map((f) => f.reason)
         })
       }
-
-      store.dispatch('hideModal')
-    }
-
-    const onCancel = () => {
-      store.dispatch('hideModal')
     }
 
-    expose({ onConfirm, onCancel })
+    expose({ onConfirm })
 
     onMounted(() => {
       selectedOption.value = props.spaces[0]?.spaceQuota?.total || 0
@@ -194,9 +177,10 @@ export default defineComponent({
       selectedOption,
       confirmButtonDisabled,
       changeSelectedQuotaOption,
-      onConfirm,
-      onCancel,
-      maxQuota
+      maxQuota,
+
+      // unit tests
+      onConfirm
     }
   }
 })
diff --git a/packages/web-pkg/src/components/Spaces/ReadmeContentModal.vue b/packages/web-pkg/src/components/Spaces/ReadmeContentModal.vue
index 31ebb893895..fc187581200 100644
--- a/packages/web-pkg/src/components/Spaces/ReadmeContentModal.vue
+++ b/packages/web-pkg/src/components/Spaces/ReadmeContentModal.vue
@@ -12,11 +12,12 @@ import { defineComponent, PropType, onMounted, ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { SpaceResource } from '@ownclouders/web-client/src'
 import { getRelativeSpecialFolderSpacePath } from '@ownclouders/web-client/src/helpers'
-import { useClientService, useStore } from '../../composables'
+import { Modal, useClientService, useStore } from '../../composables'
 
 export default defineComponent({
   name: 'SpaceReadmeContentModal',
   props: {
+    modal: { type: Object as PropType<Modal>, required: true },
     space: {
       type: Object as PropType<SpaceResource>,
       required: true
@@ -36,7 +37,6 @@ export default defineComponent({
           content: unref(readmeContent)
         })
 
-        store.dispatch('hideModal')
         store.commit('Files/UPDATE_RESOURCE_FIELD', {
           id: props.space.id,
           field: 'spaceReadmeData',
@@ -54,11 +54,7 @@ export default defineComponent({
       }
     }
 
-    const onCancel = () => {
-      store.dispatch('hideModal')
-    }
-
-    expose({ onConfirm, onCancel })
+    expose({ onConfirm })
 
     onMounted(async () => {
       readmeContent.value = (
@@ -68,7 +64,12 @@ export default defineComponent({
       ).body
     })
 
-    return { readmeContent, onConfirm, onCancel }
+    return {
+      readmeContent,
+
+      // unit tests
+      onConfirm
+    }
   }
 })
 </script>
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateLink.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateLink.ts
index 50eb871890b..81fad06699c 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateLink.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateLink.ts
@@ -12,6 +12,7 @@ import {
 import { useCapabilityFilesSharingPublicPasswordEnforcedFor } from '../../capability'
 import { useCreateLink, useDefaultLinkPermissions } from '../../links'
 import { useLoadingService } from '../../loadingService'
+import { useModals } from '../../piniaStores'
 
 export const useFileActionsCreateLink = ({
   store,
@@ -30,6 +31,7 @@ export const useFileActionsCreateLink = ({
   const passwordEnforcedCapabilities = useCapabilityFilesSharingPublicPasswordEnforcedFor()
   const { defaultLinkPermissions } = useDefaultLinkPermissions()
   const { createLink } = useCreateLink()
+  const { dispatchModal } = useModals()
 
   const proceedResult = (result: PromiseSettledResult<Share>[]) => {
     const succeeded = result.filter(
@@ -67,8 +69,7 @@ export const useFileActionsCreateLink = ({
       enforceModal ||
       (passwordEnforced && unref(defaultLinkPermissions) > SharePermissionBit.Internal)
     ) {
-      return store.dispatch('createModal', {
-        variation: 'passive',
+      dispatchModal({
         title: $ngettext(
           'Create link for "%{resourceName}"',
           'Create links for the selected items',
@@ -84,6 +85,7 @@ export const useFileActionsCreateLink = ({
         }),
         hideActions: true
       })
+      return
     }
 
     const promises = resources.map((resource) =>
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts
index 5c91af284da..bfb25cf19f5 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFile.ts
@@ -21,6 +21,7 @@ import { urlJoin } from '@ownclouders/web-client/src/utils'
 import { configurationManager } from '../../../configuration'
 import { stringify } from 'qs'
 import { AncestorMetaData } from '../../../types'
+import { useModals } from '../../piniaStores'
 
 export const useFileActionsCreateNewFile = ({
   store,
@@ -37,6 +38,7 @@ export const useFileActionsCreateNewFile = ({
   const router = useRouter()
   const { $gettext } = useGettext()
   const { makeRequest } = useRequest()
+  const { dispatchModal } = useModals()
 
   const { openEditor, triggerDefaultAction } = useFileActions()
   const clientService = useClientService()
@@ -49,7 +51,7 @@ export const useFileActionsCreateNewFile = ({
 
   const capabilities = computed(() => store.getters['capabilities'])
 
-  const checkNewFileName = (fileName) => {
+  const getNameErrorMsg = (fileName: string) => {
     if (fileName === '') {
       return $gettext('File name cannot be empty')
     }
@@ -79,7 +81,7 @@ export const useFileActionsCreateNewFile = ({
     return null
   }
 
-  const addAppProviderFileFunc = async (fileName) => {
+  const addAppProviderFileFunc = async (fileName: string) => {
     // FIXME: this belongs in web-app-external, but the app provider handles file creation differently than other editor extensions. Needs more refactoring.
     if (fileName === '') {
       return
@@ -107,7 +109,6 @@ export const useFileActionsCreateNewFile = ({
       }
       triggerDefaultAction({ space: space, resources: [resource] })
       store.commit('Files/UPSERT_RESOURCE', resource)
-      store.dispatch('hideModal')
       store.dispatch('showMessage', {
         title: $gettext('"%{fileName}" was created successfully', { fileName })
       })
@@ -150,12 +151,10 @@ export const useFileActionsCreateNewFile = ({
           EDITOR_MODE_CREATE,
           space.shareId
         )
-        store.dispatch('hideModal')
 
         return
       }
 
-      store.dispatch('hideModal')
       store.dispatch('showMessage', {
         title: $gettext('"%{fileName}" was created successfully', { fileName })
       })
@@ -173,12 +172,6 @@ export const useFileActionsCreateNewFile = ({
     extension: string,
     openAction: any // FIXME: type?
   ) => {
-    const checkInputValue = (value) => {
-      store.dispatch(
-        'setModalInputErrorMessage',
-        checkNewFileName(areFileExtensionsShown.value ? value : `${value}.${extension}`)
-      )
-    }
     let defaultName = $gettext('New file') + `.${extension}`
 
     if (unref(files).some((f) => f.name === defaultName)) {
@@ -191,21 +184,15 @@ export const useFileActionsCreateNewFile = ({
 
     const inputSelectionRange = !areFileExtensionsShown.value
       ? null
-      : [0, defaultName.length - (extension.length + 1)]
+      : ([0, defaultName.length - (extension.length + 1)] as [number, number])
 
-    const modal = {
-      variation: 'passive',
+    dispatchModal({
       title: $gettext('Create a new file'),
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Create'),
       hasInput: true,
       inputValue: defaultName,
       inputLabel: $gettext('File name'),
-      inputError: checkNewFileName(
-        areFileExtensionsShown.value ? defaultName : `${defaultName}.${extension}`
-      ),
       inputSelectionRange,
-      onCancel: () => store.dispatch('hideModal'),
       onConfirm: (fileName: string) => {
         if (!areFileExtensionsShown.value) {
           fileName = `${fileName}.${extension}`
@@ -217,10 +204,9 @@ export const useFileActionsCreateNewFile = ({
 
         return addNewFile(fileName, openAction)
       },
-      onInput: checkInputValue
-    }
-
-    store.dispatch('createModal', modal)
+      onInput: (name, setError) =>
+        setError(getNameErrorMsg(areFileExtensionsShown.value ? name : `${name}.${extension}`))
+    })
   }
 
   const actions = computed((): FileAction[] => {
@@ -261,7 +247,7 @@ export const useFileActionsCreateNewFile = ({
 
   return {
     actions,
-    checkNewFileName,
+    getNameErrorMsg,
     addNewFile
   }
 }
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFolder.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFolder.ts
index fa10561922b..3a74f34c883 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFolder.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewFolder.ts
@@ -13,6 +13,7 @@ import { isLocationSpacesActive } from '../../../router'
 import { getIndicators } from '../../../helpers/statusIndicators'
 import { useScrollTo } from '../../scrollTo'
 import { AncestorMetaData } from '../../../types'
+import { useModals } from '../../../composables/piniaStores'
 
 export const useFileActionsCreateNewFolder = ({
   store,
@@ -20,6 +21,7 @@ export const useFileActionsCreateNewFolder = ({
 }: { store?: Store<any>; space?: SpaceResource } = {}) => {
   store = store || useStore()
   const router = useRouter()
+  const { dispatchModal } = useModals()
   const { $gettext } = useGettext()
   const { scrollToResource } = useScrollTo()
 
@@ -30,37 +32,37 @@ export const useFileActionsCreateNewFolder = ({
     () => store.getters['runtime/ancestorMetaData/ancestorMetaData']
   )
 
-  const checkNewFolderName = (folderName) => {
+  const checkNewFolderName = (folderName: string, setError: (error: string) => void) => {
     if (folderName.trim() === '') {
-      return $gettext('Folder name cannot be empty')
+      return setError($gettext('Folder name cannot be empty'))
     }
 
     if (/[/]/.test(folderName)) {
-      return $gettext('Folder name cannot contain "/"')
+      return setError($gettext('Folder name cannot contain "/"'))
     }
 
     if (folderName === '.') {
-      return $gettext('Folder name cannot be equal to "."')
+      return setError($gettext('Folder name cannot be equal to "."'))
     }
 
     if (folderName === '..') {
-      return $gettext('Folder name cannot be equal to ".."')
+      return setError($gettext('Folder name cannot be equal to ".."'))
     }
 
     const exists = unref(files).find((file) => file.name === folderName)
 
     if (exists) {
-      return $gettext('%{name} already exists', { name: folderName }, true)
+      return setError($gettext('%{name} already exists', { name: folderName }, true))
     }
 
-    return null
+    return setError(null)
   }
 
   const loadIndicatorsForNewFile = computed(() => {
     return isLocationSpacesActive(router, 'files-spaces-generic') && space.driveType !== 'share'
   })
 
-  const addNewFolder = async (folderName) => {
+  const addNewFolder = async (folderName: string) => {
     folderName = folderName.trimEnd()
 
     try {
@@ -74,7 +76,6 @@ export const useFileActionsCreateNewFolder = ({
       }
 
       store.commit('Files/UPSERT_RESOURCE', resource)
-      store.dispatch('hideModal')
 
       store.dispatch('showMessage', {
         title: $gettext('"%{folderName}" was created successfully', { folderName })
@@ -92,33 +93,21 @@ export const useFileActionsCreateNewFolder = ({
   }
 
   const handler = () => {
-    const checkInputValue = (value) => {
-      store.dispatch('setModalInputErrorMessage', checkNewFolderName(value))
-    }
     let defaultName = $gettext('New folder')
 
     if (unref(files).some((f) => f.name === defaultName)) {
       defaultName = resolveFileNameDuplicate(defaultName, '', unref(files))
     }
 
-    const inputSelectionRange = null
-
-    const modal = {
-      variation: 'passive',
+    dispatchModal({
       title: $gettext('Create a new folder'),
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Create'),
       hasInput: true,
       inputValue: defaultName,
       inputLabel: $gettext('Folder name'),
-      inputError: checkNewFolderName(defaultName),
-      inputSelectionRange,
-      onCancel: () => store.dispatch('hideModal'),
       onConfirm: addNewFolder,
-      onInput: checkInputValue
-    }
-
-    store.dispatch('createModal', modal)
+      onInput: checkNewFolderName
+    })
   }
 
   const actions = computed((): FileAction[] => {
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewShortcut.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewShortcut.ts
index ba1e091717b..03ffd770551 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewShortcut.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateNewShortcut.ts
@@ -1,30 +1,29 @@
 import { Resource, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import { computed, unref } from 'vue'
 import { useStore } from '../../store'
-import { FileAction } from '../../../composables'
+import { FileAction, useModals } from '../../../composables'
 import { CreateShortcutModal } from '../../../components'
 import { useGettext } from 'vue3-gettext'
 
 export const useFileActionsCreateNewShortcut = ({ space }: { space: SpaceResource }) => {
   const store = useStore()
+  const { dispatchModal } = useModals()
   const { $gettext } = useGettext()
   const currentFolder = computed((): Resource => store.getters['Files/currentFolder'])
 
-  const handler = () => {
-    return store.dispatch('createModal', {
-      title: $gettext('Create a Shortcut'),
-      hideActions: true,
-      customComponent: CreateShortcutModal,
-      customComponentAttrs: () => ({ space })
-    })
-  }
-
   const actions = computed((): FileAction[] => {
     return [
       {
         name: 'create-shortcut',
         icon: 'external-link',
-        handler,
+        handler: () => {
+          dispatchModal({
+            title: $gettext('Create a Shortcut'),
+            confirmText: $gettext('Create'),
+            customComponent: CreateShortcutModal,
+            customComponentAttrs: () => ({ space })
+          })
+        },
         label: () => {
           return $gettext('New Shortcut')
         },
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateSpaceFromResource.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateSpaceFromResource.ts
index cc57c638474..071aa647d12 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsCreateSpaceFromResource.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsCreateSpaceFromResource.ts
@@ -6,26 +6,25 @@ import { FileAction, FileActionOptions } from '../../actions'
 import { useAbility } from '../../ability'
 import { useClientService } from '../../clientService'
 import { useRouter } from '../../router'
-import { useLoadingService } from '../../loadingService'
 import { isPersonalSpaceResource } from '@ownclouders/web-client/src/helpers'
 import { isLocationSpacesActive } from '../../../router'
 import { useCreateSpace } from '../../spaces'
 import { useSpaceHelpers } from '../../spaces'
 import PQueue from 'p-queue'
+import { useModals } from '../../piniaStores'
 
 export const useFileActionsCreateSpaceFromResource = ({ store }: { store?: Store<any> } = {}) => {
   const { can } = useAbility()
   const { $gettext, $ngettext } = useGettext()
-  const loadingService = useLoadingService()
   const { createSpace } = useCreateSpace()
   const { checkSpaceNameModalInput } = useSpaceHelpers()
   const clientService = useClientService()
   const router = useRouter()
   const hasCreatePermission = computed(() => can('create-all', 'Drive'))
+  const { dispatchModal } = useModals()
 
   const confirmAction = async ({ spaceName, resources, space }) => {
     const { webdav } = clientService
-    store.dispatch('hideModal')
     const queue = new PQueue({ concurrency: 4 })
     const copyOps = []
 
@@ -58,8 +57,7 @@ export const useFileActionsCreateSpaceFromResource = ({ store }: { store?: Store
     }
   }
   const handler = ({ resources, space }: FileActionOptions) => {
-    const modal = {
-      variation: 'passive',
+    dispatchModal({
       title: $ngettext(
         'Create Space from "%{resourceName}"',
         'Create Space from selection',
@@ -81,17 +79,12 @@ export const useFileActionsCreateSpaceFromResource = ({ store }: { store?: Store
         title: $gettext('Restrictions'),
         text: $gettext('Shares, versions and tags will not be copied.')
       },
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Create'),
       hasInput: true,
       inputLabel: $gettext('Space name'),
       onInput: checkSpaceNameModalInput,
-      onCancel: () => store.dispatch('hideModal'),
-      onConfirm: (spaceName) =>
-        loadingService.addTask(() => confirmAction({ spaceName, space, resources }))
-    }
-
-    store.dispatch('createModal', modal)
+      onConfirm: (spaceName: string) => confirmAction({ spaceName, space, resources })
+    })
   }
 
   const actions = computed((): FileAction[] => {
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts
index 77729b0bbd9..d1dac718554 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsEmptyTrashBin.ts
@@ -10,15 +10,15 @@ import { useStore } from '../../store'
 
 import { useGettext } from 'vue3-gettext'
 import { FileAction, FileActionOptions } from '../types'
-import { useLoadingService } from '../../loadingService'
+import { useModals } from '../../piniaStores'
 
 export const useFileActionsEmptyTrashBin = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
   const router = useRouter()
   const { $gettext } = useGettext()
   const clientService = useClientService()
-  const loadingService = useLoadingService()
   const hasPermanentDeletion = useCapabilityFilesPermanentDeletion()
+  const { dispatchModal } = useModals()
 
   const emptyTrashBin = ({ space }: { space: SpaceResource }) => {
     return clientService.webdav
@@ -36,26 +36,19 @@ export const useFileActionsEmptyTrashBin = ({ store }: { store?: Store<any> } =
           error
         })
       })
-      .finally(() => {
-        store.dispatch('hideModal')
-      })
   }
 
   const handler = ({ space }: FileActionOptions) => {
-    const modal = {
+    dispatchModal({
       variation: 'danger',
       title: $gettext('Empty trash bin'),
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Delete'),
       message: $gettext(
         'Are you sure you want to permanently delete the listed items? You can’t undo this action.'
       ),
       hasInput: false,
-      onCancel: () => store.dispatch('hideModal'),
-      onConfirm: () => loadingService.addTask(() => emptyTrashBin({ space }))
-    }
-
-    store.dispatch('createModal', modal)
+      onConfirm: () => emptyTrashBin({ space })
+    })
   }
 
   const actions = computed((): FileAction[] => [
@@ -64,7 +57,7 @@ export const useFileActionsEmptyTrashBin = ({ store }: { store?: Store<any> } =
       icon: 'delete-bin-5',
       label: () => $gettext('Empty trash bin'),
       handler,
-      isEnabled: ({ space, resources }) => {
+      isEnabled: ({ space }) => {
         if (!isLocationTrashActive(router, 'files-trash-generic')) {
           return false
         }
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsPaste.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsPaste.ts
index bfebf413640..980959a527e 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsPaste.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsPaste.ts
@@ -59,8 +59,6 @@ export const useFileActionsPaste = ({ store }: { store?: Store<any> } = {}) => {
             resources: resourcesToCopy,
             clientService,
             loadingService,
-            createModal: (...args) => store.dispatch('createModal', ...args),
-            hideModal: (...args) => store.dispatch('hideModal', ...args),
             showMessage: (...args) => store.dispatch('showMessage', ...args),
             showErrorMessage: (...args) => store.dispatch('showErrorMessage', ...args),
             $gettext,
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsRename.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsRename.ts
index 69455de1696..c6057e97a16 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsRename.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsRename.ts
@@ -14,53 +14,44 @@ import { renameResource as _renameResource } from '../../../helpers/resource'
 import { computed, unref } from 'vue'
 import { useClientService } from '../../clientService'
 import { useConfigurationManager } from '../../configuration'
-import { useLoadingService } from '../../loadingService'
 import { useRouter } from '../../router'
 import { useStore } from '../../store'
 import { useGettext } from 'vue3-gettext'
 import { FileAction, FileActionOptions } from '../types'
 import { useCapabilityFilesSharingCanRename } from '../../capability'
+import { useModals } from '../../piniaStores'
 
 export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
   const router = useRouter()
   const { $gettext } = useGettext()
   const clientService = useClientService()
-  const loadingService = useLoadingService()
   const canRename = useCapabilityFilesSharingCanRename()
   const configurationManager = useConfigurationManager()
+  const { dispatchModal } = useModals()
 
-  const checkNewName = (resource, newName, parentResources = undefined) => {
+  const getNameErrorMsg = (resource: Resource, newName: string, parentResources = undefined) => {
     const newPath =
       resource.path.substring(0, resource.path.length - resource.name.length) + newName
 
     if (!newName) {
-      return store.dispatch('setModalInputErrorMessage', $gettext('The name cannot be empty'))
+      return $gettext('The name cannot be empty')
     }
 
     if (/[/]/.test(newName)) {
-      return store.dispatch('setModalInputErrorMessage', $gettext('The name cannot contain "/"'))
+      return $gettext('The name cannot contain "/"')
     }
 
     if (newName === '.') {
-      return store.dispatch(
-        'setModalInputErrorMessage',
-        $gettext('The name cannot be equal to "."')
-      )
+      return $gettext('The name cannot be equal to "."')
     }
 
     if (newName === '..') {
-      return store.dispatch(
-        'setModalInputErrorMessage',
-        $gettext('The name cannot be equal to ".."')
-      )
+      return $gettext('The name cannot be equal to ".."')
     }
 
     if (/\s+$/.test(newName)) {
-      return store.dispatch(
-        'setModalInputErrorMessage',
-        $gettext('The name cannot end with whitespace')
-      )
+      return $gettext('The name cannot end with whitespace')
     }
 
     const exists = store.getters['Files/files'].find(
@@ -68,10 +59,7 @@ export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) =>
     )
     if (exists) {
       const translated = $gettext('The name "%{name}" is already taken')
-      return store.dispatch(
-        'setModalInputErrorMessage',
-        $gettext(translated, { name: newName }, true)
-      )
+      return $gettext(translated, { name: newName }, true)
     }
 
     if (parentResources) {
@@ -81,19 +69,14 @@ export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) =>
 
       if (exists) {
         const translated = $gettext('The name "%{name}" is already taken')
-
-        return store.dispatch(
-          'setModalInputErrorMessage',
-          $gettext(translated, { name: newName }, true)
-        )
+        return $gettext(translated, { name: newName }, true)
       }
     }
 
-    store.dispatch('setModalInputErrorMessage', null)
+    return null
   }
 
   const renameResource = async (space: SpaceResource, resource: Resource, newName: string) => {
-    store.dispatch('toggleModalConfirmButton')
     let currentFolder = store.getters['Files/currentFolder']
 
     try {
@@ -101,7 +84,6 @@ export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) =>
       await (clientService.webdav as WebDAV).moveFiles(space, resource, space, {
         path: newPath
       })
-      store.dispatch('hideModal')
 
       const isCurrentFolder = isSameResource(resource, currentFolder)
 
@@ -142,7 +124,6 @@ export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) =>
       store.commit('Files/UPSERT_RESOURCE', fileResource)
     } catch (error) {
       console.error(error)
-      store.dispatch('toggleModalConfirmButton')
       let title = $gettext(
         'Failed to rename "%{file}" to "%{newName}"',
         { file: resource.name, newName },
@@ -175,18 +156,20 @@ export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) =>
     }
 
     const areFileExtensionsShown = store.state.Files.areFileExtensionsShown
-    const confirmAction = (newName) => {
+    const onConfirm = async (newName: string) => {
       if (!areFileExtensionsShown) {
         newName = `${newName}.${resources[0].extension}`
       }
 
-      return renameResource(space, resources[0], newName)
+      await renameResource(space, resources[0], newName)
     }
-    const checkName = (newName) => {
+    const checkName = (newName: string, setError: (error: string) => void) => {
       if (!areFileExtensionsShown) {
         newName = `${newName}.${resources[0].extension}`
       }
-      checkNewName(resources[0], newName, parentResources)
+
+      const error = getNameErrorMsg(resources[0], newName, parentResources)
+      setError(error)
     }
     const nameWithoutExtension = extractNameWithoutExtension(resources[0])
     const modalTitle =
@@ -200,23 +183,21 @@ export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) =>
       !resources[0].isFolder && !areFileExtensionsShown ? nameWithoutExtension : resources[0].name
 
     const inputSelectionRange =
-      resources[0].isFolder || !areFileExtensionsShown ? null : [0, nameWithoutExtension.length]
+      resources[0].isFolder || !areFileExtensionsShown
+        ? null
+        : ([0, nameWithoutExtension.length] as [number, number])
 
-    const modal = {
+    dispatchModal({
       variation: 'passive',
       title,
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Rename'),
       hasInput: true,
       inputValue,
       inputSelectionRange,
       inputLabel: resources[0].isFolder ? $gettext('Folder name') : $gettext('File name'),
-      onCancel: () => store.dispatch('hideModal'),
-      onConfirm: (args) => loadingService.addTask(() => confirmAction(args)),
+      onConfirm,
       onInput: checkName
-    }
-
-    store.dispatch('createModal', modal)
+    })
   }
 
   const actions = computed((): FileAction[] => [
@@ -264,7 +245,7 @@ export const useFileActionsRename = ({ store }: { store?: Store<any> } = {}) =>
   return {
     actions,
     // HACK: exported for unit tests:
-    checkNewName,
+    getNameErrorMsg,
     renameResource
   }
 }
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsRestore.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsRestore.ts
index eca1d76409e..1b1524f2783 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsRestore.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsRestore.ts
@@ -24,6 +24,7 @@ import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { FileAction, FileActionOptions } from '../types'
 import { LoadingTaskCallbackArguments } from '../../../services'
+import { useModals } from '../../piniaStores'
 
 export const useFileActionsRestore = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
@@ -31,6 +32,7 @@ export const useFileActionsRestore = ({ store }: { store?: Store<any> } = {}) =>
   const { $gettext, $ngettext } = useGettext()
   const clientService = useClientService()
   const loadingService = useLoadingService()
+  const { dispatchModal } = useModals()
 
   const hasSpacesEnabled = useCapabilitySpacesEnabled()
 
@@ -92,8 +94,6 @@ export const useFileActionsRestore = ({ store }: { store?: Store<any> } = {}) =>
       }
       const remainingConflictCount = allConflictsCount - count
       const conflictDialog = new ConflictDialog(
-        (...args) => store.dispatch('createModal', ...args),
-        (...args) => store.dispatch('hideModal', ...args),
         (...args) => store.dispatch('showMessage', ...args),
         (...args) => store.dispatch('showErrorMessage', ...args),
         $gettext,
diff --git a/packages/web-pkg/src/composables/actions/helpers/useFileActionsDeleteResources.ts b/packages/web-pkg/src/composables/actions/helpers/useFileActionsDeleteResources.ts
index e08bb8a4b63..c778ef00ef3 100644
--- a/packages/web-pkg/src/composables/actions/helpers/useFileActionsDeleteResources.ts
+++ b/packages/web-pkg/src/composables/actions/helpers/useFileActionsDeleteResources.ts
@@ -17,6 +17,7 @@ import { useRouter } from '../../router'
 import { useStore } from '../../store'
 import { useGettext } from 'vue3-gettext'
 import { ref } from 'vue'
+import { useModals } from '../../piniaStores'
 
 export const useFileActionsDeleteResources = ({ store }: { store?: Store<any> }) => {
   store = store || useStore()
@@ -28,6 +29,7 @@ export const useFileActionsDeleteResources = ({ store }: { store?: Store<any> })
   const clientService = useClientService()
   const loadingService = useLoadingService()
   const { owncloudSdk } = clientService
+  const { dispatchModal } = useModals()
 
   const queue = new PQueue({ concurrency: 4 })
   const deleteOps = []
@@ -137,7 +139,7 @@ export const useFileActionsDeleteResources = ({ store }: { store?: Store<any> })
       })
   }
 
-  const trashbin_delete = (space: SpaceResource) => {
+  const trashbin_delete = async (space: SpaceResource) => {
     // TODO: use clear all if all files are selected
     // FIXME: Implement proper batch delete and add loading indicator
     for (const file of unref(resources)) {
@@ -147,10 +149,7 @@ export const useFileActionsDeleteResources = ({ store }: { store?: Store<any> })
       deleteOps.push(p)
     }
 
-    Promise.all(deleteOps).then(() => {
-      store.dispatch('hideModal')
-      store.dispatch('toggleModalConfirmButton')
-    })
+    await Promise.all(deleteOps)
   }
 
   const filesList_delete = (resources: Resource[]) => {
@@ -237,21 +236,13 @@ export const useFileActionsDeleteResources = ({ store }: { store?: Store<any> })
   const displayDialog = (space: SpaceResource, resources: Resource[]) => {
     resourcesToDelete.value = [...resources]
 
-    const modal = {
+    dispatchModal({
       variation: 'danger',
       title: unref(dialogTitle),
       message: unref(dialogMessage),
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Delete'),
-      onCancel: () => {
-        store.dispatch('hideModal')
-      },
-      onConfirm: () => {
-        trashbin_delete(space)
-      }
-    }
-
-    store.dispatch('createModal', modal)
+      onConfirm: () => trashbin_delete(space)
+    })
   }
 
   return {
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDelete.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDelete.ts
index 1f609678c47..f2c254f935e 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDelete.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDelete.ts
@@ -2,7 +2,6 @@ import { computed, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { SpaceResource } from '@ownclouders/web-client/src'
 import { useClientService } from '../../clientService'
-import { useLoadingService } from '../../loadingService'
 import { useRoute } from '../../router'
 import { eventBus } from '../../../services'
 import { useAbility } from '../../ability'
@@ -10,14 +9,15 @@ import { useStore } from '../../store'
 import { SpaceAction, SpaceActionOptions } from '../types'
 import { Store } from 'vuex'
 import { isProjectSpaceResource } from '@ownclouders/web-client/src/helpers'
+import { useModals } from '../../piniaStores'
 
 export const useSpaceActionsDelete = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
   const { $gettext, $ngettext } = useGettext()
   const ability = useAbility()
   const clientService = useClientService()
-  const loadingService = useLoadingService()
   const route = useRoute()
+  const { dispatchModal } = useModals()
 
   const filterResourcesToDelete = (resources: SpaceResource[]) => {
     return resources.filter(
@@ -34,9 +34,8 @@ export const useSpaceActionsDelete = ({ store }: { store?: Store<any> } = {}) =>
         return true
       })
     )
-    const results = await loadingService.addTask(() => {
-      return Promise.allSettled(promises)
-    })
+    const results = await Promise.allSettled(promises)
+
     const succeeded = results.filter((r) => r.status === 'fulfilled')
     if (succeeded.length) {
       const title =
@@ -72,7 +71,6 @@ export const useSpaceActionsDelete = ({ store }: { store?: Store<any> } = {}) =>
       })
     }
 
-    store.dispatch('hideModal')
     if (unref(route).name === 'admin-settings-spaces') {
       eventBus.publish('app.admin-settings.list.load')
     }
@@ -89,10 +87,8 @@ export const useSpaceActionsDelete = ({ store }: { store?: Store<any> } = {}) =>
       allowedResources.length,
       { count: allowedResources.length.toString() }
     )
-    const confirmText = $gettext('Delete')
 
-    const modal = {
-      variation: 'danger',
+    dispatchModal({
       title: $ngettext(
         'Delete Space "%{space}"?',
         'Delete %{spaceCount} Spaces?',
@@ -102,15 +98,11 @@ export const useSpaceActionsDelete = ({ store }: { store?: Store<any> } = {}) =>
           spaceCount: allowedResources.length.toString()
         }
       ),
-      cancelText: $gettext('Cancel'),
-      confirmText,
+      confirmText: $gettext('Delete'),
       message: message,
       hasInput: false,
-      onCancel: () => store.dispatch('hideModal'),
       onConfirm: () => deleteSpaces(allowedResources)
-    }
-
-    store.dispatch('createModal', modal)
+    })
   }
 
   const actions = computed((): SpaceAction[] => [
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDisable.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDisable.ts
index ba29bce35bb..e7c8c364b9f 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDisable.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsDisable.ts
@@ -6,9 +6,9 @@ import { useRoute, useRouter } from '../../router'
 import { useStore } from '../../store'
 import { useAbility } from '../../ability'
 import { useClientService } from '../../clientService'
-import { useLoadingService } from '../../loadingService'
 import { Store } from 'vuex'
 import { isProjectSpaceResource } from '@ownclouders/web-client/src/helpers'
+import { useModals } from '../../piniaStores'
 
 export const useSpaceActionsDisable = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
@@ -17,9 +17,9 @@ export const useSpaceActionsDisable = ({ store }: { store?: Store<any> } = {}) =
   const clientService = useClientService()
   const route = useRoute()
   const router = useRouter()
-  const loadingService = useLoadingService()
+  const { dispatchModal } = useModals()
 
-  const filterResourcesToDisable = (resources): SpaceResource[] => {
+  const filterResourcesToDisable = (resources: SpaceResource[]): SpaceResource[] => {
     return resources.filter(
       (r) => isProjectSpaceResource(r) && r.canDisable({ user: store.getters.user, ability })
     )
@@ -46,9 +46,8 @@ export const useSpaceActionsDisable = ({ store }: { store?: Store<any> } = {}) =
         return true
       })
     )
-    const results = await loadingService.addTask(() => {
-      return Promise.allSettled(promises)
-    })
+    const results = await Promise.allSettled(promises)
+
     const succeeded = results.filter((r) => r.status === 'fulfilled')
     if (succeeded.length) {
       const title =
@@ -83,8 +82,6 @@ export const useSpaceActionsDisable = ({ store }: { store?: Store<any> } = {}) =
         errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
       })
     }
-
-    store.dispatch('hideModal')
   }
 
   const handler = ({ resources }: SpaceActionOptions) => {
@@ -99,8 +96,8 @@ export const useSpaceActionsDisable = ({ store }: { store?: Store<any> } = {}) =
       { count: allowedResources.length.toString() }
     )
     const confirmText = $gettext('Disable')
-    const modal = {
-      variation: 'danger',
+
+    dispatchModal({
       title: $ngettext(
         'Disable Space "%{space}"?',
         'Disable %{spaceCount} Spaces?',
@@ -110,15 +107,11 @@ export const useSpaceActionsDisable = ({ store }: { store?: Store<any> } = {}) =
           spaceCount: allowedResources.length.toString()
         }
       ),
-      cancelText: $gettext('Cancel'),
       confirmText,
       message,
       hasInput: false,
-      onCancel: () => store.dispatch('hideModal'),
       onConfirm: () => disableSpaces(allowedResources)
-    }
-
-    store.dispatch('createModal', modal)
+    })
   }
 
   const actions = computed((): SpaceAction[] => [
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditDescription.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditDescription.ts
index f5c69bd154b..153e05e4e6b 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditDescription.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditDescription.ts
@@ -8,6 +8,7 @@ import { useStore } from '../../store'
 import { useGettext } from 'vue3-gettext'
 import { Store } from 'vuex'
 import { SpaceResource } from '@ownclouders/web-client/src'
+import { useModals } from '../../piniaStores'
 
 export const useSpaceActionsEditDescription = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
@@ -15,13 +16,13 @@ export const useSpaceActionsEditDescription = ({ store }: { store?: Store<any> }
   const ability = useAbility()
   const clientService = useClientService()
   const route = useRoute()
+  const { dispatchModal } = useModals()
 
   const editDescriptionSpace = (space: SpaceResource, description: string) => {
     const graphClient = clientService.graphAuthenticated
     return graphClient.drives
       .updateDrive(space.id as string, { description } as Drive, {})
       .then(() => {
-        store.dispatch('hideModal')
         store.commit('runtime/spaces/UPDATE_SPACE_FIELD', {
           id: space.id,
           field: 'description',
@@ -48,19 +49,14 @@ export const useSpaceActionsEditDescription = ({ store }: { store?: Store<any> }
       return
     }
 
-    const modal = {
-      variation: 'passive',
+    dispatchModal({
       title: $gettext('Change subtitle for space') + ' ' + resources[0].name,
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Confirm'),
       hasInput: true,
       inputLabel: $gettext('Space subtitle'),
       inputValue: resources[0].description,
-      onCancel: () => store.dispatch('hideModal'),
-      onConfirm: (description) => editDescriptionSpace(resources[0], description)
-    }
-
-    store.dispatch('createModal', modal)
+      onConfirm: (description: string) => editDescriptionSpace(resources[0], description)
+    })
   }
 
   const actions = computed((): SpaceAction[] => [
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditQuota.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditQuota.ts
index a7758f7b8cd..0f330be6785 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditQuota.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditQuota.ts
@@ -1,14 +1,13 @@
-import { Store } from 'vuex'
 import { computed } from 'vue'
 import { SpaceAction, SpaceActionOptions } from '../types'
 import { useGettext } from 'vue3-gettext'
 import { useAbility } from '../../ability'
 import { SpaceResource, isProjectSpaceResource } from '@ownclouders/web-client/src/helpers'
-import { useStore } from '../../store'
 import { QuotaModal } from '../../../components'
+import { useModals } from '../../piniaStores'
 
-export const useSpaceActionsEditQuota = ({ store }: { store?: Store<any> } = {}) => {
-  store = store || useStore()
+export const useSpaceActionsEditQuota = () => {
+  const { dispatchModal } = useModals()
   const { $gettext } = useGettext()
   const ability = useAbility()
 
@@ -24,15 +23,13 @@ export const useSpaceActionsEditQuota = ({ store }: { store?: Store<any> } = {})
   }
 
   const handler = ({ resources }: SpaceActionOptions) => {
-    return store.dispatch('createModal', {
-      variation: 'passive',
+    dispatchModal({
       title: getModalTitle({ resources }),
       customComponent: QuotaModal,
       customComponentAttrs: () => ({
         spaces: resources,
         resourceType: 'space'
-      }),
-      hideActions: true
+      })
     })
   }
 
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditReadmeContent.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditReadmeContent.ts
index 21e356896c3..340c18aef26 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditReadmeContent.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsEditReadmeContent.ts
@@ -4,14 +4,15 @@ import { SpaceAction, SpaceActionOptions } from '../types'
 import { computed } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { ReadmeContentModal } from '../../../components'
+import { useModals } from '../../piniaStores'
 
 export const useSpaceActionsEditReadmeContent = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
+  const { dispatchModal } = useModals()
   const { $gettext } = useGettext()
 
   const handler = ({ resources }: SpaceActionOptions) => {
-    return store.dispatch('createModal', {
-      variation: 'passive',
+    dispatchModal({
       title: $gettext('Edit description for space %{name}', {
         name: resources[0].name
       }),
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRename.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRename.ts
index c60ade7b2b6..bdca004ded7 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRename.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRename.ts
@@ -7,6 +7,8 @@ import { useAbility } from '../../ability'
 import { useRoute } from '../../router'
 import { useStore } from '../../store'
 import { SpaceAction, SpaceActionOptions } from '../types'
+import { SpaceResource } from '@ownclouders/web-client'
+import { useModals } from '../../piniaStores'
 
 export const useSpaceActionsRename = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
@@ -15,13 +17,13 @@ export const useSpaceActionsRename = ({ store }: { store?: Store<any> } = {}) =>
   const clientService = useClientService()
   const route = useRoute()
   const { checkSpaceNameModalInput } = useSpaceHelpers()
+  const { dispatchModal } = useModals()
 
-  const renameSpace = (space, name) => {
+  const renameSpace = (space: SpaceResource, name: string) => {
     const graphClient = clientService.graphAuthenticated
     return graphClient.drives
       .updateDrive(space.id, { name }, {})
       .then(() => {
-        store.dispatch('hideModal')
         if (unref(route).name === 'admin-settings-spaces') {
           space.name = name
         }
@@ -48,20 +50,15 @@ export const useSpaceActionsRename = ({ store }: { store?: Store<any> } = {}) =>
       return
     }
 
-    const modal = {
-      variation: 'passive',
+    dispatchModal({
       title: $gettext('Rename space') + ' ' + resources[0].name,
-      cancelText: $gettext('Cancel'),
       confirmText: $gettext('Rename'),
       hasInput: true,
       inputLabel: $gettext('Space name'),
       inputValue: resources[0].name,
-      onCancel: () => store.dispatch('hideModal'),
-      onConfirm: (name) => renameSpace(resources[0], name),
+      onConfirm: (name: string) => renameSpace(resources[0], name),
       onInput: checkSpaceNameModalInput
-    }
-
-    store.dispatch('createModal', modal)
+    })
   }
 
   const actions = computed((): SpaceAction[] => [
diff --git a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRestore.ts b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRestore.ts
index 70da21b4e67..6f8f11386a4 100644
--- a/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRestore.ts
+++ b/packages/web-pkg/src/composables/actions/spaces/useSpaceActionsRestore.ts
@@ -9,6 +9,7 @@ import { useLoadingService } from '../../loadingService'
 import { useStore } from '../../store'
 import { useGettext } from 'vue3-gettext'
 import { isProjectSpaceResource } from '@ownclouders/web-client/src/helpers'
+import { useModals } from '../../piniaStores'
 
 export const useSpaceActionsRestore = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
@@ -17,6 +18,7 @@ export const useSpaceActionsRestore = ({ store }: { store?: Store<any> } = {}) =
   const clientService = useClientService()
   const loadingService = useLoadingService()
   const route = useRoute()
+  const { dispatchModal } = useModals()
 
   const filterResourcesToRestore = (resources): SpaceResource[] => {
     return resources.filter(
@@ -87,8 +89,6 @@ export const useSpaceActionsRestore = ({ store }: { store?: Store<any> } = {}) =
         errors: (failed as PromiseRejectedResult[]).map((f) => f.reason)
       })
     }
-
-    store.dispatch('hideModal')
   }
 
   const handler = ({ resources }: SpaceActionOptions) => {
@@ -104,8 +104,7 @@ export const useSpaceActionsRestore = ({ store }: { store?: Store<any> } = {}) =
     )
     const confirmText = $gettext('Enable')
 
-    const modal = {
-      variation: 'passive',
+    dispatchModal({
       title: $ngettext(
         'Enable Space "%{space}"?',
         'Enable %{spaceCount} Spaces?',
@@ -115,16 +114,12 @@ export const useSpaceActionsRestore = ({ store }: { store?: Store<any> } = {}) =
           spaceCount: allowedResources.length.toString()
         }
       ),
-      cancelText: $gettext('Cancel'),
       confirmText,
       icon: 'alert',
       message,
       hasInput: false,
-      onCancel: () => store.dispatch('hideModal'),
       onConfirm: () => restoreSpaces(allowedResources)
-    }
-
-    store.dispatch('createModal', modal)
+    })
   }
 
   const actions = computed((): SpaceAction[] => [
diff --git a/packages/web-pkg/src/composables/piniaStores/index.ts b/packages/web-pkg/src/composables/piniaStores/index.ts
index 08dd4593f0c..99c17ac4c57 100644
--- a/packages/web-pkg/src/composables/piniaStores/index.ts
+++ b/packages/web-pkg/src/composables/piniaStores/index.ts
@@ -1,2 +1,3 @@
 export * from './extensionRegistry'
+export * from './modals'
 export * from './theme'
diff --git a/packages/web-pkg/src/composables/piniaStores/modals.ts b/packages/web-pkg/src/composables/piniaStores/modals.ts
new file mode 100644
index 00000000000..735391b1d8e
--- /dev/null
+++ b/packages/web-pkg/src/composables/piniaStores/modals.ts
@@ -0,0 +1,90 @@
+import { ContextualHelperData } from 'design-system/src/helpers'
+import { defineStore } from 'pinia'
+import { v4 as uuidV4 } from 'uuid'
+import { Component, ComponentPublicInstance, computed, ref, unref } from 'vue'
+
+export type CustomModalComponent = Component<{ modal: Modal } & Record<string, any>>
+
+export type CustomModalComponentEmits = {
+  confirm?: () => Promise<void>
+  cancel?: () => void
+  'update:confirmDisabled': (value: boolean) => void
+} & Record<string, any>
+
+export type CustomModalComponentInstance = ComponentPublicInstance<
+  { modal: Modal } & unknown,
+  { onConfirm?: () => Promise<unknown>; onCancel?: () => unknown },
+  any,
+  any,
+  any,
+  CustomModalComponentEmits
+>
+
+export type Modal = {
+  id: string
+  title: string
+  variation?: string
+  icon?: string
+  message?: string
+  cancelText?: string
+  confirmDisabled?: boolean
+  confirmText?: string
+  hideActions?: boolean
+  hideConfirmButton?: boolean
+  hasInput?: boolean
+  inputValue?: string
+  inputType?: string
+  inputSelectionRange?: [number, number]
+  inputLabel?: string
+  inputError?: string
+  inputDescription?: string
+  focusTrapInitial?: string
+  contextualHelperLabel?: string
+  contextualHelperData?: ContextualHelperData
+  customComponent?: CustomModalComponent
+  customComponentAttrs?: () => Record<string, unknown>
+  onCancel?: () => void
+  onConfirm?: (value: string) => Promise<void>
+  onInput?: (value: string, setError: (error: string) => void) => void
+}
+
+export const useModals = defineStore('modals', () => {
+  const modals = ref<Modal[]>([])
+  const activeModal = computed(() => unref(modals).at(-1))
+
+  const getModal = (id: Modal['id']) => {
+    return unref(modals).find((modal) => modal.id === id)
+  }
+
+  const dispatchModal = (data: Omit<Modal, 'id'>) => {
+    const modal = { ...data, id: uuidV4() as string }
+    modals.value.push(modal)
+    return modal
+  }
+
+  const updateModal = <T extends Modal, K extends keyof Modal>(
+    id: T['id'],
+    key: K,
+    value: T[K]
+  ) => {
+    const modal = getModal(id)
+    modal[key] = value
+  }
+
+  const removeModal = (id: Modal['id']) => {
+    modals.value = unref(modals).filter((modal) => modal.id !== id)
+  }
+
+  const setModalActive = (id: Modal['id']) => {
+    const foundIdx = unref(modals).findIndex((modal) => modal.id === id)
+    if (foundIdx < 0) {
+      return
+    }
+
+    const modal = getModal(id)
+    unref(modals).splice(foundIdx, 1)
+    modals.value.push(modal)
+  }
+
+  return { modals, activeModal, dispatchModal, updateModal, removeModal, setModalActive }
+})
diff --git a/packages/web-pkg/src/composables/piniaStores/theme.ts b/packages/web-pkg/src/composables/piniaStores/theme.ts
index 335ed272f10..7e4a5ead09b 100644
--- a/packages/web-pkg/src/composables/piniaStores/theme.ts
+++ b/packages/web-pkg/src/composables/piniaStores/theme.ts
@@ -76,8 +76,8 @@ export const ThemingConfig = z.object({
   })
 })
 
-type WebThemeType = z.infer<typeof WebTheme>
-type WebThemeConfigType = z.infer<typeof WebThemeConfig>
+export type WebThemeType = z.infer<typeof WebTheme>
+export type WebThemeConfigType = z.infer<typeof WebThemeConfig>
 
 const themeStorageKey = 'oc_currentThemeName'
 
diff --git a/packages/web-pkg/src/composables/spaces/useSpaceHelpers.ts b/packages/web-pkg/src/composables/spaces/useSpaceHelpers.ts
index 686da0e1639..f4fc0aef5e5 100644
--- a/packages/web-pkg/src/composables/spaces/useSpaceHelpers.ts
+++ b/packages/web-pkg/src/composables/spaces/useSpaceHelpers.ts
@@ -1,27 +1,21 @@
-import { useStore } from '../store'
 import { useGettext } from 'vue3-gettext'
 
 export const useSpaceHelpers = () => {
-  const store = useStore()
   const { $gettext } = useGettext()
 
-  const checkSpaceNameModalInput = (name) => {
+  const checkSpaceNameModalInput = (name: string, setError: (value: string) => void) => {
     if (name.trim() === '') {
-      return store.dispatch('setModalInputErrorMessage', $gettext('Space name cannot be empty'))
+      return setError($gettext('Space name cannot be empty'))
     }
     if (name.length > 255) {
-      return store.dispatch(
-        'setModalInputErrorMessage',
-        $gettext('Space name cannot exceed 255 characters')
-      )
+      return setError($gettext('Space name cannot exceed 255 characters'))
     }
     if (/[/\\.:?*"><|]/.test(name)) {
-      return store.dispatch(
-        'setModalInputErrorMessage',
+      return setError(
         $gettext('Space name cannot contain the following characters: / \\\\ . : ? * " > < |\'')
       )
     }
-    store.dispatch('setModalInputErrorMessage', null)
+    return setError(null)
   }
 
   return { checkSpaceNameModalInput }
diff --git a/packages/web-pkg/src/helpers/resource/conflictHandling/conflictDialog.ts b/packages/web-pkg/src/helpers/resource/conflictHandling/conflictDialog.ts
index de27f5a967f..61f448bd44a 100644
--- a/packages/web-pkg/src/helpers/resource/conflictHandling/conflictDialog.ts
+++ b/packages/web-pkg/src/helpers/resource/conflictHandling/conflictDialog.ts
@@ -1,7 +1,8 @@
 import { join } from 'path'
 import { Resource } from '@ownclouders/web-client'
 import { ResolveConflict, ResolveStrategy } from '.'
-import { ResourceConflictModal } from '../../../components'
+import { useModals } from '../../../composables'
+import { SpaceMoveInfoModal, ResourceConflictModal } from '../../../components'
 
 export interface FileConflict {
   resource: Resource
@@ -11,8 +12,6 @@ export interface FileConflict {
 export class ConflictDialog {
   /* eslint-disable no-useless-constructor */
   constructor(
-    protected createModal: (modal: object) => void,
-    protected hideModal: () => void,
     protected showMessage: (data: object) => void,
     protected showErrorMessage: (data: object) => void,
     protected $gettext: (
@@ -82,8 +81,10 @@ export class ConflictDialog {
     suggestMerge = false,
     separateSkipHandling = false // separate skip-handling between files and folders
   ): Promise<ResolveConflict> {
+    const { dispatchModal } = useModals()
+
     return new Promise<ResolveConflict>((resolve) => {
-      this.createModal({
+      dispatchModal({
         variation: 'danger',
         title: resource.isFolder
           ? this.$gettext('Folder already exists')
@@ -104,27 +105,19 @@ export class ConflictDialog {
   }
 
   resolveDoCopyInsteadOfMoveForSpaces(): Promise<boolean> {
+    const { dispatchModal } = useModals()
+
     return new Promise<boolean>((resolve) => {
-      const modal = {
+      dispatchModal({
         variation: 'danger',
         title: this.$gettext('Copy here?'),
-        customContent: `<p>${this.$gettext(
-          'Moving files from one space to another is not possible. Do you want to copy instead?'
-        )}</p><p>${this.$gettext(
-          'Note: Links and shares of the original file are not copied.'
-        )}</p>`,
-        cancelText: this.$gettext('Cancel'),
+        customComponent: SpaceMoveInfoModal,
         confirmText: this.$gettext('Copy here'),
         onCancel: () => {
-          this.hideModal()
           resolve(false)
         },
-        onConfirm: () => {
-          this.hideModal()
-          resolve(true)
-        }
-      }
-      this.createModal(modal)
+        onConfirm: () => Promise.resolve(resolve(true))
+      })
     })
   }
 }
diff --git a/packages/web-pkg/tests/unit/components/AppBanner.spec.ts b/packages/web-pkg/tests/unit/components/AppBanner.spec.ts
index 473f6edd950..6b6457cd685 100644
--- a/packages/web-pkg/tests/unit/components/AppBanner.spec.ts
+++ b/packages/web-pkg/tests/unit/components/AppBanner.spec.ts
@@ -3,7 +3,6 @@ import AppBanner from '../../../src/components/AppBanner.vue'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import { useSessionStorage } from '@vueuse/core'
 import { ref } from 'vue'
-import { createMockThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 jest.mock('@vueuse/core')
 
@@ -62,15 +61,20 @@ function getWrapper({ fileId, sessionStorageReturnValue }) {
       },
       global: {
         plugins: [
-          ...defaultPlugins(),
-          createMockThemeStore({
-            appBanner: {
-              title: 'ownCloud',
-              publisher: 'ownCloud GmbH',
-              additionalInformation: '',
-              ctaText: 'OPEN',
-              icon: 'themes/owncloud/assets/owncloud-app-icon.png',
-              appScheme: 'owncloud'
+          ...defaultPlugins({
+            piniaOptions: {
+              themeState: {
+                currentTheme: {
+                  appBanner: {
+                    title: 'ownCloud',
+                    publisher: 'ownCloud GmbH',
+                    additionalInformation: '',
+                    ctaText: 'OPEN',
+                    icon: 'themes/owncloud/assets/owncloud-app-icon.png',
+                    appScheme: 'owncloud'
+                  }
+                }
+              }
             }
           })
         ],
diff --git a/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts b/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts
index 2f816716553..90193d401b2 100644
--- a/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/CreateLinkModal.spec.ts
@@ -126,28 +126,38 @@ describe('CreateLinkModal', () => {
   })
   describe('method "confirm"', () => {
     it('shows an error if a password is enforced but empty', async () => {
+      jest.spyOn(console, 'error').mockImplementation(undefined)
       const { wrapper } = getWrapper({ passwordEnforced: true })
-      await wrapper.find(selectors.confirmBtn).trigger('click')
+      try {
+        await wrapper.vm.onConfirm()
+      } catch (error) {}
+
       expect(wrapper.vm.password.error).toBeDefined()
     })
     it('does not create links when the password policy is not fulfilled', async () => {
-      const { wrapper, storeOptions } = getWrapper({ passwordPolicyFulfilled: false })
-      await wrapper.find(selectors.confirmBtn).trigger('click')
-      expect(storeOptions.actions.hideModal).not.toHaveBeenCalled()
+      jest.spyOn(console, 'error').mockImplementation(undefined)
+      const callbackFn = jest.fn()
+      const { wrapper } = getWrapper({ passwordPolicyFulfilled: false, callbackFn })
+      try {
+        await wrapper.vm.onConfirm()
+      } catch (error) {}
+
+      expect(callbackFn).not.toHaveBeenCalled()
     })
     it('creates links for all resources', async () => {
+      const callbackFn = jest.fn()
       const resources = [mock<Resource>({ isFolder: false }), mock<Resource>({ isFolder: false })]
-      const { wrapper, storeOptions, mocks } = getWrapper({ resources })
-      await wrapper.find(selectors.confirmBtn).trigger('click')
+      const { wrapper, mocks } = getWrapper({ resources, callbackFn })
+      await wrapper.vm.onConfirm()
       expect(mocks.createLinkMock).toHaveBeenCalledTimes(resources.length)
-      expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
+      expect(callbackFn).toHaveBeenCalledTimes(1)
     })
     it('emits event in embed mode including the created links', async () => {
       const resources = [mock<Resource>({ isFolder: false })]
       const { wrapper, mocks } = getWrapper({ resources, embedModeEnabled: true })
       const share = mock<Share>({ url: 'someurl' })
       mocks.createLinkMock.mockResolvedValue(share)
-      await wrapper.find(selectors.confirmBtn).trigger('click')
+      await wrapper.vm.onConfirm()
       expect(mocks.postMessageMock).toHaveBeenCalledWith('owncloud-embed:share', [share.url])
     })
     it('shows error messages for links that failed to be created', async () => {
@@ -156,14 +166,14 @@ describe('CreateLinkModal', () => {
       const resources = [mock<Resource>({ isFolder: false })]
       const { wrapper, mocks } = getWrapper({ resources })
       mocks.createLinkMock.mockRejectedValue(new Error(''))
-      await wrapper.find(selectors.confirmBtn).trigger('click')
+      await wrapper.vm.onConfirm()
       expect(consoleMock).toHaveBeenCalledTimes(1)
     })
     it('calls the callback at the end if given', async () => {
       const resources = [mock<Resource>({ isFolder: false })]
       const callbackFn = jest.fn()
       const { wrapper } = getWrapper({ resources, callbackFn })
-      await wrapper.find(selectors.confirmBtn).trigger('click')
+      await wrapper.vm.onConfirm()
       expect(callbackFn).toHaveBeenCalledTimes(1)
     })
     it.each([true, false])(
@@ -171,20 +181,13 @@ describe('CreateLinkModal', () => {
       async (isQuickLink) => {
         const resources = [mock<Resource>({ isFolder: false })]
         const { wrapper, mocks } = getWrapper({ resources, isQuickLink })
-        await wrapper.find(selectors.confirmBtn).trigger('click')
+        await wrapper.vm.onConfirm()
         expect(mocks.createLinkMock).toHaveBeenCalledWith(
           expect.objectContaining({ quicklink: isQuickLink })
         )
       }
     )
   })
-  describe('method "cancel"', () => {
-    it('hides the modal', async () => {
-      const { wrapper, storeOptions } = getWrapper()
-      await wrapper.find(selectors.cancelBtn).trigger('click')
-      expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
-    })
-  })
 })
 
 function getWrapper({
diff --git a/packages/web-pkg/tests/unit/components/Modals/ResourceConflictModal.spec.ts b/packages/web-pkg/tests/unit/components/Modals/ResourceConflictModal.spec.ts
index 732a83ab21c..76dbb1f562c 100644
--- a/packages/web-pkg/tests/unit/components/Modals/ResourceConflictModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Modals/ResourceConflictModal.spec.ts
@@ -9,6 +9,7 @@ import {
 import { mock } from 'jest-mock-extended'
 import { Resource } from '@ownclouders/web-client'
 import { ResolveStrategy } from '../../../../src/helpers/resource'
+import { Modal } from '../../../../src/composables/piniaStores'
 
 describe('ResourceConflictModal', () => {
   describe('checkbox', () => {
@@ -28,7 +29,7 @@ describe('ResourceConflictModal', () => {
       await wrapper.vm.onConfirm()
       expect(callbackFn).toHaveBeenCalledWith({
         strategy: ResolveStrategy.KEEP_BOTH,
-        doForAllConflicts: undefined
+        doForAllConflicts: false
       })
     })
   })
@@ -39,7 +40,7 @@ describe('ResourceConflictModal', () => {
       await wrapper.vm.onConfirmSecondary()
       expect(callbackFn).toHaveBeenCalledWith({
         strategy: ResolveStrategy.MERGE,
-        doForAllConflicts: undefined
+        doForAllConflicts: false
       })
     })
     it('should call the callback with replace strategy if merge not suggested', async () => {
@@ -48,7 +49,7 @@ describe('ResourceConflictModal', () => {
       await wrapper.vm.onConfirmSecondary()
       expect(callbackFn).toHaveBeenCalledWith({
         strategy: ResolveStrategy.REPLACE,
-        doForAllConflicts: undefined
+        doForAllConflicts: false
       })
     })
   })
@@ -59,7 +60,7 @@ describe('ResourceConflictModal', () => {
       await wrapper.vm.onCancel()
       expect(callbackFn).toHaveBeenCalledWith({
         strategy: ResolveStrategy.SKIP,
-        doForAllConflicts: undefined
+        doForAllConflicts: false
       })
     })
   })
@@ -74,6 +75,7 @@ function getWrapper({ props = {} } = {}) {
     mocks,
     wrapper: shallowMount(ResourceConflictModal, {
       props: {
+        modal: mock<Modal>(),
         resource: mock<Resource>,
         conflictCount: 1,
         callbackFn: () => ({}),
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateLink.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateLink.spec.ts
index 77b35e4b67a..42949de60b9 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateLink.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateLink.spec.ts
@@ -1,5 +1,6 @@
 import { computed, unref } from 'vue'
 import { useFileActionsCreateLink } from '../../../../../src/composables/actions/files/useFileActionsCreateLink'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import {
   createStore,
   defaultComponentMocks,
@@ -85,10 +86,11 @@ describe('useFileActionsCreateLink', () => {
     it('shows a modal if enforced', () => {
       getWrapper({
         enforceModal: true,
-        setup: ({ actions }, { mocks, storeOptions }) => {
+        setup: ({ actions }, { mocks }) => {
+          const { dispatchModal } = useModals()
           unref(actions)[0].handler({ resources: [mock<Resource>({ canShare: () => true })] })
           expect(mocks.createLinkMock).not.toHaveBeenCalled()
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+          expect(dispatchModal).toHaveBeenCalledTimes(1)
         }
       })
     })
@@ -96,10 +98,11 @@ describe('useFileActionsCreateLink', () => {
       getWrapper({
         passwordEnforced: true,
         defaultLinkPermissions: SharePermissionBit.Read,
-        setup: ({ actions }, { mocks, storeOptions }) => {
+        setup: ({ actions }, { mocks }) => {
+          const { dispatchModal } = useModals()
           unref(actions)[0].handler({ resources: [mock<Resource>({ canShare: () => true })] })
           expect(mocks.createLinkMock).not.toHaveBeenCalled()
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+          expect(dispatchModal).toHaveBeenCalledTimes(1)
         }
       })
     })
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts
index eaf440ad87e..b61f6586c00 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFile.spec.ts
@@ -1,6 +1,7 @@
 import { mock } from 'jest-mock-extended'
 import { nextTick, ref, unref } from 'vue'
 import { useFileActionsCreateNewFile } from '../../../../../src/composables/actions'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import { SpaceResource } from '@ownclouders/web-client/src'
 import { Resource } from '@ownclouders/web-client/src/helpers'
 import { FileActionOptions } from '../../../../../src/composables/actions'
@@ -20,12 +21,12 @@ describe('useFileActionsCreateNewFile', () => {
       { input: '.', output: 'File name cannot be equal to "."' },
       { input: '..', output: 'File name cannot be equal to ".."' },
       { input: 'myfile.txt', output: null }
-    ])('should validate file name %s', async (data) => {
+    ])('should validate file name %s', (data) => {
       const space = mock<SpaceResource>({ id: '1' })
       getWrapper({
         space,
-        setup: async ({ checkNewFileName }) => {
-          const result = checkNewFileName(data.input)
+        setup: ({ getNameErrorMsg }) => {
+          const result = getNameErrorMsg(data.input)
           expect(result).toBe(data.output)
         }
       })
@@ -33,7 +34,7 @@ describe('useFileActionsCreateNewFile', () => {
   })
 
   describe('addNewFile', () => {
-    it('create new file', async () => {
+    it('create new file', () => {
       const space = mock<SpaceResource>({ id: '1' })
       getWrapper({
         space,
@@ -41,7 +42,6 @@ describe('useFileActionsCreateNewFile', () => {
           await addNewFile('myfile.txt', null)
           await nextTick()
           expect(storeOptions.modules.Files.mutations.UPSERT_RESOURCE).toHaveBeenCalled()
-          expect(storeOptions.actions.hideModal).toHaveBeenCalled()
           expect(storeOptions.actions.showMessage).toHaveBeenCalledWith(
             expect.anything(),
             expect.objectContaining({
@@ -51,7 +51,7 @@ describe('useFileActionsCreateNewFile', () => {
         }
       })
     })
-    it('show error message if createFile fails', async () => {
+    it('show error message if createFile fails', () => {
       const consoleErrorMock = jest.spyOn(console, 'error').mockImplementation()
       const space = mock<SpaceResource>({ id: '1' })
       getWrapper({
@@ -72,15 +72,16 @@ describe('useFileActionsCreateNewFile', () => {
     })
   })
   describe('createNewFileModal', () => {
-    it('should show modal', async () => {
+    it('should show modal', () => {
       const space = mock<SpaceResource>({ id: '1' })
       getWrapper({
         space,
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           const fileActionOptions: FileActionOptions = { space, resources: [] } as FileActionOptions
           unref(actions)[0].handler(fileActionOptions)
           await nextTick()
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFolder.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFolder.spec.ts
index 450c94414d3..1074a3d1e77 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFolder.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewFolder.spec.ts
@@ -1,6 +1,7 @@
 import { mock } from 'jest-mock-extended'
 import { nextTick, unref } from 'vue'
 import { useFileActionsCreateNewFolder } from '../../../../../src/composables/actions'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import { SpaceResource } from '@ownclouders/web-client/src'
 import { FolderResource } from '@ownclouders/web-client/src/helpers'
 import {
@@ -23,13 +24,14 @@ describe('useFileActionsCreateNewFolder', () => {
       { input: '.', output: 'Folder name cannot be equal to "."' },
       { input: '..', output: 'Folder name cannot be equal to ".."' },
       { input: 'myfolder', output: null }
-    ])('should validate folder name %s', async (data) => {
+    ])('should validate folder name %s', (data) => {
       const space = mock<SpaceResource>({ id: '1' })
       getWrapper({
         space,
-        setup: async ({ checkNewFolderName }) => {
-          const result = checkNewFolderName(data.input)
-          expect(result).toBe(data.output)
+        setup: ({ checkNewFolderName }) => {
+          checkNewFolderName(data.input, (str: string) => {
+            expect(str).toBe(data.output)
+          })
         }
       })
     })
@@ -43,7 +45,6 @@ describe('useFileActionsCreateNewFolder', () => {
           await addNewFolder('myfolder')
           await nextTick()
           expect(storeOptions.modules.Files.mutations.UPSERT_RESOURCE).toHaveBeenCalled()
-          expect(storeOptions.actions.hideModal).toHaveBeenCalled()
           expect(storeOptions.actions.showMessage).toHaveBeenCalledWith(
             expect.anything(),
             expect.objectContaining({
@@ -76,14 +77,15 @@ describe('useFileActionsCreateNewFolder', () => {
     })
   })
   describe('createNewFolderModal', () => {
-    it('should show modal', async () => {
+    it('should show modal', () => {
       const space = mock<SpaceResource>({ id: '1' })
       getWrapper({
         space,
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: ({ actions }) => {
+          const { dispatchModal } = useModals()
           unref(actions)[0].handler()
-          await nextTick()
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewShortcut.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewShortcut.spec.ts
index 86049b47ad4..a1b4f4fe781 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewShortcut.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsCreateNewShortcut.spec.ts
@@ -7,7 +7,7 @@ import {
   RouteLocation,
   getComposableWrapper
 } from 'web-test-helpers'
-import { useFileActionsCreateNewShortcut } from '../../../../../src'
+import { useFileActionsCreateNewShortcut, useModals } from '../../../../../src'
 import { Resource, SpaceResource } from '@ownclouders/web-client'
 
 describe('createNewShortcut', () => {
@@ -34,9 +34,10 @@ describe('createNewShortcut', () => {
     describe('method "handler"', () => {
       it('creates a modal', () => {
         getWrapper({
-          setup: async ({ actions }, { storeOptions }) => {
+          setup: async ({ actions }) => {
+            const { dispatchModal } = useModals()
             await unref(actions)[0].handler()
-            expect(storeOptions.actions.createModal).toHaveBeenCalled()
+            expect(dispatchModal).toHaveBeenCalled()
           }
         })
       })
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsEmptyTrashBin.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsEmptyTrashBin.spec.ts
index f92a137c9ec..9299da763fb 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsEmptyTrashBin.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsEmptyTrashBin.spec.ts
@@ -1,4 +1,5 @@
 import { useFileActionsEmptyTrashBin } from '../../../../../src/composables/actions'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import { createLocationTrash, createLocationSpaces } from '../../../../../src/router'
 import { mock } from 'jest-mock-extended'
 import {
@@ -18,7 +19,7 @@ describe('emptyTrashBin', () => {
 
   describe('isEnabled property', () => {
     it('should be false when location is invalid', () => {
-      const { wrapper } = getWrapper({
+      getWrapper({
         invalidLocation: true,
         setup: ({ actions }, { space }) => {
           expect(unref(actions)[0].isEnabled({ space, resources: [] })).toBe(false)
@@ -26,7 +27,7 @@ describe('emptyTrashBin', () => {
       })
     })
     it('should be false in a space trash bin with insufficient permissions', () => {
-      const { wrapper } = getWrapper({
+      getWrapper({
         driveType: 'project',
         setup: ({ actions }, { space }) => {
           expect(
@@ -41,33 +42,33 @@ describe('emptyTrashBin', () => {
   })
 
   describe('empty trashbin action', () => {
-    it('should trigger the empty trash bin modal window', async () => {
-      const { wrapper } = getWrapper({
-        setup: async ({ actions }, { storeOptions }) => {
+    it('should trigger the empty trash bin modal window', () => {
+      getWrapper({
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler(mock<FileActionOptions>())
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+          expect(dispatchModal).toHaveBeenCalledTimes(1)
         }
       })
     })
   })
 
   describe('method "emptyTrashBin"', () => {
-    it('should hide the modal and show message on success', async () => {
-      const { wrapper } = getWrapper({
+    it('should show message on success', () => {
+      getWrapper({
         setup: async ({ emptyTrashBin }, { space, storeOptions }) => {
           await emptyTrashBin({ space })
 
-          expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
           expect(storeOptions.actions.showMessage).toHaveBeenCalledTimes(1)
         }
       })
     })
 
-    it('should show message on error', async () => {
+    it('should show message on error', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
 
-      const { wrapper } = getWrapper({
+      getWrapper({
         resolveClearTrashBin: false,
         setup: async ({ emptyTrashBin }, { space, storeOptions }) => {
           await emptyTrashBin({ space })
diff --git a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsRename.spec.ts b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsRename.spec.ts
index a0f98f39fe0..715e701cf16 100644
--- a/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsRename.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/files/useFileActionsRename.spec.ts
@@ -1,5 +1,6 @@
 import { ConfigurationManager, useFileActionsRename, useStore } from '../../../../../src'
-import { mockDeep } from 'jest-mock-extended'
+import { useModals } from '../../../../../src/composables/piniaStores'
+import { mock, mockDeep } from 'jest-mock-extended'
 import { Resource, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import {
   createStore,
@@ -40,7 +41,7 @@ describe('rename', () => {
           expectedStatus: false
         }
       ])('should be set correctly', (inputData) => {
-        const { wrapper } = getWrapper({
+        getWrapper({
           setup: ({ actions }, { space }) => {
             const resources = inputData.resources
             expect(unref(actions)[0].isEnabled({ space, resources })).toBe(inputData.expectedStatus)
@@ -51,44 +52,45 @@ describe('rename', () => {
   })
 
   describe('rename action handler', () => {
-    it('should trigger the rename modal window', async () => {
-      const { wrapper } = getWrapper({
-        setup: async ({ actions }, { space, storeOptions }) => {
+    it('should trigger the rename modal window', () => {
+      getWrapper({
+        setup: async ({ actions }, { space }) => {
+          const { dispatchModal } = useModals()
           const resources = [currentFolder]
           await unref(actions)[0].handler({ space, resources })
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+          expect(dispatchModal).toHaveBeenCalledTimes(1)
         }
       })
     })
   })
 
-  describe('method "checkNewName"', () => {
+  describe('method "getNameErrorMsg"', () => {
     it('should not show an error if new name not taken', () => {
-      const { wrapper } = getWrapper({
-        setup: ({ checkNewName }, { storeOptions }) => {
+      getWrapper({
+        setup: ({ getNameErrorMsg }, { storeOptions }) => {
           storeOptions.modules.Files.getters.files.mockReturnValue([
             { name: 'file1', path: '/file1' }
           ])
-          checkNewName({ name: 'currentName', path: '/currentName' } as Resource, 'newName')
-          expect(storeOptions.actions.setModalInputErrorMessage).toHaveBeenCalledWith(
-            expect.anything(),
-            null
+          const message = getNameErrorMsg(
+            { name: 'currentName', path: '/currentName' } as Resource,
+            'newName'
           )
+          expect(message).toEqual(null)
         }
       })
     })
 
     it('should not show an error if new name already exists but in different folder', () => {
-      const { wrapper } = getWrapper({
-        setup: ({ checkNewName }, { storeOptions }) => {
+      getWrapper({
+        setup: ({ getNameErrorMsg }, { storeOptions }) => {
           storeOptions.modules.Files.getters.files.mockReturnValue([
             { name: 'file1', path: '/file1' }
           ])
-          checkNewName({ name: 'currentName', path: '/favorites/currentName' }, 'file1')
-          expect(storeOptions.actions.setModalInputErrorMessage).toHaveBeenCalledWith(
-            expect.anything(),
-            null
+          const message = getNameErrorMsg(
+            mock<Resource>({ name: 'currentName', path: '/favorites/currentName' }),
+            'file1'
           )
+          expect(message).toEqual(null)
         }
       })
     })
@@ -115,55 +117,51 @@ describe('rename', () => {
         message: 'The name "newname" is already taken'
       }
     ])('should detect name errors and display error messages accordingly', (inputData) => {
-      const { wrapper } = getWrapper({
-        setup: ({ checkNewName }, { storeOptions }) => {
-          checkNewName(
-            { name: inputData.currentName, path: `/${inputData.currentName}` },
+      getWrapper({
+        setup: ({ getNameErrorMsg }) => {
+          const message = getNameErrorMsg(
+            mock<Resource>({ name: inputData.currentName, path: `/${inputData.currentName}` }),
             inputData.newName,
             inputData.parentResources
           )
-          expect(storeOptions.actions.setModalInputErrorMessage).toHaveBeenCalledWith(
-            expect.anything(),
-            inputData.message
-          )
+          expect(message).toEqual(inputData.message)
         }
       })
     })
   })
 
   describe('method "renameResource"', () => {
-    it('should call the rename action on a resource in the file list', async () => {
-      const { wrapper } = getWrapper({
+    it('should call the rename action on a resource in the file list', () => {
+      getWrapper({
         setup: async ({ renameResource }, { space, storeOptions }) => {
           const resource = { id: '2', path: '/folder', webDavPath: '/files/admin/folder' }
           renameResource(space, resource, 'new name')
           await nextTick()
-          expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
+          expect(storeOptions.modules.Files.mutations.UPSERT_RESOURCE).toHaveBeenCalledTimes(1)
         }
       })
     })
 
-    it('should call the rename action on the current folder', async () => {
-      const { wrapper } = getWrapper({
+    it('should call the rename action on the current folder', () => {
+      getWrapper({
         setup: async ({ renameResource }, { space, storeOptions }) => {
           renameResource(space, currentFolder, 'new name')
           await nextTick()
-          expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
+          expect(storeOptions.modules.Files.mutations.UPSERT_RESOURCE).toHaveBeenCalledTimes(1)
         }
       })
     })
 
-    it('should handle errors properly', async () => {
+    it('should handle errors properly', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
 
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: async ({ renameResource }, { space, storeOptions, clientService }) => {
           clientService.webdav.moveFiles.mockRejectedValueOnce(new Error())
 
           renameResource(space, currentFolder, 'new name')
           await nextTick()
           await nextTick()
-          expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(0)
           expect(storeOptions.actions.showErrorMessage).toHaveBeenCalledTimes(1)
         }
       })
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDelete.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDelete.spec.ts
index 2883b0f59b6..dc2fb935b15 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDelete.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDelete.spec.ts
@@ -1,4 +1,5 @@
-import { useSpaceActionsDelete } from '../../../../../src'
+import { useSpaceActionsDelete } from '../../../../../src/composables/actions'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import { buildSpace, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import {
   createStore,
@@ -15,7 +16,7 @@ import { Drive } from '@ownclouders/web-client/src/generated'
 describe('delete', () => {
   describe('isEnabled property', () => {
     it('should be false when no resource given', () => {
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [] })).toBe(false)
         }
@@ -30,7 +31,7 @@ describe('delete', () => {
         driveType: 'project',
         special: null
       })
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [buildSpace(spaceMock)] })).toBe(false)
         }
@@ -46,7 +47,7 @@ describe('delete', () => {
         driveType: 'project',
         special: null
       })
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [buildSpace(spaceMock)] })).toBe(true)
         }
@@ -62,7 +63,7 @@ describe('delete', () => {
         driveType: 'project',
         special: null
       })
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [buildSpace(spaceMock)] })).toBe(false)
         }
@@ -71,54 +72,55 @@ describe('delete', () => {
   })
 
   describe('handler', () => {
-    it('should trigger the delete modal window', async () => {
-      const { wrapper } = getWrapper({
+    it('should trigger the delete modal window', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({
             resources: [
               mock<SpaceResource>({ id: '1', canBeDeleted: () => true, driveType: 'project' })
             ]
           })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+          expect(dispatchModal).toHaveBeenCalledTimes(1)
         }
       })
     })
-    it('should not trigger the delete modal window without any resource to delete', async () => {
-      const { wrapper } = getWrapper({
+    it('should not trigger the delete modal window without any resource to delete', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({
             resources: [
               mock<SpaceResource>({ id: '1', canBeDeleted: () => false, driveType: 'project' })
             ]
           })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(0)
+          expect(dispatchModal).toHaveBeenCalledTimes(0)
         }
       })
     })
   })
 
   describe('method "deleteSpace"', () => {
-    it('should hide the modal and show message on success', async () => {
-      const { wrapper } = getWrapper({
-        setup: async ({ actions, deleteSpaces }, { storeOptions, clientService }) => {
+    it('should show message on success', () => {
+      getWrapper({
+        setup: async ({ deleteSpaces }, { storeOptions, clientService }) => {
           clientService.graphAuthenticated.drives.deleteDrive.mockResolvedValue(mockAxiosResolve())
 
           await deleteSpaces([
             mock<SpaceResource>({ id: '1', canBeDeleted: () => true, driveType: 'project' })
           ])
 
-          expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
           expect(storeOptions.actions.showMessage).toHaveBeenCalledTimes(1)
         }
       })
     })
 
-    it('should show message on error', async () => {
+    it('should show message on error', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const { wrapper } = getWrapper({
-        setup: async ({ actions, deleteSpaces }, { clientService, storeOptions }) => {
+      getWrapper({
+        setup: async ({ deleteSpaces }, { clientService, storeOptions }) => {
           clientService.graphAuthenticated.drives.deleteDrive.mockRejectedValue(new Error())
           await deleteSpaces([
             mock<SpaceResource>({ id: '1', canBeDeleted: () => true, driveType: 'project' })
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDisable.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDisable.spec.ts
index 5c9b06bbfd9..adb1fd88187 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDisable.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsDisable.spec.ts
@@ -1,4 +1,5 @@
-import { useSpaceActionsDisable } from '../../../../../src'
+import { useSpaceActionsDisable } from '../../../../../src/composables/actions/spaces'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import { buildSpace, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import {
   createStore,
@@ -15,7 +16,7 @@ import { Drive } from '@ownclouders/web-client/src/generated'
 describe('disable', () => {
   describe('isEnabled property', () => {
     it('should be false when no resource given', () => {
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [] })).toBe(false)
         }
@@ -30,7 +31,7 @@ describe('disable', () => {
         driveType: 'project',
         special: null
       })
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [buildSpace(spaceMock)] })).toBe(true)
         }
@@ -45,7 +46,7 @@ describe('disable', () => {
         },
         special: null
       })
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [buildSpace(spaceMock)] })).toBe(false)
         }
@@ -60,7 +61,7 @@ describe('disable', () => {
         driveType: 'project',
         special: null
       })
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [buildSpace(spaceMock)] })).toBe(false)
         }
@@ -69,52 +70,54 @@ describe('disable', () => {
   })
 
   describe('handler', () => {
-    it('should trigger the disable modal window', async () => {
-      const { wrapper } = getWrapper({
+    it('should trigger the disable modal window', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({
             resources: [
               mock<SpaceResource>({ id: '1', canDisable: () => true, driveType: 'project' })
             ]
           })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+          expect(dispatchModal).toHaveBeenCalledTimes(1)
         }
       })
     })
-    it('should not trigger the disable modal window without any resource', async () => {
-      const { wrapper } = getWrapper({
+    it('should not trigger the disable modal window without any resource', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({
             resources: [
               mock<SpaceResource>({ id: '1', canDisable: () => false, driveType: 'project' })
             ]
           })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(0)
+          expect(dispatchModal).toHaveBeenCalledTimes(0)
         }
       })
     })
   })
 
   describe('method "disableSpace"', () => {
-    it('should hide the modal on success', async () => {
-      const { wrapper, mocks } = getWrapper({
+    it('should show message on success', () => {
+      getWrapper({
         setup: async ({ disableSpaces }, { storeOptions, clientService }) => {
           clientService.graphAuthenticated.drives.disableDrive.mockResolvedValue(mockAxiosResolve())
           await disableSpaces([
             mock<SpaceResource>({ id: '1', canDisable: () => true, driveType: 'project' })
           ])
 
-          expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
+          expect(storeOptions.actions.showMessage).toHaveBeenCalledTimes(1)
         }
       })
     })
 
-    it('should show message on error', async () => {
+    it('should show message on error', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const { wrapper } = getWrapper({
-        setup: async ({ actions, disableSpaces }, { storeOptions, clientService }) => {
+      getWrapper({
+        setup: async ({ disableSpaces }, { storeOptions, clientService }) => {
           clientService.graphAuthenticated.drives.disableDrive.mockRejectedValue(new Error())
           await disableSpaces([
             mock<SpaceResource>({ id: '1', canDisable: () => true, driveType: 'project' })
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditDescription.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditDescription.spec.ts
index cbc05f4843a..480d7bbed27 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditDescription.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditDescription.spec.ts
@@ -1,4 +1,5 @@
 import { useSpaceActionsEditDescription } from '../../../../../src/composables/actions'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import {
   createStore,
   defaultComponentMocks,
@@ -13,41 +14,43 @@ import { SpaceResource } from '@ownclouders/web-client/src'
 
 describe('editDescription', () => {
   describe('handler', () => {
-    it('should trigger the editDescription modal window with one resource', async () => {
-      const { wrapper } = getWrapper({
+    it('should trigger the editDescription modal window with one resource', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({ resources: [{ id: '1' } as SpaceResource] })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+          expect(dispatchModal).toHaveBeenCalledTimes(1)
         }
       })
     })
-    it('should not trigger the editDescription modal window with no resource', async () => {
-      const { wrapper } = getWrapper({
+    it('should not trigger the editDescription modal window with no resource', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({ resources: [] })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(0)
+          expect(dispatchModal).toHaveBeenCalledTimes(0)
         }
       })
     })
   })
 
   describe('method "editDescriptionSpace"', () => {
-    it('should hide the modal on success', async () => {
-      const { wrapper, mocks } = getWrapper({
+    it('should show message on success', () => {
+      getWrapper({
         setup: async ({ actions, editDescriptionSpace }, { storeOptions, clientService }) => {
           clientService.graphAuthenticated.drives.updateDrive.mockResolvedValue(mockAxiosResolve())
           await editDescriptionSpace(mock<SpaceResource>(), 'doesntmatter')
 
-          expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
+          expect(storeOptions.actions.showMessage).toHaveBeenCalledTimes(1)
         }
       })
     })
 
-    it('should show message on error', async () => {
+    it('should show message on error', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const { wrapper, mocks } = getWrapper({
+      getWrapper({
         setup: async ({ actions, editDescriptionSpace }, { storeOptions, clientService }) => {
           clientService.graphAuthenticated.drives.updateDrive.mockRejectedValue(new Error())
           await editDescriptionSpace(mock<SpaceResource>(), 'doesntmatter')
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditQuota.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditQuota.spec.ts
index 29e259faef8..8af3c8d5950 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditQuota.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditQuota.spec.ts
@@ -1,4 +1,5 @@
 import { useSpaceActionsEditQuota } from '../../../../../src/composables/actions'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import { buildSpace } from '@ownclouders/web-client/src/helpers'
 import {
   createStore,
@@ -57,9 +58,10 @@ describe('editQuota', () => {
   describe('handler', () => {
     it('should create a modal', () => {
       getWrapper({
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({ resources: [] })
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
@@ -91,7 +93,7 @@ function getWrapper({
   return {
     wrapper: getComposableWrapper(
       () => {
-        const instance = useSpaceActionsEditQuota({ store })
+        const instance = useSpaceActionsEditQuota()
         setup(instance, { storeOptions })
       },
       {
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditReadmeContent.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditReadmeContent.spec.ts
index 70eb2b48dd8..5dacfdd08ca 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditReadmeContent.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsEditReadmeContent.spec.ts
@@ -1,4 +1,5 @@
 import { useSpaceActionsEditReadmeContent } from '../../../../../src/composables/actions'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import { SpaceResource, buildSpace } from '@ownclouders/web-client/src/helpers'
 import { createStore, defaultStoreMockOptions, getComposableWrapper } from 'web-test-helpers'
 import { unref } from 'vue'
@@ -75,9 +76,10 @@ describe('editReadmeContent', () => {
   describe('method "handler"', () => {
     it('creates a modal', () => {
       getWrapper({
-        setup: async ({ actions }, { storeOptions }) => {
+        setup: async ({ actions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({ resources: [mock<SpaceResource>()] })
-          expect(storeOptions.actions.createModal).toHaveBeenCalled()
+          expect(dispatchModal).toHaveBeenCalled()
         }
       })
     })
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRename.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRename.spec.ts
index 0e7c5d4af8a..7c67ecb9232 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRename.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRename.spec.ts
@@ -1,4 +1,5 @@
-import { useSpaceActionsRename } from '../../../../../src'
+import { useSpaceActionsRename } from '../../../../../src/composables/actions/spaces'
+import { useModals } from '../../../../../src/composables/piniaStores'
 import { mock } from 'jest-mock-extended'
 import {
   createStore,
@@ -13,46 +14,47 @@ import { SpaceResource } from '@ownclouders/web-client/src'
 
 describe('rename', () => {
   describe('handler', () => {
-    it('should trigger the rename modal window', async () => {
-      const { wrapper } = getWrapper({
+    it('should trigger the rename modal window', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({
             resources: [{ id: '1', name: 'renamed space' } as SpaceResource]
           })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+          expect(dispatchModal).toHaveBeenCalledTimes(1)
         }
       })
     })
-    it('should not trigger the rename modal window without any resource', async () => {
-      const { wrapper } = getWrapper({
+    it('should not trigger the rename modal window without any resource', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({ resources: [] })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(0)
+          expect(dispatchModal).toHaveBeenCalledTimes(0)
         }
       })
     })
   })
   describe('method "renameSpace"', () => {
-    it('should hide the modal and show message on success', async () => {
-      const { wrapper, mocks } = getWrapper({
+    it('should show message on success', () => {
+      getWrapper({
         setup: async ({ renameSpace }, { storeOptions, clientService }) => {
           clientService.graphAuthenticated.drives.updateDrive.mockResolvedValue(mockAxiosResolve())
-          await renameSpace(1, 'renamed space')
+          await renameSpace(mock<SpaceResource>({ id: '1' }), 'renamed space')
 
-          expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
           expect(storeOptions.actions.showMessage).toHaveBeenCalledTimes(1)
         }
       })
     })
 
-    it('should show message on error', async () => {
+    it('should show message on error', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: async ({ renameSpace }, { storeOptions, clientService }) => {
           clientService.graphAuthenticated.drives.updateDrive.mockRejectedValue(new Error())
-          await renameSpace(1, 'renamed space')
+          await renameSpace(mock<SpaceResource>({ id: '1' }), 'renamed space')
 
           expect(storeOptions.actions.showErrorMessage).toHaveBeenCalledTimes(1)
         }
diff --git a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRestore.spec.ts b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRestore.spec.ts
index 22505646135..58ac852d40e 100644
--- a/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRestore.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/actions/spaces/useSpaceActionsRestore.spec.ts
@@ -1,4 +1,4 @@
-import { useSpaceActionsRestore } from '../../../../../src'
+import { useSpaceActionsRestore } from '../../../../../src/composables/actions/spaces'
 import { buildSpace, SpaceResource } from '@ownclouders/web-client/src/helpers'
 import { mock } from 'jest-mock-extended'
 import {
@@ -11,11 +11,12 @@ import {
 } from 'web-test-helpers'
 import { unref } from 'vue'
 import { Drive } from '@ownclouders/web-client/src/generated'
+import { useModals } from '../../../../../src/composables/piniaStores'
 
 describe('restore', () => {
   describe('isEnabled property', () => {
     it('should be false when no resource given', () => {
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }, { storeOptions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [] })).toBe(false)
         }
@@ -30,7 +31,7 @@ describe('restore', () => {
         driveType: 'project',
         special: null
       })
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }, { storeOptions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [buildSpace(spaceMock)] })).toBe(false)
         }
@@ -46,7 +47,7 @@ describe('restore', () => {
         driveType: 'project',
         special: null
       })
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }, { storeOptions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [buildSpace(spaceMock)] })).toBe(true)
         }
@@ -62,7 +63,7 @@ describe('restore', () => {
         driveType: 'project',
         special: null
       })
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: ({ actions }, { storeOptions }) => {
           expect(unref(actions)[0].isEnabled({ resources: [buildSpace(spaceMock)] })).toBe(false)
         }
@@ -71,47 +72,49 @@ describe('restore', () => {
   })
 
   describe('handler', () => {
-    it('should trigger the restore modal window', async () => {
-      const { wrapper } = getWrapper({
+    it('should trigger the restore modal window', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({
             resources: [
               mock<SpaceResource>({ id: '1', canRestore: () => true, driveType: 'project' })
             ]
           })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(1)
+          expect(dispatchModal).toHaveBeenCalledTimes(1)
         }
       })
     })
-    it('should not trigger the restore modal window without any resource', async () => {
-      const { wrapper } = getWrapper({
+    it('should not trigger the restore modal window without any resource', () => {
+      getWrapper({
         setup: async ({ actions }, { storeOptions }) => {
+          const { dispatchModal } = useModals()
           await unref(actions)[0].handler({
             resources: [mock<SpaceResource>({ id: '1', canRestore: () => false })]
           })
 
-          expect(storeOptions.actions.createModal).toHaveBeenCalledTimes(0)
+          expect(dispatchModal).toHaveBeenCalledTimes(0)
         }
       })
     })
   })
 
   describe('method "restoreSpace"', () => {
-    it('should hide the modal on success', async () => {
-      const { wrapper } = getWrapper({
+    it('should show message on success', () => {
+      getWrapper({
         setup: async ({ restoreSpaces }, { storeOptions, clientService }) => {
           clientService.graphAuthenticated.drives.updateDrive.mockResolvedValue(mockAxiosResolve())
           await restoreSpaces([mock<SpaceResource>({ id: '1', canRestore: () => true })])
 
-          expect(storeOptions.actions.hideModal).toHaveBeenCalledTimes(1)
+          expect(storeOptions.actions.showMessage).toHaveBeenCalledTimes(1)
         }
       })
     })
 
-    it('should show message on error', async () => {
+    it('should show message on error', () => {
       jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const { wrapper } = getWrapper({
+      getWrapper({
         setup: async ({ restoreSpaces }, { storeOptions, clientService }) => {
           clientService.graphAuthenticated.drives.updateDrive.mockRejectedValue(new Error())
           await restoreSpaces([mock<SpaceResource>({ id: '1', canRestore: () => true })])
diff --git a/packages/web-pkg/tests/unit/composables/piniaStores/modals.spec.ts b/packages/web-pkg/tests/unit/composables/piniaStores/modals.spec.ts
new file mode 100644
index 00000000000..d5e76129322
--- /dev/null
+++ b/packages/web-pkg/tests/unit/composables/piniaStores/modals.spec.ts
@@ -0,0 +1,73 @@
+import { getComposableWrapper } from 'web-test-helpers'
+import { useModals } from '../../../../src/composables/piniaStores'
+import { createPinia, setActivePinia } from 'pinia'
+
+describe('useModals', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('method "dispatchModal"', () => {
+    it('adds a modal to the stack of modals', () => {
+      getWrapper({
+        setup: (instance) => {
+          const data = { title: 'test' }
+          const modal = instance.dispatchModal(data)
+
+          expect(modal.id).toBeDefined()
+          expect(modal.title).toEqual(data.title)
+          expect(instance.activeModal).toEqual(modal)
+        }
+      })
+    })
+  })
+  describe('method "updateModal"', () => {
+    it('updates a modal with new data', () => {
+      getWrapper({
+        setup: (instance) => {
+          const modal = instance.dispatchModal({ title: 'test' })
+          const newTitle = 'new title'
+          instance.updateModal(modal.id, 'title', newTitle)
+          expect(instance.activeModal.title).toEqual(newTitle)
+        }
+      })
+    })
+  })
+  describe('method "removeModal"', () => {
+    it('removes an existing modal', () => {
+      getWrapper({
+        setup: (instance) => {
+          const modal = instance.dispatchModal({ title: 'test' })
+          instance.removeModal(modal.id)
+          expect(instance.modals.length).toBe(0)
+        }
+      })
+    })
+  })
+  describe('method "setModalActive"', () => {
+    it('moves a modal to the first position of the modal stack, making it active', () => {
+      getWrapper({
+        setup: (instance) => {
+          const modal = instance.dispatchModal({ title: 'test' })
+          const modal2 = instance.dispatchModal({ title: 'test2' })
+
+          expect(instance.activeModal.id).toEqual(modal2.id)
+          instance.setModalActive(modal.id)
+          expect(instance.activeModal.id).toEqual(modal.id)
+        }
+      })
+    })
+  })
+})
+
+function getWrapper({ setup }: { setup: (instance: ReturnType<typeof useModals>) => void }) {
+  return {
+    wrapper: getComposableWrapper(
+      () => {
+        const instance = useModals()
+        setup(instance)
+      },
+      { pluginOptions: { pinia: false } }
+    )
+  }
+}
diff --git a/packages/web-pkg/tests/unit/composables/spaces/useSpaceHelpers.spec.ts b/packages/web-pkg/tests/unit/composables/spaces/useSpaceHelpers.spec.ts
index 1c37c817da5..b5d7a7cd090 100644
--- a/packages/web-pkg/tests/unit/composables/spaces/useSpaceHelpers.spec.ts
+++ b/packages/web-pkg/tests/unit/composables/spaces/useSpaceHelpers.spec.ts
@@ -1,10 +1,5 @@
 import { useSpaceHelpers } from '../../../../src/composables/spaces'
-import {
-  createStore,
-  defaultComponentMocks,
-  defaultStoreMockOptions,
-  getComposableWrapper
-} from 'web-test-helpers'
+import { defaultComponentMocks, getComposableWrapper } from 'web-test-helpers'
 
 describe('useSpaceHelpers', () => {
   it('should be valid', () => {
@@ -13,28 +8,28 @@ describe('useSpaceHelpers', () => {
   describe('method "checkSpaceNameModalInput"', () => {
     it('should not show an error message with a valid space name', () => {
       getWrapper({
-        setup: ({ checkSpaceNameModalInput }, { storeOptions }) => {
-          checkSpaceNameModalInput('Space')
-          const { setModalInputErrorMessage } = storeOptions.actions
-          expect(setModalInputErrorMessage).toHaveBeenCalledWith(expect.anything(), null)
+        setup: ({ checkSpaceNameModalInput }) => {
+          checkSpaceNameModalInput('Space', (value) => {
+            expect(value).toEqual(null)
+          })
         }
       })
     })
     it('should show an error message with an empty name', () => {
       getWrapper({
-        setup: ({ checkSpaceNameModalInput }, { storeOptions }) => {
-          checkSpaceNameModalInput('')
-          const { setModalInputErrorMessage } = storeOptions.actions
-          expect(setModalInputErrorMessage).not.toHaveBeenCalledWith(expect.anything(), null)
+        setup: ({ checkSpaceNameModalInput }) => {
+          checkSpaceNameModalInput('', (value) => {
+            expect(value).not.toEqual(null)
+          })
         }
       })
     })
     it('should show an error with an name longer than 255 characters', () => {
       getWrapper({
-        setup: ({ checkSpaceNameModalInput }, { storeOptions }) => {
-          checkSpaceNameModalInput('n'.repeat(256))
-          const { setModalInputErrorMessage } = storeOptions.actions
-          expect(setModalInputErrorMessage).not.toHaveBeenCalledWith(expect.anything(), null)
+        setup: ({ checkSpaceNameModalInput }) => {
+          checkSpaceNameModalInput('n'.repeat(256), (value) => {
+            expect(value).not.toEqual(null)
+          })
         }
       })
     })
@@ -42,10 +37,10 @@ describe('useSpaceHelpers', () => {
       'should show an error message with a name including a special character',
       (specialChar) => {
         getWrapper({
-          setup: ({ checkSpaceNameModalInput }, { storeOptions }) => {
-            checkSpaceNameModalInput(specialChar)
-            const { setModalInputErrorMessage } = storeOptions.actions
-            expect(setModalInputErrorMessage).not.toHaveBeenCalledWith(expect.anything(), null)
+          setup: ({ checkSpaceNameModalInput }) => {
+            checkSpaceNameModalInput(specialChar, (value) => {
+              expect(value).not.toEqual(null)
+            })
           }
         })
       }
@@ -53,25 +48,16 @@ describe('useSpaceHelpers', () => {
   })
 })
 
-function getWrapper({
-  setup
-}: {
-  setup: (
-    instance: ReturnType<typeof useSpaceHelpers>,
-    options: { storeOptions: typeof defaultStoreMockOptions }
-  ) => void
-}) {
+function getWrapper({ setup }: { setup: (instance: ReturnType<typeof useSpaceHelpers>) => void }) {
   const mocks = defaultComponentMocks()
-  const storeOptions = defaultStoreMockOptions
-  const store = createStore(storeOptions)
+
   return {
     wrapper: getComposableWrapper(
       () => {
         const instance = useSpaceHelpers()
-        setup(instance, { storeOptions })
+        setup(instance)
       },
       {
-        store,
         mocks
       }
     )
diff --git a/packages/web-pkg/tests/unit/helpers/resource/conflictHandling/conflictDialog.spec.ts b/packages/web-pkg/tests/unit/helpers/resource/conflictHandling/conflictDialog.spec.ts
index 0804910e13f..31e39cee48a 100644
--- a/packages/web-pkg/tests/unit/helpers/resource/conflictHandling/conflictDialog.spec.ts
+++ b/packages/web-pkg/tests/unit/helpers/resource/conflictHandling/conflictDialog.spec.ts
@@ -1,9 +1,12 @@
 import { mockDeep } from 'jest-mock-extended'
 import { Resource } from '@ownclouders/web-client'
 import { ConflictDialog, ResolveConflict } from '../../../../../src/helpers/resource'
+import { useModals } from '../../../../../src/composables/piniaStores'
+import { setActivePinia } from 'pinia'
+import { createMockStore } from 'web-test-helpers'
 
-const getConflictDialogInstance = ({ createModal = jest.fn() } = {}) => {
-  return new ConflictDialog(createModal, jest.fn(), jest.fn(), jest.fn(), jest.fn(), jest.fn())
+const getConflictDialogInstance = () => {
+  return new ConflictDialog(jest.fn(), jest.fn(), jest.fn(), jest.fn())
 }
 
 describe('conflict dialog', () => {
@@ -31,10 +34,11 @@ describe('conflict dialog', () => {
   })
   describe('method "resolveFileExists"', () => {
     it('should create the modal in the end', () => {
-      const createModal = jest.fn()
-      const conflictDialog = getConflictDialogInstance({ createModal })
+      setActivePinia(createMockStore())
+      const { dispatchModal } = useModals()
+      const conflictDialog = getConflictDialogInstance()
       conflictDialog.resolveFileExists(mockDeep<Resource>(), 2, true)
-      expect(createModal).toHaveBeenCalledTimes(1)
+      expect(dispatchModal).toHaveBeenCalledTimes(1)
     })
   })
 })
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index a860977de2e..05b491801d4 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -6,53 +6,15 @@
       <span v-text="$gettext('Skip to main')" />
     </skip-to>
     <component :is="layout"></component>
-    <portal-target name="app.runtime.modal" multiple />
-    <oc-modal
-      v-if="modal.displayed"
-      :variation="modal.variation"
-      :icon="modal.icon"
-      :title="modal.title"
-      :message="modal.message"
-      :has-input="modal.hasInput"
-      :input-description="modal.inputDescription"
-      :input-placeholder="modal.inputPlaceholder"
-      :input-disabled="modal.inputDisabled"
-      :input-error="modal.inputError"
-      :input-label="modal.inputLabel"
-      :input-selection-range="modal.inputSelectionRange"
-      :input-type="modal.inputType"
-      :input-value="modal.inputValue"
-      :without-button-confirm="modal.withoutButtonConfirm"
-      :button-cancel-text="modal.cancelText"
-      :button-confirm-text="modal.confirmText"
-      :button-confirm-disabled="modal.confirmDisabled || !!modal.inputError"
-      :contextual-helper-label="modal.contextualHelperLabel"
-      :contextual-helper-data="modal.contextualHelperData"
-      :hide-actions="modal.hideActions"
-      @cancel="onModalCancel"
-      @confirm="onModalConfirm"
-      @input="modal.onInput"
-      @mounted="focusModal"
-      @before-unmount="focusModal"
-    >
-      <template v-if="modal.customContent || modal.customComponent" #content>
-        <div v-if="modal.customContent" v-html="modal.customContent" />
-        <component
-          :is="modal.customComponent"
-          v-else
-          ref="modalComponent"
-          :modal="modal"
-          v-bind="modal.customComponentAttrs?.() || {}"
-        />
-      </template>
-    </oc-modal>
+    <modal-wrapper />
   </div>
 </template>
 <script lang="ts">
 import { mapGetters, mapState } from 'vuex'
 import SkipTo from './components/SkipTo.vue'
+import ModalWrapper from './components/ModalWrapper.vue'
 import { useLayout } from './composables/layout'
-import { computed, defineComponent, ref, unref, watch, VNodeRef } from 'vue'
+import { computed, defineComponent, unref, watch } from 'vue'
 import { additionalTranslations } from './helpers/additionalTranslations' // eslint-disable-line
 import { eventBus, useRouter, useStore, useThemeStore } from '@ownclouders/web-pkg'
 import { useHead } from './composables/head'
@@ -61,7 +23,8 @@ import { storeToRefs } from 'pinia'
 
 export default defineComponent({
   components: {
-    SkipTo
+    SkipTo,
+    ModalWrapper
   },
   setup() {
     const store = useStore()
@@ -75,25 +38,6 @@ export default defineComponent({
 
     const { layout } = useLayout({ store, router })
 
-    const modalComponent = ref<VNodeRef>()
-    const onModalConfirm = (...args) => {
-      if (store.state.modal.onConfirm) {
-        return store.state.modal.onConfirm(...args, { component: modalComponent })
-      }
-      if ((unref(modalComponent) as any)?.onConfirm) {
-        return (unref(modalComponent) as any)?.onConfirm()
-      }
-    }
-
-    const onModalCancel = (...args) => {
-      if (store.state.modal.onCancel) {
-        return store.state.modal.onCancel(...args, { component: modalComponent })
-      }
-      if ((unref(modalComponent) as any)?.onCancel) {
-        return (unref(modalComponent) as any)?.onCancel()
-      }
-    }
-
     watch(
       () => unref(activeRoute),
       (newRoute, oldRoute) => {
@@ -121,10 +65,7 @@ export default defineComponent({
 
     return {
       layout,
-      currentTheme,
-      modalComponent,
-      onModalConfirm,
-      onModalCancel
+      currentTheme
     }
   },
   data() {
@@ -162,12 +103,6 @@ export default defineComponent({
     )
   },
   methods: {
-    focusModal(component, event) {
-      ;(this as any).focus({
-        revert: event === 'beforeUnmount'
-      })
-    },
-
     announceRouteChange(pageTitle) {
       this.announcement = this.$gettext('Navigated to %{ pageTitle }', { pageTitle })
     },
diff --git a/packages/web-runtime/src/components/EditPasswordModal.vue b/packages/web-runtime/src/components/EditPasswordModal.vue
index 1e8e9cc3cb0..79ce312f23d 100644
--- a/packages/web-runtime/src/components/EditPasswordModal.vue
+++ b/packages/web-runtime/src/components/EditPasswordModal.vue
@@ -1,65 +1,93 @@
 <template>
-  <oc-modal
-    :title="$gettext('Change password')"
-    :button-cancel-text="$gettext('Cancel')"
-    :button-confirm-text="$gettext('Confirm')"
-    :button-confirm-disabled="confirmButtonDisabled"
-    @confirm="editPassword"
-    @cancel="$emit('cancel')"
-  >
-    <template #content>
-      <oc-text-input
-        v-model="currentPassword"
-        :label="$gettext('Current password')"
-        type="password"
-        :fix-message-line="true"
-      />
-      <oc-text-input
-        v-model="newPassword"
-        :label="$gettext('New password')"
-        type="password"
-        :fix-message-line="true"
-        @change="validatePasswordConfirm"
-      />
-      <oc-text-input
-        v-model="newPasswordConfirm"
-        :label="$gettext('Repeat new password')"
-        type="password"
-        :fix-message-line="true"
-        :error-message="passwordConfirmErrorMessage"
-        @change="validatePasswordConfirm"
-      />
-    </template>
-  </oc-modal>
+  <oc-text-input
+    v-model="currentPassword"
+    :label="$gettext('Current password')"
+    type="password"
+    :fix-message-line="true"
+  />
+  <oc-text-input
+    v-model="newPassword"
+    :label="$gettext('New password')"
+    type="password"
+    :fix-message-line="true"
+    @change="validatePasswordConfirm"
+  />
+  <oc-text-input
+    v-model="newPasswordConfirm"
+    :label="$gettext('Repeat new password')"
+    type="password"
+    :fix-message-line="true"
+    :error-message="passwordConfirmErrorMessage"
+    @change="validatePasswordConfirm"
+  />
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { computed, defineComponent, ref, PropType, unref, watch } from 'vue'
+import { useGettext } from 'vue3-gettext'
+import { Modal, useClientService, useStore } from '@ownclouders/web-pkg'
 
 export default defineComponent({
   name: 'EditPasswordModal',
-  emits: ['cancel', 'confirm'],
-  data: function () {
-    return {
-      currentPassword: '',
-      newPassword: '',
-      newPasswordConfirm: '',
-      passwordConfirmErrorMessage: ''
-    }
-  },
-  computed: {
-    confirmButtonDisabled() {
+  props: { modal: { type: Object as PropType<Modal>, required: true } },
+  emits: ['update:confirmDisabled'],
+  setup(props, { emit, expose }) {
+    const store = useStore()
+    const clientService = useClientService()
+    const { $gettext } = useGettext()
+
+    const currentPassword = ref('')
+    const newPassword = ref('')
+    const newPasswordConfirm = ref('')
+    const passwordConfirmErrorMessage = ref('')
+
+    const confirmButtonDisabled = computed(() => {
       return (
-        !this.currentPassword.trim().length ||
-        !this.newPassword.trim().length ||
-        this.newPassword !== this.newPasswordConfirm
+        !unref(currentPassword).trim().length ||
+        !unref(newPassword).trim().length ||
+        unref(newPassword) !== unref(newPasswordConfirm)
       )
+    })
+
+    watch(
+      confirmButtonDisabled,
+      () => {
+        emit('update:confirmDisabled', unref(confirmButtonDisabled))
+      },
+      { immediate: true }
+    )
+
+    const onConfirm = () => {
+      return clientService.graphAuthenticated.users
+        .changeOwnPassword(unref(currentPassword).trim(), unref(newPassword).trim())
+        .then(() => {
+          store.dispatch('showMessage', {
+            title: $gettext('Password was changed successfully')
+          })
+        })
+        .catch((error) => {
+          console.error(error)
+          store.dispatch('showErrorMessage', {
+            title: $gettext('Failed to change password'),
+            error
+          })
+        })
+    }
+
+    expose({ onConfirm })
+
+    return {
+      currentPassword,
+      newPassword,
+      newPasswordConfirm,
+      passwordConfirmErrorMessage,
+
+      // unit tests
+      confirmButtonDisabled
     }
   },
+
   methods: {
-    editPassword() {
-      this.$emit('confirm', this.currentPassword, this.newPassword)
-    },
     validatePasswordConfirm() {
       this.passwordConfirmErrorMessage = ''
 
diff --git a/packages/web-runtime/src/components/ModalWrapper.vue b/packages/web-runtime/src/components/ModalWrapper.vue
new file mode 100644
index 00000000000..c0a4e02d7f6
--- /dev/null
+++ b/packages/web-runtime/src/components/ModalWrapper.vue
@@ -0,0 +1,107 @@
+<template>
+  <oc-modal
+    v-if="modal"
+    :title="modal.title"
+    :variation="modal.variation"
+    :icon="modal.icon"
+    :message="modal.message"
+    :has-input="modal.hasInput"
+    :input-description="modal.inputDescription"
+    :input-error="modal.inputError"
+    :input-label="modal.inputLabel"
+    :input-selection-range="modal.inputSelectionRange"
+    :input-type="modal.inputType"
+    :input-value="modal.inputValue"
+    :hide-actions="modal.hideActions"
+    :hide-confirm-button="modal.hideConfirmButton"
+    :button-cancel-text="modal.cancelText"
+    :button-confirm-text="modal.confirmText"
+    :button-confirm-disabled="modal.confirmDisabled"
+    :contextual-helper-label="modal.contextualHelperLabel"
+    :contextual-helper-data="modal.contextualHelperData"
+    :focus-trap-initial="modal.focusTrapInitial"
+    @cancel="onModalCancel"
+    @confirm="onModalConfirm"
+    @input="onModalInput"
+  >
+    <template v-if="modal.customComponent" #content>
+      <component
+        :is="modal.customComponent"
+        ref="customComponentRef"
+        :modal="modal"
+        v-bind="modal.customComponentAttrs?.() || {}"
+        @confirm="onModalConfirm"
+        @cancel="onModalCancel"
+        @update:confirm-disabled="onModalConfirmDisabled"
+      />
+    </template>
+  </oc-modal>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, unref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useLoadingService, useModals, CustomModalComponentInstance } from '@ownclouders/web-pkg'
+
+export default defineComponent({
+  setup() {
+    const loadingService = useLoadingService()
+
+    const modalStore = useModals()
+    const { activeModal: modal } = storeToRefs(modalStore)
+    const { updateModal, removeModal } = modalStore
+
+    const customComponentRef = ref<CustomModalComponentInstance>()
+
+    const onModalConfirm = async (value?: string) => {
+      try {
+        updateModal(unref(modal)?.id, 'confirmDisabled', true)
+
+        if (unref(modal)?.onConfirm) {
+          await loadingService.addTask(() => unref(modal).onConfirm(value))
+        } else if (unref(customComponentRef)?.onConfirm) {
+          await loadingService.addTask(() => unref(customComponentRef).onConfirm())
+        }
+      } catch (error) {
+        updateModal(unref(modal)?.id, 'confirmDisabled', false)
+        return
+      }
+
+      removeModal(unref(modal)?.id)
+    }
+
+    const onModalCancel = () => {
+      if (unref(modal)?.onCancel) {
+        unref(modal).onCancel()
+      } else if (unref(customComponentRef)?.onCancel) {
+        unref(customComponentRef).onCancel()
+      }
+
+      removeModal(unref(modal)?.id)
+    }
+
+    const onModalInput = (value: string) => {
+      if (!unref(modal).onInput) {
+        return
+      }
+
+      // provide onError callback
+      const setError = (error: string) => updateModal(unref(modal).id, 'inputError', error)
+      unref(modal).onInput(value, setError)
+    }
+
+    const onModalConfirmDisabled = (value: boolean) => {
+      updateModal(unref(modal).id, 'confirmDisabled', value)
+    }
+
+    return {
+      customComponentRef,
+      modal,
+      onModalConfirm,
+      onModalCancel,
+      onModalInput,
+      onModalConfirmDisabled
+    }
+  }
+})
+</script>
diff --git a/packages/web-runtime/src/container/bootstrap.ts b/packages/web-runtime/src/container/bootstrap.ts
index 2d87fd13b3c..477c4644c0f 100644
--- a/packages/web-runtime/src/container/bootstrap.ts
+++ b/packages/web-runtime/src/container/bootstrap.ts
@@ -8,7 +8,7 @@ import { loadTheme } from '../helpers/theme'
 import OwnCloud from 'owncloud-sdk'
 import { createGettext, GetTextOptions, Language } from 'vue3-gettext'
 import { getBackendVersion, getWebVersion } from './versions'
-import { useThemeStore } from '@ownclouders/web-pkg'
+import { useModals, useThemeStore } from '@ownclouders/web-pkg'
 import { authService } from '../services/auth'
 import {
   ClientService,
@@ -330,6 +330,10 @@ export const announceTheme = async ({
   })
 }
 
+export const announcePiniaStores = () => {
+  useModals()
+}
+
 /**
  * announce runtime translations by injecting them into the getTextPlugin
  *
diff --git a/packages/web-runtime/src/index.ts b/packages/web-runtime/src/index.ts
index 7bfa4099683..1ca5687a9d1 100644
--- a/packages/web-runtime/src/index.ts
+++ b/packages/web-runtime/src/index.ts
@@ -15,6 +15,7 @@ import {
   announceClientService,
   announceStore,
   announceTheme,
+  announcePiniaStores,
   announceCustomStyles,
   announceTranslations,
   announceVersions,
@@ -92,6 +93,7 @@ export const bootstrapApp = async (configurationPath: string): Promise<void> =>
   announcePreviewService({ app, store, configurationManager })
   announcePasswordPolicyService({ app })
   await announceClient(runtimeConfiguration)
+  announcePiniaStores()
 
   app.config.globalProperties.$wormhole = createWormhole()
   app.use(PortalVue, {
diff --git a/packages/web-runtime/src/pages/account.vue b/packages/web-runtime/src/pages/account.vue
index fa78f2c700d..8021433a368 100644
--- a/packages/web-runtime/src/pages/account.vue
+++ b/packages/web-runtime/src/pages/account.vue
@@ -4,11 +4,6 @@
     <div class="oc-flex oc-flex-between oc-flex-bottom oc-width-1-1 oc-border-b oc-py">
       <h1 id="account-page-title" class="oc-page-title oc-m-rm">{{ pageTitle }}</h1>
       <div>
-        <edit-password-modal
-          v-if="editPasswordModalOpen"
-          @cancel="closeEditPasswordModal"
-          @confirm="editPassword"
-        ></edit-password-modal>
         <oc-button
           v-if="!isChangePasswordDisabled"
           variation="primary"
@@ -144,7 +139,6 @@
 </template>
 
 <script lang="ts">
-import { mapActions } from 'vuex'
 import EditPasswordModal from '../components/EditPasswordModal.vue'
 import { SettingsBundle, LanguageOption, SettingsValue } from '../helpers/settings'
 import { computed, defineComponent, onMounted, unref, ref } from 'vue'
@@ -154,6 +148,7 @@ import {
   useCapabilityGraphPersonalDataExport,
   useClientService,
   useGetMatchingSpace,
+  useModals,
   useStore
 } from '@ownclouders/web-pkg'
 import { useTask } from 'vue-concurrency'
@@ -170,7 +165,6 @@ export default defineComponent({
   name: 'AccountPage',
   components: {
     AppLoadingSpinner,
-    EditPasswordModal,
     GdprExport
   },
   setup() {
@@ -187,6 +181,7 @@ export default defineComponent({
     const disableEmailNotificationsValue = ref<boolean>()
     const viewOptionWebDavDetailsValue = ref<boolean>(store.getters['Files/areWebDavDetailsShown'])
     const sseEnabled = useCapabilityCoreSSE()
+    const { dispatchModal } = useModals()
 
     // FIXME: Use settings service capability when we have it
     const isSettingsServiceSupported = computed(
@@ -415,6 +410,13 @@ export default defineComponent({
         : true
     })
 
+    const showEditPasswordModal = () => {
+      dispatchModal({
+        title: $gettext('Change password'),
+        customComponent: EditPasswordModal
+      })
+    }
+
     return {
       clientService,
       languageOptions,
@@ -434,44 +436,14 @@ export default defineComponent({
       viewOptionWebDavDetailsValue,
       loadAccountBundleTask,
       loadGraphUserTask,
-      loadValuesListTask
-    }
-  },
-  data() {
-    return {
-      editPasswordModalOpen: false
+      loadValuesListTask,
+      showEditPasswordModal
     }
   },
   computed: {
     pageTitle() {
       return this.$gettext(this.$route.meta.title as string)
     }
-  },
-  methods: {
-    ...mapActions(['showMessage', 'showErrorMessage']),
-    showEditPasswordModal() {
-      this.editPasswordModalOpen = true
-    },
-    closeEditPasswordModal() {
-      this.editPasswordModalOpen = false
-    },
-    editPassword(currentPassword, newPassword) {
-      return this.clientService.graphAuthenticated.users
-        .changeOwnPassword(currentPassword.trim(), newPassword.trim())
-        .then(() => {
-          this.closeEditPasswordModal()
-          this.showMessage({
-            title: this.$gettext('Password was changed successfully')
-          })
-        })
-        .catch((error) => {
-          console.error(error)
-          this.showErrorMessage({
-            title: this.$gettext('Failed to change password'),
-            error
-          })
-        })
-    }
   }
 })
 </script>
diff --git a/packages/web-runtime/src/services/auth/authService.ts b/packages/web-runtime/src/services/auth/authService.ts
index 5b9bc458959..0d588838d46 100644
--- a/packages/web-runtime/src/services/auth/authService.ts
+++ b/packages/web-runtime/src/services/auth/authService.ts
@@ -298,10 +298,7 @@ export class AuthService {
     // TODO: create UserUnloadTask interface and allow registering unload-tasks in the authService
     await this.store.dispatch('runtime/auth/clearUserContext')
     await this.store.dispatch('resetUserState')
-    await Promise.all([
-      this.store.dispatch('clearDynamicNavItems'),
-      this.store.dispatch('hideModal')
-    ])
+    await this.store.dispatch('clearDynamicNavItems')
   }
 
   private handleDelegatedTokenUpdate(event: MessageEvent): void {
diff --git a/packages/web-runtime/src/store/index.ts b/packages/web-runtime/src/store/index.ts
index 6b3d651cf93..2c63a6f851d 100644
--- a/packages/web-runtime/src/store/index.ts
+++ b/packages/web-runtime/src/store/index.ts
@@ -4,7 +4,6 @@ import apps from './apps'
 import auth from './auth'
 import config from './config'
 import user from './user'
-import modal from './modal'
 import navigation from './navigation'
 import spaces from './spaces'
 
@@ -25,7 +24,6 @@ export default {
     apps,
     user,
     config,
-    modal,
     navigation,
     runtime
   },
diff --git a/packages/web-runtime/src/store/modal.ts b/packages/web-runtime/src/store/modal.ts
deleted file mode 100644
index 09d4b9465b3..00000000000
--- a/packages/web-runtime/src/store/modal.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-const emptyReturn = () => undefined
-
-const state = {
-  displayed: false,
-  variation: 'passive',
-  icon: '',
-  title: '',
-  message: '',
-  cancelText: '',
-  confirmText: '',
-  withoutButtonConfirm: false,
-  // Input values
-  confirmDisabled: false,
-  hasInput: false,
-  inputDisabled: false,
-  inputValue: '',
-  inputSelectionRange: null,
-  inputPlaceholder: '',
-  inputLabel: '',
-  inputError: '',
-  inputType: 'text',
-  // Events
-  onCancel: emptyReturn,
-  onConfirm: emptyReturn,
-  onInput: emptyReturn,
-  contextualHelperLabel: '',
-  contextualHelperData: {},
-  customContent: '',
-  hideActions: false
-}
-
-const actions = {
-  createModal({ commit }, modal) {
-    commit('CREATE_MODAL', modal)
-  },
-
-  hideModal({ commit }) {
-    commit('HIDE_MODAL')
-  },
-
-  setModalInputErrorMessage({ commit }, error) {
-    commit('SET_INPUT_ERROR_MESSAGE', error)
-  },
-
-  toggleModalConfirmButton({ commit }) {
-    commit('TOGGLE_MODAL_CONFIRM_BUTTON')
-  },
-
-  setModalConfirmButtonDisabled({ commit }, status) {
-    commit('SET_MODAL_CONFIRM_BUTTON_DISABLED', status)
-  }
-}
-
-const mutations = {
-  CREATE_MODAL(state, modal) {
-    state.displayed = true
-    state.variation = modal.variation || 'passive'
-    state.icon = modal.icon
-    state.title = modal.title
-    state.message = modal.message
-    state.withoutButtonConfirm = modal.withoutButtonConfirm || false
-    state.cancelText = modal.cancelText || 'Cancel'
-    state.confirmText = modal.confirmText || 'Confirm'
-    state.confirmDisabled = modal.confirmDisabled || false
-    state.onCancel = modal.onCancel
-    state.onConfirm = modal.onConfirm
-    state.hasInput = modal.hasInput || false
-    state.inputValue = modal.inputValue || null
-    state.inputSelectionRange = modal.inputSelectionRange
-    state.inputDescription = modal.inputDescription || null
-    state.inputPlaceholder = modal.inputPlaceholder || null
-    state.inputLabel = modal.inputLabel || null
-    state.inputError = modal.inputError || null
-    state.inputDisabled = modal.inputDisabled || false
-    state.inputType = modal.inputType || 'text'
-    state.onInput = modal.onInput || emptyReturn
-    state.contextualHelperLabel = modal.contextualHelperLabel
-    state.contextualHelperData = modal.contextualHelperData
-    state.customComponent = modal.customComponent
-    state.customComponentAttrs = modal.customComponentAttrs
-    state.customContent = modal.customContent || ''
-    state.hideActions = modal.hideActions || false
-  },
-
-  HIDE_MODAL(state) {
-    state.displayed = false
-  },
-
-  SET_INPUT_ERROR_MESSAGE(state, error) {
-    state.inputError = error
-  },
-
-  TOGGLE_MODAL_CONFIRM_BUTTON(state) {
-    state.confirmDisabled = !state.confirmDisabled
-  },
-
-  SET_MODAL_CONFIRM_BUTTON_DISABLED(state, status) {
-    state.confirmDisabled = status
-  }
-}
-
-export default {
-  state,
-  actions,
-  mutations
-}
diff --git a/packages/web-runtime/tests/unit/components/EditPasswordModal.spec.ts b/packages/web-runtime/tests/unit/components/EditPasswordModal.spec.ts
index 2d8b5c6b457..5adbe578cac 100644
--- a/packages/web-runtime/tests/unit/components/EditPasswordModal.spec.ts
+++ b/packages/web-runtime/tests/unit/components/EditPasswordModal.spec.ts
@@ -1,5 +1,7 @@
+import { Modal } from '@ownclouders/web-pkg'
 import EditPasswordModal from '../../../src/components/EditPasswordModal.vue'
 import { defaultPlugins, shallowMount } from 'web-test-helpers'
+import { mock } from 'jest-mock-extended'
 
 afterEach(() => jest.clearAllMocks())
 
@@ -39,13 +41,7 @@ function getWrapper() {
   return {
     wrapper: shallowMount(EditPasswordModal, {
       props: {
-        cancel: jest.fn(),
-        confirm: jest.fn(),
-        existingGroups: [
-          {
-            displayName: 'admins'
-          }
-        ]
+        modal: mock<Modal>()
       },
       global: {
         plugins: [...defaultPlugins()]
diff --git a/packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts b/packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts
new file mode 100644
index 00000000000..50c42e46628
--- /dev/null
+++ b/packages/web-runtime/tests/unit/components/ModalWrapper.spec.ts
@@ -0,0 +1,153 @@
+import { Modal, useModals } from '@ownclouders/web-pkg'
+import { mock } from 'jest-mock-extended'
+import { PropType, defineComponent } from 'vue'
+import ModalWrapper from 'web-runtime/src/components/ModalWrapper.vue'
+import {
+  createStore,
+  defaultPlugins,
+  shallowMount,
+  defaultStoreMockOptions,
+  defaultComponentMocks
+} from 'web-test-helpers'
+
+const CustomModalComponent = defineComponent({
+  name: 'CustomModalComponent',
+  props: {
+    modal: { type: Object as PropType<Modal>, required: true }
+  },
+  setup() {
+    return { onConfirm: jest.fn() }
+  },
+  template: '<div id="foo"></div>'
+})
+
+describe('ModalWrapper', () => {
+  it('renders OcModal when a modal is active', async () => {
+    const modal = mock<Modal>()
+    const { wrapper } = getShallowWrapper({ modals: [modal] })
+    const modalStore = useModals()
+    ;(modalStore.activeModal as any) = modal
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.oc-modal').exists()).toBeTruthy()
+  })
+  it('renders a custom component if given', async () => {
+    const modal = mock<Modal>({
+      customComponent: CustomModalComponent,
+      customComponentAttrs: jest.fn()
+    })
+    const { wrapper } = getShallowWrapper({ modals: [modal] })
+    const modalStore = useModals()
+    ;(modalStore.activeModal as any) = modal
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('custom-modal-component-stub').exists()).toBeTruthy()
+  })
+  describe('method "onModalConfirm"', () => {
+    it('calls the modal "onConfirm" if given, disables the confirm button and removes the modal', async () => {
+      const modal = mock<Modal>({ onConfirm: jest.fn().mockResolvedValue(undefined) })
+      const { wrapper } = getShallowWrapper({ modals: [modal] })
+      const modalStore = useModals()
+      ;(modalStore.activeModal as any) = modal
+
+      const value = 'value'
+      await wrapper.vm.onModalConfirm(value)
+
+      expect(modal.onConfirm).toHaveBeenCalledWith(value)
+      expect(modalStore.updateModal).toHaveBeenCalled()
+      expect(modalStore.removeModal).toHaveBeenCalled()
+    })
+    it('does not remove the modal if the promise has not been resolved', async () => {
+      const modal = mock<Modal>({ onConfirm: jest.fn().mockRejectedValue(new Error('')) })
+      const { wrapper } = getShallowWrapper({ modals: [modal] })
+      const modalStore = useModals()
+      ;(modalStore.activeModal as any) = modal
+
+      await wrapper.vm.onModalConfirm()
+
+      expect(modalStore.removeModal).not.toHaveBeenCalled()
+    })
+    it('calls the custom component "onConfirm" if given', async () => {
+      const modal = mock<Modal>({ onConfirm: null })
+      const { wrapper } = getShallowWrapper({ modals: [modal] })
+      const modalStore = useModals()
+      ;(modalStore.activeModal as any) = modal
+      await wrapper.vm.$nextTick()
+      wrapper.vm.customComponentRef = { onConfirm: jest.fn() }
+
+      await wrapper.vm.onModalConfirm()
+
+      expect(wrapper.vm.customComponentRef.onConfirm).toHaveBeenCalled()
+    })
+  })
+  describe('method "onModalCancel"', () => {
+    it('calls the modal "onCancel" if given and removes the modal', async () => {
+      const modal = mock<Modal>({ onCancel: jest.fn() })
+      const { wrapper } = getShallowWrapper({ modals: [modal] })
+      const modalStore = useModals()
+      ;(modalStore.activeModal as any) = modal
+
+      await wrapper.vm.onModalCancel()
+
+      expect(modal.onCancel).toHaveBeenCalled()
+      expect(modalStore.removeModal).toHaveBeenCalled()
+    })
+    it('calls the custom component "onCancel" if given', async () => {
+      const modal = mock<Modal>({ onCancel: null })
+      const { wrapper } = getShallowWrapper({ modals: [modal] })
+      const modalStore = useModals()
+      ;(modalStore.activeModal as any) = modal
+      await wrapper.vm.$nextTick()
+      wrapper.vm.customComponentRef = { onCancel: jest.fn() }
+
+      await wrapper.vm.onModalCancel()
+
+      expect(wrapper.vm.customComponentRef.onCancel).toHaveBeenCalled()
+    })
+  })
+  describe('method "onModalInput"', () => {
+    it('calls the modal "onInput" if given', async () => {
+      const modal = mock<Modal>({ onInput: jest.fn() })
+      const { wrapper } = getShallowWrapper({ modals: [modal] })
+      const modalStore = useModals()
+      ;(modalStore.activeModal as any) = modal
+
+      const value = 'value'
+      await wrapper.vm.onModalInput(value)
+
+      expect(modal.onInput).toHaveBeenCalledWith(value, expect.anything())
+    })
+  })
+  describe('method "onModalConfirmDisabled"', () => {
+    it('updates the modal confirm button state', async () => {
+      const modal = mock<Modal>()
+      const { wrapper } = getShallowWrapper({ modals: [modal] })
+      const modalStore = useModals()
+      ;(modalStore.activeModal as any) = modal
+
+      const value = true
+      await wrapper.vm.onModalConfirmDisabled(value)
+
+      expect(modalStore.updateModal).toHaveBeenCalled()
+    })
+  })
+})
+
+function getShallowWrapper({ modals = [] } = {}) {
+  const storeOptions = defaultStoreMockOptions
+  const store = createStore(storeOptions)
+
+  const mocks = defaultComponentMocks()
+
+  return {
+    wrapper: shallowMount(ModalWrapper, {
+      global: {
+        plugins: [...defaultPlugins({ piniaOptions: { modalsState: { modals } } }), store],
+        renderStubDefaultSlot: true,
+        mocks,
+        provide: mocks,
+        stubs: { OcModal: false }
+      }
+    })
+  }
+}
diff --git a/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
index 0d33c988286..b17ca0b92f1 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/ThemeSwitcher.spec.ts
@@ -1,8 +1,8 @@
-import { useThemeStore } from '@ownclouders/web-pkg'
+import { WebThemeType, useThemeStore } from '@ownclouders/web-pkg'
+import { mock } from 'jest-mock-extended'
 import ThemeSwitcher from 'web-runtime/src/components/Topbar/ThemeSwitcher.vue'
 import defaultTheme from 'web-runtime/themes/owncloud/theme.json'
 import { defaultPlugins, defaultStubs, mount } from 'web-test-helpers'
-import { createMockThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 const defaultOwnCloudTheme = {
   defaults: {
@@ -95,13 +95,25 @@ function mockDarkModePreferred(enabled = false) {
 }
 
 function getWrapper({ hasOnlyOneTheme = false } = {}) {
+  const availableThemes = hasOnlyOneTheme
+    ? [defaultTheme.clients.web.themes[0]]
+    : defaultTheme.clients.web.themes
+
   return {
     wrapper: mount(ThemeSwitcher, {
       global: {
         plugins: [
-          ...defaultPlugins(),
-          createMockThemeStore({
-            hasOnlyOneTheme
+          ...defaultPlugins({
+            piniaOptions: {
+              stubActions: false,
+              themeState: {
+                availableThemes,
+                currentTheme: mock<WebThemeType>({
+                  ...defaultOwnCloudTheme.defaults,
+                  ...defaultOwnCloudTheme.themes[0]
+                })
+              }
+            }
           })
         ],
         stubs: { ...defaultStubs, 'oc-icon': true }
diff --git a/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts
index 109c8b6b3df..ef463788c3a 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/TopBar.spec.ts
@@ -7,7 +7,6 @@ import {
   shallowMount,
   defaultStoreMockOptions
 } from 'web-test-helpers'
-import { createMockThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 const mockUseEmbedMode = jest.fn().mockReturnValue({ isEnabled: computed(() => false) })
 
@@ -101,7 +100,7 @@ const getWrapper = ({ capabilities = {}, isUserContextReady = true } = {}) => {
         applicationsList: ['testApp']
       },
       global: {
-        plugins: [...defaultPlugins(), store, createMockThemeStore()],
+        plugins: [...defaultPlugins(), store],
         stubs: { 'router-link': true, 'portal-target': true, notifications: true },
         mocks,
         provide: mocks
diff --git a/packages/web-runtime/tests/unit/components/Topbar/UserMenu.spec.ts b/packages/web-runtime/tests/unit/components/Topbar/UserMenu.spec.ts
index c791fded6c9..046be5febdc 100644
--- a/packages/web-runtime/tests/unit/components/Topbar/UserMenu.spec.ts
+++ b/packages/web-runtime/tests/unit/components/Topbar/UserMenu.spec.ts
@@ -9,7 +9,6 @@ import {
   RouteLocation
 } from 'web-test-helpers'
 import { mock } from 'jest-mock-extended'
-import { createCustomThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 const totalQuota = 1000
 const basicQuota = 300
@@ -175,11 +174,9 @@ const getMountedWrapper = (quota, userEmail, noUser = false, areThemeUrlsSet = f
       provide: mocks,
       renderStubDefaultSlot: true,
       plugins: [
-        ...defaultPlugins(),
-        store,
-        createCustomThemeStore({
-          initialState: {
-            theme: {
+        ...defaultPlugins({
+          piniaOptions: {
+            themeState: {
               currentTheme: {
                 common: {
                   urls: {
@@ -190,7 +187,8 @@ const getMountedWrapper = (quota, userEmail, noUser = false, areThemeUrlsSet = f
               }
             }
           }
-        })
+        }),
+        store
       ],
       stubs: {
         ...defaultStubs,
diff --git a/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts b/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts
index 0d23cf7143e..5508e507a11 100644
--- a/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/accessDenied.spec.ts
@@ -13,7 +13,6 @@ const selectors = {
 }
 
 import { ConfigurationManager, useConfigurationManager } from '@ownclouders/web-pkg'
-import { createMockThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 jest.mock('@ownclouders/web-pkg', () => ({
   ...jest.requireActual('@ownclouders/web-pkg'),
@@ -61,7 +60,7 @@ function getWrapper({ loginUrl = '' } = {}) {
     mocks,
     wrapper: mount(accessDenied, {
       global: {
-        plugins: [...defaultPlugins(), store, createMockThemeStore()],
+        plugins: [...defaultPlugins(), store],
         mocks,
         provide: mocks
       }
diff --git a/packages/web-runtime/tests/unit/pages/account.spec.ts b/packages/web-runtime/tests/unit/pages/account.spec.ts
index f967bb66f09..28dbc256b69 100644
--- a/packages/web-runtime/tests/unit/pages/account.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account.spec.ts
@@ -199,37 +199,6 @@ describe('account page', () => {
     })
   })
 
-  describe('method "editPassword"', () => {
-    it('should show message on success', async () => {
-      const { wrapper, mocks } = getWrapper()
-
-      await wrapper.vm.loadAccountBundleTask.last
-      await wrapper.vm.loadValuesListTask.last
-      await wrapper.vm.loadGraphUserTask.last
-
-      mocks.$clientService.graphAuthenticated.users.changeOwnPassword.mockResolvedValue(
-        mockAxiosResolve()
-      )
-      const showMessageStub = jest.spyOn(wrapper.vm, 'showMessage')
-      await wrapper.vm.editPassword('password', 'newPassword')
-      expect(showMessageStub).toHaveBeenCalled()
-    })
-
-    it('should show message on error', async () => {
-      jest.spyOn(console, 'error').mockImplementation(() => undefined)
-      const { wrapper, mocks } = getWrapper()
-
-      await wrapper.vm.loadAccountBundleTask.last
-      await wrapper.vm.loadValuesListTask.last
-      await wrapper.vm.loadGraphUserTask.last
-
-      mocks.$clientService.graphAuthenticated.users.changeOwnPassword.mockRejectedValue(new Error())
-      const showErrorMessageStub = jest.spyOn(wrapper.vm, 'showErrorMessage')
-      await wrapper.vm.editPassword('password', 'newPassword')
-      expect(showErrorMessageStub).toHaveBeenCalled()
-    })
-  })
-
   describe('Logout from all devices link', () => {
     it('should render the logout from active devices if logoutUrl is provided', async () => {
       const { wrapper } = getWrapper()
diff --git a/packages/web-runtime/tests/unit/pages/oidcCallback.spec.ts b/packages/web-runtime/tests/unit/pages/oidcCallback.spec.ts
index 579d152a253..ef363c689e5 100644
--- a/packages/web-runtime/tests/unit/pages/oidcCallback.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/oidcCallback.spec.ts
@@ -10,7 +10,6 @@ import oidcCallback from '../../../src/pages/oidcCallback.vue'
 import { authService } from 'web-runtime/src/services/auth'
 import { mock } from 'jest-mock-extended'
 import { computed } from 'vue'
-import { createMockThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 const mockUseEmbedMode = jest.fn()
 
@@ -143,7 +142,7 @@ function getWrapper() {
     storeOptions,
     wrapper: shallowMount(oidcCallback, {
       global: {
-        plugins: [...defaultPlugins(), store, createMockThemeStore()],
+        plugins: [...defaultPlugins(), store],
         mocks,
         provide: {}
       }
diff --git a/packages/web-runtime/tests/unit/pages/resolvePublicLink.spec.ts b/packages/web-runtime/tests/unit/pages/resolvePublicLink.spec.ts
index aab3372ce27..57f1801d176 100644
--- a/packages/web-runtime/tests/unit/pages/resolvePublicLink.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/resolvePublicLink.spec.ts
@@ -10,7 +10,6 @@ import { mockDeep } from 'jest-mock-extended'
 import { ClientService } from '@ownclouders/web-pkg'
 import { Resource } from '@ownclouders/web-client'
 import { authService } from 'web-runtime/src/services/auth'
-import { createMockThemeStore } from 'web-test-helpers/src/mocks/pinia'
 
 jest.mock('web-runtime/src/services/auth')
 const selectors = {
@@ -87,7 +86,7 @@ function getWrapper({ passwordRequired = false } = {}) {
   return {
     wrapper: shallowMount(ResolvePublicLink, {
       global: {
-        plugins: [...defaultPlugins(), store, createMockThemeStore()],
+        plugins: [...defaultPlugins(), store],
         mocks,
         provide: mocks
       }
diff --git a/packages/web-test-helpers/src/defaultPlugins.ts b/packages/web-test-helpers/src/defaultPlugins.ts
index 08a5b13c82d..08cd0d19562 100644
--- a/packages/web-test-helpers/src/defaultPlugins.ts
+++ b/packages/web-test-helpers/src/defaultPlugins.ts
@@ -4,20 +4,22 @@ import { h } from 'vue'
 import { abilitiesPlugin } from '@casl/vue'
 import { createMongoAbility } from '@casl/ability'
 import { AbilityRule } from '../../web-client/src/helpers/resource/types'
-import { createPinia } from 'pinia'
+import { PiniaMockOptions, createMockStore } from './mocks'
 
 export interface DefaultPluginsOptions {
   abilities?: AbilityRule[]
   designSystem?: boolean
   gettext?: boolean
   pinia?: boolean
+  piniaOptions?: PiniaMockOptions
 }
 
 export const defaultPlugins = ({
   abilities = [],
   designSystem = true,
   gettext = true,
-  pinia = true
+  pinia = true,
+  piniaOptions = {}
 }: DefaultPluginsOptions = {}) => {
   const plugins = []
 
@@ -45,8 +47,7 @@ export const defaultPlugins = ({
   }
 
   if (pinia) {
-    const pinia = createPinia()
-    plugins.push(pinia)
+    plugins.push(createMockStore(piniaOptions))
   }
 
   plugins.push({
diff --git a/packages/web-test-helpers/src/mocks/index.ts b/packages/web-test-helpers/src/mocks/index.ts
index f1bfc32f2e4..5776955e741 100644
--- a/packages/web-test-helpers/src/mocks/index.ts
+++ b/packages/web-test-helpers/src/mocks/index.ts
@@ -1,2 +1,3 @@
 export * from './axios'
 export * from './useGetMatchingSpaceMock'
+export * from './pinia'
diff --git a/packages/web-test-helpers/src/mocks/pinia.ts b/packages/web-test-helpers/src/mocks/pinia.ts
index c305c3b1216..bf94f609133 100644
--- a/packages/web-test-helpers/src/mocks/pinia.ts
+++ b/packages/web-test-helpers/src/mocks/pinia.ts
@@ -1,32 +1,43 @@
-import { createTestingPinia as createCustomThemeStore } from '@pinia/testing'
+import { createTestingPinia } from '@pinia/testing'
 import defaultTheme from '../../../web-runtime/themes/owncloud/theme.json'
+import { Modal, WebThemeType } from '../../../web-pkg/src/composables/piniaStores'
 
-export { createCustomThemeStore }
+export type PiniaMockOptions = {
+  stubActions?: boolean
+  themeState?: { availableThemes?: WebThemeType[]; currentTheme?: WebThemeType }
+  modalsState?: { modals?: Modal[] }
+}
 
-export function createMockThemeStore({ hasOnlyOneTheme = false, appBanner = undefined } = {}) {
+export function createMockStore({
+  stubActions = true,
+  themeState = {},
+  modalsState = {}
+}: PiniaMockOptions = {}) {
   const defaultOwnCloudTheme = {
     defaults: {
       ...defaultTheme.clients.web.defaults,
       common: {
         ...defaultTheme.common,
         urls: ['https://imprint.url.theme', 'https://privacy.url.theme']
-      },
-      ...(appBanner && { appBanner })
+      }
     },
     themes: defaultTheme.clients.web.themes
   }
 
-  return createCustomThemeStore({
-    stubActions: false,
+  return createTestingPinia({
+    stubActions,
     initialState: {
+      modals: {
+        modals: [],
+        ...modalsState
+      },
       theme: {
         currentTheme: {
           ...defaultOwnCloudTheme.defaults,
           ...defaultOwnCloudTheme.themes[0]
         },
-        availableThemes: hasOnlyOneTheme
-          ? [defaultOwnCloudTheme.themes[0]]
-          : defaultOwnCloudTheme.themes
+        availableThemes: defaultOwnCloudTheme.themes,
+        ...themeState
       }
     }
   })
diff --git a/packages/web-test-helpers/src/mocks/store/defaultStoreMockOptions.ts b/packages/web-test-helpers/src/mocks/store/defaultStoreMockOptions.ts
index f87da74e219..04f74b938c6 100644
--- a/packages/web-test-helpers/src/mocks/store/defaultStoreMockOptions.ts
+++ b/packages/web-test-helpers/src/mocks/store/defaultStoreMockOptions.ts
@@ -35,14 +35,9 @@ export const defaultStoreMockOptions = {
     }
   },
   actions: {
-    createModal: jest.fn(),
-    hideModal: jest.fn(),
-    toggleModalConfirmButton: jest.fn(),
-    setModalConfirmButtonDisabled: jest.fn(),
     showMessage: jest.fn(),
     showErrorMessage: jest.fn(),
     deleteNotification: jest.fn(),
-    setModalInputErrorMessage: jest.fn(),
     openNavigation: jest.fn(),
     closeNavigation: jest.fn()
   },