diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index 62e950566d..7e52b6b7b4 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -14,6 +14,7 @@
   import SearchHistoryBox from './search-history-box.svelte';
   import SearchFilterBox from './search-filter-box.svelte';
   import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
+  import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
   export let value = '';
   export let grayTheme: boolean;
 
@@ -24,15 +25,13 @@
   $: showClearIcon = value.length > 0;
 
   const onSearch = (payload: SmartSearchDto | MetadataSearchDto) => {
-    const parameters = new URLSearchParams({
-      query: JSON.stringify(payload),
-    });
+    const params = getMetadataSearchQuery(payload);
 
     showHistory = false;
     showFilter = false;
     $isSearchEnabled = false;
     $searchQuery = payload;
-    goto(`${AppRoute.SEARCH}?${parameters}`, { invalidateAll: true });
+    goto(`${AppRoute.SEARCH}?${params}`, { invalidateAll: true });
   };
 
   const clearSearchTerm = (searchTerm: string) => {
diff --git a/web/src/lib/utils/metadata-search.ts b/web/src/lib/utils/metadata-search.ts
new file mode 100644
index 0000000000..a81c943a32
--- /dev/null
+++ b/web/src/lib/utils/metadata-search.ts
@@ -0,0 +1,9 @@
+import { QueryParameter } from '$lib/constants';
+import type { MetadataSearchDto } from '@immich/sdk';
+
+export function getMetadataSearchQuery(metadata: MetadataSearchDto) {
+  const searchParams = new URLSearchParams({
+    [QueryParameter.QUERY]: JSON.stringify(metadata),
+  });
+  return searchParams.toString();
+}
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index e4057f38ab..f54376959f 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -6,6 +6,7 @@
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import type { SearchExploreResponseDto } from '@immich/sdk';
   import type { PageData } from './$types';
+  import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
 
   export let data: PageData;
 
@@ -83,7 +84,7 @@
       </div>
       <div class="flex flex-row flex-wrap gap-4">
         {#each places as item (item.data.id)}
-          <a class="relative" href="{AppRoute.SEARCH}?q={item.value}" draggable="false">
+          <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
             <div
               class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
             >
diff --git a/web/src/routes/(user)/places/+page.svelte b/web/src/routes/(user)/places/+page.svelte
index 897d5f9a6f..c5528fcb9d 100644
--- a/web/src/routes/(user)/places/+page.svelte
+++ b/web/src/routes/(user)/places/+page.svelte
@@ -6,6 +6,7 @@
   import type { SearchExploreResponseDto } from '@immich/sdk';
   import { mdiMapMarkerOff } from '@mdi/js';
   import type { PageData } from './$types';
+  import { getMetadataSearchQuery } from '$lib/utils/metadata-search';
 
   export let data: PageData;
 
@@ -27,7 +28,7 @@
   {#if hasPlaces}
     <div class="flex flex-row flex-wrap gap-4">
       {#each places as item (item.data.id)}
-        <a class="relative" href="{AppRoute.SEARCH}?q={item.value}" draggable="false">
+        <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
           <div
             class="flex w-[calc((100vw-(72px+5rem))/2)] max-w-[156px] justify-center overflow-hidden rounded-xl brightness-75 filter"
           >