diff --git a/app/scripts/components/common/catalog/controls/hooks/use-catalog-view.ts b/app/scripts/components/common/catalog/controls/hooks/use-catalog-view.ts
index be0be5f93..c099ca9cf 100644
--- a/app/scripts/components/common/catalog/controls/hooks/use-catalog-view.ts
+++ b/app/scripts/components/common/catalog/controls/hooks/use-catalog-view.ts
@@ -1,14 +1,16 @@
 import { useAtom } from 'jotai';
 import { useCallback } from 'react';
+import { useNavigate } from 'react-router';
+import useQsStateCreator from 'qs-state-hook';
 import { taxonomyAtom } from '../atoms/taxonomy-atom';
 import { searchAtom } from '../atoms/search-atom';
-import { CatalogViewAction, onCatalogAction } from '../../utils';
+import { CatalogActions, CatalogViewAction, onCatalogAction } from '../../utils';
 
 export function useCatalogView() {
   const [search, setSearch] = useAtom(searchAtom);
   const [taxonomies, setTaxonomies] = useAtom(taxonomyAtom);
 
-  const onAction = useCallback<CatalogViewAction>(
+  const onCatalogViewAction = useCallback<CatalogViewAction>(
     (action, value) =>
       onCatalogAction(action, value, taxonomies, setSearch, setTaxonomies),
     [setSearch, setTaxonomies, taxonomies]
@@ -17,8 +19,45 @@ export function useCatalogView() {
   return {
     search,
     taxonomies,
-    setSearch,
-    setTaxonomies,
-    onAction
+    onCatalogViewAction,
   };
 }
+
+export function useCatalogViewQS() {
+  const navigate = useNavigate();
+  const useQsState = useQsStateCreator({
+    commit: navigate
+  });
+
+  const [qsSearch, setQsSearch] = useQsState.memo(
+    {
+      key: CatalogActions.SEARCH,
+      default: ''
+    },
+    []
+  );
+
+  const [qsTaxonomies, setQsTaxonomies] = useQsState.memo<
+    Record<string, string | string[]>
+  >(
+    {
+      key: CatalogActions.TAXONOMY,
+      default: {},
+      dehydrator: (v) => JSON.stringify(v), // dehydrator defines how a value is stored in the url
+      hydrator: (v) => (v ? JSON.parse(v) : {}) // hydrator defines how a value is read from the url
+    },
+    []
+  );
+
+  const onBrowserControlAction = useCallback<CatalogViewAction>(
+    (action, value) =>
+      onCatalogAction(action, value, qsTaxonomies, setQsSearch, setQsTaxonomies),
+    [setQsSearch, setQsTaxonomies, qsTaxonomies]
+  );
+
+  return {
+    qsSearch,
+    qsTaxonomies,
+    onBrowserControlAction,
+  };
+}
\ No newline at end of file
diff --git a/app/scripts/components/common/catalog/index.tsx b/app/scripts/components/common/catalog/index.tsx
index e057a59f6..afdfdd88a 100644
--- a/app/scripts/components/common/catalog/index.tsx
+++ b/app/scripts/components/common/catalog/index.tsx
@@ -2,9 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { DatasetData } from 'veda';
 import { themeVal } from '@devseed-ui/theme-provider';
-import { useBrowserControls } from '../browse-controls/use-browse-controls';
 import CatalogContent from './catalog-content';
-
+import { useCatalogViewQS } from './controls/hooks/use-catalog-view';
 import {
   useSlidingStickyHeaderProps
 } from '$components/common/layout-root';
@@ -48,7 +47,7 @@ function CatalogView({
   const { headerHeight } = useSlidingStickyHeaderProps();
   // Use QS State for query parameter manipulation on data catalog page
   // to make cross-page navigation smooth
-  const { search, taxonomies, onAction } = useBrowserControls();
+  const { qsSearch, qsTaxonomies , onBrowserControlAction } = useCatalogViewQS();
 
   return (
     <CatalogWrapper>
@@ -63,9 +62,9 @@ function CatalogView({
       </CatalogFoldHeader>
       <CatalogContent
         datasets={datasets}
-        search={search}
-        taxonomies={taxonomies}
-        onAction={onAction}
+        search={qsSearch}
+        taxonomies={qsTaxonomies}
+        onAction={onBrowserControlAction}
       />
     </CatalogWrapper>
   );
diff --git a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
index e7024e5b3..a33d96ca1 100644
--- a/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
+++ b/app/scripts/components/exploration/components/dataset-selector-modal/index.tsx
@@ -82,7 +82,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
   );
 
   // Use Jotai controlled atoms for query parameter manipulation on new E&A page 
-  const {search: searchTerm, taxonomies, onAction } = useCatalogView();
+  const {search: searchTerm, taxonomies, onCatalogViewAction } = useCatalogView();
 
   useEffect(() => {
     setSelectedIds(timelineDatasets.map((dataset) => dataset.data.id));
@@ -112,7 +112,7 @@ export function DatasetSelectorModal(props: DatasetSelectorModalProps) {
           taxonomies={taxonomies}
           selectedIds={selectedIds}
           setSelectedIds={setSelectedIds}
-          onAction={onAction}
+          onAction={onCatalogViewAction}
           filterLayers={true}
           emptyStateContent={
             <>