diff --git a/web/src/lib/utils/navigation.ts b/web/src/lib/utils/navigation.ts
index 1745240da3..e5cb25793e 100644
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@@ -18,8 +18,8 @@ export const isPeopleRoute = (route?: string | null) => !!route?.startsWith('/(u
 export const isAssetViewerRoute = (target?: NavigationTarget | null) =>
   !!(target?.route.id?.endsWith('/[[assetId=id]]') && 'assetId' in (target?.params || {}));
 
-export function getAssetInfoFromParam({ assetId }: { assetId?: string }) {
-  return assetId && getAssetInfo({ id: assetId });
+export function getAssetInfoFromParam({ assetId, key }: { assetId?: string; key?: string }) {
+  return assetId && getAssetInfo({ id: assetId, key });
 }
 
 function currentUrlWithoutAsset() {
diff --git a/web/src/routes/(user)/share/[key]/+page.svelte b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
similarity index 100%
rename from web/src/routes/(user)/share/[key]/+page.svelte
rename to web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.svelte
diff --git a/web/src/routes/(user)/share/[key]/+page.ts b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts
similarity index 89%
rename from web/src/routes/(user)/share/[key]/+page.ts
rename to web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts
index 89821a447b..54fb3d6322 100644
--- a/web/src/routes/(user)/share/[key]/+page.ts
+++ b/web/src/routes/(user)/share/[key]/[[photos=photos]]/[[assetId=id]]/+page.ts
@@ -1,11 +1,13 @@
 import { getAssetThumbnailUrl, setSharedLink } from '$lib/utils';
 import { authenticate } from '$lib/utils/auth';
+import { getAssetInfoFromParam } from '$lib/utils/navigation';
 import { ThumbnailFormat, getMySharedLink, isHttpError } from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async ({ params }) => {
   const { key } = params;
   await authenticate({ public: true });
+  const asset = await getAssetInfoFromParam(params);
 
   try {
     const sharedLink = await getMySharedLink({ key });
@@ -15,6 +17,8 @@ export const load = (async ({ params }) => {
 
     return {
       sharedLink,
+      asset,
+      key,
       meta: {
         title: sharedLink.album ? sharedLink.album.albumName : 'Public Share',
         description: sharedLink.description || `${assetCount} shared photos & videos.`,
diff --git a/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte b/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte
deleted file mode 100644
index 73437be866..0000000000
--- a/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-<script lang="ts">
-  import AssetViewer from '$lib/components/asset-viewer/asset-viewer.svelte';
-  import type { PageData } from './$types';
-  import { goto } from '$app/navigation';
-  import { AppRoute } from '$lib/constants';
-  export let data: PageData;
-</script>
-
-{#if data.asset && data.key}
-  <AssetViewer
-    asset={data.asset}
-    showNavigation={false}
-    on:previous={() => null}
-    on:next={() => null}
-    on:close={() => goto(`${AppRoute.SHARE}/${data.key}`)}
-  />
-{/if}
diff --git a/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.ts b/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.ts
deleted file mode 100644
index 471d304c48..0000000000
--- a/web/src/routes/(user)/share/[key]/photos/[assetId]/+page.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { getAssetInfo } from '@immich/sdk';
-import type { PageLoad } from './$types';
-
-export const load = (async ({ params }) => {
-  const { key, assetId } = params;
-  const asset = await getAssetInfo({ id: assetId, key });
-
-  return {
-    asset,
-    key,
-    meta: {
-      title: 'Public Share',
-    },
-  };
-}) satisfies PageLoad;