diff --git a/web/src/lib/components/album-page/albums-list.svelte b/web/src/lib/components/album-page/albums-list.svelte
index da036dd039205..32cccbc850bc1 100644
--- a/web/src/lib/components/album-page/albums-list.svelte
+++ b/web/src/lib/components/album-page/albums-list.svelte
@@ -143,7 +143,6 @@
 
   let albumGroupOption: string = $state(AlbumGroupBy.None);
 
-  let albumToEdit: AlbumResponseDto | null = $state(null);
   let albumToShare: AlbumResponseDto | null = $state(null);
   let albumToDelete: AlbumResponseDto | null = null;
 
@@ -257,9 +256,14 @@
     await deleteSelectedAlbum();
   };
 
-  const handleEdit = (album: AlbumResponseDto) => {
-    albumToEdit = album;
+  const handleEdit = async (album: AlbumResponseDto) => {
     closeAlbumContextMenu();
+    const editedAlbum = await modalManager.show(EditAlbumForm, {
+      album,
+    });
+    if (editedAlbum) {
+      successEditAlbumInfo(editedAlbum);
+    }
   };
 
   const deleteSelectedAlbum = async () => {
@@ -305,8 +309,6 @@
   };
 
   const successEditAlbumInfo = (album: AlbumResponseDto) => {
-    albumToEdit = null;
-
     notificationController.show({
       message: $t('album_info_updated'),
       type: NotificationType.Info,
@@ -422,15 +424,3 @@
     <MenuOption icon={mdiDeleteOutline} text={$t('delete')} onClick={() => setAlbumToDelete()} />
   {/if}
 </RightClickContextMenu>
-
-{#if allowEdit}
-  <!-- Edit Modal -->
-  {#if albumToEdit}
-    <EditAlbumForm
-      album={albumToEdit}
-      onEditSuccess={successEditAlbumInfo}
-      onCancel={() => (albumToEdit = null)}
-      onClose={() => (albumToEdit = null)}
-    />
-  {/if}
-{/if}
diff --git a/web/src/lib/components/forms/edit-album-form.svelte b/web/src/lib/components/forms/edit-album-form.svelte
index 32e1e422e7c22..c6ad3d600a6c4 100644
--- a/web/src/lib/components/forms/edit-album-form.svelte
+++ b/web/src/lib/components/forms/edit-album-form.svelte
@@ -8,12 +8,10 @@
 
   interface Props {
     album: AlbumResponseDto;
-    onEditSuccess?: ((album: AlbumResponseDto) => unknown) | undefined;
-    onCancel?: (() => unknown) | undefined;
-    onClose: () => void;
+    onClose: (album?: AlbumResponseDto) => void;
   }
 
-  let { album = $bindable(), onEditSuccess = undefined, onCancel = undefined, onClose }: Props = $props();
+  let { album = $bindable(), onClose }: Props = $props();
 
   let albumName = $state(album.albumName);
   let description = $state(album.description);
@@ -32,7 +30,7 @@
       });
       album.albumName = albumName;
       album.description = description;
-      onEditSuccess?.(album);
+      onClose(album);
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_album_info'));
     } finally {
@@ -71,7 +69,7 @@
 
   <ModalFooter>
     <div class="flex gap-2 w-full">
-      <Button shape="round" color="secondary" fullWidth onclick={() => onCancel?.()}>{$t('cancel')}</Button>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button shape="round" type="submit" fullWidth disabled={isSubmitting} form="edit-album-form">{$t('save')}</Button>
     </div>
   </ModalFooter>