diff --git a/apps/studio/components/grid/SupabaseGrid.tsx b/apps/studio/components/grid/SupabaseGrid.tsx
index 314c407cade..fdd93abe7ec 100644
--- a/apps/studio/components/grid/SupabaseGrid.tsx
+++ b/apps/studio/components/grid/SupabaseGrid.tsx
@@ -24,6 +24,7 @@ import { Grid } from './components/grid/Grid'
 import Header, { HeaderProps } from './components/header/Header'
 import { RowContextMenu } from './components/menu'
 import { Filter, GridProps } from './types'
+import { useTableEditorFiltersSort } from 'hooks/misc/useTableEditorFiltersSort'
 
 export const SupabaseGrid = ({
   customHeader,
@@ -44,9 +45,8 @@ export const SupabaseGrid = ({
   const gridRef = useRef<DataGridHandle>(null)
   const [mounted, setMounted] = useState(false)
 
-  const [{ sort, filter }, setParams] = useUrlState({
-    arrayKeys: ['sort', 'filter'],
-  })
+  const { filters: filter, sorts: sort, setParams } = useTableEditorFiltersSort()
+
   const sorts = formatSortURLParams(snap.table.name, sort as string[] | undefined)
   const filters = formatFilterURLParams(filter as string[])
 
diff --git a/apps/studio/components/grid/components/header/Header.tsx b/apps/studio/components/grid/components/header/Header.tsx
index 1a2ceabfea5..3c3c5fb32a3 100644
--- a/apps/studio/components/grid/components/header/Header.tsx
+++ b/apps/studio/components/grid/components/header/Header.tsx
@@ -161,8 +161,8 @@ const DefaultHeader = () => {
   return (
     <div className="flex items-center gap-4">
       <div className="flex items-center gap-2">
-        <FilterPopover filters={filters as string[]} onApplyFilters={onApplyFilters} />
-        <SortPopover sorts={sorts as string[]} onApplySorts={onApplySorts} />
+        <FilterPopover filters={filters} onApplyFilters={onApplyFilters} />
+        <SortPopover sorts={sorts} onApplySorts={onApplySorts} />
       </div>
       {canAddNew && (
         <>