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 2fb4feb67a..04345c4c55 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
@@ -10,6 +10,7 @@
   import justifiedLayout from 'justified-layout';
   import { getAssetRatio } from '$lib/utils/asset-utils';
   import { calculateWidth } from '$lib/utils/timeline-util';
+  import { pushState, replaceState } from '$app/navigation';
 
   const dispatch = createEventDispatcher<{ intersected: { container: HTMLDivElement; position: BucketPosition } }>();
 
@@ -31,7 +32,7 @@
     currentViewAssetIndex = assets.findIndex((a) => a.id == asset.id);
     selectedAsset = assets[currentViewAssetIndex];
     $showAssetViewer = true;
-    pushState(selectedAsset.id);
+    updateAssetState(selectedAsset.id, false);
   };
 
   const selectAssetHandler = (event: CustomEvent) => {
@@ -52,7 +53,7 @@
       if (currentViewAssetIndex < assets.length - 1) {
         currentViewAssetIndex++;
         selectedAsset = assets[currentViewAssetIndex];
-        pushState(selectedAsset.id);
+        updateAssetState(selectedAsset.id);
       }
     } catch (error) {
       handleError(error, 'Cannot navigate to the next asset');
@@ -64,22 +65,26 @@
       if (currentViewAssetIndex > 0) {
         currentViewAssetIndex--;
         selectedAsset = assets[currentViewAssetIndex];
-        pushState(selectedAsset.id);
+        updateAssetState(selectedAsset.id);
       }
     } catch (error) {
       handleError(error, 'Cannot navigate to previous asset');
     }
   };
 
-  const pushState = (assetId: string) => {
-    // add a URL to the browser's history
-    // changes the current URL in the address bar but doesn't perform any SvelteKit navigation
-    history.pushState(null, '', `${$page.url.pathname}/photos/${assetId}`);
+  const updateAssetState = (assetId: string, replace = true) => {
+    const route = `${$page.url.pathname}/photos/${assetId}`;
+
+    if (replace) {
+      replaceState(route, {});
+    } else {
+      pushState(route, {});
+    }
   };
 
   const closeViewer = () => {
     $showAssetViewer = false;
-    history.pushState(null, '', `${$page.url.pathname}`);
+    pushState(`${$page.url.pathname}${$page.url.search}`, {});
   };
 
   onDestroy(() => {
@@ -105,6 +110,8 @@
   })();
 </script>
 
+<svelte:window on:popstate|preventDefault={closeViewer} />
+
 {#if assets.length > 0}
   <div class="relative" style="height: {geometry.containerHeight}px;width: {geometry.containerWidth}px ">
     {#each assets as asset, i (i)}