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 980d31603a..5d37cd62e5 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,5 +1,5 @@
 import { useModals, UserAction } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import CreateGroupModal from '../../../components/Groups/CreateGroupModal.vue'
 
@@ -17,7 +17,7 @@ export const useGroupActionsCreateGroup = () => {
       handler: () => {
         dispatchModal({
           title: $gettext('Create group'),
-          customComponent: CreateGroupModal
+          customComponent: markRaw(CreateGroupModal)
         })
       }
     }
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 3b3e028b81..4deff32a3c 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,4 +1,4 @@
-import { computed, Ref, unref } from 'vue'
+import { computed, markRaw, Ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction, useModals, useCapabilityStore, UserActionOptions } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
@@ -20,7 +20,7 @@ export const useUserActionsAddToGroups = ({ groups }: { groups: Ref<Group[]> })
           userCount: resources.length.toString()
         }
       ),
-      customComponent: AddToGroupsModal,
+      customComponent: markRaw(AddToGroupsModal),
       customComponentAttrs: () => ({
         users: resources,
         groups: unref(groups)
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 7b0c96a357..87f51e9667 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,5 +1,5 @@
 import { useModals, useCapabilityStore } from '@opencloud-eu/web-pkg'
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction } from '@opencloud-eu/web-pkg'
 import CreateUserModal from '../../../components/Users/CreateUserModal.vue'
@@ -19,7 +19,7 @@ export const useUserActionsCreateUser = () => {
       handler: () => {
         dispatchModal({
           title: $gettext('Create user'),
-          customComponent: CreateUserModal
+          customComponent: markRaw(CreateUserModal)
         })
       }
     }
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 e916d2514e..6ed8f7be35 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,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction, useModals, useCapabilityStore, UserActionOptions } from '@opencloud-eu/web-pkg'
 import LoginModal from '../../../components/Users/LoginModal.vue'
@@ -19,7 +19,7 @@ export const useUserActionsEditLogin = () => {
           userCount: resources.length.toString()
         }
       ),
-      customComponent: LoginModal,
+      customComponent: markRaw(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 63ea906f4d..b0613cb4f2 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
@@ -1,4 +1,4 @@
-import { computed, toRaw } from 'vue'
+import { computed, markRaw, toRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import {
   QuotaModal,
@@ -53,7 +53,7 @@ export const useUserActionsEditQuota = () => {
 
     dispatchModal({
       title: getModalTitle({ resources }),
-      customComponent: QuotaModal,
+      customComponent: markRaw(QuotaModal),
       customComponentAttrs: () => ({
         spaces: getUserDrives({ resources }),
         resourceType: 'user',
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 e6f6ba0b5e..cbf395175d 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,4 +1,4 @@
-import { computed, Ref, unref } from 'vue'
+import { computed, markRaw, Ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { UserAction, useModals, useCapabilityStore, UserActionOptions } from '@opencloud-eu/web-pkg'
 import { Group } from '@opencloud-eu/web-client/graph/generated'
@@ -20,7 +20,7 @@ export const useUserActionsRemoveFromGroups = ({ groups }: { groups: Ref<Group[]
           userCount: resources.length.toString()
         }
       ),
-      customComponent: RemoveFromGroupsModal,
+      customComponent: markRaw(RemoveFromGroupsModal),
       customComponentAttrs: () => ({
         users: resources,
         groups: unref(groups)
diff --git a/packages/web-app-contacts/src/extensions.ts b/packages/web-app-contacts/src/extensions.ts
index a9e0a90478..68b1357de7 100644
--- a/packages/web-app-contacts/src/extensions.ts
+++ b/packages/web-app-contacts/src/extensions.ts
@@ -9,7 +9,7 @@ import {
   useUserStore,
   Extension
 } from '@opencloud-eu/web-pkg'
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import { storeToRefs } from 'pinia'
 import AddressBooksList from './components/AddressBooksList.vue'
 import { useGettext } from 'vue3-gettext'
@@ -48,14 +48,14 @@ export const extensions = (appInfo: ApplicationInformation) => {
     id: `app.${appInfo.id}.sidebar-nav.main-content`,
     extensionPointIds: [`app.${appInfo.id}.sidebar-nav.main`],
     type: 'customComponent',
-    content: AddressBooksList
+    content: markRaw(AddressBooksList)
   }
 
   const bottomNavExtension: CustomComponentExtension = {
     id: `app.${appInfo.id}.sidebar-nav.bottom-content`,
     extensionPointIds: [`app.${appInfo.id}.sidebar-nav.bottom`],
     type: 'customComponent',
-    content: AccountsSwitch
+    content: markRaw(AccountsSwitch)
   }
 
   return computed<Extension[]>(() => {
diff --git a/packages/web-app-external/src/App.vue b/packages/web-app-external/src/App.vue
index 4f44becf1e..5026ba5fa8 100644
--- a/packages/web-app-external/src/App.vue
+++ b/packages/web-app-external/src/App.vue
@@ -39,6 +39,7 @@
 import { stringify } from 'qs'
 import {
   computed,
+  markRaw,
   unref,
   nextTick,
   ref,
@@ -280,7 +281,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
             name: resource.name,
             format: message.Values.format
           }),
-          customComponent: FileNameModal,
+          customComponent: markRaw(FileNameModal),
           customComponentAttrs: () => ({
             space,
             resource,
@@ -298,7 +299,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
 
       dispatchModal({
         title: $gettext('Save »%{name}« with new name', { name: resource.name }),
-        customComponent: FileNameModal,
+        customComponent: markRaw(FileNameModal),
         customComponentAttrs: () => ({
           space,
           resource,
@@ -346,7 +347,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
       dispatchModal({
         elementClass: 'file-picker-modal',
         title: $gettext('Insert graphic'),
-        customComponent: FilePickerModal,
+        customComponent: markRaw(FilePickerModal),
         hideActions: true,
         customComponentAttrs: () => ({
           parentFolderLink: getParentFolderLink(resource),
@@ -374,7 +375,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
           callback === 'Action_CompareDocuments'
             ? $gettext('Select document to compare')
             : $gettext('Insert file'),
-        customComponent: FilePickerModal,
+        customComponent: markRaw(FilePickerModal),
         hideActions: true,
         customComponentAttrs: () => ({
           parentFolderLink: getParentFolderLink(resource),
@@ -401,7 +402,7 @@ const handlePostMessagesCollabora = async (event: MessageEvent) => {
       dispatchModal({
         elementClass: 'file-picker-modal',
         title: $gettext('Pick a file to link'),
-        customComponent: FilePickerModal,
+        customComponent: markRaw(FilePickerModal),
         hideActions: true,
         customComponentAttrs: () => ({
           parentFolderLink: getParentFolderLink(resource),
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
index 3af1e3fc2a..fa315674c7 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue
@@ -51,7 +51,16 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, Ref, unref, useTemplateRef } from 'vue'
+import {
+  computed,
+  defineComponent,
+  inject,
+  markRaw,
+  PropType,
+  Ref,
+  unref,
+  useTemplateRef
+} from 'vue'
 import { DateTime } from 'luxon'
 import { ContextualHelperDataListItem, uniqueId } from '@opencloud-eu/design-system/helpers'
 import { OcDrop, OcInfoDrop } from '@opencloud-eu/design-system/components'
@@ -237,7 +246,7 @@ export default defineComponent({
       this.dispatchModal({
         title: this.$gettext('Set expiration date'),
         hideActions: true,
-        customComponent: DatePickerModal,
+        customComponent: markRaw(DatePickerModal),
         customComponentAttrs: () => ({
           currentDate: currentDate.isValid ? currentDate : null,
           minDate: DateTime.now()
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
index 3cce72492f..3611882d69 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/ExpirationDatepicker.vue
@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { DateTime } from 'luxon'
-import { defineComponent, customRef, PropType, unref, watch } from 'vue'
+import { defineComponent, customRef, markRaw, PropType, unref, watch } from 'vue'
 import { useModals, DatePickerModal } from '@opencloud-eu/web-pkg'
 import { useGettext } from 'vue3-gettext'
 
@@ -89,7 +89,7 @@ export default defineComponent({
       dispatchModal({
         title: language.$gettext('Set expiration date'),
         hideActions: true,
-        customComponent: DatePickerModal,
+        customComponent: markRaw(DatePickerModal),
         customComponentAttrs: () => ({
           currentDate: unref(dateCurrent),
           minDate: DateTime.now()
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
index e61449defd..79d37837b8 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/EditDropdown.vue
@@ -53,7 +53,16 @@ import {
   useResourcesStore
 } from '@opencloud-eu/web-pkg'
 import { LinkShare } from '@opencloud-eu/web-client'
-import { computed, defineComponent, inject, PropType, Ref, unref, useTemplateRef } from 'vue'
+import {
+  computed,
+  defineComponent,
+  inject,
+  markRaw,
+  PropType,
+  Ref,
+  unref,
+  useTemplateRef
+} from 'vue'
 import { Resource } from '@opencloud-eu/web-client'
 import { createFileRouteOptions, DatePickerModal } from '@opencloud-eu/web-pkg'
 import { OcDrop } from '@opencloud-eu/design-system/components'
@@ -106,7 +115,7 @@ export default defineComponent({
       dispatchModal({
         title: $gettext('Set expiration date'),
         hideActions: true,
-        customComponent: DatePickerModal,
+        customComponent: markRaw(DatePickerModal),
         customComponentAttrs: () => ({
           currentDate: currentDate.isValid ? currentDate : null,
           minDate: DateTime.now()
diff --git a/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue b/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue
index 9d1ffef27b..fbc867d3da 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Links/ListItem.vue
@@ -55,7 +55,7 @@
 import { DateTime } from 'luxon'
 import { LinkRoleDropdown, useAbility, useLinkTypes, useModals } from '@opencloud-eu/web-pkg'
 import { LinkShare, Resource, SpaceResource } from '@opencloud-eu/web-client'
-import { computed, inject, Ref, ref, unref } from 'vue'
+import { computed, inject, markRaw, Ref, ref, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import SetLinkPasswordModal from '../../../Modals/SetLinkPasswordModal.vue'
 import { SharingLinkType } from '@opencloud-eu/web-client/graph/generated'
@@ -111,7 +111,7 @@ const updateSelectedType = (type: SharingLinkType) => {
 const showPasswordModal = (callbackFn: () => void = undefined) => {
   dispatchModal({
     title: linkShare.hasPassword ? $gettext('Edit password') : $gettext('Add password'),
-    customComponent: SetLinkPasswordModal,
+    customComponent: markRaw(SetLinkPasswordModal),
     customComponentAttrs: () => ({
       space: unref(space),
       resource: unref(resource),
diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateLink.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateLink.ts
index e709931c75..78c4951b8e 100644
--- a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateLink.ts
+++ b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateLink.ts
@@ -1,4 +1,4 @@
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { LinkShare, isProjectSpaceResource } from '@opencloud-eu/web-client'
 import {
@@ -42,7 +42,7 @@ export const useFileActionsCreateLink = ({
           resources.length,
           { resourceName: resources[0].name }
         ),
-        customComponent: CreateLinkModal,
+        customComponent: markRaw(CreateLinkModal),
         customComponentAttrs: () => ({ space, resources }),
         hideActions: true
       })
diff --git a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewShortcut.ts b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewShortcut.ts
index c1f5d89b7b..b5d6d075fe 100644
--- a/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewShortcut.ts
+++ b/packages/web-app-files/src/composables/actions/files/useFileActionsCreateNewShortcut.ts
@@ -1,5 +1,5 @@
 import { storeToRefs } from 'pinia'
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import {
   CreateShortcutModal,
@@ -26,7 +26,7 @@ export const useFileActionsCreateNewShortcut = () => {
         dispatchModal({
           title: $gettext('Create a Shortcut'),
           confirmText: $gettext('Create'),
-          customComponent: CreateShortcutModal,
+          customComponent: markRaw(CreateShortcutModal),
           customComponentAttrs: () => ({ space: unref(currentSpace) })
         })
       },
diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsEditQuota.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsEditQuota.ts
index 11c436c705..9d6e007e41 100644
--- a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsEditQuota.ts
+++ b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsEditQuota.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { SpaceResource, isProjectSpaceResource, isSpaceResource } from '@opencloud-eu/web-client'
 import {
@@ -28,7 +28,7 @@ export const useSpaceActionsEditQuota = () => {
   const handler = ({ resources }: SpaceActionOptions) => {
     dispatchModal({
       title: getModalTitle({ resources }),
-      customComponent: QuotaModal,
+      customComponent: markRaw(QuotaModal),
       customComponentAttrs: () => ({
         spaces: resources,
         resourceType: 'space'
diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetIcon.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetIcon.ts
index 81a9db2dcb..9eae09f043 100644
--- a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetIcon.ts
+++ b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetIcon.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { HttpError, isProjectSpaceResource, SpaceResource } from '@opencloud-eu/web-client'
 import {
@@ -38,7 +38,7 @@ export const useSpaceActionsSetIcon = () => {
       elementClass: 'w-auto',
       title: $gettext('Set icon for »%{space}«', { space: resources[0].name }),
       hideConfirmButton: true,
-      customComponent: EmojiPickerModal,
+      customComponent: markRaw(EmojiPickerModal),
       focusTrapInitial: false,
       onConfirm: (emoji: string) => setIconSpace(resources[0], emoji)
     })
diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetImage.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetImage.ts
index 199f92efba..610ce2a53b 100644
--- a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetImage.ts
+++ b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsSetImage.ts
@@ -1,5 +1,5 @@
 import { isProjectSpaceResource } from '@opencloud-eu/web-client'
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import {
   FileAction,
@@ -32,7 +32,7 @@ export const useSpaceActionsSetImage = () => {
     dispatchModal({
       title: $gettext('Crop your Space image'),
       confirmText: $gettext('Confirm'),
-      customComponent: SpaceImageModal,
+      customComponent: markRaw(SpaceImageModal),
       focusTrapInitial: '#image-cropper-selection',
       customComponentAttrs: () => ({ file, space })
     })
diff --git a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts
index 2d9fc79114..55a6d77829 100644
--- a/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts
+++ b/packages/web-app-files/src/composables/actions/spaces/useSpaceActionsUploadImage.ts
@@ -1,4 +1,4 @@
-import { computed, onBeforeUnmount, unref } from 'vue'
+import { computed, markRaw, onBeforeUnmount, unref } from 'vue'
 import { isProjectSpaceResource, SpaceResource } from '@opencloud-eu/web-client'
 import {
   SpaceAction,
@@ -38,7 +38,7 @@ export const useSpaceActionsUploadImage = () => {
     dispatchModal({
       title: $gettext('Crop image for »%{space}«', { space: selectedSpace.name }),
       confirmText: $gettext('Confirm'),
-      customComponent: SpaceImageModal,
+      customComponent: markRaw(SpaceImageModal),
       focusTrapInitial: '#image-cropper-selection',
       customComponentAttrs: () => ({ file, space: unref(selectedSpace) })
     })
diff --git a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
index 543681693a..04e8c14469 100644
--- a/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
+++ b/packages/web-app-files/src/composables/extensions/useFileSideBars.ts
@@ -25,7 +25,7 @@ import {
 import { isProjectSpaceResource, SpaceResource } from '@opencloud-eu/web-client'
 import { Resource } from '@opencloud-eu/web-client'
 import { useGettext } from 'vue3-gettext'
-import { unref } from 'vue'
+import { markRaw, unref } from 'vue'
 import { fileSideBarExtensionPoint } from '../../extensionPoints'
 import AudioMetaPanel from '../../components/SideBar/Audio/AudioMetaPanel.vue'
 import { isEmpty } from 'lodash-es'
@@ -48,7 +48,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'no-selection',
         icon: 'questionnaire-line',
         title: () => $gettext('Details'),
-        component: NoSelection,
+        component: markRaw(NoSelection),
         isRoot: () => true,
         isVisible: ({ parent, items }) => {
           if (isLocationTrashActive(router, 'files-trash-overview')) {
@@ -75,7 +75,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'no-selection',
         icon: 'questionnaire-line',
         title: () => $gettext('Details'),
-        component: TrashNoSelection,
+        component: markRaw(TrashNoSelection),
         isRoot: () => true,
         isVisible: () => {
           return isLocationTrashActive(router, 'files-trash-overview')
@@ -90,7 +90,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'details',
         icon: 'questionnaire-line',
         title: () => $gettext('Details'),
-        component: FileDetails,
+        component: markRaw(FileDetails),
         componentAttrs: ({ items }) => ({
           previewEnabled: unref(isFilesAppActive),
           tagsEnabled:
@@ -115,7 +115,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'details-multiple',
         icon: 'questionnaire-line',
         title: () => $gettext('Details'),
-        component: FileDetailsMultiple,
+        component: markRaw(FileDetailsMultiple),
         componentAttrs: () => ({
           get showSpaceCount() {
             return (
@@ -143,7 +143,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'exif',
         icon: 'image',
         title: () => $gettext('Image Info'),
-        component: ExifPanel,
+        component: markRaw(ExifPanel),
         isVisible: ({ items }) => {
           if (items?.length !== 1) {
             return false
@@ -164,7 +164,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'audio-meta',
         icon: 'music',
         title: () => $gettext('Audio Info'),
-        component: AudioMetaPanel,
+        component: markRaw(AudioMetaPanel),
         isVisible: ({ items }) => {
           if (items?.length !== 1) {
             return false
@@ -186,7 +186,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         icon: 'play-circle',
         iconFillType: 'line',
         title: () => $gettext('Actions'),
-        component: FileActions,
+        component: markRaw(FileActions),
         isRoot: () => false,
         isVisible: ({ items }) => {
           if (items?.length !== 1) {
@@ -210,7 +210,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         icon: 'user-add',
         iconFillType: 'line',
         title: () => $gettext('Shares'),
-        component: SharesPanel,
+        component: markRaw(SharesPanel),
         componentAttrs: () => ({
           showSpaceMembers: false,
           get showLinks() {
@@ -237,7 +237,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'versions',
         icon: 'git-branch',
         title: () => $gettext('Versions'),
-        component: FileVersions,
+        component: markRaw(FileVersions),
         componentAttrs: () => ({
           isReadOnly: !unref(isFilesAppActive)
         }),
@@ -257,7 +257,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'no-selection',
         icon: 'questionnaire-line',
         title: () => $gettext('Details'),
-        component: SpaceNoSelection,
+        component: markRaw(SpaceNoSelection),
         isRoot: () => true,
         isVisible: ({ items }) => {
           if (!isLocationSpacesActive(router, 'files-spaces-projects')) {
@@ -276,7 +276,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'details-space',
         icon: 'questionnaire-line',
         title: () => $gettext('Details'),
-        component: SpaceDetails,
+        component: markRaw(SpaceDetails),
         isRoot: () => true,
         isVisible: ({ items }) => {
           return items?.length === 1 && isProjectSpaceResource(items[0])
@@ -291,7 +291,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'details-space-multiple',
         icon: 'questionnaire-line',
         title: () => $gettext('Details'),
-        component: SpaceDetailsMultiple,
+        component: markRaw(SpaceDetailsMultiple),
         componentAttrs: ({ items }) => ({
           selectedSpaces: items
         }),
@@ -310,7 +310,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         icon: 'play-circle',
         iconFillType: 'line',
         title: () => $gettext('Actions'),
-        component: FileActions,
+        component: markRaw(FileActions),
         isVisible: ({ items }) => {
           if (items?.length !== 1) {
             return false
@@ -330,7 +330,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'space-share',
         icon: 'group',
         title: () => $gettext('Members'),
-        component: SharesPanel,
+        component: markRaw(SharesPanel),
         componentAttrs: () => ({
           showSpaceMembers: true,
           get showLinks() {
@@ -350,7 +350,7 @@ export const useSideBarPanels = (): SidebarPanelExtension<SpaceResource, Resourc
         name: 'activities',
         icon: 'pulse',
         title: () => $gettext('Activities'),
-        component: ActivitiesPanel,
+        component: markRaw(ActivitiesPanel),
         isVisible: ({ items }) => {
           if (items?.length !== 1) {
             return false
diff --git a/packages/web-app-files/src/composables/extensions/useFolderViews.ts b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
index 02168fc7a3..48dad3032c 100644
--- a/packages/web-app-files/src/composables/extensions/useFolderViews.ts
+++ b/packages/web-app-files/src/composables/extensions/useFolderViews.ts
@@ -11,6 +11,7 @@ import {
   folderViewsTrashExtensionPoint,
   folderViewsTrashOverviewExtensionPoint
 } from '../../extensionPoints'
+import { markRaw } from 'vue'
 
 export const useFolderViews = (): FolderViewExtension[] => {
   const { $gettext } = useGettext()
@@ -37,7 +38,7 @@ export const useFolderViews = (): FolderViewExtension[] => {
           name: 'menu-line-condensed',
           fillType: 'none'
         },
-        component: ResourceTable
+        component: markRaw(ResourceTable)
       }
     },
     {
@@ -61,7 +62,7 @@ export const useFolderViews = (): FolderViewExtension[] => {
           name: 'list-unordered',
           fillType: 'none'
         },
-        component: ResourceTable
+        component: markRaw(ResourceTable)
       }
     },
     {
@@ -85,7 +86,7 @@ export const useFolderViews = (): FolderViewExtension[] => {
           name: 'gallery-view-2',
           fillType: 'none'
         },
-        component: ResourceTiles
+        component: markRaw(ResourceTiles)
       }
     }
   ]
diff --git a/packages/web-app-files/src/extensions.ts b/packages/web-app-files/src/extensions.ts
index 144037ca86..d9c6d86602 100644
--- a/packages/web-app-files/src/extensions.ts
+++ b/packages/web-app-files/src/extensions.ts
@@ -12,7 +12,7 @@ import {
   useSpaceActionsCreate,
   useUserStore
 } from '@opencloud-eu/web-pkg'
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import { SDKSearch } from './search'
 import { useSideBarPanels } from './composables/extensions/useFileSideBars'
 import { useFolderViews } from './composables/extensions/useFolderViews'
@@ -94,7 +94,7 @@ export const extensions = (appInfo: ApplicationInformation) => {
 
         return true
       },
-      dropComponent: CreateOrUploadMenu
+      dropComponent: markRaw(CreateOrUploadMenu)
     } as FloatingActionButtonExtension,
     ...((userStore.user && [
       {
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 d1266ee6a7..3212c29e6f 100644
--- a/packages/web-app-files/src/helpers/resource/actions/upload.ts
+++ b/packages/web-app-files/src/helpers/resource/actions/upload.ts
@@ -1,3 +1,4 @@
+import { markRaw } from 'vue'
 import { Language } from 'vue3-gettext'
 import { Resource } from '@opencloud-eu/web-client'
 import { extractExtensionFromFile } from '@opencloud-eu/web-client'
@@ -41,7 +42,7 @@ export class UploadResourceConflict extends ConflictDialog {
           ? this.$gettext('Folder already exists')
           : this.$gettext('File already exists'),
         hideActions: true,
-        customComponent: ResourceConflictModal,
+        customComponent: markRaw(ResourceConflictModal),
         customComponentAttrs: () => ({
           confirmSecondaryTextOverwrite: resource.isFolder
             ? this.$gettext('Merge')
diff --git a/packages/web-app-mail/src/extensions.ts b/packages/web-app-mail/src/extensions.ts
index b1532d4041..2ca7a976d7 100644
--- a/packages/web-app-mail/src/extensions.ts
+++ b/packages/web-app-mail/src/extensions.ts
@@ -9,7 +9,7 @@ import {
   useUserStore,
   Extension
 } from '@opencloud-eu/web-pkg'
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import MailboxTree from './components/MailboxTree.vue'
 import { storeToRefs } from 'pinia'
 import { useMailCompose } from './composables/useMailCompose'
@@ -48,14 +48,14 @@ export const extensions = (appInfo: ApplicationInformation) => {
     id: `app.${appInfo.id}.sidebar-nav.main-content`,
     extensionPointIds: [`app.${appInfo.id}.sidebar-nav.main`],
     type: 'customComponent',
-    content: MailboxTree
+    content: markRaw(MailboxTree)
   }
 
   const bottomNavExtension: CustomComponentExtension = {
     id: `app.${appInfo.id}.sidebar-nav.bottom-content`,
     extensionPointIds: [`app.${appInfo.id}.sidebar-nav.bottom`],
     type: 'customComponent',
-    content: AccountsSwitch
+    content: markRaw(AccountsSwitch)
   }
 
   return computed<Extension[]>(() => {
diff --git a/packages/web-app-search/src/extensions.ts b/packages/web-app-search/src/extensions.ts
index af158558db..2b3f3e4178 100644
--- a/packages/web-app-search/src/extensions.ts
+++ b/packages/web-app-search/src/extensions.ts
@@ -1,4 +1,4 @@
-import { computed } from 'vue'
+import { computed, markRaw } from 'vue'
 import { CustomComponentExtension, Extension } from '@opencloud-eu/web-pkg'
 import SearchBar from './portals/SearchBar.vue'
 
@@ -6,7 +6,7 @@ const searchBarExtension: CustomComponentExtension = {
   id: 'com.github.opencloud-eu.web.search.search-bar',
   type: 'customComponent',
   extensionPointIds: ['app.runtime.header.center'],
-  content: SearchBar
+  content: markRaw(SearchBar)
 }
 
 export const extensions = () => {
diff --git a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
index 88d757eca1..cb429e8990 100644
--- a/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
+++ b/packages/web-pkg/src/components/AppTemplates/AppWrapper.vue
@@ -20,7 +20,17 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, defineComponent, onBeforeUnmount, ref, unref, watch, computed, onMounted } from 'vue'
+import {
+  Ref,
+  defineComponent,
+  onBeforeUnmount,
+  ref,
+  unref,
+  watch,
+  computed,
+  onMounted,
+  markRaw
+} from 'vue'
 import { DateTime } from 'luxon'
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
@@ -153,7 +163,7 @@ const appBarExtension = computed<CustomComponentExtension[]>(() => {
       id: topBarExtensionId,
       type: 'customComponent',
       extensionPointIds: ['app.runtime.header.left'],
-      content: AppTopBar,
+      content: markRaw(AppTopBar),
       componentProps: () => ({
         resource: unref(resource),
         isReadOnly: unref(isReadOnly),
@@ -668,7 +678,7 @@ onBeforeRouteLeave((_to, _from, next) => {
   if (unref(isDirty)) {
     dispatchModal({
       title: $gettext('Unsaved changes'),
-      customComponent: UnsavedChangesModal,
+      customComponent: markRaw(UnsavedChangesModal),
       focusTrapInitial: '.oc-modal-body-actions-confirm',
       hideActions: true,
       hideCancelButton: true,
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts
index c7508bfa79..73d9702cb9 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsOpenWithApp.ts
@@ -1,5 +1,5 @@
 import { FileAction, FileActionOptions } from '../types'
-import { computed, unref } from 'vue'
+import { computed, markRaw, unref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useAppsStore, useModals } from '../../piniaStores'
 import { storeToRefs } from 'pinia'
@@ -31,7 +31,7 @@ export const useFileActionsOpenWithApp = ({ appId }: { appId: string }) => {
     dispatchModal({
       elementClass: 'file-picker-modal',
       title: $gettext('Open file in %{app}', { app: app.name }),
-      customComponent: FilePickerModal,
+      customComponent: markRaw(FilePickerModal),
       hideActions: true,
       customComponentAttrs: () => ({
         allowedFileTypes,
diff --git a/packages/web-pkg/src/composables/actions/files/useFileActionsSaveAs.ts b/packages/web-pkg/src/composables/actions/files/useFileActionsSaveAs.ts
index 9323718923..1587359093 100644
--- a/packages/web-pkg/src/composables/actions/files/useFileActionsSaveAs.ts
+++ b/packages/web-pkg/src/composables/actions/files/useFileActionsSaveAs.ts
@@ -1,5 +1,5 @@
 import { FileAction, FileActionOptions } from '../types'
-import { computed, unref, Ref } from 'vue'
+import { computed, markRaw, unref, Ref } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import { useModals } from '../../piniaStores'
 import SaveAsModal from '../../../components/Modals/SaveAsModal.vue'
@@ -18,7 +18,7 @@ export const useFileActionsSaveAs = ({ content }: { content: Ref<unknown> }) =>
     dispatchModal({
       elementClass: 'save-as-modal',
       title: $gettext('Save as'),
-      customComponent: SaveAsModal,
+      customComponent: markRaw(SaveAsModal),
       hideActions: true,
       customComponentAttrs: () => ({
         content: unref(content),
diff --git a/packages/web-pkg/src/helpers/resource/conflictHandling/conflictDialog.ts b/packages/web-pkg/src/helpers/resource/conflictHandling/conflictDialog.ts
index b9e7739d8a..5feca6b207 100644
--- a/packages/web-pkg/src/helpers/resource/conflictHandling/conflictDialog.ts
+++ b/packages/web-pkg/src/helpers/resource/conflictHandling/conflictDialog.ts
@@ -1,3 +1,4 @@
+import { markRaw } from 'vue'
 import { join } from 'path'
 import { Resource } from '@opencloud-eu/web-client'
 import { ResolveConflict, ResolveStrategy } from './types'
@@ -75,7 +76,7 @@ export class ConflictDialog {
           : this.$gettext('File already exists'),
         hideActions: true,
         hideCancelButton: true,
-        customComponent: ResourceConflictModal,
+        customComponent: markRaw(ResourceConflictModal),
         customComponentAttrs: () => ({
           resource,
           conflictCount,
@@ -95,7 +96,7 @@ export class ConflictDialog {
     return new Promise<boolean>((resolve) => {
       dispatchModal({
         title: this.$gettext('Copy here?'),
-        customComponent: SpaceMoveInfoModal,
+        customComponent: markRaw(SpaceMoveInfoModal),
         confirmText: this.$gettext('Copy here'),
         onCancel: () => {
           resolve(false)
diff --git a/packages/web-runtime/src/components/Account/AppTokens.vue b/packages/web-runtime/src/components/Account/AppTokens.vue
index de51eaa5c9..6f7b1726ac 100644
--- a/packages/web-runtime/src/components/Account/AppTokens.vue
+++ b/packages/web-runtime/src/components/Account/AppTokens.vue
@@ -88,7 +88,7 @@ import {
   useMessages,
   useModals
 } from '@opencloud-eu/web-pkg'
-import { computed, onMounted, onUnmounted, Ref, ref, unref } from 'vue'
+import { computed, markRaw, onMounted, onUnmounted, Ref, ref, unref } from 'vue'
 import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
 import AppTokenModal from '../Modals/AppTokenModal.vue'
@@ -139,7 +139,7 @@ const openCreateAppTokenModal = () => {
   dispatchModal({
     title: $gettext('Create a new app token'),
     confirmText: $gettext('Create'),
-    customComponent: AppTokenModal,
+    customComponent: markRaw(AppTokenModal),
     hideActions: true,
     onConfirm: () => {
       // reload tokens after creating a new one
diff --git a/packages/web-runtime/src/pages/account/accountPreferences.vue b/packages/web-runtime/src/pages/account/accountPreferences.vue
index f4e42d1d0e..a2b73119d2 100644
--- a/packages/web-runtime/src/pages/account/accountPreferences.vue
+++ b/packages/web-runtime/src/pages/account/accountPreferences.vue
@@ -167,7 +167,7 @@ import { useIsMobile } from '@opencloud-eu/design-system/composables'
 import ThemeSwitcher from '../../components/Account/ThemeSwitcher.vue'
 import AccountTable from '../../components/Account/AccountTable.vue'
 import EditPasswordModal from '../../components/EditPasswordModal.vue'
-import { computed, onMounted, ref, unref } from 'vue'
+import { computed, markRaw, onMounted, ref, unref } from 'vue'
 import { LanguageOption, SettingsBundle, SettingsValue } from '../../helpers/settings'
 import { loadAppTranslations, setCurrentLanguage } from '../../helpers/language'
 import { User } from '@opencloud-eu/web-client/graph/generated'
@@ -244,7 +244,7 @@ const emailNotificationsOptionsFields = computed(() => [
 const showEditPasswordModal = () => {
   dispatchModal({
     title: $gettext('Change password'),
-    customComponent: EditPasswordModal
+    customComponent: markRaw(EditPasswordModal)
   })
 }