diff --git a/web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte b/web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte
index a35ff11c48..6887ae8ebb 100644
--- a/web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte
+++ b/web/src/lib/components/asset-viewer/actions/set-profile-picture-action.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
-  import Portal from '$lib/components/shared-components/portal/portal.svelte';
-  import ProfileImageCropper from '$lib/components/shared-components/profile-image-cropper.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import ProfileImageCropperModal from '$lib/modals/ProfileImageCropperModal.svelte';
   import type { AssetResponseDto } from '@immich/sdk';
   import { mdiAccountCircleOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
@@ -11,18 +11,10 @@
   }
 
   let { asset }: Props = $props();
-
-  let showProfileImageCrop = $state(false);
 </script>
 
 <MenuOption
   icon={mdiAccountCircleOutline}
-  onClick={() => (showProfileImageCrop = true)}
+  onClick={() => modalManager.show(ProfileImageCropperModal, { asset })}
   text={$t('set_as_profile_picture')}
 />
-
-{#if showProfileImageCrop}
-  <Portal target="body">
-    <ProfileImageCropper {asset} onClose={() => (showProfileImageCrop = false)} />
-  </Portal>
-{/if}
diff --git a/web/src/lib/components/shared-components/profile-image-cropper.svelte b/web/src/lib/modals/ProfileImageCropperModal.svelte
similarity index 94%
rename from web/src/lib/components/shared-components/profile-image-cropper.svelte
rename to web/src/lib/modals/ProfileImageCropperModal.svelte
index 6e55d94f7f..378073dd05 100644
--- a/web/src/lib/components/shared-components/profile-image-cropper.svelte
+++ b/web/src/lib/modals/ProfileImageCropperModal.svelte
@@ -6,8 +6,8 @@
   import domtoimage from 'dom-to-image';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
-  import PhotoViewer from '../asset-viewer/photo-viewer.svelte';
-  import { NotificationType, notificationController } from './notification/notification';
+  import PhotoViewer from '../components/asset-viewer/photo-viewer.svelte';
+  import { NotificationType, notificationController } from '../components/shared-components/notification/notification';
 
   interface Props {
     asset: AssetResponseDto;