diff --git a/open-api/typescript-sdk/src/fetch-client.ts b/open-api/typescript-sdk/src/fetch-client.ts
index fa75049168..9d9ad48571 100644
--- a/open-api/typescript-sdk/src/fetch-client.ts
+++ b/open-api/typescript-sdk/src/fetch-client.ts
@@ -853,6 +853,7 @@ export type SearchExploreResponseDto = {
     items: SearchExploreItem[];
 };
 export type MetadataSearchDto = {
+    albumIds?: string[];
     checksum?: string;
     city?: string | null;
     country?: string | null;
@@ -929,6 +930,7 @@ export type PlacesResponseDto = {
     name: string;
 };
 export type RandomSearchDto = {
+    albumIds?: string[];
     city?: string | null;
     country?: string | null;
     createdAfter?: string;
@@ -962,6 +964,7 @@ export type RandomSearchDto = {
     withStacked?: boolean;
 };
 export type SmartSearchDto = {
+    albumIds?: string[];
     city?: string | null;
     country?: string | null;
     createdAfter?: string;
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index 8d5800e9a8..b0aff6639e 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -5,6 +5,7 @@
     id?: string;
     label: string;
     value: string;
+    thumbnail?: string;
   };
 
   export const asComboboxOptions = (values: string[]) =>
@@ -380,12 +381,34 @@
         <li
           aria-selected={index === selectedIndex}
           bind:this={optionRefs[index]}
-          class="text-start w-full px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all cursor-pointer aria-selected:bg-gray-200 aria-selected:dark:bg-gray-700 break-words"
           id={`${listboxId}-${index}`}
           onclick={() => handleSelect(option)}
           role="option"
         >
-          {option.label}
+          {#if option.thumbnail}
+            <div
+              class="text-start flex w-full place-items-center gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary px-4"
+            >
+              {#if option.thumbnail === 'no-thumbnail'}
+                <div class="h-6 w-6 bg-cover rounded hover:shadow-lg"></div>
+              {:else}
+                <img
+                  src={option.thumbnail}
+                  alt={option.label}
+                  class="h-6 w-6 bg-cover rounded hover:shadow-lg"
+                  data-testid="album-image"
+                  draggable="false"
+                />
+              {/if}
+              {option.label}
+            </div>
+          {:else}
+            <div
+              class="text-start w-full px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-700 transition-all cursor-pointer aria-selected:bg-gray-200 aria-selected:dark:bg-gray-700 break-words"
+            >
+              {option.label}
+            </div>
+          {/if}
         </li>
       {/each}
     {/if}
diff --git a/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte b/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte
new file mode 100644
index 0000000000..a1f53f31e1
--- /dev/null
+++ b/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+  import Icon from '$lib/components/elements/icon.svelte';
+  import Combobox, { type ComboBoxOption } from '$lib/components/shared-components/combobox.svelte';
+  import { preferences } from '$lib/stores/user.store';
+  import { getAssetThumbnailUrl } from '$lib/utils';
+  import { getAllAlbums, type AlbumResponseDto } from '@immich/sdk';
+  import { mdiClose } from '@mdi/js';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import { SvelteSet } from 'svelte/reactivity';
+
+  interface Props {
+    selectedAlbums: SvelteSet<string>;
+  }
+
+  let { selectedAlbums = $bindable() }: Props = $props();
+
+  let allAlbums: AlbumResponseDto[] = $state([]);
+  let albumMap = $derived(Object.fromEntries(allAlbums.map((album) => [album.id, album])));
+  let selectedOption = $state(undefined);
+
+  onMount(async () => {
+    allAlbums = await getAllAlbums({});
+  });
+
+  const handleSelect = (option?: ComboBoxOption) => {
+    if (!option || !option.id) {
+      return;
+    }
+
+    selectedAlbums.add(option.value);
+    selectedOption = undefined;
+  };
+
+  const handleRemove = (tag: string) => {
+    selectedAlbums.delete(tag);
+  };
+</script>
+
+{#if $preferences?.tags?.enabled}
+  <div id="location-selection">
+    <form autocomplete="off" id="create-album-form">
+      <div class="my-4 flex flex-col gap-2">
+        <Combobox
+          onSelect={handleSelect}
+          label={$t('albums').toUpperCase()}
+          defaultFirstOption
+          options={allAlbums.map((album) => ({
+            id: album.id,
+            label: album.albumName,
+            value: album.id,
+            thumbnail: album.albumThumbnailAssetId ? getAssetThumbnailUrl(album.albumThumbnailAssetId) : 'no-thumbnail',
+          }))}
+          bind:selectedOption
+          placeholder={$t('search_albums')}
+        />
+      </div>
+    </form>
+
+    <section class="flex flex-wrap pt-2 gap-1">
+      {#each selectedAlbums as albumId (albumId)}
+        {@const album = albumMap[albumId]}
+        {#if album}
+          <div class="flex group transition-all">
+            <span
+              class="inline-block h-min whitespace-nowrap ps-3 pe-1 group-hover:ps-3 py-1 text-center align-baseline leading-none text-gray-100 dark:text-immich-dark-gray bg-immich-primary dark:bg-immich-dark-primary roudned-s-full hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+            >
+              <p class="text-sm">
+                {album.albumName}
+              </p>
+            </span>
+
+            <button
+              type="button"
+              class="text-gray-100 dark:text-immich-dark-gray bg-immich-primary/95 dark:bg-immich-dark-primary/95 rounded-e-full place-items-center place-content-center pe-2 ps-1 py-1 hover:bg-immich-primary/80 dark:hover:bg-immich-dark-primary/80 transition-all"
+              title="Remove tag"
+              onclick={() => handleRemove(albumId)}
+            >
+              <Icon path={mdiClose} />
+            </button>
+          </div>
+        {/if}
+      {/each}
+    </section>
+  </div>
+{/if}
diff --git a/web/src/lib/components/shared-components/search-bar/search-display-section.svelte b/web/src/lib/components/shared-components/search-bar/search-display-section.svelte
index afb8054920..17c872440c 100644
--- a/web/src/lib/components/shared-components/search-bar/search-display-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-display-section.svelte
@@ -10,12 +10,21 @@
   import { Checkbox, Label } from '@immich/ui';
 
   import { t } from 'svelte-i18n';
+  import type { SvelteSet } from 'svelte/reactivity';
 
   interface Props {
     filters: SearchDisplayFilters;
+    selectedAlbums: SvelteSet<string>;
   }
 
-  let { filters = $bindable() }: Props = $props();
+  let { filters = $bindable(), selectedAlbums }: Props = $props();
+
+  //disable the filter if albums get selected
+  $effect(() => {
+    if (selectedAlbums?.size > 0) {
+      filters.isNotInAlbum = false;
+    }
+  });
 </script>
 
 <div id="display-options-selection">
@@ -23,7 +32,12 @@
     <legend class="immich-form-label">{$t('display_options').toUpperCase()}</legend>
     <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
       <div class="flex items-center gap-2">
-        <Checkbox id="not-in-album-checkbox" size="tiny" bind:checked={filters.isNotInAlbum} />
+        <Checkbox
+          disabled={selectedAlbums?.size > 0}
+          id="not-in-album-checkbox"
+          size="tiny"
+          bind:checked={filters.isNotInAlbum}
+        />
         <Label label={$t('not_in_any_album')} for="not-in-album-checkbox" />
       </div>
       <div class="flex items-center gap-2">
diff --git a/web/src/lib/modals/SearchFilterModal.svelte b/web/src/lib/modals/SearchFilterModal.svelte
index 78f80d0ba3..81dd2f06ca 100644
--- a/web/src/lib/modals/SearchFilterModal.svelte
+++ b/web/src/lib/modals/SearchFilterModal.svelte
@@ -8,6 +8,7 @@
     query: string;
     queryType: 'smart' | 'metadata' | 'description';
     personIds: SvelteSet<string>;
+    albumIds: SvelteSet<string>;
     tagIds: SvelteSet<string>;
     location: SearchLocationFilter;
     camera: SearchCameraFilter;
@@ -19,6 +20,7 @@
 </script>
 
 <script lang="ts">
+  import SearchAlbumsSection from '$lib/components/shared-components/search-bar/search-albums-section.svelte';
   import SearchCameraSection, {
     type SearchCameraFilter,
   } from '$lib/components/shared-components/search-bar/search-camera-section.svelte';
@@ -68,6 +70,7 @@
     query: 'query' in searchQuery ? searchQuery.query : searchQuery.originalFileName || '',
     queryType: defaultQueryType(),
     personIds: new SvelteSet('personIds' in searchQuery ? searchQuery.personIds : []),
+    albumIds: new SvelteSet('albumIds' in searchQuery ? searchQuery.albumIds : []),
     tagIds: new SvelteSet('tagIds' in searchQuery ? searchQuery.tagIds : []),
     location: {
       country: withNullAsUndefined(searchQuery.country),
@@ -101,6 +104,7 @@
       query: '',
       queryType: defaultQueryType(), // retain from localStorage or default
       personIds: new SvelteSet(),
+      albumIds: new SvelteSet(),
       tagIds: new SvelteSet(),
       location: {},
       camera: {},
@@ -140,6 +144,7 @@
       isFavorite: filter.display.isFavorite || undefined,
       isNotInAlbum: filter.display.isNotInAlbum || undefined,
       personIds: filter.personIds.size > 0 ? [...filter.personIds] : undefined,
+      albumIds: filter.albumIds.size > 0 ? [...filter.albumIds] : undefined,
       tagIds: filter.tagIds.size > 0 ? [...filter.tagIds] : undefined,
       type,
       rating: filter.rating,
@@ -175,8 +180,15 @@
         <!-- TEXT -->
         <SearchTextSection bind:query={filter.query} bind:queryType={filter.queryType} />
 
-        <!-- TAGS -->
-        <SearchTagsSection bind:selectedTags={filter.tagIds} />
+        
+         <div class="grid grid-auto-fit-40 gap-5">
+          <!-- ALBUMS -->
+          <SearchAlbumsSection bind:selectedAlbums={filter.albumIds} />
+
+          <!-- TAGS -->
+          <SearchTagsSection bind:selectedTags={filter.tagIds} />
+         </div>
+        
 
         <!-- LOCATION -->
         <SearchLocationSection bind:filters={filter.location} />
@@ -197,7 +209,7 @@
           <SearchMediaSection bind:filteredMedia={filter.mediaType} />
 
           <!-- DISPLAY OPTIONS -->
-          <SearchDisplaySection bind:filters={filter.display} />
+          <SearchDisplaySection bind:filters={filter.display} selectedAlbums={filter.albumIds} />
         </div>
       </div>
     </form>
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index f3c90ee4b0..7efffd8209 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -23,10 +23,10 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
-  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
-  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { AssetStore } from '$lib/managers/timeline-manager/asset-store.svelte';
   import type { TimelineAsset, Viewport } from '$lib/managers/timeline-manager/types';
+  import { AssetInteraction } from '$lib/stores/asset-interaction.svelte';
+  import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { lang, locale } from '$lib/stores/preferences.store';
   import { featureFlags } from '$lib/stores/server-config.store';
   import { preferences } from '$lib/stores/user.store';
@@ -38,6 +38,7 @@
   import { toTimelineAsset } from '$lib/utils/timeline-util';
   import {
     type AlbumResponseDto,
+    getAlbumInfo,
     getPerson,
     getTagById,
     type MetadataSearchDto,
@@ -210,6 +211,7 @@
       model: $t('camera_model'),
       lensModel: $t('lens_model'),
       personIds: $t('people'),
+      albumIds: $t('albums'),
       tagIds: $t('tags'),
       originalFileName: $t('file_name'),
       description: $t('description'),
@@ -233,6 +235,18 @@
     return personNames.join(', ');
   }
 
+  async function getAlbumNames(albumIds: string[]) {
+    const albumNames = await Promise.all(
+      albumIds.map(async (albumId) => {
+        const album = await getAlbumInfo({ id: albumId, withoutAssets: true });
+
+        return album.albumName;
+      }),
+    );
+
+    return albumNames.join(', ');
+  }
+
   async function getTagNames(tagIds: string[]) {
     const tagNames = await Promise.all(
       tagIds.map(async (tagId) => {
@@ -343,6 +357,10 @@
               {#await getPersonName(value) then personName}
                 {personName}
               {/await}
+            {:else if searchKey === 'albumIds' && Array.isArray(value)}
+              {#await getAlbumNames(value) then albumNames}
+                {albumNames}
+              {/await}
             {:else if searchKey === 'tagIds' && Array.isArray(value)}
               {#await getTagNames(value) then tagNames}
                 {tagNames}