diff --git a/web/src/routes/(user)/albums/+page.svelte b/web/src/routes/(user)/albums/+page.svelte
index 0110cfaa87..3877d026f0 100644
--- a/web/src/routes/(user)/albums/+page.svelte
+++ b/web/src/routes/(user)/albums/+page.svelte
@@ -248,71 +248,75 @@
       </div>
     </LinkButton>
   </div>
-
-  <!-- Album Card -->
-  {#if $albumViewSettings.view === AlbumViewMode.Cover}
-    <div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
-      {#each $albums as album (album.id)}
-        <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
-          <AlbumCard {album} on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)} user={data.user} />
-        </a>
-      {/each}
-    </div>
-  {:else if $albumViewSettings.view === AlbumViewMode.List}
-    <table class="mt-5 w-full text-left">
-      <thead
-        class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
-      >
-        <tr class="flex w-full place-items-center p-2 md:p-5">
-          {#each Object.keys(sortByOptions) as key (key)}
-            <TableHeader bind:albumViewSettings={$albumViewSettings.sortBy} bind:option={sortByOptions[key]} />
-          {/each}
-          <th class="hidden w-2/12 text-center text-sm font-medium lg:block 2xl:w-1/12">Action</th>
-        </tr>
-      </thead>
-      <tbody
-        class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
-      >
+  {#if $albums.length !== 0}
+    <!-- Album Card -->
+    {#if $albumViewSettings.view === AlbumViewMode.Cover}
+      <div class="grid grid-cols-[repeat(auto-fill,minmax(15rem,1fr))]">
         {#each $albums as album (album.id)}
-          <tr
-            class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
-            on:click={() => goto(`albums/${album.id}`)}
-            on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
-            tabindex="0"
-          >
-            <td class="text-md w-8/12 text-ellipsis text-left sm:w-4/12 md:w-4/12 2xl:w-6/12">{album.albumName}</td>
-            <td class="text-md w-4/12 text-ellipsis text-center sm:w-2/12 md:w-2/12 2xl:w-1/12">
-              {album.assetCount}
-              {album.assetCount == 1 ? `item` : `items`}
-            </td>
-            <td class="text-md hidden w-3/12 text-ellipsis text-center sm:block lg:w-2/12"
-              >{dateLocaleString(album.updatedAt)}</td
-            >
-            <td class="text-md hidden w-3/12 text-ellipsis text-center sm:block lg:w-2/12"
-              >{dateLocaleString(album.createdAt)}</td
-            >
-            <td class="text-md hidden w-2/12 text-ellipsis text-center lg:block 2xl:w-1/12">
-              <button
-                on:click|stopPropagation={() => handleEdit(album)}
-                class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-              >
-                <Icon path={mdiPencilOutline} size="16" />
-              </button>
-              <button
-                on:click|stopPropagation={() => chooseAlbumToDelete(album)}
-                class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
-              >
-                <Icon path={mdiTrashCanOutline} size="16" />
-              </button>
-            </td>
-          </tr>
+          <a data-sveltekit-preload-data="hover" href={`albums/${album.id}`} animate:flip={{ duration: 200 }}>
+            <AlbumCard
+              {album}
+              on:showalbumcontextmenu={(e) => showAlbumContextMenu(e.detail, album)}
+              user={data.user}
+            />
+          </a>
         {/each}
-      </tbody>
-    </table>
-  {/if}
+      </div>
+    {:else if $albumViewSettings.view === AlbumViewMode.List}
+      <table class="mt-5 w-full text-left">
+        <thead
+          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
+        >
+          <tr class="flex w-full place-items-center p-2 md:p-5">
+            {#each Object.keys(sortByOptions) as key (key)}
+              <TableHeader bind:albumViewSettings={$albumViewSettings.sortBy} bind:option={sortByOptions[key]} />
+            {/each}
+            <th class="hidden w-2/12 text-center text-sm font-medium lg:block 2xl:w-1/12">Action</th>
+          </tr>
+        </thead>
+        <tbody
+          class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
+        >
+          {#each $albums as album (album.id)}
+            <tr
+              class="flex h-[50px] w-full place-items-center border-[3px] border-transparent p-2 text-center odd:bg-immich-gray even:bg-immich-bg hover:cursor-pointer hover:border-immich-primary/75 odd:dark:bg-immich-dark-gray/75 even:dark:bg-immich-dark-gray/50 dark:hover:border-immich-dark-primary/75 md:p-5"
+              on:click={() => goto(`albums/${album.id}`)}
+              on:keydown={(event) => event.key === 'Enter' && goto(`albums/${album.id}`)}
+              tabindex="0"
+            >
+              <td class="text-md w-8/12 text-ellipsis text-left sm:w-4/12 md:w-4/12 2xl:w-6/12">{album.albumName}</td>
+              <td class="text-md w-4/12 text-ellipsis text-center sm:w-2/12 md:w-2/12 2xl:w-1/12">
+                {album.assetCount}
+                {album.assetCount == 1 ? `item` : `items`}
+              </td>
+              <td class="text-md hidden w-3/12 text-ellipsis text-center sm:block lg:w-2/12"
+                >{dateLocaleString(album.updatedAt)}</td
+              >
+              <td class="text-md hidden w-3/12 text-ellipsis text-center sm:block lg:w-2/12"
+                >{dateLocaleString(album.createdAt)}</td
+              >
+              <td class="text-md hidden w-2/12 text-ellipsis text-center lg:block 2xl:w-1/12">
+                <button
+                  on:click|stopPropagation={() => handleEdit(album)}
+                  class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+                >
+                  <Icon path={mdiPencilOutline} size="16" />
+                </button>
+                <button
+                  on:click|stopPropagation={() => chooseAlbumToDelete(album)}
+                  class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+                >
+                  <Icon path={mdiTrashCanOutline} size="16" />
+                </button>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    {/if}
 
-  <!-- Empty Message -->
-  {#if $albums.length === 0}
+    <!-- Empty Message -->
+  {:else}
     <EmptyPlaceholder
       text="Create an album to organize your photos and videos"
       actionHandler={handleCreateAlbum}