diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index ac99c105ef..2b36d5723f 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -8,13 +8,13 @@
 </script>
 
 <script lang="ts">
-	import { page } from '$app/stores';
+	import {page} from '$app/stores';
 	import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
-	import { handleError } from '$lib/utils/handle-error';
-	import { AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat } from '@api';
+	import {handleError} from '$lib/utils/handle-error';
+	import {AssetResponseDto, SharedLinkResponseDto, ThumbnailFormat} from '@api';
 	import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
-	import { flip } from 'svelte/animate';
-	import { archivedAsset } from '$lib/stores/archived-asset.store';
+	import {flip} from 'svelte/animate';
+	import {archivedAsset} from '$lib/stores/archived-asset.store';
 
 	export let assets: AssetResponseDto[];
 	export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@@ -46,7 +46,7 @@
 	}
 
 	const viewAssetHandler = (event: CustomEvent) => {
-		const { asset }: { asset: AssetResponseDto } = event.detail;
+		const {asset}: { asset: AssetResponseDto } = event.detail;
 
 		currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id);
 		selectedAsset = assets[currentViewAssetIndex];
@@ -55,7 +55,7 @@
 	};
 
 	const selectAssetHandler = (event: CustomEvent) => {
-		const { asset }: { asset: AssetResponseDto } = event.detail;
+		const {asset}: { asset: AssetResponseDto } = event.detail;
 		let temp = new Set(selectedAssets);
 
 		if (selectedAssets.has(asset)) {
@@ -114,34 +114,34 @@
 </script>
 
 {#if assets.length > 0}
-	<div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
-		{#each assets as asset (asset.id)}
-			<div animate:flip={{ duration: 500 }}>
-				<Thumbnail
-					{asset}
-					{thumbnailSize}
-					readonly={disableAssetSelect}
-					publicSharedKey={sharedLink?.key}
-					format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
-					on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
-					on:select={selectAssetHandler}
-					selected={selectedAssets.has(asset)}
-					{showArchiveIcon}
-				/>
-			</div>
-		{/each}
-	</div>
+    <div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
+        {#each assets as asset (asset.id)}
+            <div animate:flip={{ duration: 500 }}>
+                <Thumbnail
+                        {asset}
+                        {thumbnailSize}
+                        readonly={disableAssetSelect}
+                        publicSharedKey={sharedLink?.key}
+                        format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
+                        on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
+                        on:select={selectAssetHandler}
+                        selected={selectedAssets.has(asset)}
+                        {showArchiveIcon}
+                />
+            </div>
+        {/each}
+    </div>
 {/if}
 
 <!-- Overlay Asset Viewer -->
 {#if isShowAssetViewer}
-	<AssetViewer
-		asset={selectedAsset}
-		publicSharedKey={sharedLink?.key}
-		{sharedLink}
-		on:navigate-previous={navigateAssetBackward}
-		on:navigate-next={navigateAssetForward}
-		on:close={closeViewer}
-		on:unarchived={handleUnarchivedSuccess}
-	/>
+    <AssetViewer
+            asset={selectedAsset}
+            publicSharedKey={sharedLink?.key}
+            {sharedLink}
+            on:navigate-previous={navigateAssetBackward}
+            on:navigate-next={navigateAssetForward}
+            on:close={closeViewer}
+            on:unarchived={handleUnarchivedSuccess}
+    />
 {/if}
diff --git a/web/src/routes/(user)/archive/+page.svelte b/web/src/routes/(user)/archive/+page.svelte
index 2100ad8a48..582e90448c 100644
--- a/web/src/routes/(user)/archive/+page.svelte
+++ b/web/src/routes/(user)/archive/+page.svelte
@@ -10,15 +10,15 @@
 	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
 	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
 	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
-	import { archivedAsset } from '$lib/stores/archived-asset.store';
-	import { handleError } from '$lib/utils/handle-error';
-	import { api, AssetResponseDto } from '@api';
-	import { onMount } from 'svelte';
+	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+	import {archivedAsset} from '$lib/stores/archived-asset.store';
+	import {handleError} from '$lib/utils/handle-error';
+	import {api, AssetResponseDto} from '@api';
+	import {onMount} from 'svelte';
 	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
 	import Plus from 'svelte-material-icons/Plus.svelte';
-	import type { PageData } from './$types';
-  import CircleIconButton from "$lib/components/elements/buttons/circle-icon-button.svelte";
+	import type {PageData} from './$types';
+	import CircleIconButton from "$lib/components/elements/buttons/circle-icon-button.svelte";
 
 	export let data: PageData;
 
@@ -28,7 +28,7 @@
 
 	onMount(async () => {
 		try {
-			const { data: assets } = await api.assetApi.getAllAssets({
+			const {data: assets} = await api.assetApi.getAllAssets({
 				isArchived: true,
 				withoutThumbs: true
 			});
@@ -41,41 +41,41 @@
 	const onAssetDelete = (assetId: string) => {
 		$archivedAsset = $archivedAsset.filter((a) => a.id !== assetId);
 	};
-  const handleSelectAll = () => {
-    selectedAssets = new Set($archivedAsset)
-  }
+	const handleSelectAll = () => {
+		selectedAssets = new Set($archivedAsset)
+	}
 </script>
 
 <UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
-	<!-- Empty Message -->
-	{#if $archivedAsset.length === 0}
-		<EmptyPlaceholder
-			text="Archive photos and videos to hide them from your Photos view"
-			alt="Empty archive"
-		/>
-	{/if}
+    <!-- Empty Message -->
+    {#if $archivedAsset.length === 0}
+        <EmptyPlaceholder
+                text="Archive photos and videos to hide them from your Photos view"
+                alt="Empty archive"
+        />
+    {/if}
 
-	<svelte:fragment slot="header">
-		{#if isMultiSelectionMode}
-			<AssetSelectControlBar
-				assets={selectedAssets}
-				clearSelect={() => (selectedAssets = new Set())}
-			>
-				<ArchiveAction unarchive onAssetArchive={(asset) => onAssetDelete(asset.id)} />
-        <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
-				<CreateSharedLink />
-				<AssetSelectContextMenu icon={Plus} title="Add">
-					<AddToAlbum />
-					<AddToAlbum shared />
-				</AssetSelectContextMenu>
-				<DeleteAssets {onAssetDelete} />
-				<AssetSelectContextMenu icon={DotsVertical} title="Add">
-					<DownloadAction menuItem />
-					<FavoriteAction menuItem removeFavorite={isAllFavorite} />
-				</AssetSelectContextMenu>
-			</AssetSelectControlBar>
-		{/if}
-	</svelte:fragment>
+    <svelte:fragment slot="header">
+        {#if isMultiSelectionMode}
+            <AssetSelectControlBar
+                    assets={selectedAssets}
+                    clearSelect={() => (selectedAssets = new Set())}
+            >
+                <ArchiveAction unarchive onAssetArchive={(asset) => onAssetDelete(asset.id)}/>
+                <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
+                <CreateSharedLink/>
+                <AssetSelectContextMenu icon={Plus} title="Add">
+                    <AddToAlbum/>
+                    <AddToAlbum shared/>
+                </AssetSelectContextMenu>
+                <DeleteAssets {onAssetDelete}/>
+                <AssetSelectContextMenu icon={DotsVertical} title="Add">
+                    <DownloadAction menuItem/>
+                    <FavoriteAction menuItem removeFavorite={isAllFavorite}/>
+                </AssetSelectContextMenu>
+            </AssetSelectControlBar>
+        {/if}
+    </svelte:fragment>
 
-	<GalleryViewer assets={$archivedAsset} bind:selectedAssets viewFrom="archive-page" />
+    <GalleryViewer assets={$archivedAsset} bind:selectedAssets viewFrom="archive-page"/>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 4405a55db1..397c0d817f 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -2,13 +2,13 @@
 	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
 	import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
 	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-	import { AppRoute } from '$lib/constants';
-	import { AssetTypeEnum, SearchExploreResponseDto, api } from '@api';
+	import {AppRoute} from '$lib/constants';
+	import {AssetTypeEnum, SearchExploreResponseDto, api} from '@api';
 	import ClockOutline from 'svelte-material-icons/ClockOutline.svelte';
 	import HeartMultipleOutline from 'svelte-material-icons/HeartMultipleOutline.svelte';
 	import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
 	import PlayCircleOutline from 'svelte-material-icons/PlayCircleOutline.svelte';
-	import type { PageData } from './$types';
+	import type {PageData} from './$types';
 
 	export let data: PageData;
 
@@ -31,127 +31,127 @@
 </script>
 
 <UserPageLayout user={data.user} title={data.meta.title}>
-	{#if people.length > 0}
-		<div class="mb-6 mt-2">
-			<div class="flex justify-between">
-				<p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
-				{#if data.people.length > MAX_ITEMS}
-					<a
-						href={AppRoute.PEOPLE}
-						class="font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
-						draggable="false">View All</a
-					>
-				{/if}
-			</div>
-			<div class="flex flex-row flex-wrap gap-4">
-				{#each people as person (person.id)}
-					<a href="/people/{person.id}" class="w-24 text-center">
-						<ImageThumbnail
-							circle
-							shadow
-							url={api.getPeopleThumbnailUrl(person.id)}
-							altText={person.name}
-							widthStyle="100%"
-						/>
-						<p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
-					</a>
-				{/each}
-			</div>
-		</div>
-	{/if}
+    {#if people.length > 0}
+        <div class="mb-6 mt-2">
+            <div class="flex justify-between">
+                <p class="mb-4 dark:text-immich-dark-fg font-medium">People</p>
+                {#if data.people.length > MAX_ITEMS}
+                    <a
+                            href={AppRoute.PEOPLE}
+                            class="font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary dark:text-immich-dark-fg"
+                            draggable="false">View All</a
+                    >
+                {/if}
+            </div>
+            <div class="flex flex-row flex-wrap gap-4">
+                {#each people as person (person.id)}
+                    <a href="/people/{person.id}" class="w-24 text-center">
+                        <ImageThumbnail
+                                circle
+                                shadow
+                                url={api.getPeopleThumbnailUrl(person.id)}
+                                altText={person.name}
+                                widthStyle="100%"
+                        />
+                        <p class="font-medium mt-2 text-ellipsis text-sm dark:text-white">{person.name}</p>
+                    </a>
+                {/each}
+            </div>
+        </div>
+    {/if}
 
-	{#if places.length > 0}
-		<div class="mb-6 mt-2">
-			<div>
-				<p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
-			</div>
-			<div class="flex flex-row flex-wrap gap-4">
-				{#each places as item}
-					<a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
-						<div
-							class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] flex justify-center"
-						>
-							<Thumbnail thumbnailSize={156} asset={item.data} readonly />
-						</div>
-						<span
-							class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
-						>
+    {#if places.length > 0}
+        <div class="mb-6 mt-2">
+            <div>
+                <p class="mb-4 dark:text-immich-dark-fg font-medium">Places</p>
+            </div>
+            <div class="flex flex-row flex-wrap gap-4">
+                {#each places as item}
+                    <a class="relative" href="/search?{Field.CITY}={item.value}" draggable="false">
+                        <div
+                                class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] flex justify-center"
+                        >
+                            <Thumbnail thumbnailSize={156} asset={item.data} readonly/>
+                        </div>
+                        <span
+                                class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+                        >
 							{item.value}
 						</span>
-					</a>
-				{/each}
-			</div>
-		</div>
-	{/if}
+                    </a>
+                {/each}
+            </div>
+        </div>
+    {/if}
 
-	{#if things.length > 0}
-		<div class="mb-6 mt-2">
-			<div>
-				<p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
-			</div>
-			<div class="flex flex-row flex-wrap gap-4">
-				{#each things as item}
-					<a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
-						<div
-							class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center flex"
-						>
-							<Thumbnail thumbnailSize={156} asset={item.data} readonly />
-						</div>
-						<span
-							class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
-						>
+    {#if things.length > 0}
+        <div class="mb-6 mt-2">
+            <div>
+                <p class="mb-4 dark:text-immich-dark-fg font-medium">Things</p>
+            </div>
+            <div class="flex flex-row flex-wrap gap-4">
+                {#each things as item}
+                    <a class="relative" href="/search?{Field.OBJECTS}={item.value}" draggable="false">
+                        <div
+                                class="filter brightness-75 rounded-xl overflow-hidden w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center flex"
+                        >
+                            <Thumbnail thumbnailSize={156} asset={item.data} readonly/>
+                        </div>
+                        <span
+                                class="capitalize absolute bottom-2 w-full text-center text-sm font-medium text-white text-ellipsis w-100 px-1 hover:cursor-pointer backdrop-blur-[1px]"
+                        >
 							{item.value}
 						</span>
-					</a>
-				{/each}
-			</div>
-		</div>
-	{/if}
+                    </a>
+                {/each}
+            </div>
+        </div>
+    {/if}
 
-	<hr class="dark:border-immich-dark-gray mb-4" />
+    <hr class="dark:border-immich-dark-gray mb-4"/>
 
-	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
-		<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
-			<p class="text-sm">YOUR ACTIVITY</p>
-			<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
-				<a
-					href={AppRoute.FAVORITES}
-					class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
-					draggable="false"
-				>
-					<HeartMultipleOutline size={24} />
-					<span>Favorites</span>
-				</a>
-				<a
-					href="/search?recent=true"
-					class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
-					draggable="false"
-				>
-					<ClockOutline size={24} />
-					<span>Recently added</span>
-				</a>
-			</div>
-		</div>
-		<div class="flex flex-col gap-6 dark:text-immich-dark-fg">
-			<p class="text-sm">CATEGORIES</p>
-			<div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
-				<a
-					href="/search?type={AssetTypeEnum.Video}"
-					class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
-				>
-					<PlayCircleOutline size={24} />
-					<span>Videos</span>
-				</a>
-				<div>
-					<a
-						href="/search?motion=true"
-						class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
-					>
-						<MotionPlayOutline size={24} />
-						<span>Motion photos</span>
-					</a>
-				</div>
-			</div>
-		</div>
-	</div>
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-8">
+        <div class="flex flex-col gap-6 dark:text-immich-dark-fg">
+            <p class="text-sm">YOUR ACTIVITY</p>
+            <div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
+                <a
+                        href={AppRoute.FAVORITES}
+                        class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
+                        draggable="false"
+                >
+                    <HeartMultipleOutline size={24}/>
+                    <span>Favorites</span>
+                </a>
+                <a
+                        href="/search?recent=true"
+                        class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary content-center gap-2"
+                        draggable="false"
+                >
+                    <ClockOutline size={24}/>
+                    <span>Recently added</span>
+                </a>
+            </div>
+        </div>
+        <div class="flex flex-col gap-6 dark:text-immich-dark-fg">
+            <p class="text-sm">CATEGORIES</p>
+            <div class="flex flex-col gap-4 dark:text-immich-dark-fg/80">
+                <a
+                        href="/search?type={AssetTypeEnum.Video}"
+                        class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
+                >
+                    <PlayCircleOutline size={24}/>
+                    <span>Videos</span>
+                </a>
+                <div>
+                    <a
+                            href="/search?motion=true"
+                            class="w-full flex text-sm font-medium hover:text-immich-primary dark:hover:text-immich-dark-primary items-center gap-2"
+                    >
+                        <MotionPlayOutline size={24}/>
+                        <span>Motion photos</span>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/favorites/+page.svelte b/web/src/routes/(user)/favorites/+page.svelte
index de4169671e..065d9e9844 100644
--- a/web/src/routes/(user)/favorites/+page.svelte
+++ b/web/src/routes/(user)/favorites/+page.svelte
@@ -1,81 +1,81 @@
 <script lang="ts">
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
-  import {handleError} from '$lib/utils/handle-error';
-  import {api, AssetResponseDto} from '@api';
-  import {onMount} from 'svelte';
-  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-  import Plus from 'svelte-material-icons/Plus.svelte';
-  import Error from '../../+error.svelte';
-  import type {PageData} from './$types';
+	import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+	import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+	import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
+	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+	import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+	import {handleError} from '$lib/utils/handle-error';
+	import {api, AssetResponseDto} from '@api';
+	import {onMount} from 'svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
+	import Error from '../../+error.svelte';
+	import type {PageData} from './$types';
 
-  let favorites: AssetResponseDto[] = [];
-  let selectedAssets: Set<AssetResponseDto> = new Set();
-  export let data: PageData;
+	let favorites: AssetResponseDto[] = [];
+	let selectedAssets: Set<AssetResponseDto> = new Set();
+	export let data: PageData;
 
-  $: isMultiSelectionMode = selectedAssets.size > 0;
-  $: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
+	$: isMultiSelectionMode = selectedAssets.size > 0;
+	$: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
 
-  onMount(async () => {
-    try {
-      const {data: assets} = await api.assetApi.getAllAssets({
-        isFavorite: true,
-        withoutThumbs: true
-      });
-      favorites = assets;
-    } catch {
-      handleError(Error, 'Unable to load favorites');
-    }
-  });
+	onMount(async () => {
+		try {
+			const {data: assets} = await api.assetApi.getAllAssets({
+				isFavorite: true,
+				withoutThumbs: true
+			});
+			favorites = assets;
+		} catch {
+			handleError(Error, 'Unable to load favorites');
+		}
+	});
 
-  const handleSelectAll = () => {
-    selectedAssets = new Set(favorites);
-  };
+	const handleSelectAll = () => {
+		selectedAssets = new Set(favorites);
+	};
 
-  const onAssetDelete = (assetId: string) => {
-    favorites = favorites.filter((a) => a.id !== assetId);
-  };
+	const onAssetDelete = (assetId: string) => {
+		favorites = favorites.filter((a) => a.id !== assetId);
+	};
 </script>
 
 <!-- Multiselection mode app bar -->
 {#if isMultiSelectionMode}
-  <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
-    <FavoriteAction removeFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)}/>
-    <CreateSharedLink/>
-    <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
-    <AssetSelectContextMenu icon={Plus} title="Add">
-      <AddToAlbum/>
-      <AddToAlbum shared/>
-    </AssetSelectContextMenu>
-    <DeleteAssets {onAssetDelete}/>
-    <AssetSelectContextMenu icon={DotsVertical} title="Menu">
-      <DownloadAction menuItem/>
-      <ArchiveAction menuItem unarchive={isAllArchive}/>
-    </AssetSelectContextMenu>
-  </AssetSelectControlBar>
+    <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
+        <FavoriteAction removeFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)}/>
+        <CreateSharedLink/>
+        <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
+        <AssetSelectContextMenu icon={Plus} title="Add">
+            <AddToAlbum/>
+            <AddToAlbum shared/>
+        </AssetSelectContextMenu>
+        <DeleteAssets {onAssetDelete}/>
+        <AssetSelectContextMenu icon={DotsVertical} title="Menu">
+            <DownloadAction menuItem/>
+            <ArchiveAction menuItem unarchive={isAllArchive}/>
+        </AssetSelectContextMenu>
+    </AssetSelectControlBar>
 {/if}
 
 <UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
-  <section>
-    <!-- Empty Message -->
-    {#if favorites.length === 0}
-      <EmptyPlaceholder
-        text="Add favorites to quickly find your best pictures and videos"
-        alt="Empty favorites"
-      />
-    {/if}
+    <section>
+        <!-- Empty Message -->
+        {#if favorites.length === 0}
+            <EmptyPlaceholder
+                    text="Add favorites to quickly find your best pictures and videos"
+                    alt="Empty favorites"
+            />
+        {/if}
 
-    <GalleryViewer assets={favorites} bind:selectedAssets viewFrom="favorites-page"/>
-  </section>
+        <GalleryViewer assets={favorites} bind:selectedAssets viewFrom="favorites-page"/>
+    </section>
 </UserPageLayout>
diff --git a/web/src/routes/(user)/people/[personId]/+page.svelte b/web/src/routes/(user)/people/[personId]/+page.svelte
index 1b46dfa5c0..28109654c3 100644
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -1,134 +1,134 @@
 <script lang="ts">
-  import {afterNavigate, goto} from '$app/navigation';
-  import {page} from '$app/stores';
-  import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
-  import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
-  import {AppRoute} from '$lib/constants';
-  import {handleError} from '$lib/utils/handle-error';
-  import {AssetResponseDto, api} from '@api';
-  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-  import Plus from 'svelte-material-icons/Plus.svelte';
-  import type {PageData} from './$types';
-  import {archivedAsset} from "$lib/stores/archived-asset.store";
-  import CircleIconButton from "$lib/components/elements/buttons/circle-icon-button.svelte";
+	import {afterNavigate, goto} from '$app/navigation';
+	import {page} from '$app/stores';
+	import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
+	import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
+	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+	import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+	import {AppRoute} from '$lib/constants';
+	import {handleError} from '$lib/utils/handle-error';
+	import {AssetResponseDto, api} from '@api';
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
+	import type {PageData} from './$types';
+	import {archivedAsset} from "$lib/stores/archived-asset.store";
+	import CircleIconButton from "$lib/components/elements/buttons/circle-icon-button.svelte";
 
-  export let data: PageData;
+	export let data: PageData;
 
-  let isEditName = false;
-  let previousRoute: string = AppRoute.EXPLORE;
-  let selectedAssets: Set<AssetResponseDto> = new Set();
-  $: isMultiSelectionMode = selectedAssets.size > 0;
-  $: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
-  $: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
+	let isEditName = false;
+	let previousRoute: string = AppRoute.EXPLORE;
+	let selectedAssets: Set<AssetResponseDto> = new Set();
+	$: isMultiSelectionMode = selectedAssets.size > 0;
+	$: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
+	$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
 
-  afterNavigate(({from}) => {
-    // Prevent setting previousRoute to the current page.
-    if (from && from.route.id !== $page.route.id) {
-      previousRoute = from.url.href;
-    }
-  });
+	afterNavigate(({from}) => {
+		// Prevent setting previousRoute to the current page.
+		if (from && from.route.id !== $page.route.id) {
+			previousRoute = from.url.href;
+		}
+	});
 
-  const handleNameChange = async (name: string) => {
-    try {
-      isEditName = false;
-      data.person.name = name;
-      await api.personApi.updatePerson({id: data.person.id, personUpdateDto: {name}});
-    } catch (error) {
-      handleError(error, 'Unable to save name');
-    }
-  };
+	const handleNameChange = async (name: string) => {
+		try {
+			isEditName = false;
+			data.person.name = name;
+			await api.personApi.updatePerson({id: data.person.id, personUpdateDto: {name}});
+		} catch (error) {
+			handleError(error, 'Unable to save name');
+		}
+	};
 
-  const onAssetDelete = (assetId: string) => {
-    data.assets = data.assets.filter((asset: AssetResponseDto) => asset.id !== assetId);
-  };
-  const handleSelectAll = () => {
-    selectedAssets = new Set(data.assets)
-  }
+	const onAssetDelete = (assetId: string) => {
+		data.assets = data.assets.filter((asset: AssetResponseDto) => asset.id !== assetId);
+	};
+	const handleSelectAll = () => {
+		selectedAssets = new Set(data.assets)
+	}
 </script>
 
 {#if isMultiSelectionMode}
-  <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
-    <CreateSharedLink/>
-    <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
-    <AssetSelectContextMenu icon={Plus} title="Add">
-      <AddToAlbum/>
-      <AddToAlbum shared/>
-    </AssetSelectContextMenu>
-    <DeleteAssets {onAssetDelete}/>
-    <AssetSelectContextMenu icon={DotsVertical} title="Add">
-      <DownloadAction menuItem/>
-      <FavoriteAction menuItem removeFavorite={isAllFavorite}/>
-      <ArchiveAction
-        menuItem
-        unarchive={isAllArchive}
-        onAssetArchive={(asset) => onAssetDelete(asset.id)}
-      />
-    </AssetSelectContextMenu>
-  </AssetSelectControlBar>
+    <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
+        <CreateSharedLink/>
+        <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
+        <AssetSelectContextMenu icon={Plus} title="Add">
+            <AddToAlbum/>
+            <AddToAlbum shared/>
+        </AssetSelectContextMenu>
+        <DeleteAssets {onAssetDelete}/>
+        <AssetSelectContextMenu icon={DotsVertical} title="Add">
+            <DownloadAction menuItem/>
+            <FavoriteAction menuItem removeFavorite={isAllFavorite}/>
+            <ArchiveAction
+                    menuItem
+                    unarchive={isAllArchive}
+                    onAssetArchive={(asset) => onAssetDelete(asset.id)}
+            />
+        </AssetSelectContextMenu>
+    </AssetSelectControlBar>
 {:else}
-  <ControlAppBar
-    showBackButton
-    backIcon={ArrowLeft}
-    on:close-button-click={() => goto(previousRoute)}
-  />
+    <ControlAppBar
+            showBackButton
+            backIcon={ArrowLeft}
+            on:close-button-click={() => goto(previousRoute)}
+    />
 {/if}
 
 <!-- Face information block -->
 <section class="pt-24 px-4 sm:px-6 flex place-items-center">
-  {#if isEditName}
-    <EditNameInput
-      person={data.person}
-      on:change={(event) => handleNameChange(event.detail)}
-      on:cancel={() => (isEditName = false)}
-    />
-  {:else}
-    <ImageThumbnail
-      circle
-      shadow
-      url={api.getPeopleThumbnailUrl(data.person.id)}
-      altText={data.person.name}
-      widthStyle="3.375rem"
-      heightStyle="3.375rem"
-    />
-    <button
-      title="Edit name"
-      class="px-4 text-immich-primary dark:text-immich-dark-primary"
-      on:click={() => (isEditName = true)}
-    >
-      {#if data.person.name}
-        <p class="font-medium py-2">{data.person.name}</p>
-      {:else}
-        <p class="font-medium w-fit">Add a name</p>
-        <p class="text-sm text-gray-500 dark:text-immich-gray">
-          Find them fast by name with search
-        </p>
-      {/if}
-    </button>
-  {/if}
+    {#if isEditName}
+        <EditNameInput
+                person={data.person}
+                on:change={(event) => handleNameChange(event.detail)}
+                on:cancel={() => (isEditName = false)}
+        />
+    {:else}
+        <ImageThumbnail
+                circle
+                shadow
+                url={api.getPeopleThumbnailUrl(data.person.id)}
+                altText={data.person.name}
+                widthStyle="3.375rem"
+                heightStyle="3.375rem"
+        />
+        <button
+                title="Edit name"
+                class="px-4 text-immich-primary dark:text-immich-dark-primary"
+                on:click={() => (isEditName = true)}
+        >
+            {#if data.person.name}
+                <p class="font-medium py-2">{data.person.name}</p>
+            {:else}
+                <p class="font-medium w-fit">Add a name</p>
+                <p class="text-sm text-gray-500 dark:text-immich-gray">
+                    Find them fast by name with search
+                </p>
+            {/if}
+        </button>
+    {/if}
 </section>
 
 <!-- Gallery Block -->
 <section class="relative pt-8 sm:px-4 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
-  <section class="overflow-y-auto relative immich-scrollbar">
-    <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
-      <GalleryViewer
-        assets={data.assets}
-        viewFrom="search-page"
-        showArchiveIcon={true}
-        bind:selectedAssets
-      />
+    <section class="overflow-y-auto relative immich-scrollbar">
+        <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
+            <GalleryViewer
+                    assets={data.assets}
+                    viewFrom="search-page"
+                    showArchiveIcon={true}
+                    bind:selectedAssets
+            />
+        </section>
     </section>
-  </section>
 </section>
diff --git a/web/src/routes/(user)/search/+page.svelte b/web/src/routes/(user)/search/+page.svelte
index 2070ab82f3..ce7f25e6cf 100644
--- a/web/src/routes/(user)/search/+page.svelte
+++ b/web/src/routes/(user)/search/+page.svelte
@@ -1,105 +1,105 @@
 <script lang="ts">
-  import {afterNavigate, goto} from '$app/navigation';
-  import {page} from '$app/stores';
-  import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
-  import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
-  import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
-  import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
-  import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
-  import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
-  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
-  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
-  import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
-  import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
-  import type {AssetResponseDto} from '@api';
-  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
-  import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
-  import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';
-  import Plus from 'svelte-material-icons/Plus.svelte';
-  import type {PageData} from './$types';
-  import SelectAll from 'svelte-material-icons/SelectAll.svelte';
-  import CircleIconButton from "$lib/components/elements/buttons/circle-icon-button.svelte";
+	import {afterNavigate, goto} from '$app/navigation';
+	import {page} from '$app/stores';
+	import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
+	import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
+	import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
+	import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
+	import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
+	import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
+	import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
+	import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
+	import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
+	import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
+	import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
+	import type {AssetResponseDto} from '@api';
+	import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+	import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
+	import ImageOffOutline from 'svelte-material-icons/ImageOffOutline.svelte';
+	import Plus from 'svelte-material-icons/Plus.svelte';
+	import type {PageData} from './$types';
+	import SelectAll from 'svelte-material-icons/SelectAll.svelte';
+	import CircleIconButton from "$lib/components/elements/buttons/circle-icon-button.svelte";
 
-  export let data: PageData;
+	export let data: PageData;
 
-  // The GalleryViewer pushes it's own history state, which causes weird
-  // behavior for history.back(). To prevent that we store the previous page
-  // manually and navigate back to that.
-  let previousRoute = '/explore';
+	// The GalleryViewer pushes it's own history state, which causes weird
+	// behavior for history.back(). To prevent that we store the previous page
+	// manually and navigate back to that.
+	let previousRoute = '/explore';
 
-  afterNavigate(({from}) => {
-    // Prevent setting previousRoute to the current page.
-    if (from && from.route.id !== $page.route.id) {
-      previousRoute = from.url.href;
-    }
-  });
+	afterNavigate(({from}) => {
+		// Prevent setting previousRoute to the current page.
+		if (from && from.route.id !== $page.route.id) {
+			previousRoute = from.url.href;
+		}
+	});
 
-  $: term = $page.url.searchParams.get('q') || data.term || '';
+	$: term = $page.url.searchParams.get('q') || data.term || '';
 
-  let selectedAssets: Set<AssetResponseDto> = new Set();
-  $: isMultiSelectionMode = selectedAssets.size > 0;
-  $: isAllArchived = Array.from(selectedAssets).every((asset) => asset.isArchived);
-  $: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
-  $: searchResultAssets = data.results.assets.items;
+	let selectedAssets: Set<AssetResponseDto> = new Set();
+	$: isMultiSelectionMode = selectedAssets.size > 0;
+	$: isAllArchived = Array.from(selectedAssets).every((asset) => asset.isArchived);
+	$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
+	$: searchResultAssets = data.results.assets.items;
 
-  const onAssetDelete = (assetId: string) => {
-    searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => a.id !== assetId);
-  };
-  const handleSelectAll = () => {
-    selectedAssets = new Set(searchResultAssets)
-  }
+	const onAssetDelete = (assetId: string) => {
+		searchResultAssets = searchResultAssets.filter((a: AssetResponseDto) => a.id !== assetId);
+	};
+	const handleSelectAll = () => {
+		selectedAssets = new Set(searchResultAssets)
+	}
 </script>
 
 <section>
-  {#if isMultiSelectionMode}
-    <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
-      <CreateSharedLink/>
-      <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
-      <AssetSelectContextMenu icon={Plus} title="Add">
-        <AddToAlbum/>
-        <AddToAlbum shared/>
-      </AssetSelectContextMenu>
-      <DeleteAssets {onAssetDelete}/>
+    {#if isMultiSelectionMode}
+        <AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
+            <CreateSharedLink/>
+            <CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll}/>
+            <AssetSelectContextMenu icon={Plus} title="Add">
+                <AddToAlbum/>
+                <AddToAlbum shared/>
+            </AssetSelectContextMenu>
+            <DeleteAssets {onAssetDelete}/>
 
-      <AssetSelectContextMenu icon={DotsVertical} title="Add">
-        <DownloadAction menuItem/>
-        <FavoriteAction menuItem removeFavorite={isAllFavorite}/>
-        <ArchiveAction menuItem unarchive={isAllArchived}/>
-      </AssetSelectContextMenu>
-    </AssetSelectControlBar>
-  {:else}
-    <ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}>
-      <div class="w-full max-w-2xl flex-1 pl-4">
-        <SearchBar grayTheme={false} value={term}/>
-      </div>
-    </ControlAppBar>
-  {/if}
+            <AssetSelectContextMenu icon={DotsVertical} title="Add">
+                <DownloadAction menuItem/>
+                <FavoriteAction menuItem removeFavorite={isAllFavorite}/>
+                <ArchiveAction menuItem unarchive={isAllArchived}/>
+            </AssetSelectContextMenu>
+        </AssetSelectControlBar>
+    {:else}
+        <ControlAppBar on:close-button-click={() => goto(previousRoute)} backIcon={ArrowLeft}>
+            <div class="w-full max-w-2xl flex-1 pl-4">
+                <SearchBar grayTheme={false} value={term}/>
+            </div>
+        </ControlAppBar>
+    {/if}
 </section>
 
 <section class="relative pt-32 mb-12 bg-immich-bg dark:bg-immich-dark-bg">
-  <section class="overflow-y-auto relative immich-scrollbar">
-    <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
-      {#if data.results?.assets?.items.length > 0}
-        <div class="pl-4">
-          <GalleryViewer
-            assets={searchResultAssets}
-            bind:selectedAssets
-            viewFrom="search-page"
-            showArchiveIcon={true}
-          />
-        </div>
-      {:else}
-        <div
-          class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white"
-        >
-          <div class="flex flex-col content-center items-center text-center">
-            <ImageOffOutline size="3.5em"/>
-            <p class="font-medium text-3xl mt-5">No results</p>
-            <p class="text-base font-normal">Try a synonym or more general keyword</p>
-          </div>
-        </div>
-      {/if}
+    <section class="overflow-y-auto relative immich-scrollbar">
+        <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
+            {#if data.results?.assets?.items.length > 0}
+                <div class="pl-4">
+                    <GalleryViewer
+                            assets={searchResultAssets}
+                            bind:selectedAssets
+                            viewFrom="search-page"
+                            showArchiveIcon={true}
+                    />
+                </div>
+            {:else}
+                <div
+                        class="flex items-center place-content-center w-full min-h-[calc(66vh_-_11rem)] dark:text-white"
+                >
+                    <div class="flex flex-col content-center items-center text-center">
+                        <ImageOffOutline size="3.5em"/>
+                        <p class="font-medium text-3xl mt-5">No results</p>
+                        <p class="text-base font-normal">Try a synonym or more general keyword</p>
+                    </div>
+                </div>
+            {/if}
+        </section>
     </section>
-  </section>
 </section>