diff --git a/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx b/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
index 27e1999a161..d00fd8f68ff 100644
--- a/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
+++ b/apps/studio/components/interfaces/Integrations/Landing/AvailableIntegrations.tsx
@@ -1,9 +1,10 @@
+import { Search } from 'lucide-react'
+import { parseAsString, useQueryState } from 'nuqs'
+
 import AlertError from 'components/ui/AlertError'
 import NoSearchResults from 'components/ui/NoSearchResults'
-import { Search } from 'lucide-react'
-import { useState } from 'react'
 import { buttonVariants, cn, Tabs_Shadcn_, TabsList_Shadcn_, TabsTrigger_Shadcn_ } from 'ui'
-import { Admonition } from 'ui-patterns'
+import { Admonition } from 'ui-patterns/admonition'
 import { Input } from 'ui-patterns/DataInputs/Input'
 import { IntegrationCard, IntegrationLoadingCard } from './IntegrationCard'
 import { useInstalledIntegrations } from './useInstalledIntegrations'
@@ -11,8 +12,14 @@ import { useInstalledIntegrations } from './useInstalledIntegrations'
 type IntegrationCategory = 'all' | 'wrapper' | 'postgres_extensions' | 'custom'
 
 export const AvailableIntegrations = () => {
-  const [search, setSearch] = useState('')
-  const [selectedCategory, setSelectedCategory] = useState<IntegrationCategory>('all')
+  const [selectedCategory, setSelectedCategory] = useQueryState(
+    'category',
+    parseAsString.withDefault('all').withOptions({ clearOnDefault: true })
+  )
+  const [search, setSearch] = useQueryState(
+    'search',
+    parseAsString.withDefault('').withOptions({ clearOnDefault: true })
+  )
 
   const { availableIntegrations, installedIntegrations, error, isError, isLoading, isSuccess } =
     useInstalledIntegrations()
diff --git a/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx b/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx
index c80e7e5b632..de282e97098 100644
--- a/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx
+++ b/apps/studio/components/layouts/DatabaseLayout/DatabaseMenu.utils.tsx
@@ -112,7 +112,7 @@ export const generateDatabaseMenu = (
         {
           name: 'Wrappers',
           key: 'wrappers',
-          url: `/project/${ref}/integrations/wrappers`,
+          url: `/project/${ref}/integrations?category=wrapper`,
           rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
           items: [],
         },
@@ -121,7 +121,7 @@ export const generateDatabaseMenu = (
               {
                 name: 'Webhooks',
                 key: 'hooks',
-                url: `/project/${ref}/integrations/hooks`,
+                url: `/project/${ref}/integrations/webhooks/overview`,
                 rightIcon: <ArrowUpRight strokeWidth={1} className="h-4 w-4" />,
                 items: [],
               },
diff --git a/apps/studio/next.config.js b/apps/studio/next.config.js
index 4a6a4a7e86b..2b2f4e7a15b 100644
--- a/apps/studio/next.config.js
+++ b/apps/studio/next.config.js
@@ -402,12 +402,12 @@ const nextConfig = {
       {
         permanent: true,
         source: '/project/:ref/database/webhooks',
-        destination: '/project/:ref/integrations/webhooks',
+        destination: '/project/:ref/integrations/webhooks/overview',
       },
       {
         permanent: true,
         source: '/project/:ref/database/wrappers',
-        destination: '/project/:ref/integrations/wrappers',
+        destination: '/project/:ref/integrations?category=wrapper',
       },
       {
         permanent: true,