diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte
index ed31a4b44f..8e1ec4acf7 100644
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -37,6 +37,7 @@
     mdiPlus,
   } from '@mdi/js';
   import { DateTime } from 'luxon';
+  import { onDestroy } from 'svelte';
   import { t } from 'svelte-i18n';
   import { slide } from 'svelte/transition';
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
@@ -52,7 +53,6 @@
 
   let { asset, currentAlbum = null }: Props = $props();
 
-  let showEditFaces = $derived(assetViewerManager.isEditFacesPanelOpen);
   let isOwner = $derived(authManager.authenticated && authManager.user.id === asset.ownerId);
   let people = $derived(asset.people || []);
   let unassignedFaces = $derived(asset.unassignedFaces || []);
@@ -118,379 +118,385 @@
     // Remove the last part of the path to get the parent path
     return Route.folders({ path: getParentPath(asset.originalPath) });
   };
+
+  onDestroy(() => {
+    assetViewerManager.closeEditFacesPanel();
+  });
 </script>
 
 <OnEvents onAlbumAddAssets={() => (albums = refreshAlbums())} />
 
-<section class="relative p-2">
-  <div class="flex place-items-center gap-2">
-    <IconButton
-      icon={mdiClose}
-      aria-label={$t('close')}
-      onclick={() => assetViewerManager.closeDetailPanel()}
-      shape="round"
-      color="secondary"
-      variant="ghost"
-    />
-    <p class="text-lg text-immich-fg dark:text-immich-dark-fg">{$t('info')}</p>
-  </div>
+{#if !assetViewerManager.isEditFacesPanelOpen}
+  <section class="relative p-2">
+    <div class="flex place-items-center gap-2">
+      <IconButton
+        icon={mdiClose}
+        aria-label={$t('close')}
+        onclick={() => assetViewerManager.closeDetailPanel()}
+        shape="round"
+        color="secondary"
+        variant="ghost"
+      />
+      <p class="text-lg text-immich-fg dark:text-immich-dark-fg">{$t('info')}</p>
+    </div>
 
-  {#if asset.isOffline}
-    <section class="px-4 py-4">
-      <div role="alert">
-        <div class="rounded-t bg-red-500 px-4 py-2 font-bold text-white">
-          {$t('asset_offline')}
+    {#if asset.isOffline}
+      <section class="px-4 py-4">
+        <div role="alert">
+          <div class="rounded-t bg-red-500 px-4 py-2 font-bold text-white">
+            {$t('asset_offline')}
+          </div>
+          <div class="border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
+            <p>
+              {#if authManager.authenticated && authManager.user.isAdmin}
+                {$t('admin.asset_offline_description')}
+              {:else}
+                {$t('asset_offline_description')}
+              {/if}
+            </p>
+          </div>
+          <div class="rounded-b bg-red-500 px-4 py-2 text-white text-sm">
+            <p>{asset.originalPath}</p>
+          </div>
         </div>
-        <div class="border border-t-0 border-red-400 bg-red-100 px-4 py-3 text-red-700">
-          <p>
-            {#if authManager.authenticated && authManager.user.isAdmin}
-              {$t('admin.asset_offline_description')}
-            {:else}
-              {$t('asset_offline_description')}
+      </section>
+    {/if}
+
+    <DetailPanelDescription {asset} {isOwner} />
+    <DetailPanelRating {asset} {isOwner} />
+
+    {#if !authManager.isSharedLink && isOwner}
+      <section class="px-4 pt-4 text-sm">
+        <div class="flex h-10 w-full items-center justify-between">
+          <Text size="small" color="muted">{$t('people')}</Text>
+          <div class="flex gap-2 items-center">
+            {#if people.some((person) => person.isHidden)}
+              <IconButton
+                aria-label={$t('show_hidden_people')}
+                icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
+                size="medium"
+                shape="round"
+                color="secondary"
+                variant="ghost"
+                onclick={() => (showingHiddenPeople = !showingHiddenPeople)}
+              />
+            {/if}
+            <IconButton
+              aria-label={$t('tag_people')}
+              icon={mdiPlus}
+              size="medium"
+              shape="round"
+              color="secondary"
+              variant="ghost"
+              onclick={() => assetViewerManager.toggleFaceEditMode()}
+            />
+
+            {#if people.length > 0 || unassignedFaces.length > 0}
+              <IconButton
+                aria-label={$t('edit_people')}
+                icon={mdiPencil}
+                size="medium"
+                shape="round"
+                color="secondary"
+                variant="ghost"
+                onclick={() => assetViewerManager.openEditFacesPanel()}
+              />
+            {/if}
+          </div>
+        </div>
+
+        <div class="mt-2 flex flex-wrap gap-2">
+          {#each people as person, index (person.id)}
+            {#if showingHiddenPeople || !person.isHidden}
+              {@const isHighlighted = people[index].faces.some((f) => $boundingBoxesArray.some((b) => b.id === f.id))}
+              <a
+                class="group w-22 outline-none"
+                href={Route.viewPerson(person, { previousRoute })}
+                onfocus={() => ($boundingBoxesArray = people[index].faces)}
+                onblur={() => ($boundingBoxesArray = [])}
+                onmouseover={() => ($boundingBoxesArray = people[index].faces)}
+                onmouseleave={() => ($boundingBoxesArray = [])}
+              >
+                <div class="relative">
+                  <ImageThumbnail
+                    curve
+                    shadow
+                    url={getPeopleThumbnailUrl(person)}
+                    altText={person.name}
+                    title={person.name}
+                    widthStyle="90px"
+                    heightStyle="90px"
+                    hidden={person.isHidden}
+                    highlighted={isHighlighted}
+                    class="group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-immich-primary dark:group-focus-visible:outline-immich-dark-primary"
+                  />
+                </div>
+                <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
+                {#if person.birthDate}
+                  {@const personBirthDate = DateTime.fromISO(person.birthDate)}
+                  {@const age = Math.floor(DateTime.fromISO(asset.localDateTime).diff(personBirthDate, 'years').years)}
+                  {@const ageInMonths = Math.floor(
+                    DateTime.fromISO(asset.localDateTime).diff(personBirthDate, 'months').months,
+                  )}
+                  {#if age >= 0}
+                    <p
+                      class="font-light"
+                      title={personBirthDate.toLocaleString(
+                        {
+                          month: 'long',
+                          day: 'numeric',
+                          year: 'numeric',
+                        },
+                        { locale: $locale },
+                      )}
+                    >
+                      {#if ageInMonths <= 11}
+                        {$t('age_months', { values: { months: ageInMonths } })}
+                      {:else if ageInMonths > 12 && ageInMonths <= 23}
+                        {$t('age_year_months', { values: { months: ageInMonths - 12 } })}
+                      {:else}
+                        {$t('age_years', { values: { years: age } })}
+                      {/if}
+                    </p>
+                  {/if}
+                {/if}
+              </a>
+            {/if}
+          {/each}
+        </div>
+      </section>
+    {/if}
+
+    <div class="px-4 py-4">
+      {#if asset.exifInfo}
+        <div class="flex h-10 w-full items-center justify-between text-sm">
+          <Text size="small" color="muted">{$t('details')}</Text>
+        </div>
+      {:else}
+        <Text size="small" color="muted">{$t('no_exif_info_available')}</Text>
+      {/if}
+
+      <DetailPanelDate {asset} />
+
+      <div class="flex gap-4 py-4">
+        <div><Icon icon={mdiImageOutline} size="24" /></div>
+
+        <div>
+          <p class="break-all flex place-items-center gap-2 whitespace-pre-wrap">
+            {asset.originalFileName}
+            {#if isOwner}
+              <IconButton
+                icon={mdiInformationOutline}
+                aria-label={$t('show_file_location')}
+                size="small"
+                shape="round"
+                color="secondary"
+                variant="ghost"
+                onclick={() => assetViewerManager.toggleAssetPath()}
+              />
             {/if}
           </p>
-        </div>
-        <div class="rounded-b bg-red-500 px-4 py-2 text-white text-sm">
-          <p>{asset.originalPath}</p>
-        </div>
-      </div>
-    </section>
-  {/if}
-
-  <DetailPanelDescription {asset} {isOwner} />
-  <DetailPanelRating {asset} {isOwner} />
-
-  {#if !authManager.isSharedLink && isOwner}
-    <section class="px-4 pt-4 text-sm">
-      <div class="flex h-10 w-full items-center justify-between">
-        <Text size="small" color="muted">{$t('people')}</Text>
-        <div class="flex gap-2 items-center">
-          {#if people.some((person) => person.isHidden)}
-            <IconButton
-              aria-label={$t('show_hidden_people')}
-              icon={showingHiddenPeople ? mdiEyeOff : mdiEye}
-              size="medium"
-              shape="round"
-              color="secondary"
-              variant="ghost"
-              onclick={() => (showingHiddenPeople = !showingHiddenPeople)}
-            />
+          {#if assetViewerManager.isShowAssetPath}
+            <p class="text-xs opacity-50 break-all pb-2 hover:text-primary" transition:slide={{ duration: 250 }}>
+              <!-- eslint-disable-next-line svelte/no-navigation-without-resolve this is supposed to be treated as an absolute/external link -->
+              <a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">
+                {asset.originalPath}
+              </a>
+            </p>
           {/if}
-          <IconButton
-            aria-label={$t('tag_people')}
-            icon={mdiPlus}
-            size="medium"
-            shape="round"
-            color="secondary"
-            variant="ghost"
-            onclick={() => assetViewerManager.toggleFaceEditMode()}
-          />
-
-          {#if people.length > 0 || unassignedFaces.length > 0}
-            <IconButton
-              aria-label={$t('edit_people')}
-              icon={mdiPencil}
-              size="medium"
-              shape="round"
-              color="secondary"
-              variant="ghost"
-              onclick={() => assetViewerManager.openEditFacesPanel()}
-            />
-          {/if}
-        </div>
-      </div>
-
-      <div class="mt-2 flex flex-wrap gap-2">
-        {#each people as person, index (person.id)}
-          {#if showingHiddenPeople || !person.isHidden}
-            {@const isHighlighted = people[index].faces.some((f) => $boundingBoxesArray.some((b) => b.id === f.id))}
-            <a
-              class="group w-22 outline-none"
-              href={Route.viewPerson(person, { previousRoute })}
-              onfocus={() => ($boundingBoxesArray = people[index].faces)}
-              onblur={() => ($boundingBoxesArray = [])}
-              onmouseover={() => ($boundingBoxesArray = people[index].faces)}
-              onmouseleave={() => ($boundingBoxesArray = [])}
-            >
-              <div class="relative">
-                <ImageThumbnail
-                  curve
-                  shadow
-                  url={getPeopleThumbnailUrl(person)}
-                  altText={person.name}
-                  title={person.name}
-                  widthStyle="90px"
-                  heightStyle="90px"
-                  hidden={person.isHidden}
-                  highlighted={isHighlighted}
-                  class="group-focus-visible:outline-2 group-focus-visible:outline-offset-2 group-focus-visible:outline-immich-primary dark:group-focus-visible:outline-immich-dark-primary"
-                />
-              </div>
-              <p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
-              {#if person.birthDate}
-                {@const personBirthDate = DateTime.fromISO(person.birthDate)}
-                {@const age = Math.floor(DateTime.fromISO(asset.localDateTime).diff(personBirthDate, 'years').years)}
-                {@const ageInMonths = Math.floor(
-                  DateTime.fromISO(asset.localDateTime).diff(personBirthDate, 'months').months,
-                )}
-                {#if age >= 0}
-                  <p
-                    class="font-light"
-                    title={personBirthDate.toLocaleString(
-                      {
-                        month: 'long',
-                        day: 'numeric',
-                        year: 'numeric',
-                      },
-                      { locale: $locale },
-                    )}
-                  >
-                    {#if ageInMonths <= 11}
-                      {$t('age_months', { values: { months: ageInMonths } })}
-                    {:else if ageInMonths > 12 && ageInMonths <= 23}
-                      {$t('age_year_months', { values: { months: ageInMonths - 12 } })}
-                    {:else}
-                      {$t('age_years', { values: { years: age } })}
-                    {/if}
+          {#if (asset.exifInfo?.exifImageHeight && asset.exifInfo?.exifImageWidth) || asset.exifInfo?.fileSizeInByte}
+            <div class="flex gap-2 text-sm">
+              {#if asset.exifInfo?.exifImageHeight && asset.exifInfo?.exifImageWidth}
+                {#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
+                  <p>
+                    {getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
                   </p>
                 {/if}
+                {@const { width, height } = getDimensions(asset.exifInfo)}
+                <p>{width} x {height}</p>
               {/if}
-            </a>
+              {#if asset.exifInfo?.fileSizeInByte}
+                <p>{getByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
+              {/if}
+            </div>
           {/if}
-        {/each}
+        </div>
+      </div>
+
+      {#if asset.exifInfo?.make || asset.exifInfo?.model || asset.exifInfo?.exposureTime || asset.exifInfo?.iso}
+        <div class="flex gap-4 py-4">
+          <div><Icon icon={mdiCamera} size="24" /></div>
+
+          <div>
+            {#if asset.exifInfo?.make || asset.exifInfo?.model}
+              <p>
+                <a
+                  href={Route.search({
+                    make: asset.exifInfo?.make ?? undefined,
+                    model: asset.exifInfo?.model ?? undefined,
+                  })}
+                  title="{$t('search_for')} {asset.exifInfo.make || ''} {asset.exifInfo.model || ''}"
+                  class="hover:text-primary"
+                >
+                  {asset.exifInfo.make || ''}
+                  {asset.exifInfo.model || ''}
+                </a>
+              </p>
+            {/if}
+
+            <div class="flex gap-2 text-sm">
+              {#if asset.exifInfo.exposureTime}
+                <p>{`${asset.exifInfo.exposureTime} s`}</p>
+              {/if}
+
+              {#if asset.exifInfo.iso}
+                <p>{`ISO ${asset.exifInfo.iso}`}</p>
+              {/if}
+            </div>
+          </div>
+        </div>
+      {/if}
+
+      {#if asset.exifInfo?.lensModel || asset.exifInfo?.fNumber || asset.exifInfo?.focalLength}
+        <div class="flex gap-4 py-4">
+          <div><Icon icon={mdiCameraIris} size="24" /></div>
+
+          <div>
+            {#if asset.exifInfo?.lensModel}
+              <p>
+                <a
+                  href={Route.search({ lensModel: asset.exifInfo.lensModel })}
+                  title="{$t('search_for')} {asset.exifInfo.lensModel}"
+                  class="hover:text-primary line-clamp-1"
+                >
+                  {asset.exifInfo.lensModel}
+                </a>
+              </p>
+            {/if}
+
+            <div class="flex gap-2 text-sm">
+              {#if asset.exifInfo?.fNumber}
+                <p>ƒ/{asset.exifInfo.fNumber.toLocaleString($locale)}</p>
+              {/if}
+
+              {#if asset.exifInfo.focalLength}
+                <p>{`${asset.exifInfo.focalLength.toLocaleString($locale)} mm`}</p>
+              {/if}
+            </div>
+          </div>
+        </div>
+      {/if}
+
+      <DetailPanelLocation {isOwner} {asset} />
+    </div>
+  </section>
+
+  {#if latlng && featureFlagsManager.value.map}
+    <div class="h-90">
+      {#await import('$lib/components/shared-components/map/map.svelte')}
+        {#await delay(timeToLoadTheMap) then}
+          <!-- show the loading spinner only if loading the map takes too much time -->
+          <div class="flex items-center justify-center h-full w-full">
+            <LoadingSpinner />
+          </div>
+        {/await}
+      {:then { default: Map }}
+        <Map
+          mapMarkers={[
+            {
+              lat: latlng.lat,
+              lon: latlng.lng,
+              id: asset.id,
+              city: asset.exifInfo?.city ?? null,
+              state: asset.exifInfo?.state ?? null,
+              country: asset.exifInfo?.country ?? null,
+            },
+          ]}
+          center={latlng}
+          showSettings={false}
+          zoom={12.5}
+          simplified
+          useLocationPin
+          showSimpleControls={!assetViewerManager.isEditFacesPanelOpen}
+          onOpenInMapView={() => goto(Route.map({ ...latlng, zoom: 12.5 }))}
+        >
+          {#snippet popup({ marker })}
+            {@const { lat, lon } = marker}
+            <div class="flex flex-col items-center gap-1">
+              <p class="font-bold">{lat.toPrecision(6)}, {lon.toPrecision(6)}</p>
+              <a
+                href="https://www.openstreetmap.org/?mlat={lat}&mlon={lon}&zoom=13#map=15/{lat}/{lon}"
+                target="_blank"
+                class="font-medium text-primary underline focus:outline-none"
+              >
+                {$t('open_in_openstreetmap')}
+              </a>
+            </div>
+          {/snippet}
+        </Map>
+      {/await}
+    </div>
+  {/if}
+
+  {#if currentAlbum && currentAlbum.albumUsers.length > 0 && asset.owner}
+    <section class="px-6 dark:text-immich-dark-fg mt-4">
+      <Text size="small" color="muted">{$t('shared_by')}</Text>
+      <div class="flex gap-4 pt-4">
+        <div>
+          <UserAvatar user={asset.owner} size="md" />
+        </div>
+
+        <div class="mb-auto mt-auto">
+          <p>
+            {asset.owner.name}
+          </p>
+        </div>
       </div>
     </section>
   {/if}
 
-  <div class="px-4 py-4">
-    {#if asset.exifInfo}
-      <div class="flex h-10 w-full items-center justify-between text-sm">
-        <Text size="small" color="muted">{$t('details')}</Text>
-      </div>
-    {:else}
-      <Text size="small" color="muted">{$t('no_exif_info_available')}</Text>
-    {/if}
-
-    <DetailPanelDate {asset} />
-
-    <div class="flex gap-4 py-4">
-      <div><Icon icon={mdiImageOutline} size="24" /></div>
-
-      <div>
-        <p class="break-all flex place-items-center gap-2 whitespace-pre-wrap">
-          {asset.originalFileName}
-          {#if isOwner}
-            <IconButton
-              icon={mdiInformationOutline}
-              aria-label={$t('show_file_location')}
-              size="small"
-              shape="round"
-              color="secondary"
-              variant="ghost"
-              onclick={() => assetViewerManager.toggleAssetPath()}
-            />
-          {/if}
-        </p>
-        {#if assetViewerManager.isShowAssetPath}
-          <p class="text-xs opacity-50 break-all pb-2 hover:text-primary" transition:slide={{ duration: 250 }}>
-            <!-- eslint-disable-next-line svelte/no-navigation-without-resolve this is supposed to be treated as an absolute/external link -->
-            <a href={getAssetFolderHref(asset)} title={$t('go_to_folder')} class="whitespace-pre-wrap">
-              {asset.originalPath}
-            </a>
-          </p>
-        {/if}
-        {#if (asset.exifInfo?.exifImageHeight && asset.exifInfo?.exifImageWidth) || asset.exifInfo?.fileSizeInByte}
-          <div class="flex gap-2 text-sm">
-            {#if asset.exifInfo?.exifImageHeight && asset.exifInfo?.exifImageWidth}
-              {#if getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)}
-                <p>
-                  {getMegapixel(asset.exifInfo.exifImageHeight, asset.exifInfo.exifImageWidth)} MP
-                </p>
-              {/if}
-              {@const { width, height } = getDimensions(asset.exifInfo)}
-              <p>{width} x {height}</p>
-            {/if}
-            {#if asset.exifInfo?.fileSizeInByte}
-              <p>{getByteUnitString(asset.exifInfo.fileSizeInByte, $locale)}</p>
-            {/if}
-          </div>
-        {/if}
-      </div>
-    </div>
-
-    {#if asset.exifInfo?.make || asset.exifInfo?.model || asset.exifInfo?.exposureTime || asset.exifInfo?.iso}
-      <div class="flex gap-4 py-4">
-        <div><Icon icon={mdiCamera} size="24" /></div>
-
-        <div>
-          {#if asset.exifInfo?.make || asset.exifInfo?.model}
-            <p>
-              <a
-                href={Route.search({
-                  make: asset.exifInfo?.make ?? undefined,
-                  model: asset.exifInfo?.model ?? undefined,
-                })}
-                title="{$t('search_for')} {asset.exifInfo.make || ''} {asset.exifInfo.model || ''}"
-                class="hover:text-primary"
-              >
-                {asset.exifInfo.make || ''}
-                {asset.exifInfo.model || ''}
-              </a>
-            </p>
-          {/if}
-
-          <div class="flex gap-2 text-sm">
-            {#if asset.exifInfo.exposureTime}
-              <p>{`${asset.exifInfo.exposureTime} s`}</p>
-            {/if}
-
-            {#if asset.exifInfo.iso}
-              <p>{`ISO ${asset.exifInfo.iso}`}</p>
-            {/if}
-          </div>
+  {#await albums then albums}
+    {#if albums.length > 0}
+      <section class="px-6 py-6 dark:text-immich-dark-fg">
+        <div class="pb-4">
+          <Text size="small" color="muted">{$t('appears_in')}</Text>
         </div>
-      </div>
-    {/if}
+        {#each albums as album (album.id)}
+          <a href={Route.viewAlbum(album)}>
+            <div class="flex gap-4 pt-2 hover:cursor-pointer items-center">
+              <div>
+                <img
+                  alt={album.albumName}
+                  class="h-12.5 w-12.5 rounded object-cover"
+                  src={album.albumThumbnailAssetId &&
+                    getAssetMediaUrl({ id: album.albumThumbnailAssetId, size: AssetMediaSize.Preview })}
+                  draggable="false"
+                />
+              </div>
 
-    {#if asset.exifInfo?.lensModel || asset.exifInfo?.fNumber || asset.exifInfo?.focalLength}
-      <div class="flex gap-4 py-4">
-        <div><Icon icon={mdiCameraIris} size="24" /></div>
-
-        <div>
-          {#if asset.exifInfo?.lensModel}
-            <p>
-              <a
-                href={Route.search({ lensModel: asset.exifInfo.lensModel })}
-                title="{$t('search_for')} {asset.exifInfo.lensModel}"
-                class="hover:text-primary line-clamp-1"
-              >
-                {asset.exifInfo.lensModel}
-              </a>
-            </p>
-          {/if}
-
-          <div class="flex gap-2 text-sm">
-            {#if asset.exifInfo?.fNumber}
-              <p>ƒ/{asset.exifInfo.fNumber.toLocaleString($locale)}</p>
-            {/if}
-
-            {#if asset.exifInfo.focalLength}
-              <p>{`${asset.exifInfo.focalLength.toLocaleString($locale)} mm`}</p>
-            {/if}
-          </div>
-        </div>
-      </div>
-    {/if}
-
-    <DetailPanelLocation {isOwner} {asset} />
-  </div>
-</section>
-
-{#if latlng && featureFlagsManager.value.map}
-  <div class="h-90">
-    {#await import('$lib/components/shared-components/map/map.svelte')}
-      {#await delay(timeToLoadTheMap) then}
-        <!-- show the loading spinner only if loading the map takes too much time -->
-        <div class="flex items-center justify-center h-full w-full">
-          <LoadingSpinner />
-        </div>
-      {/await}
-    {:then { default: Map }}
-      <Map
-        mapMarkers={[
-          {
-            lat: latlng.lat,
-            lon: latlng.lng,
-            id: asset.id,
-            city: asset.exifInfo?.city ?? null,
-            state: asset.exifInfo?.state ?? null,
-            country: asset.exifInfo?.country ?? null,
-          },
-        ]}
-        center={latlng}
-        showSettings={false}
-        zoom={12.5}
-        simplified
-        useLocationPin
-        showSimpleControls={!showEditFaces}
-        onOpenInMapView={() => goto(Route.map({ ...latlng, zoom: 12.5 }))}
-      >
-        {#snippet popup({ marker })}
-          {@const { lat, lon } = marker}
-          <div class="flex flex-col items-center gap-1">
-            <p class="font-bold">{lat.toPrecision(6)}, {lon.toPrecision(6)}</p>
-            <a
-              href="https://www.openstreetmap.org/?mlat={lat}&mlon={lon}&zoom=13#map=15/{lat}/{lon}"
-              target="_blank"
-              class="font-medium text-primary underline focus:outline-none"
-            >
-              {$t('open_in_openstreetmap')}
-            </a>
-          </div>
-        {/snippet}
-      </Map>
-    {/await}
-  </div>
-{/if}
-
-{#if currentAlbum && currentAlbum.albumUsers.length > 0 && asset.owner}
-  <section class="px-6 dark:text-immich-dark-fg mt-4">
-    <Text size="small" color="muted">{$t('shared_by')}</Text>
-    <div class="flex gap-4 pt-4">
-      <div>
-        <UserAvatar user={asset.owner} size="md" />
-      </div>
-
-      <div class="mb-auto mt-auto">
-        <p>
-          {asset.owner.name}
-        </p>
-      </div>
-    </div>
-  </section>
-{/if}
-
-{#await albums then albums}
-  {#if albums.length > 0}
-    <section class="px-6 py-6 dark:text-immich-dark-fg">
-      <div class="pb-4">
-        <Text size="small" color="muted">{$t('appears_in')}</Text>
-      </div>
-      {#each albums as album (album.id)}
-        <a href={Route.viewAlbum(album)}>
-          <div class="flex gap-4 pt-2 hover:cursor-pointer items-center">
-            <div>
-              <img
-                alt={album.albumName}
-                class="h-12.5 w-12.5 rounded object-cover"
-                src={album.albumThumbnailAssetId &&
-                  getAssetMediaUrl({ id: album.albumThumbnailAssetId, size: AssetMediaSize.Preview })}
-                draggable="false"
-              />
-            </div>
-
-            <div class="mb-auto mt-auto">
-              <p class="dark:text-immich-dark-primary">{album.albumName}</p>
-              <div class="flex flex-col gap-0 text-sm">
-                <div>
-                  <AlbumListItemDetails {album} />
+              <div class="mb-auto mt-auto">
+                <p class="dark:text-immich-dark-primary">{album.albumName}</p>
+                <div class="flex flex-col gap-0 text-sm">
+                  <div>
+                    <AlbumListItemDetails {album} />
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </a>
-      {/each}
+          </a>
+        {/each}
+      </section>
+    {/if}
+  {/await}
+
+  {#if authManager.authenticated && authManager.preferences.tags.enabled}
+    <section class="relative px-2 pb-12 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
+      <DetailPanelTags {asset} {isOwner} />
     </section>
   {/if}
-{/await}
-
-{#if authManager.authenticated && authManager.preferences.tags.enabled}
-  <section class="relative px-2 pb-12 dark:bg-immich-dark-bg dark:text-immich-dark-fg">
-    <DetailPanelTags {asset} {isOwner} />
-  </section>
 {/if}
 
-{#if showEditFaces}
+{#if assetViewerManager.isEditFacesPanelOpen}
   <PersonSidePanel
     assetId={asset.id}
     assetType={asset.type}
diff --git a/web/src/lib/managers/asset-viewer-manager.svelte.ts b/web/src/lib/managers/asset-viewer-manager.svelte.ts
index f7ece3032f..72da457a91 100644
--- a/web/src/lib/managers/asset-viewer-manager.svelte.ts
+++ b/web/src/lib/managers/asset-viewer-manager.svelte.ts
@@ -209,7 +209,6 @@ class AssetViewerManager extends BaseEventManager<Events> {
     this.closeFaceEditMode();
     this.closeEditFacesPanel();
   }
-
   setAsset(asset: AssetResponseDto) {
     this.#viewingAssetStoreState = asset;
     this.#viewState = true;