diff --git a/web/app/(commonLayout)/plugins/page.tsx b/web/app/(commonLayout)/plugins/page.tsx
index 81bda3a8a3..f366200cf9 100644
--- a/web/app/(commonLayout)/plugins/page.tsx
+++ b/web/app/(commonLayout)/plugins/page.tsx
@@ -2,11 +2,11 @@ import Marketplace from '@/app/components/plugins/marketplace'
 import PluginPage from '@/app/components/plugins/plugin-page'
 import PluginsPanel from '@/app/components/plugins/plugin-page/plugins-panel'
 
-const PluginList = async () => {
+const PluginList = () => {
   return (
     <PluginPage
       plugins={<PluginsPanel />}
-      marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" showSearchParams={false} />}
+      marketplace={<Marketplace pluginTypeSwitchClassName="top-[60px]" />}
     />
   )
 }
diff --git a/web/app/components/plugins/marketplace/atoms.ts b/web/app/components/plugins/marketplace/atoms.ts
new file mode 100644
index 0000000000..6ca9bd1c05
--- /dev/null
+++ b/web/app/components/plugins/marketplace/atoms.ts
@@ -0,0 +1,81 @@
+import type { ActivePluginType } from './constants'
+import type { PluginsSort, SearchParamsFromCollection } from './types'
+import { atom, useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { useQueryState } from 'nuqs'
+import { useCallback } from 'react'
+import { DEFAULT_SORT, PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
+import { marketplaceSearchParamsParsers } from './search-params'
+
+const marketplaceSortAtom = atom<PluginsSort>(DEFAULT_SORT)
+export function useMarketplaceSort() {
+  return useAtom(marketplaceSortAtom)
+}
+export function useMarketplaceSortValue() {
+  return useAtomValue(marketplaceSortAtom)
+}
+export function useSetMarketplaceSort() {
+  return useSetAtom(marketplaceSortAtom)
+}
+
+/**
+ * Preserve the state for marketplace
+ */
+export const preserveSearchStateInQueryAtom = atom<boolean>(false)
+
+const searchPluginTextAtom = atom<string>('')
+const activePluginTypeAtom = atom<ActivePluginType>('all')
+const filterPluginTagsAtom = atom<string[]>([])
+
+export function useSearchPluginText() {
+  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
+  const queryState = useQueryState('q', marketplaceSearchParamsParsers.q)
+  const atomState = useAtom(searchPluginTextAtom)
+  return preserveSearchStateInQuery ? queryState : atomState
+}
+export function useActivePluginType() {
+  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
+  const queryState = useQueryState('category', marketplaceSearchParamsParsers.category)
+  const atomState = useAtom(activePluginTypeAtom)
+  return preserveSearchStateInQuery ? queryState : atomState
+}
+export function useFilterPluginTags() {
+  const preserveSearchStateInQuery = useAtomValue(preserveSearchStateInQueryAtom)
+  const queryState = useQueryState('tags', marketplaceSearchParamsParsers.tags)
+  const atomState = useAtom(filterPluginTagsAtom)
+  return preserveSearchStateInQuery ? queryState : atomState
+}
+
+/**
+ * Not all categories have collections, so we need to
+ * force the search mode for those categories.
+ */
+export const searchModeAtom = atom<true | null>(null)
+
+export function useMarketplaceSearchMode() {
+  const [searchPluginText] = useSearchPluginText()
+  const [filterPluginTags] = useFilterPluginTags()
+  const [activePluginType] = useActivePluginType()
+
+  const searchMode = useAtomValue(searchModeAtom)
+  const isSearchMode = !!searchPluginText
+    || filterPluginTags.length > 0
+    || (searchMode ?? (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(activePluginType)))
+  return isSearchMode
+}
+
+export function useMarketplaceMoreClick() {
+  const [,setQ] = useSearchPluginText()
+  const setSort = useSetAtom(marketplaceSortAtom)
+  const setSearchMode = useSetAtom(searchModeAtom)
+
+  return useCallback((searchParams?: SearchParamsFromCollection) => {
+    if (!searchParams)
+      return
+    setQ(searchParams?.query || '')
+    setSort({
+      sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
+      sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
+    })
+    setSearchMode(true)
+  }, [setQ, setSort, setSearchMode])
+}
diff --git a/web/app/components/plugins/marketplace/constants.ts b/web/app/components/plugins/marketplace/constants.ts
index 92c3e7278f..6613fbe3de 100644
--- a/web/app/components/plugins/marketplace/constants.ts
+++ b/web/app/components/plugins/marketplace/constants.ts
@@ -1,6 +1,30 @@
+import { PluginCategoryEnum } from '../types'
+
 export const DEFAULT_SORT = {
   sortBy: 'install_count',
   sortOrder: 'DESC',
 }
 
 export const SCROLL_BOTTOM_THRESHOLD = 100
+
+export const PLUGIN_TYPE_SEARCH_MAP = {
+  all: 'all',
+  model: PluginCategoryEnum.model,
+  tool: PluginCategoryEnum.tool,
+  agent: PluginCategoryEnum.agent,
+  extension: PluginCategoryEnum.extension,
+  datasource: PluginCategoryEnum.datasource,
+  trigger: PluginCategoryEnum.trigger,
+  bundle: 'bundle',
+} as const
+
+type ValueOf<T> = T[keyof T]
+
+export type ActivePluginType = ValueOf<typeof PLUGIN_TYPE_SEARCH_MAP>
+
+export const PLUGIN_CATEGORY_WITH_COLLECTIONS = new Set<ActivePluginType>(
+  [
+    PLUGIN_TYPE_SEARCH_MAP.all,
+    PLUGIN_TYPE_SEARCH_MAP.tool,
+  ],
+)
diff --git a/web/app/components/plugins/marketplace/context.tsx b/web/app/components/plugins/marketplace/context.tsx
deleted file mode 100644
index 31b6a7f592..0000000000
--- a/web/app/components/plugins/marketplace/context.tsx
+++ /dev/null
@@ -1,332 +0,0 @@
-'use client'
-
-import type {
-  ReactNode,
-} from 'react'
-import type { TagKey } from '../constants'
-import type { Plugin } from '../types'
-import type {
-  MarketplaceCollection,
-  PluginsSort,
-  SearchParams,
-  SearchParamsFromCollection,
-} from './types'
-import { debounce } from 'es-toolkit/compat'
-import { noop } from 'es-toolkit/function'
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {
-  createContext,
-  useContextSelector,
-} from 'use-context-selector'
-import { useMarketplaceFilters } from '@/hooks/use-query-params'
-import { useInstalledPluginList } from '@/service/use-plugins'
-import {
-  getValidCategoryKeys,
-  getValidTagKeys,
-} from '../utils'
-import { DEFAULT_SORT } from './constants'
-import {
-  useMarketplaceCollectionsAndPlugins,
-  useMarketplaceContainerScroll,
-  useMarketplacePlugins,
-} from './hooks'
-import { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
-import {
-  getMarketplaceListCondition,
-  getMarketplaceListFilterType,
-} from './utils'
-
-export type MarketplaceContextValue = {
-  searchPluginText: string
-  handleSearchPluginTextChange: (text: string) => void
-  filterPluginTags: string[]
-  handleFilterPluginTagsChange: (tags: string[]) => void
-  activePluginType: string
-  handleActivePluginTypeChange: (type: string) => void
-  page: number
-  handlePageChange: () => void
-  plugins?: Plugin[]
-  pluginsTotal?: number
-  resetPlugins: () => void
-  sort: PluginsSort
-  handleSortChange: (sort: PluginsSort) => void
-  handleQueryPlugins: () => void
-  handleMoreClick: (searchParams: SearchParamsFromCollection) => void
-  marketplaceCollectionsFromClient?: MarketplaceCollection[]
-  setMarketplaceCollectionsFromClient: (collections: MarketplaceCollection[]) => void
-  marketplaceCollectionPluginsMapFromClient?: Record<string, Plugin[]>
-  setMarketplaceCollectionPluginsMapFromClient: (map: Record<string, Plugin[]>) => void
-  isLoading: boolean
-  isSuccessCollections: boolean
-}
-
-export const MarketplaceContext = createContext<MarketplaceContextValue>({
-  searchPluginText: '',
-  handleSearchPluginTextChange: noop,
-  filterPluginTags: [],
-  handleFilterPluginTagsChange: noop,
-  activePluginType: 'all',
-  handleActivePluginTypeChange: noop,
-  page: 1,
-  handlePageChange: noop,
-  plugins: undefined,
-  pluginsTotal: 0,
-  resetPlugins: noop,
-  sort: DEFAULT_SORT,
-  handleSortChange: noop,
-  handleQueryPlugins: noop,
-  handleMoreClick: noop,
-  marketplaceCollectionsFromClient: [],
-  setMarketplaceCollectionsFromClient: noop,
-  marketplaceCollectionPluginsMapFromClient: {},
-  setMarketplaceCollectionPluginsMapFromClient: noop,
-  isLoading: false,
-  isSuccessCollections: false,
-})
-
-type MarketplaceContextProviderProps = {
-  children: ReactNode
-  searchParams?: SearchParams
-  shouldExclude?: boolean
-  scrollContainerId?: string
-  showSearchParams?: boolean
-}
-
-export function useMarketplaceContext(selector: (value: MarketplaceContextValue) => any) {
-  return useContextSelector(MarketplaceContext, selector)
-}
-
-export const MarketplaceContextProvider = ({
-  children,
-  searchParams,
-  shouldExclude,
-  scrollContainerId,
-  showSearchParams,
-}: MarketplaceContextProviderProps) => {
-  // Use nuqs hook for URL-based filter state
-  const [urlFilters, setUrlFilters] = useMarketplaceFilters()
-
-  const { data, isSuccess } = useInstalledPluginList(!shouldExclude)
-  const exclude = useMemo(() => {
-    if (shouldExclude)
-      return data?.plugins.map(plugin => plugin.plugin_id)
-  }, [data?.plugins, shouldExclude])
-
-  // Initialize from URL params (legacy support) or use nuqs state
-  const queryFromSearchParams = searchParams?.q || urlFilters.q
-  const tagsFromSearchParams = getValidTagKeys(urlFilters.tags as TagKey[])
-  const hasValidTags = !!tagsFromSearchParams.length
-  const hasValidCategory = getValidCategoryKeys(urlFilters.category)
-  const categoryFromSearchParams = hasValidCategory || PLUGIN_TYPE_SEARCH_MAP.all
-
-  const [searchPluginText, setSearchPluginText] = useState(queryFromSearchParams)
-  const searchPluginTextRef = useRef(searchPluginText)
-  const [filterPluginTags, setFilterPluginTags] = useState<string[]>(tagsFromSearchParams)
-  const filterPluginTagsRef = useRef(filterPluginTags)
-  const [activePluginType, setActivePluginType] = useState(categoryFromSearchParams)
-  const activePluginTypeRef = useRef(activePluginType)
-  const [sort, setSort] = useState(DEFAULT_SORT)
-  const sortRef = useRef(sort)
-  const {
-    marketplaceCollections: marketplaceCollectionsFromClient,
-    setMarketplaceCollections: setMarketplaceCollectionsFromClient,
-    marketplaceCollectionPluginsMap: marketplaceCollectionPluginsMapFromClient,
-    setMarketplaceCollectionPluginsMap: setMarketplaceCollectionPluginsMapFromClient,
-    queryMarketplaceCollectionsAndPlugins,
-    isLoading,
-    isSuccess: isSuccessCollections,
-  } = useMarketplaceCollectionsAndPlugins()
-  const {
-    plugins,
-    total: pluginsTotal,
-    resetPlugins,
-    queryPlugins,
-    queryPluginsWithDebounced,
-    cancelQueryPluginsWithDebounced,
-    isLoading: isPluginsLoading,
-    fetchNextPage: fetchNextPluginsPage,
-    hasNextPage: hasNextPluginsPage,
-    page: pluginsPage,
-  } = useMarketplacePlugins()
-  const page = Math.max(pluginsPage || 0, 1)
-
-  useEffect(() => {
-    if (queryFromSearchParams || hasValidTags || hasValidCategory) {
-      queryPlugins({
-        query: queryFromSearchParams,
-        category: hasValidCategory,
-        tags: hasValidTags ? tagsFromSearchParams : [],
-        sortBy: sortRef.current.sortBy,
-        sortOrder: sortRef.current.sortOrder,
-        type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      })
-    }
-    else {
-      if (shouldExclude && isSuccess) {
-        queryMarketplaceCollectionsAndPlugins({
-          exclude,
-          type: getMarketplaceListFilterType(activePluginTypeRef.current),
-        })
-      }
-    }
-  }, [queryPlugins, queryMarketplaceCollectionsAndPlugins, isSuccess, exclude])
-
-  const handleQueryMarketplaceCollectionsAndPlugins = useCallback(() => {
-    queryMarketplaceCollectionsAndPlugins({
-      category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-      condition: getMarketplaceListCondition(activePluginTypeRef.current),
-      exclude,
-      type: getMarketplaceListFilterType(activePluginTypeRef.current),
-    })
-    resetPlugins()
-  }, [exclude, queryMarketplaceCollectionsAndPlugins, resetPlugins])
-
-  const applyUrlFilters = useCallback(() => {
-    if (!showSearchParams)
-      return
-    const nextFilters = {
-      q: searchPluginTextRef.current,
-      category: activePluginTypeRef.current,
-      tags: filterPluginTagsRef.current,
-    }
-    const categoryChanged = urlFilters.category !== nextFilters.category
-    setUrlFilters(nextFilters, {
-      history: categoryChanged ? 'push' : 'replace',
-    })
-  }, [setUrlFilters, showSearchParams, urlFilters.category])
-
-  const debouncedUpdateSearchParams = useMemo(() => debounce(() => {
-    applyUrlFilters()
-  }, 500), [applyUrlFilters])
-
-  const handleUpdateSearchParams = useCallback((debounced?: boolean) => {
-    if (debounced) {
-      debouncedUpdateSearchParams()
-    }
-    else {
-      applyUrlFilters()
-    }
-  }, [applyUrlFilters, debouncedUpdateSearchParams])
-
-  const handleQueryPlugins = useCallback((debounced?: boolean) => {
-    handleUpdateSearchParams(debounced)
-    if (debounced) {
-      queryPluginsWithDebounced({
-        query: searchPluginTextRef.current,
-        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-        tags: filterPluginTagsRef.current,
-        sortBy: sortRef.current.sortBy,
-        sortOrder: sortRef.current.sortOrder,
-        exclude,
-        type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      })
-    }
-    else {
-      queryPlugins({
-        query: searchPluginTextRef.current,
-        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
-        tags: filterPluginTagsRef.current,
-        sortBy: sortRef.current.sortBy,
-        sortOrder: sortRef.current.sortOrder,
-        exclude,
-        type: getMarketplaceListFilterType(activePluginTypeRef.current),
-      })
-    }
-  }, [exclude, queryPluginsWithDebounced, queryPlugins, handleUpdateSearchParams])
-
-  const handleQuery = useCallback((debounced?: boolean) => {
-    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
-      handleUpdateSearchParams(debounced)
-      cancelQueryPluginsWithDebounced()
-      handleQueryMarketplaceCollectionsAndPlugins()
-      return
-    }
-
-    handleQueryPlugins(debounced)
-  }, [handleQueryMarketplaceCollectionsAndPlugins, handleQueryPlugins, cancelQueryPluginsWithDebounced, handleUpdateSearchParams])
-
-  const handleSearchPluginTextChange = useCallback((text: string) => {
-    setSearchPluginText(text)
-    searchPluginTextRef.current = text
-
-    handleQuery(true)
-  }, [handleQuery])
-
-  const handleFilterPluginTagsChange = useCallback((tags: string[]) => {
-    setFilterPluginTags(tags)
-    filterPluginTagsRef.current = tags
-
-    handleQuery()
-  }, [handleQuery])
-
-  const handleActivePluginTypeChange = useCallback((type: string) => {
-    setActivePluginType(type)
-    activePluginTypeRef.current = type
-
-    handleQuery()
-  }, [handleQuery])
-
-  const handleSortChange = useCallback((sort: PluginsSort) => {
-    setSort(sort)
-    sortRef.current = sort
-
-    handleQueryPlugins()
-  }, [handleQueryPlugins])
-
-  const handlePageChange = useCallback(() => {
-    if (hasNextPluginsPage)
-      fetchNextPluginsPage()
-  }, [fetchNextPluginsPage, hasNextPluginsPage])
-
-  const handleMoreClick = useCallback((searchParams: SearchParamsFromCollection) => {
-    setSearchPluginText(searchParams?.query || '')
-    searchPluginTextRef.current = searchParams?.query || ''
-    setSort({
-      sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
-      sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
-    })
-    sortRef.current = {
-      sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
-      sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
-    }
-    handleQueryPlugins()
-  }, [handleQueryPlugins])
-
-  useMarketplaceContainerScroll(handlePageChange, scrollContainerId)
-
-  return (
-    <MarketplaceContext.Provider
-      value={{
-        searchPluginText,
-        handleSearchPluginTextChange,
-        filterPluginTags,
-        handleFilterPluginTagsChange,
-        activePluginType,
-        handleActivePluginTypeChange,
-        page,
-        handlePageChange,
-        plugins,
-        pluginsTotal,
-        resetPlugins,
-        sort,
-        handleSortChange,
-        handleQueryPlugins,
-        handleMoreClick,
-        marketplaceCollectionsFromClient,
-        setMarketplaceCollectionsFromClient,
-        marketplaceCollectionPluginsMapFromClient,
-        setMarketplaceCollectionPluginsMapFromClient,
-        isLoading: isLoading || isPluginsLoading,
-        isSuccessCollections,
-      }}
-    >
-      {children}
-    </MarketplaceContext.Provider>
-  )
-}
diff --git a/web/app/components/plugins/marketplace/hooks.ts b/web/app/components/plugins/marketplace/hooks.ts
index 11558e8c96..b1e4f50767 100644
--- a/web/app/components/plugins/marketplace/hooks.ts
+++ b/web/app/components/plugins/marketplace/hooks.ts
@@ -26,6 +26,9 @@ import {
   getMarketplacePluginsByCollectionId,
 } from './utils'
 
+/**
+ * @deprecated Use useMarketplaceCollectionsAndPlugins from query.ts instead
+ */
 export const useMarketplaceCollectionsAndPlugins = () => {
   const [queryParams, setQueryParams] = useState<CollectionsAndPluginsSearchParams>()
   const [marketplaceCollectionsOverride, setMarketplaceCollections] = useState<MarketplaceCollection[]>()
@@ -89,7 +92,9 @@ export const useMarketplacePluginsByCollectionId = (
     isSuccess,
   }
 }
-
+/**
+ * @deprecated Use useMarketplacePlugins from query.ts instead
+ */
 export const useMarketplacePlugins = () => {
   const queryClient = useQueryClient()
   const [queryParams, setQueryParams] = useState<PluginsSearchParams>()
diff --git a/web/app/components/plugins/marketplace/hydration-client.tsx b/web/app/components/plugins/marketplace/hydration-client.tsx
new file mode 100644
index 0000000000..5698db711f
--- /dev/null
+++ b/web/app/components/plugins/marketplace/hydration-client.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+import { useHydrateAtoms } from 'jotai/utils'
+import { preserveSearchStateInQueryAtom } from './atoms'
+
+export function HydrateMarketplaceAtoms({
+  preserveSearchStateInQuery,
+  children,
+}: {
+  preserveSearchStateInQuery: boolean
+  children: React.ReactNode
+}) {
+  useHydrateAtoms([[preserveSearchStateInQueryAtom, preserveSearchStateInQuery]])
+  return <>{children}</>
+}
diff --git a/web/app/components/plugins/marketplace/hydration-server.tsx b/web/app/components/plugins/marketplace/hydration-server.tsx
new file mode 100644
index 0000000000..0aa544cff1
--- /dev/null
+++ b/web/app/components/plugins/marketplace/hydration-server.tsx
@@ -0,0 +1,45 @@
+import type { SearchParams } from 'nuqs'
+import { dehydrate, HydrationBoundary } from '@tanstack/react-query'
+import { createLoader } from 'nuqs/server'
+import { getQueryClientServer } from '@/context/query-client-server'
+import { PLUGIN_CATEGORY_WITH_COLLECTIONS } from './constants'
+import { marketplaceKeys } from './query'
+import { marketplaceSearchParamsParsers } from './search-params'
+import { getCollectionsParams, getMarketplaceCollectionsAndPlugins } from './utils'
+
+// The server side logic should move to marketplace's codebase so that we can get rid of Next.js
+
+async function getDehydratedState(searchParams?: Promise<SearchParams>) {
+  if (!searchParams) {
+    return
+  }
+  const loadSearchParams = createLoader(marketplaceSearchParamsParsers)
+  const params = await loadSearchParams(searchParams)
+
+  if (!PLUGIN_CATEGORY_WITH_COLLECTIONS.has(params.category)) {
+    return
+  }
+
+  const queryClient = getQueryClientServer()
+
+  await queryClient.prefetchQuery({
+    queryKey: marketplaceKeys.collections(getCollectionsParams(params.category)),
+    queryFn: () => getMarketplaceCollectionsAndPlugins(getCollectionsParams(params.category)),
+  })
+  return dehydrate(queryClient)
+}
+
+export async function HydrateQueryClient({
+  searchParams,
+  children,
+}: {
+  searchParams: Promise<SearchParams> | undefined
+  children: React.ReactNode
+}) {
+  const dehydratedState = await getDehydratedState(searchParams)
+  return (
+    <HydrationBoundary state={dehydratedState}>
+      {children}
+    </HydrationBoundary>
+  )
+}
diff --git a/web/app/components/plugins/marketplace/index.spec.tsx b/web/app/components/plugins/marketplace/index.spec.tsx
index b3b1d58dd4..1a3cd15b6b 100644
--- a/web/app/components/plugins/marketplace/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/index.spec.tsx
@@ -1,6 +1,6 @@
-import type { MarketplaceCollection, SearchParams, SearchParamsFromCollection } from './types'
+import type { MarketplaceCollection } from './types'
 import type { Plugin } from '@/app/components/plugins/types'
-import { act, fireEvent, render, renderHook, screen } from '@testing-library/react'
+import { act, render, renderHook } from '@testing-library/react'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
 
@@ -9,10 +9,7 @@ import { PluginCategoryEnum } from '@/app/components/plugins/types'
 // ================================
 
 // Note: Import after mocks are set up
-import { DEFAULT_SORT, SCROLL_BOTTOM_THRESHOLD } from './constants'
-import { MarketplaceContext, MarketplaceContextProvider, useMarketplaceContext } from './context'
-import PluginTypeSwitch, { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
-import StickySearchAndSwitchWrapper from './sticky-search-and-switch-wrapper'
+import { DEFAULT_SORT, PLUGIN_TYPE_SEARCH_MAP, SCROLL_BOTTOM_THRESHOLD } from './constants'
 import {
   getFormattedPlugin,
   getMarketplaceListCondition,
@@ -62,7 +59,7 @@ vi.mock('@/service/use-plugins', () => ({
 
 // Mock tanstack query
 const mockFetchNextPage = vi.fn()
-let mockHasNextPage = false
+const mockHasNextPage = false
 let mockInfiniteQueryData: { pages: Array<{ plugins: unknown[], total: number, page: number, pageSize: number }> } | undefined
 let capturedInfiniteQueryFn: ((ctx: { pageParam: number, signal: AbortSignal }) => Promise<unknown>) | null = null
 let capturedQueryFn: ((ctx: { signal: AbortSignal }) => Promise<unknown>) | null = null
@@ -176,7 +173,7 @@ vi.mock('@/i18n-config/server', () => ({
 }))
 
 // Mock useTheme hook
-let mockTheme = 'light'
+const mockTheme = 'light'
 vi.mock('@/hooks/use-theme', () => ({
   default: () => ({
     theme: mockTheme,
@@ -367,47 +364,6 @@ const createMockCollection = (overrides?: Partial<MarketplaceCollection>): Marke
   ...overrides,
 })
 
-// ================================
-// Shared Test Components
-// ================================
-
-// Search input test component - used in multiple tests
-const SearchInputTestComponent = () => {
-  const searchText = useMarketplaceContext(v => v.searchPluginText)
-  const handleChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
-
-  return (
-    <div>
-      <input
-        data-testid="search-input"
-        value={searchText}
-        onChange={e => handleChange(e.target.value)}
-      />
-      <div data-testid="search-display">{searchText}</div>
-    </div>
-  )
-}
-
-// Plugin type change test component
-const PluginTypeChangeTestComponent = () => {
-  const handleChange = useMarketplaceContext(v => v.handleActivePluginTypeChange)
-  return (
-    <button data-testid="change-type" onClick={() => handleChange('tool')}>
-      Change Type
-    </button>
-  )
-}
-
-// Page change test component
-const PageChangeTestComponent = () => {
-  const handlePageChange = useMarketplaceContext(v => v.handlePageChange)
-  return (
-    <button data-testid="next-page" onClick={handlePageChange}>
-      Next Page
-    </button>
-  )
-}
-
 // ================================
 // Constants Tests
 // ================================
@@ -490,7 +446,7 @@ describe('utils', () => {
         org: 'test-org',
         name: 'test-plugin',
         tags: [{ name: 'search' }],
-      }
+      } as unknown as Plugin
 
       const formatted = getFormattedPlugin(rawPlugin)
 
@@ -504,7 +460,7 @@ describe('utils', () => {
         name: 'test-bundle',
         description: 'Bundle description',
         labels: { 'en-US': 'Test Bundle' },
-      }
+      } as unknown as Plugin
 
       const formatted = getFormattedPlugin(rawBundle)
 
@@ -1514,955 +1470,6 @@ describe('flatMap Coverage', () => {
   })
 })
 
-// ================================
-// Context Tests
-// ================================
-describe('MarketplaceContext', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockPortalOpenState = false
-  })
-
-  describe('MarketplaceContext default values', () => {
-    it('should have correct default context values', () => {
-      expect(MarketplaceContext).toBeDefined()
-    })
-  })
-
-  describe('useMarketplaceContext', () => {
-    it('should return selected value from context', () => {
-      const TestComponent = () => {
-        const searchText = useMarketplaceContext(v => v.searchPluginText)
-        return <div data-testid="search-text">{searchText}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('search-text')).toHaveTextContent('')
-    })
-  })
-
-  describe('MarketplaceContextProvider', () => {
-    it('should render children', () => {
-      render(
-        <MarketplaceContextProvider>
-          <div data-testid="child">Test Child</div>
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('child')).toBeInTheDocument()
-    })
-
-    it('should initialize with default values', () => {
-      // Reset mock data before this test
-      mockInfiniteQueryData = undefined
-
-      const TestComponent = () => {
-        const activePluginType = useMarketplaceContext(v => v.activePluginType)
-        const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
-        const sort = useMarketplaceContext(v => v.sort)
-        const page = useMarketplaceContext(v => v.page)
-
-        return (
-          <div>
-            <div data-testid="active-type">{activePluginType}</div>
-            <div data-testid="tags">{filterPluginTags.join(',')}</div>
-            <div data-testid="sort">{sort.sortBy}</div>
-            <div data-testid="page">{page}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('active-type')).toHaveTextContent('all')
-      expect(screen.getByTestId('tags')).toHaveTextContent('')
-      expect(screen.getByTestId('sort')).toHaveTextContent('install_count')
-      // Page depends on mock data, could be 0 or 1 depending on query state
-      expect(screen.getByTestId('page')).toBeInTheDocument()
-    })
-
-    it('should initialize with searchParams from props', () => {
-      const searchParams: SearchParams = {
-        q: 'test query',
-        category: 'tool',
-      }
-
-      const TestComponent = () => {
-        const searchText = useMarketplaceContext(v => v.searchPluginText)
-        return <div data-testid="search">{searchText}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider searchParams={searchParams}>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('search')).toHaveTextContent('test query')
-    })
-
-    it('should provide handleSearchPluginTextChange function', () => {
-      render(
-        <MarketplaceContextProvider>
-          <SearchInputTestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      const input = screen.getByTestId('search-input')
-      fireEvent.change(input, { target: { value: 'new search' } })
-
-      expect(screen.getByTestId('search-display')).toHaveTextContent('new search')
-    })
-
-    it('should provide handleFilterPluginTagsChange function', () => {
-      const TestComponent = () => {
-        const tags = useMarketplaceContext(v => v.filterPluginTags)
-        const handleChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange)
-
-        return (
-          <div>
-            <button
-              data-testid="add-tag"
-              onClick={() => handleChange(['search', 'image'])}
-            >
-              Add Tags
-            </button>
-            <div data-testid="tags-display">{tags.join(',')}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('add-tag'))
-
-      expect(screen.getByTestId('tags-display')).toHaveTextContent('search,image')
-    })
-
-    it('should provide handleActivePluginTypeChange function', () => {
-      const TestComponent = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        const handleChange = useMarketplaceContext(v => v.handleActivePluginTypeChange)
-
-        return (
-          <div>
-            <button
-              data-testid="change-type"
-              onClick={() => handleChange('tool')}
-            >
-              Change Type
-            </button>
-            <div data-testid="type-display">{activeType}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('change-type'))
-
-      expect(screen.getByTestId('type-display')).toHaveTextContent('tool')
-    })
-
-    it('should provide handleSortChange function', () => {
-      const TestComponent = () => {
-        const sort = useMarketplaceContext(v => v.sort)
-        const handleChange = useMarketplaceContext(v => v.handleSortChange)
-
-        return (
-          <div>
-            <button
-              data-testid="change-sort"
-              onClick={() => handleChange({ sortBy: 'created_at', sortOrder: 'ASC' })}
-            >
-              Change Sort
-            </button>
-            <div data-testid="sort-display">{`${sort.sortBy}-${sort.sortOrder}`}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('change-sort'))
-
-      expect(screen.getByTestId('sort-display')).toHaveTextContent('created_at-ASC')
-    })
-
-    it('should provide handleMoreClick function', () => {
-      const TestComponent = () => {
-        const searchText = useMarketplaceContext(v => v.searchPluginText)
-        const sort = useMarketplaceContext(v => v.sort)
-        const handleMoreClick = useMarketplaceContext(v => v.handleMoreClick)
-
-        const searchParams: SearchParamsFromCollection = {
-          query: 'more query',
-          sort_by: 'version_updated_at',
-          sort_order: 'DESC',
-        }
-
-        return (
-          <div>
-            <button
-              data-testid="more-click"
-              onClick={() => handleMoreClick(searchParams)}
-            >
-              More
-            </button>
-            <div data-testid="search-display">{searchText}</div>
-            <div data-testid="sort-display">{`${sort.sortBy}-${sort.sortOrder}`}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('more-click'))
-
-      expect(screen.getByTestId('search-display')).toHaveTextContent('more query')
-      expect(screen.getByTestId('sort-display')).toHaveTextContent('version_updated_at-DESC')
-    })
-
-    it('should provide resetPlugins function', () => {
-      const TestComponent = () => {
-        const resetPlugins = useMarketplaceContext(v => v.resetPlugins)
-        const plugins = useMarketplaceContext(v => v.plugins)
-
-        return (
-          <div>
-            <button
-              data-testid="reset-plugins"
-              onClick={resetPlugins}
-            >
-              Reset
-            </button>
-            <div data-testid="plugins-display">{plugins ? 'has plugins' : 'no plugins'}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('reset-plugins'))
-
-      // Plugins should remain undefined after reset
-      expect(screen.getByTestId('plugins-display')).toHaveTextContent('no plugins')
-    })
-
-    it('should accept shouldExclude prop', () => {
-      const TestComponent = () => {
-        const isLoading = useMarketplaceContext(v => v.isLoading)
-        return <div data-testid="loading">{isLoading.toString()}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider shouldExclude>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('loading')).toBeInTheDocument()
-    })
-
-    it('should accept scrollContainerId prop', () => {
-      render(
-        <MarketplaceContextProvider scrollContainerId="custom-container">
-          <div data-testid="child">Child</div>
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('child')).toBeInTheDocument()
-    })
-
-    it('should accept showSearchParams prop', () => {
-      render(
-        <MarketplaceContextProvider showSearchParams={false}>
-          <div data-testid="child">Child</div>
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('child')).toBeInTheDocument()
-    })
-  })
-})
-
-// ================================
-// PluginTypeSwitch Tests
-// ================================
-describe('PluginTypeSwitch', () => {
-  // Mock context values for PluginTypeSwitch
-  const mockContextValues = {
-    activePluginType: 'all',
-    handleActivePluginTypeChange: vi.fn(),
-  }
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockContextValues.activePluginType = 'all'
-    mockContextValues.handleActivePluginTypeChange = vi.fn()
-
-    vi.doMock('./context', () => ({
-      useMarketplaceContext: (selector: (v: typeof mockContextValues) => unknown) => selector(mockContextValues),
-    }))
-  })
-
-  // Note: PluginTypeSwitch uses internal context, so we test within the provider
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const TestComponent = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        const handleChange = useMarketplaceContext(v => v.handleActivePluginTypeChange)
-
-        return (
-          <div className="flex">
-            <div
-              className={activeType === 'all' ? 'active' : ''}
-              onClick={() => handleChange('all')}
-              data-testid="all-option"
-            >
-              All
-            </div>
-            <div
-              className={activeType === 'tool' ? 'active' : ''}
-              onClick={() => handleChange('tool')}
-              data-testid="tool-option"
-            >
-              Tools
-            </div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('all-option')).toBeInTheDocument()
-      expect(screen.getByTestId('tool-option')).toBeInTheDocument()
-    })
-
-    it('should highlight active plugin type', () => {
-      const TestComponent = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        const handleChange = useMarketplaceContext(v => v.handleActivePluginTypeChange)
-
-        return (
-          <div className="flex">
-            <div
-              className={activeType === 'all' ? 'active' : ''}
-              onClick={() => handleChange('all')}
-              data-testid="all-option"
-            >
-              All
-            </div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('all-option')).toHaveClass('active')
-    })
-  })
-
-  describe('User Interactions', () => {
-    it('should call handleActivePluginTypeChange when option is clicked', () => {
-      const TestComponent = () => {
-        const handleChange = useMarketplaceContext(v => v.handleActivePluginTypeChange)
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-
-        return (
-          <div className="flex">
-            <div
-              onClick={() => handleChange('tool')}
-              data-testid="tool-option"
-            >
-              Tools
-            </div>
-            <div data-testid="active-type">{activeType}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('tool-option'))
-      expect(screen.getByTestId('active-type')).toHaveTextContent('tool')
-    })
-
-    it('should update active type when different option is selected', () => {
-      const TestComponent = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        const handleChange = useMarketplaceContext(v => v.handleActivePluginTypeChange)
-
-        return (
-          <div>
-            <div
-              className={activeType === 'model' ? 'active' : ''}
-              onClick={() => handleChange('model')}
-              data-testid="model-option"
-            >
-              Models
-            </div>
-            <div data-testid="active-display">{activeType}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('model-option'))
-
-      expect(screen.getByTestId('active-display')).toHaveTextContent('model')
-    })
-  })
-
-  describe('Props', () => {
-    it('should accept locale prop', () => {
-      const TestComponent = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        return <div data-testid="type">{activeType}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('type')).toBeInTheDocument()
-    })
-
-    it('should accept className prop', () => {
-      const { container } = render(
-        <MarketplaceContextProvider>
-          <div className="custom-class" data-testid="wrapper">
-            Content
-          </div>
-        </MarketplaceContextProvider>,
-      )
-
-      expect(container.querySelector('.custom-class')).toBeInTheDocument()
-    })
-  })
-})
-
-// ================================
-// StickySearchAndSwitchWrapper Tests
-// ================================
-describe('StickySearchAndSwitchWrapper', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockPortalOpenState = false
-  })
-
-  describe('Rendering', () => {
-    it('should render without crashing', () => {
-      const { container } = render(
-        <MarketplaceContextProvider>
-          <StickySearchAndSwitchWrapper />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(container.firstChild).toBeInTheDocument()
-    })
-
-    it('should apply default styling', () => {
-      const { container } = render(
-        <MarketplaceContextProvider>
-          <StickySearchAndSwitchWrapper />
-        </MarketplaceContextProvider>,
-      )
-
-      const wrapper = container.querySelector('.mt-4.bg-background-body')
-      expect(wrapper).toBeInTheDocument()
-    })
-
-    it('should apply sticky positioning when pluginTypeSwitchClassName contains top-', () => {
-      const { container } = render(
-        <MarketplaceContextProvider>
-          <StickySearchAndSwitchWrapper pluginTypeSwitchClassName="top-0" />
-        </MarketplaceContextProvider>,
-      )
-
-      const wrapper = container.querySelector('.sticky.z-10')
-      expect(wrapper).toBeInTheDocument()
-    })
-
-    it('should not apply sticky positioning without top- class', () => {
-      const { container } = render(
-        <MarketplaceContextProvider>
-          <StickySearchAndSwitchWrapper pluginTypeSwitchClassName="custom-class" />
-        </MarketplaceContextProvider>,
-      )
-
-      const wrapper = container.querySelector('.sticky')
-      expect(wrapper).toBeNull()
-    })
-  })
-
-  describe('Props', () => {
-    it('should accept showSearchParams prop', () => {
-      render(
-        <MarketplaceContextProvider>
-          <StickySearchAndSwitchWrapper showSearchParams={false} />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
-    })
-
-    it('should pass pluginTypeSwitchClassName to wrapper', () => {
-      const { container } = render(
-        <MarketplaceContextProvider>
-          <StickySearchAndSwitchWrapper pluginTypeSwitchClassName="top-16 custom-style" />
-        </MarketplaceContextProvider>,
-      )
-
-      const wrapper = container.querySelector('.top-16.custom-style')
-      expect(wrapper).toBeInTheDocument()
-    })
-  })
-})
-
-// ================================
-// Integration Tests
-// ================================
-describe('Marketplace Integration', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockPortalOpenState = false
-    mockTheme = 'light'
-  })
-
-  describe('Context with child components', () => {
-    it('should share state between multiple consumers', () => {
-      const SearchDisplay = () => {
-        const searchText = useMarketplaceContext(v => v.searchPluginText)
-        return <div data-testid="search-display">{searchText || 'empty'}</div>
-      }
-
-      const SearchInput = () => {
-        const handleChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
-        return (
-          <input
-            data-testid="search-input"
-            onChange={e => handleChange(e.target.value)}
-          />
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <SearchInput />
-          <SearchDisplay />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('search-display')).toHaveTextContent('empty')
-
-      fireEvent.change(screen.getByTestId('search-input'), { target: { value: 'test' } })
-
-      expect(screen.getByTestId('search-display')).toHaveTextContent('test')
-    })
-
-    it('should update tags and reset plugins when search criteria changes', () => {
-      const TestComponent = () => {
-        const tags = useMarketplaceContext(v => v.filterPluginTags)
-        const handleTagsChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange)
-        const resetPlugins = useMarketplaceContext(v => v.resetPlugins)
-
-        const handleAddTag = () => {
-          handleTagsChange(['search'])
-        }
-
-        const handleReset = () => {
-          handleTagsChange([])
-          resetPlugins()
-        }
-
-        return (
-          <div>
-            <button data-testid="add-tag" onClick={handleAddTag}>Add Tag</button>
-            <button data-testid="reset" onClick={handleReset}>Reset</button>
-            <div data-testid="tags">{tags.join(',') || 'none'}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('tags')).toHaveTextContent('none')
-
-      fireEvent.click(screen.getByTestId('add-tag'))
-      expect(screen.getByTestId('tags')).toHaveTextContent('search')
-
-      fireEvent.click(screen.getByTestId('reset'))
-      expect(screen.getByTestId('tags')).toHaveTextContent('none')
-    })
-  })
-
-  describe('Sort functionality', () => {
-    it('should update sort and trigger query', () => {
-      const TestComponent = () => {
-        const sort = useMarketplaceContext(v => v.sort)
-        const handleSortChange = useMarketplaceContext(v => v.handleSortChange)
-
-        return (
-          <div>
-            <button
-              data-testid="sort-popular"
-              onClick={() => handleSortChange({ sortBy: 'install_count', sortOrder: 'DESC' })}
-            >
-              Popular
-            </button>
-            <button
-              data-testid="sort-recent"
-              onClick={() => handleSortChange({ sortBy: 'version_updated_at', sortOrder: 'DESC' })}
-            >
-              Recent
-            </button>
-            <div data-testid="current-sort">{sort.sortBy}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('current-sort')).toHaveTextContent('install_count')
-
-      fireEvent.click(screen.getByTestId('sort-recent'))
-      expect(screen.getByTestId('current-sort')).toHaveTextContent('version_updated_at')
-
-      fireEvent.click(screen.getByTestId('sort-popular'))
-      expect(screen.getByTestId('current-sort')).toHaveTextContent('install_count')
-    })
-  })
-
-  describe('Plugin type switching', () => {
-    it('should filter by plugin type', () => {
-      const TestComponent = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        const handleTypeChange = useMarketplaceContext(v => v.handleActivePluginTypeChange)
-
-        return (
-          <div>
-            {Object.entries(PLUGIN_TYPE_SEARCH_MAP).map(([key, value]) => (
-              <button
-                key={key}
-                data-testid={`type-${key}`}
-                onClick={() => handleTypeChange(value)}
-              >
-                {key}
-              </button>
-            ))}
-            <div data-testid="active-type">{activeType}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('active-type')).toHaveTextContent('all')
-
-      fireEvent.click(screen.getByTestId('type-tool'))
-      expect(screen.getByTestId('active-type')).toHaveTextContent('tool')
-
-      fireEvent.click(screen.getByTestId('type-model'))
-      expect(screen.getByTestId('active-type')).toHaveTextContent('model')
-
-      fireEvent.click(screen.getByTestId('type-bundle'))
-      expect(screen.getByTestId('active-type')).toHaveTextContent('bundle')
-    })
-  })
-})
-
-// ================================
-// Edge Cases Tests
-// ================================
-describe('Edge Cases', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockPortalOpenState = false
-  })
-
-  describe('Empty states', () => {
-    it('should handle empty search text', () => {
-      const TestComponent = () => {
-        const searchText = useMarketplaceContext(v => v.searchPluginText)
-        return <div data-testid="search">{searchText || 'empty'}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider searchParams={{ q: '' }}>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('search')).toHaveTextContent('empty')
-    })
-
-    it('should handle empty tags array', () => {
-      const TestComponent = () => {
-        const tags = useMarketplaceContext(v => v.filterPluginTags)
-        return <div data-testid="tags">{tags.length === 0 ? 'no tags' : tags.join(',')}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('tags')).toHaveTextContent('no tags')
-    })
-
-    it('should handle undefined plugins', () => {
-      const TestComponent = () => {
-        const plugins = useMarketplaceContext(v => v.plugins)
-        return <div data-testid="plugins">{plugins === undefined ? 'undefined' : 'defined'}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('plugins')).toHaveTextContent('undefined')
-    })
-  })
-
-  describe('Special characters in search', () => {
-    it('should handle special characters in search text', () => {
-      render(
-        <MarketplaceContextProvider>
-          <SearchInputTestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      const input = screen.getByTestId('search-input')
-
-      // Test with special characters
-      fireEvent.change(input, { target: { value: 'test@#$%^&*()' } })
-      expect(screen.getByTestId('search-display')).toHaveTextContent('test@#$%^&*()')
-
-      // Test with unicode characters
-      fireEvent.change(input, { target: { value: '测试中文' } })
-      expect(screen.getByTestId('search-display')).toHaveTextContent('测试中文')
-
-      // Test with emojis
-      fireEvent.change(input, { target: { value: '🔍 search' } })
-      expect(screen.getByTestId('search-display')).toHaveTextContent('🔍 search')
-    })
-  })
-
-  describe('Rapid state changes', () => {
-    it('should handle rapid search text changes', async () => {
-      render(
-        <MarketplaceContextProvider>
-          <SearchInputTestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      const input = screen.getByTestId('search-input')
-
-      // Rapidly change values
-      fireEvent.change(input, { target: { value: 'a' } })
-      fireEvent.change(input, { target: { value: 'ab' } })
-      fireEvent.change(input, { target: { value: 'abc' } })
-      fireEvent.change(input, { target: { value: 'abcd' } })
-      fireEvent.change(input, { target: { value: 'abcde' } })
-
-      // Final value should be the last one
-      expect(screen.getByTestId('search-display')).toHaveTextContent('abcde')
-    })
-
-    it('should handle rapid type changes', () => {
-      const TestComponent = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        const handleChange = useMarketplaceContext(v => v.handleActivePluginTypeChange)
-
-        return (
-          <div>
-            <button data-testid="type-tool" onClick={() => handleChange('tool')}>Tool</button>
-            <button data-testid="type-model" onClick={() => handleChange('model')}>Model</button>
-            <button data-testid="type-all" onClick={() => handleChange('all')}>All</button>
-            <div data-testid="active-type">{activeType}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      // Rapidly click different types
-      fireEvent.click(screen.getByTestId('type-tool'))
-      fireEvent.click(screen.getByTestId('type-model'))
-      fireEvent.click(screen.getByTestId('type-all'))
-      fireEvent.click(screen.getByTestId('type-tool'))
-
-      expect(screen.getByTestId('active-type')).toHaveTextContent('tool')
-    })
-  })
-
-  describe('Boundary conditions', () => {
-    it('should handle very long search text', () => {
-      const longText = 'a'.repeat(1000)
-
-      const TestComponent = () => {
-        const searchText = useMarketplaceContext(v => v.searchPluginText)
-        const handleChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
-
-        return (
-          <div>
-            <input
-              data-testid="search-input"
-              value={searchText}
-              onChange={e => handleChange(e.target.value)}
-            />
-            <div data-testid="search-length">{searchText.length}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.change(screen.getByTestId('search-input'), { target: { value: longText } })
-
-      expect(screen.getByTestId('search-length')).toHaveTextContent('1000')
-    })
-
-    it('should handle large number of tags', () => {
-      const manyTags = Array.from({ length: 100 }, (_, i) => `tag-${i}`)
-
-      const TestComponent = () => {
-        const tags = useMarketplaceContext(v => v.filterPluginTags)
-        const handleChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange)
-
-        return (
-          <div>
-            <button
-              data-testid="add-many-tags"
-              onClick={() => handleChange(manyTags)}
-            >
-              Add Tags
-            </button>
-            <div data-testid="tags-count">{tags.length}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('add-many-tags'))
-
-      expect(screen.getByTestId('tags-count')).toHaveTextContent('100')
-    })
-  })
-
-  describe('Sort edge cases', () => {
-    it('should handle same sort selection', () => {
-      const TestComponent = () => {
-        const sort = useMarketplaceContext(v => v.sort)
-        const handleSortChange = useMarketplaceContext(v => v.handleSortChange)
-
-        return (
-          <div>
-            <button
-              data-testid="select-same-sort"
-              onClick={() => handleSortChange({ sortBy: 'install_count', sortOrder: 'DESC' })}
-            >
-              Select Same
-            </button>
-            <div data-testid="sort-display">{`${sort.sortBy}-${sort.sortOrder}`}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      // Initial sort should be install_count-DESC
-      expect(screen.getByTestId('sort-display')).toHaveTextContent('install_count-DESC')
-
-      // Click same sort - should not cause issues
-      fireEvent.click(screen.getByTestId('select-same-sort'))
-
-      expect(screen.getByTestId('sort-display')).toHaveTextContent('install_count-DESC')
-    })
-  })
-})
-
 // ================================
 // Async Utils Tests
 // ================================
@@ -2685,338 +1692,6 @@ describe('useMarketplaceContainerScroll', () => {
   })
 })
 
-// ================================
-// Plugin Type Switch Component Tests
-// ================================
-describe('PluginTypeSwitch Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockPortalOpenState = false
-  })
-
-  describe('Rendering actual component', () => {
-    it('should render all plugin type options', () => {
-      render(
-        <MarketplaceContextProvider>
-          <PluginTypeSwitch />
-        </MarketplaceContextProvider>,
-      )
-
-      // Note: The global mock returns the key with namespace prefix (plugin.)
-      expect(screen.getByText('plugin.category.all')).toBeInTheDocument()
-      expect(screen.getByText('plugin.category.models')).toBeInTheDocument()
-      expect(screen.getByText('plugin.category.tools')).toBeInTheDocument()
-      expect(screen.getByText('plugin.category.datasources')).toBeInTheDocument()
-      expect(screen.getByText('plugin.category.triggers')).toBeInTheDocument()
-      expect(screen.getByText('plugin.category.agents')).toBeInTheDocument()
-      expect(screen.getByText('plugin.category.extensions')).toBeInTheDocument()
-      expect(screen.getByText('plugin.category.bundles')).toBeInTheDocument()
-    })
-
-    it('should apply className prop', () => {
-      const { container } = render(
-        <MarketplaceContextProvider>
-          <PluginTypeSwitch className="custom-class" />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(container.querySelector('.custom-class')).toBeInTheDocument()
-    })
-
-    it('should call handleActivePluginTypeChange on option click', () => {
-      const TestWrapper = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        return (
-          <div>
-            <PluginTypeSwitch />
-            <div data-testid="active-type-display">{activeType}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestWrapper />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByText('plugin.category.tools'))
-      expect(screen.getByTestId('active-type-display')).toHaveTextContent('tool')
-    })
-
-    it('should highlight active option with correct classes', () => {
-      const TestWrapper = () => {
-        const handleChange = useMarketplaceContext(v => v.handleActivePluginTypeChange)
-        return (
-          <div>
-            <button onClick={() => handleChange('model')} data-testid="set-model">Set Model</button>
-            <PluginTypeSwitch />
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestWrapper />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('set-model'))
-      const modelOption = screen.getByText('plugin.category.models').closest('div')
-      expect(modelOption).toHaveClass('shadow-xs')
-    })
-  })
-
-  describe('Popstate handling', () => {
-    it('should handle popstate event when showSearchParams is true', () => {
-      const originalHref = window.location.href
-
-      const TestWrapper = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        return (
-          <div>
-            <PluginTypeSwitch showSearchParams />
-            <div data-testid="active-type">{activeType}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider showSearchParams>
-          <TestWrapper />
-        </MarketplaceContextProvider>,
-      )
-
-      const popstateEvent = new PopStateEvent('popstate')
-      window.dispatchEvent(popstateEvent)
-
-      expect(screen.getByTestId('active-type')).toBeInTheDocument()
-      expect(window.location.href).toBe(originalHref)
-    })
-
-    it('should not handle popstate when showSearchParams is false', () => {
-      const TestWrapper = () => {
-        const activeType = useMarketplaceContext(v => v.activePluginType)
-        return (
-          <div>
-            <PluginTypeSwitch showSearchParams={false} />
-            <div data-testid="active-type">{activeType}</div>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider showSearchParams={false}>
-          <TestWrapper />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('active-type')).toHaveTextContent('all')
-
-      const popstateEvent = new PopStateEvent('popstate')
-      window.dispatchEvent(popstateEvent)
-
-      expect(screen.getByTestId('active-type')).toHaveTextContent('all')
-    })
-  })
-})
-
-// ================================
-// Context Advanced Tests
-// ================================
-describe('Context Advanced', () => {
-  beforeEach(() => {
-    vi.clearAllMocks()
-    mockPortalOpenState = false
-    mockSetUrlFilters.mockClear()
-    mockHasNextPage = false
-  })
-
-  describe('URL filter synchronization', () => {
-    it('should update URL filters when showSearchParams is true and type changes', () => {
-      render(
-        <MarketplaceContextProvider showSearchParams>
-          <PluginTypeChangeTestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('change-type'))
-      expect(mockSetUrlFilters).toHaveBeenCalled()
-    })
-
-    it('should not update URL filters when showSearchParams is false', () => {
-      render(
-        <MarketplaceContextProvider showSearchParams={false}>
-          <PluginTypeChangeTestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('change-type'))
-      expect(mockSetUrlFilters).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('handlePageChange', () => {
-    it('should invoke fetchNextPage when hasNextPage is true', () => {
-      mockHasNextPage = true
-
-      render(
-        <MarketplaceContextProvider>
-          <PageChangeTestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('next-page'))
-      expect(mockFetchNextPage).toHaveBeenCalled()
-    })
-
-    it('should not invoke fetchNextPage when hasNextPage is false', () => {
-      mockHasNextPage = false
-
-      render(
-        <MarketplaceContextProvider>
-          <PageChangeTestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      fireEvent.click(screen.getByTestId('next-page'))
-      expect(mockFetchNextPage).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('setMarketplaceCollectionsFromClient', () => {
-    it('should provide setMarketplaceCollectionsFromClient function', () => {
-      const TestComponent = () => {
-        const setCollections = useMarketplaceContext(v => v.setMarketplaceCollectionsFromClient)
-
-        return (
-          <div>
-            <button
-              data-testid="set-collections"
-              onClick={() => setCollections([{ name: 'test', label: {}, description: {}, rule: '', created_at: '', updated_at: '' }])}
-            >
-              Set Collections
-            </button>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('set-collections')).toBeInTheDocument()
-      // The function should be callable without throwing
-      expect(() => fireEvent.click(screen.getByTestId('set-collections'))).not.toThrow()
-    })
-  })
-
-  describe('setMarketplaceCollectionPluginsMapFromClient', () => {
-    it('should provide setMarketplaceCollectionPluginsMapFromClient function', () => {
-      const TestComponent = () => {
-        const setPluginsMap = useMarketplaceContext(v => v.setMarketplaceCollectionPluginsMapFromClient)
-
-        return (
-          <div>
-            <button
-              data-testid="set-plugins-map"
-              onClick={() => setPluginsMap({ 'test-collection': [] })}
-            >
-              Set Plugins Map
-            </button>
-          </div>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('set-plugins-map')).toBeInTheDocument()
-      // The function should be callable without throwing
-      expect(() => fireEvent.click(screen.getByTestId('set-plugins-map'))).not.toThrow()
-    })
-  })
-
-  describe('handleQueryPlugins', () => {
-    it('should provide handleQueryPlugins function that can be called', () => {
-      const TestComponent = () => {
-        const handleQueryPlugins = useMarketplaceContext(v => v.handleQueryPlugins)
-        return (
-          <button data-testid="query-plugins" onClick={() => handleQueryPlugins()}>
-            Query Plugins
-          </button>
-        )
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('query-plugins')).toBeInTheDocument()
-      fireEvent.click(screen.getByTestId('query-plugins'))
-      expect(screen.getByTestId('query-plugins')).toBeInTheDocument()
-    })
-  })
-
-  describe('isLoading state', () => {
-    it('should expose isLoading state', () => {
-      const TestComponent = () => {
-        const isLoading = useMarketplaceContext(v => v.isLoading)
-        return <div data-testid="loading">{isLoading.toString()}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('loading')).toHaveTextContent('false')
-    })
-  })
-
-  describe('isSuccessCollections state', () => {
-    it('should expose isSuccessCollections state', () => {
-      const TestComponent = () => {
-        const isSuccess = useMarketplaceContext(v => v.isSuccessCollections)
-        return <div data-testid="success">{isSuccess.toString()}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('success')).toHaveTextContent('false')
-    })
-  })
-
-  describe('pluginsTotal', () => {
-    it('should expose plugins total count', () => {
-      const TestComponent = () => {
-        const total = useMarketplaceContext(v => v.pluginsTotal)
-        return <div data-testid="total">{total || 0}</div>
-      }
-
-      render(
-        <MarketplaceContextProvider>
-          <TestComponent />
-        </MarketplaceContextProvider>,
-      )
-
-      expect(screen.getByTestId('total')).toHaveTextContent('0')
-    })
-  })
-})
-
 // ================================
 // Test Data Factory Tests
 // ================================
diff --git a/web/app/components/plugins/marketplace/index.tsx b/web/app/components/plugins/marketplace/index.tsx
index 08d1bc833f..1f32ee4d29 100644
--- a/web/app/components/plugins/marketplace/index.tsx
+++ b/web/app/components/plugins/marketplace/index.tsx
@@ -1,55 +1,39 @@
-import type { MarketplaceCollection, SearchParams } from './types'
-import type { Plugin } from '@/app/components/plugins/types'
+import type { SearchParams } from 'nuqs'
 import { TanstackQueryInitializer } from '@/context/query-client'
-import { MarketplaceContextProvider } from './context'
 import Description from './description'
+import { HydrateMarketplaceAtoms } from './hydration-client'
+import { HydrateQueryClient } from './hydration-server'
 import ListWrapper from './list/list-wrapper'
 import StickySearchAndSwitchWrapper from './sticky-search-and-switch-wrapper'
-import { getMarketplaceCollectionsAndPlugins } from './utils'
 
 type MarketplaceProps = {
   showInstallButton?: boolean
-  shouldExclude?: boolean
-  searchParams?: SearchParams
   pluginTypeSwitchClassName?: string
-  scrollContainerId?: string
-  showSearchParams?: boolean
+  /**
+   * Pass the search params from the request to prefetch data on the server
+   * and preserve the search params in the URL.
+   */
+  searchParams?: Promise<SearchParams>
 }
+
 const Marketplace = async ({
   showInstallButton = true,
-  shouldExclude,
-  searchParams,
   pluginTypeSwitchClassName,
-  scrollContainerId,
-  showSearchParams = true,
+  searchParams,
 }: MarketplaceProps) => {
-  let marketplaceCollections: MarketplaceCollection[] = []
-  let marketplaceCollectionPluginsMap: Record<string, Plugin[]> = {}
-  if (!shouldExclude) {
-    const marketplaceCollectionsAndPluginsData = await getMarketplaceCollectionsAndPlugins()
-    marketplaceCollections = marketplaceCollectionsAndPluginsData.marketplaceCollections
-    marketplaceCollectionPluginsMap = marketplaceCollectionsAndPluginsData.marketplaceCollectionPluginsMap
-  }
-
   return (
     <TanstackQueryInitializer>
-      <MarketplaceContextProvider
-        searchParams={searchParams}
-        shouldExclude={shouldExclude}
-        scrollContainerId={scrollContainerId}
-        showSearchParams={showSearchParams}
-      >
-        <Description />
-        <StickySearchAndSwitchWrapper
-          pluginTypeSwitchClassName={pluginTypeSwitchClassName}
-          showSearchParams={showSearchParams}
-        />
-        <ListWrapper
-          marketplaceCollections={marketplaceCollections}
-          marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
-          showInstallButton={showInstallButton}
-        />
-      </MarketplaceContextProvider>
+      <HydrateQueryClient searchParams={searchParams}>
+        <HydrateMarketplaceAtoms preserveSearchStateInQuery={!!searchParams}>
+          <Description />
+          <StickySearchAndSwitchWrapper
+            pluginTypeSwitchClassName={pluginTypeSwitchClassName}
+          />
+          <ListWrapper
+            showInstallButton={showInstallButton}
+          />
+        </HydrateMarketplaceAtoms>
+      </HydrateQueryClient>
     </TanstackQueryInitializer>
   )
 }
diff --git a/web/app/components/plugins/marketplace/list/index.spec.tsx b/web/app/components/plugins/marketplace/list/index.spec.tsx
index c8fc6309a4..81616f5958 100644
--- a/web/app/components/plugins/marketplace/list/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/list/index.spec.tsx
@@ -1,6 +1,6 @@
 import type { MarketplaceCollection, SearchParamsFromCollection } from '../types'
 import type { Plugin } from '@/app/components/plugins/types'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
 import List from './index'
@@ -30,23 +30,27 @@ vi.mock('#i18n', () => ({
   useLocale: () => 'en-US',
 }))
 
-// Mock useMarketplaceContext with controllable values
-const mockContextValues = {
-  plugins: undefined as Plugin[] | undefined,
-  pluginsTotal: 0,
-  marketplaceCollectionsFromClient: undefined as MarketplaceCollection[] | undefined,
-  marketplaceCollectionPluginsMapFromClient: undefined as Record<string, Plugin[]> | undefined,
-  isLoading: false,
-  isSuccessCollections: false,
-  handleQueryPlugins: vi.fn(),
-  searchPluginText: '',
-  filterPluginTags: [] as string[],
-  page: 1,
-  handleMoreClick: vi.fn(),
-}
+// Mock marketplace state hooks with controllable values
+const { mockMarketplaceData, mockMoreClick } = vi.hoisted(() => {
+  return {
+    mockMarketplaceData: {
+      plugins: undefined as Plugin[] | undefined,
+      pluginsTotal: 0,
+      marketplaceCollections: undefined as MarketplaceCollection[] | undefined,
+      marketplaceCollectionPluginsMap: undefined as Record<string, Plugin[]> | undefined,
+      isLoading: false,
+      page: 1,
+    },
+    mockMoreClick: vi.fn(),
+  }
+})
 
-vi.mock('../context', () => ({
-  useMarketplaceContext: (selector: (v: typeof mockContextValues) => unknown) => selector(mockContextValues),
+vi.mock('../state', () => ({
+  useMarketplaceData: () => mockMarketplaceData,
+}))
+
+vi.mock('../atoms', () => ({
+  useMarketplaceMoreClick: () => mockMoreClick,
 }))
 
 // Mock useLocale context
@@ -578,7 +582,7 @@ describe('ListWithCollection', () => {
   // View More Button Tests
   // ================================
   describe('View More Button', () => {
-    it('should render View More button when collection is searchable and onMoreClick is provided', () => {
+    it('should render View More button when collection is searchable', () => {
       const collections = [createMockCollection({
         name: 'collection-0',
         searchable: true,
@@ -587,14 +591,12 @@ describe('ListWithCollection', () => {
       const pluginsMap: Record<string, Plugin[]> = {
         'collection-0': createMockPluginList(1),
       }
-      const onMoreClick = vi.fn()
 
       render(
         <ListWithCollection
           {...defaultProps}
           marketplaceCollections={collections}
           marketplaceCollectionPluginsMap={pluginsMap}
-          onMoreClick={onMoreClick}
         />,
       )
 
@@ -609,42 +611,19 @@ describe('ListWithCollection', () => {
       const pluginsMap: Record<string, Plugin[]> = {
         'collection-0': createMockPluginList(1),
       }
-      const onMoreClick = vi.fn()
 
       render(
         <ListWithCollection
           {...defaultProps}
           marketplaceCollections={collections}
           marketplaceCollectionPluginsMap={pluginsMap}
-          onMoreClick={onMoreClick}
         />,
       )
 
       expect(screen.queryByText('View More')).not.toBeInTheDocument()
     })
 
-    it('should not render View More button when onMoreClick is not provided', () => {
-      const collections = [createMockCollection({
-        name: 'collection-0',
-        searchable: true,
-      })]
-      const pluginsMap: Record<string, Plugin[]> = {
-        'collection-0': createMockPluginList(1),
-      }
-
-      render(
-        <ListWithCollection
-          {...defaultProps}
-          marketplaceCollections={collections}
-          marketplaceCollectionPluginsMap={pluginsMap}
-          onMoreClick={undefined}
-        />,
-      )
-
-      expect(screen.queryByText('View More')).not.toBeInTheDocument()
-    })
-
-    it('should call onMoreClick with search_params when View More is clicked', () => {
+    it('should call moreClick hook with search_params when View More is clicked', () => {
       const searchParams: SearchParamsFromCollection = { query: 'test-query', sort_by: 'install_count' }
       const collections = [createMockCollection({
         name: 'collection-0',
@@ -654,21 +633,19 @@ describe('ListWithCollection', () => {
       const pluginsMap: Record<string, Plugin[]> = {
         'collection-0': createMockPluginList(1),
       }
-      const onMoreClick = vi.fn()
 
       render(
         <ListWithCollection
           {...defaultProps}
           marketplaceCollections={collections}
           marketplaceCollectionPluginsMap={pluginsMap}
-          onMoreClick={onMoreClick}
         />,
       )
 
       fireEvent.click(screen.getByText('View More'))
 
-      expect(onMoreClick).toHaveBeenCalledTimes(1)
-      expect(onMoreClick).toHaveBeenCalledWith(searchParams)
+      expect(mockMoreClick).toHaveBeenCalledTimes(1)
+      expect(mockMoreClick).toHaveBeenCalledWith(searchParams)
     })
   })
 
@@ -802,24 +779,15 @@ describe('ListWithCollection', () => {
 // ListWrapper Component Tests
 // ================================
 describe('ListWrapper', () => {
-  const defaultProps = {
-    marketplaceCollections: [] as MarketplaceCollection[],
-    marketplaceCollectionPluginsMap: {} as Record<string, Plugin[]>,
-    showInstallButton: false,
-  }
-
   beforeEach(() => {
     vi.clearAllMocks()
-    // Reset context values
-    mockContextValues.plugins = undefined
-    mockContextValues.pluginsTotal = 0
-    mockContextValues.marketplaceCollectionsFromClient = undefined
-    mockContextValues.marketplaceCollectionPluginsMapFromClient = undefined
-    mockContextValues.isLoading = false
-    mockContextValues.isSuccessCollections = false
-    mockContextValues.searchPluginText = ''
-    mockContextValues.filterPluginTags = []
-    mockContextValues.page = 1
+    // Reset mock data
+    mockMarketplaceData.plugins = undefined
+    mockMarketplaceData.pluginsTotal = 0
+    mockMarketplaceData.marketplaceCollections = undefined
+    mockMarketplaceData.marketplaceCollectionPluginsMap = undefined
+    mockMarketplaceData.isLoading = false
+    mockMarketplaceData.page = 1
   })
 
   // ================================
@@ -827,32 +795,32 @@ describe('ListWrapper', () => {
   // ================================
   describe('Rendering', () => {
     it('should render without crashing', () => {
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       expect(document.body).toBeInTheDocument()
     })
 
     it('should render with scrollbarGutter style', () => {
-      const { container } = render(<ListWrapper {...defaultProps} />)
+      const { container } = render(<ListWrapper />)
 
       const wrapper = container.firstChild as HTMLElement
       expect(wrapper).toHaveStyle({ scrollbarGutter: 'stable' })
     })
 
     it('should render Loading component when isLoading is true and page is 1', () => {
-      mockContextValues.isLoading = true
-      mockContextValues.page = 1
+      mockMarketplaceData.isLoading = true
+      mockMarketplaceData.page = 1
 
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       expect(screen.getByTestId('loading-component')).toBeInTheDocument()
     })
 
     it('should not render Loading component when page > 1', () => {
-      mockContextValues.isLoading = true
-      mockContextValues.page = 2
+      mockMarketplaceData.isLoading = true
+      mockMarketplaceData.page = 2
 
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       expect(screen.queryByTestId('loading-component')).not.toBeInTheDocument()
     })
@@ -863,26 +831,26 @@ describe('ListWrapper', () => {
   // ================================
   describe('Plugins Header', () => {
     it('should render plugins result count when plugins are present', () => {
-      mockContextValues.plugins = createMockPluginList(5)
-      mockContextValues.pluginsTotal = 5
+      mockMarketplaceData.plugins = createMockPluginList(5)
+      mockMarketplaceData.pluginsTotal = 5
 
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       expect(screen.getByText('5 plugins found')).toBeInTheDocument()
     })
 
     it('should render SortDropdown when plugins are present', () => {
-      mockContextValues.plugins = createMockPluginList(1)
+      mockMarketplaceData.plugins = createMockPluginList(1)
 
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       expect(screen.getByTestId('sort-dropdown')).toBeInTheDocument()
     })
 
     it('should not render plugins header when plugins is undefined', () => {
-      mockContextValues.plugins = undefined
+      mockMarketplaceData.plugins = undefined
 
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       expect(screen.queryByTestId('sort-dropdown')).not.toBeInTheDocument()
     })
@@ -892,197 +860,60 @@ describe('ListWrapper', () => {
   // List Rendering Logic Tests
   // ================================
   describe('List Rendering Logic', () => {
-    it('should render List when not loading', () => {
-      mockContextValues.isLoading = false
-      const collections = createMockCollectionList(1)
-      const pluginsMap: Record<string, Plugin[]> = {
+    it('should render collections when not loading', () => {
+      mockMarketplaceData.isLoading = false
+      mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
+      mockMarketplaceData.marketplaceCollectionPluginsMap = {
         'collection-0': createMockPluginList(1),
       }
 
-      render(
-        <ListWrapper
-          {...defaultProps}
-          marketplaceCollections={collections}
-          marketplaceCollectionPluginsMap={pluginsMap}
-        />,
-      )
+      render(<ListWrapper />)
 
       expect(screen.getByText('Collection 0')).toBeInTheDocument()
     })
 
     it('should render List when loading but page > 1', () => {
-      mockContextValues.isLoading = true
-      mockContextValues.page = 2
-      const collections = createMockCollectionList(1)
-      const pluginsMap: Record<string, Plugin[]> = {
+      mockMarketplaceData.isLoading = true
+      mockMarketplaceData.page = 2
+      mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
+      mockMarketplaceData.marketplaceCollectionPluginsMap = {
         'collection-0': createMockPluginList(1),
       }
 
-      render(
-        <ListWrapper
-          {...defaultProps}
-          marketplaceCollections={collections}
-          marketplaceCollectionPluginsMap={pluginsMap}
-        />,
-      )
+      render(<ListWrapper />)
 
       expect(screen.getByText('Collection 0')).toBeInTheDocument()
     })
-
-    it('should use client collections when available', () => {
-      const serverCollections = createMockCollectionList(1)
-      serverCollections[0].label = { 'en-US': 'Server Collection' }
-      const clientCollections = createMockCollectionList(1)
-      clientCollections[0].label = { 'en-US': 'Client Collection' }
-
-      const serverPluginsMap: Record<string, Plugin[]> = {
-        'collection-0': createMockPluginList(1),
-      }
-      const clientPluginsMap: Record<string, Plugin[]> = {
-        'collection-0': createMockPluginList(1),
-      }
-
-      mockContextValues.marketplaceCollectionsFromClient = clientCollections
-      mockContextValues.marketplaceCollectionPluginsMapFromClient = clientPluginsMap
-
-      render(
-        <ListWrapper
-          {...defaultProps}
-          marketplaceCollections={serverCollections}
-          marketplaceCollectionPluginsMap={serverPluginsMap}
-        />,
-      )
-
-      expect(screen.getByText('Client Collection')).toBeInTheDocument()
-      expect(screen.queryByText('Server Collection')).not.toBeInTheDocument()
-    })
-
-    it('should use server collections when client collections are not available', () => {
-      const serverCollections = createMockCollectionList(1)
-      serverCollections[0].label = { 'en-US': 'Server Collection' }
-      const serverPluginsMap: Record<string, Plugin[]> = {
-        'collection-0': createMockPluginList(1),
-      }
-
-      mockContextValues.marketplaceCollectionsFromClient = undefined
-      mockContextValues.marketplaceCollectionPluginsMapFromClient = undefined
-
-      render(
-        <ListWrapper
-          {...defaultProps}
-          marketplaceCollections={serverCollections}
-          marketplaceCollectionPluginsMap={serverPluginsMap}
-        />,
-      )
-
-      expect(screen.getByText('Server Collection')).toBeInTheDocument()
-    })
   })
 
   // ================================
-  // Context Integration Tests
+  // Data Integration Tests
   // ================================
-  describe('Context Integration', () => {
-    it('should pass plugins from context to List', () => {
-      const plugins = createMockPluginList(2)
-      mockContextValues.plugins = plugins
+  describe('Data Integration', () => {
+    it('should pass plugins from state to List', () => {
+      mockMarketplaceData.plugins = createMockPluginList(2)
 
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       expect(screen.getByTestId('card-plugin-0')).toBeInTheDocument()
       expect(screen.getByTestId('card-plugin-1')).toBeInTheDocument()
     })
 
-    it('should pass handleMoreClick from context to List', () => {
-      const mockHandleMoreClick = vi.fn()
-      mockContextValues.handleMoreClick = mockHandleMoreClick
-
-      const collections = [createMockCollection({
+    it('should show View More button and call moreClick hook', () => {
+      mockMarketplaceData.marketplaceCollections = [createMockCollection({
         name: 'collection-0',
         searchable: true,
         search_params: { query: 'test' },
       })]
-      const pluginsMap: Record<string, Plugin[]> = {
+      mockMarketplaceData.marketplaceCollectionPluginsMap = {
         'collection-0': createMockPluginList(1),
       }
 
-      render(
-        <ListWrapper
-          {...defaultProps}
-          marketplaceCollections={collections}
-          marketplaceCollectionPluginsMap={pluginsMap}
-        />,
-      )
+      render(<ListWrapper />)
 
       fireEvent.click(screen.getByText('View More'))
 
-      expect(mockHandleMoreClick).toHaveBeenCalled()
-    })
-  })
-
-  // ================================
-  // Effect Tests (handleQueryPlugins)
-  // ================================
-  describe('handleQueryPlugins Effect', () => {
-    it('should call handleQueryPlugins when conditions are met', async () => {
-      const mockHandleQueryPlugins = vi.fn()
-      mockContextValues.handleQueryPlugins = mockHandleQueryPlugins
-      mockContextValues.isSuccessCollections = true
-      mockContextValues.marketplaceCollectionsFromClient = undefined
-      mockContextValues.searchPluginText = ''
-      mockContextValues.filterPluginTags = []
-
-      render(<ListWrapper {...defaultProps} />)
-
-      await waitFor(() => {
-        expect(mockHandleQueryPlugins).toHaveBeenCalled()
-      })
-    })
-
-    it('should not call handleQueryPlugins when client collections exist', async () => {
-      const mockHandleQueryPlugins = vi.fn()
-      mockContextValues.handleQueryPlugins = mockHandleQueryPlugins
-      mockContextValues.isSuccessCollections = true
-      mockContextValues.marketplaceCollectionsFromClient = createMockCollectionList(1)
-      mockContextValues.searchPluginText = ''
-      mockContextValues.filterPluginTags = []
-
-      render(<ListWrapper {...defaultProps} />)
-
-      // Give time for effect to run
-      await waitFor(() => {
-        expect(mockHandleQueryPlugins).not.toHaveBeenCalled()
-      })
-    })
-
-    it('should not call handleQueryPlugins when search text exists', async () => {
-      const mockHandleQueryPlugins = vi.fn()
-      mockContextValues.handleQueryPlugins = mockHandleQueryPlugins
-      mockContextValues.isSuccessCollections = true
-      mockContextValues.marketplaceCollectionsFromClient = undefined
-      mockContextValues.searchPluginText = 'search text'
-      mockContextValues.filterPluginTags = []
-
-      render(<ListWrapper {...defaultProps} />)
-
-      await waitFor(() => {
-        expect(mockHandleQueryPlugins).not.toHaveBeenCalled()
-      })
-    })
-
-    it('should not call handleQueryPlugins when filter tags exist', async () => {
-      const mockHandleQueryPlugins = vi.fn()
-      mockContextValues.handleQueryPlugins = mockHandleQueryPlugins
-      mockContextValues.isSuccessCollections = true
-      mockContextValues.marketplaceCollectionsFromClient = undefined
-      mockContextValues.searchPluginText = ''
-      mockContextValues.filterPluginTags = ['tag1']
-
-      render(<ListWrapper {...defaultProps} />)
-
-      await waitFor(() => {
-        expect(mockHandleQueryPlugins).not.toHaveBeenCalled()
-      })
+      expect(mockMoreClick).toHaveBeenCalled()
     })
   })
 
@@ -1090,32 +921,32 @@ describe('ListWrapper', () => {
   // Edge Cases Tests
   // ================================
   describe('Edge Cases', () => {
-    it('should handle empty plugins array from context', () => {
-      mockContextValues.plugins = []
-      mockContextValues.pluginsTotal = 0
+    it('should handle empty plugins array', () => {
+      mockMarketplaceData.plugins = []
+      mockMarketplaceData.pluginsTotal = 0
 
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       expect(screen.getByText('0 plugins found')).toBeInTheDocument()
       expect(screen.getByTestId('empty-component')).toBeInTheDocument()
     })
 
     it('should handle large pluginsTotal', () => {
-      mockContextValues.plugins = createMockPluginList(10)
-      mockContextValues.pluginsTotal = 10000
+      mockMarketplaceData.plugins = createMockPluginList(10)
+      mockMarketplaceData.pluginsTotal = 10000
 
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       expect(screen.getByText('10000 plugins found')).toBeInTheDocument()
     })
 
     it('should handle both loading and has plugins', () => {
-      mockContextValues.isLoading = true
-      mockContextValues.page = 2
-      mockContextValues.plugins = createMockPluginList(5)
-      mockContextValues.pluginsTotal = 50
+      mockMarketplaceData.isLoading = true
+      mockMarketplaceData.page = 2
+      mockMarketplaceData.plugins = createMockPluginList(5)
+      mockMarketplaceData.pluginsTotal = 50
 
-      render(<ListWrapper {...defaultProps} />)
+      render(<ListWrapper />)
 
       // Should show plugins header and list
       expect(screen.getByText('50 plugins found')).toBeInTheDocument()
@@ -1428,106 +1259,72 @@ describe('CardWrapper (via List integration)', () => {
 describe('Combined Workflows', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockContextValues.plugins = undefined
-    mockContextValues.pluginsTotal = 0
-    mockContextValues.isLoading = false
-    mockContextValues.page = 1
-    mockContextValues.marketplaceCollectionsFromClient = undefined
-    mockContextValues.marketplaceCollectionPluginsMapFromClient = undefined
+    mockMarketplaceData.plugins = undefined
+    mockMarketplaceData.pluginsTotal = 0
+    mockMarketplaceData.isLoading = false
+    mockMarketplaceData.page = 1
+    mockMarketplaceData.marketplaceCollections = undefined
+    mockMarketplaceData.marketplaceCollectionPluginsMap = undefined
   })
 
   it('should transition from loading to showing collections', async () => {
-    mockContextValues.isLoading = true
-    mockContextValues.page = 1
+    mockMarketplaceData.isLoading = true
+    mockMarketplaceData.page = 1
 
-    const { rerender } = render(
-      <ListWrapper
-        marketplaceCollections={[]}
-        marketplaceCollectionPluginsMap={{}}
-      />,
-    )
+    const { rerender } = render(<ListWrapper />)
 
     expect(screen.getByTestId('loading-component')).toBeInTheDocument()
 
     // Simulate loading complete
-    mockContextValues.isLoading = false
-    const collections = createMockCollectionList(1)
-    const pluginsMap: Record<string, Plugin[]> = {
+    mockMarketplaceData.isLoading = false
+    mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
+    mockMarketplaceData.marketplaceCollectionPluginsMap = {
       'collection-0': createMockPluginList(1),
     }
-    mockContextValues.marketplaceCollectionsFromClient = collections
-    mockContextValues.marketplaceCollectionPluginsMapFromClient = pluginsMap
 
-    rerender(
-      <ListWrapper
-        marketplaceCollections={[]}
-        marketplaceCollectionPluginsMap={{}}
-      />,
-    )
+    rerender(<ListWrapper />)
 
     expect(screen.queryByTestId('loading-component')).not.toBeInTheDocument()
     expect(screen.getByText('Collection 0')).toBeInTheDocument()
   })
 
   it('should transition from collections to search results', async () => {
-    const collections = createMockCollectionList(1)
-    const pluginsMap: Record<string, Plugin[]> = {
+    mockMarketplaceData.marketplaceCollections = createMockCollectionList(1)
+    mockMarketplaceData.marketplaceCollectionPluginsMap = {
       'collection-0': createMockPluginList(1),
     }
-    mockContextValues.marketplaceCollectionsFromClient = collections
-    mockContextValues.marketplaceCollectionPluginsMapFromClient = pluginsMap
 
-    const { rerender } = render(
-      <ListWrapper
-        marketplaceCollections={[]}
-        marketplaceCollectionPluginsMap={{}}
-      />,
-    )
+    const { rerender } = render(<ListWrapper />)
 
     expect(screen.getByText('Collection 0')).toBeInTheDocument()
 
     // Simulate search results
-    mockContextValues.plugins = createMockPluginList(5)
-    mockContextValues.pluginsTotal = 5
+    mockMarketplaceData.plugins = createMockPluginList(5)
+    mockMarketplaceData.pluginsTotal = 5
 
-    rerender(
-      <ListWrapper
-        marketplaceCollections={[]}
-        marketplaceCollectionPluginsMap={{}}
-      />,
-    )
+    rerender(<ListWrapper />)
 
     expect(screen.queryByText('Collection 0')).not.toBeInTheDocument()
     expect(screen.getByText('5 plugins found')).toBeInTheDocument()
   })
 
   it('should handle empty search results', () => {
-    mockContextValues.plugins = []
-    mockContextValues.pluginsTotal = 0
+    mockMarketplaceData.plugins = []
+    mockMarketplaceData.pluginsTotal = 0
 
-    render(
-      <ListWrapper
-        marketplaceCollections={[]}
-        marketplaceCollectionPluginsMap={{}}
-      />,
-    )
+    render(<ListWrapper />)
 
     expect(screen.getByTestId('empty-component')).toBeInTheDocument()
     expect(screen.getByText('0 plugins found')).toBeInTheDocument()
   })
 
   it('should support pagination (page > 1)', () => {
-    mockContextValues.plugins = createMockPluginList(40)
-    mockContextValues.pluginsTotal = 80
-    mockContextValues.isLoading = true
-    mockContextValues.page = 2
+    mockMarketplaceData.plugins = createMockPluginList(40)
+    mockMarketplaceData.pluginsTotal = 80
+    mockMarketplaceData.isLoading = true
+    mockMarketplaceData.page = 2
 
-    render(
-      <ListWrapper
-        marketplaceCollections={[]}
-        marketplaceCollectionPluginsMap={{}}
-      />,
-    )
+    render(<ListWrapper />)
 
     // Should show existing results while loading more
     expect(screen.getByText('80 plugins found')).toBeInTheDocument()
@@ -1542,9 +1339,9 @@ describe('Combined Workflows', () => {
 describe('Accessibility', () => {
   beforeEach(() => {
     vi.clearAllMocks()
-    mockContextValues.plugins = undefined
-    mockContextValues.isLoading = false
-    mockContextValues.page = 1
+    mockMarketplaceData.plugins = undefined
+    mockMarketplaceData.isLoading = false
+    mockMarketplaceData.page = 1
   })
 
   it('should have semantic structure with collections', () => {
@@ -1573,13 +1370,11 @@ describe('Accessibility', () => {
     const pluginsMap: Record<string, Plugin[]> = {
       'collection-0': createMockPluginList(1),
     }
-    const onMoreClick = vi.fn()
 
     render(
       <ListWithCollection
         marketplaceCollections={collections}
         marketplaceCollectionPluginsMap={pluginsMap}
-        onMoreClick={onMoreClick}
       />,
     )
 
diff --git a/web/app/components/plugins/marketplace/list/index.tsx b/web/app/components/plugins/marketplace/list/index.tsx
index 80b33d0ffd..4ce7272e80 100644
--- a/web/app/components/plugins/marketplace/list/index.tsx
+++ b/web/app/components/plugins/marketplace/list/index.tsx
@@ -13,7 +13,6 @@ type ListProps = {
   showInstallButton?: boolean
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => React.JSX.Element | null
-  onMoreClick?: () => void
   emptyClassName?: string
 }
 const List = ({
@@ -23,7 +22,6 @@ const List = ({
   showInstallButton,
   cardContainerClassName,
   cardRender,
-  onMoreClick,
   emptyClassName,
 }: ListProps) => {
   return (
@@ -36,7 +34,6 @@ const List = ({
             showInstallButton={showInstallButton}
             cardContainerClassName={cardContainerClassName}
             cardRender={cardRender}
-            onMoreClick={onMoreClick}
           />
         )
       }
diff --git a/web/app/components/plugins/marketplace/list/list-with-collection.tsx b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
index c17715e71e..264227b666 100644
--- a/web/app/components/plugins/marketplace/list/list-with-collection.tsx
+++ b/web/app/components/plugins/marketplace/list/list-with-collection.tsx
@@ -1,12 +1,12 @@
 'use client'
 
 import type { MarketplaceCollection } from '../types'
-import type { SearchParamsFromCollection } from '@/app/components/plugins/marketplace/types'
 import type { Plugin } from '@/app/components/plugins/types'
 import { useLocale, useTranslation } from '#i18n'
 import { RiArrowRightSLine } from '@remixicon/react'
 import { getLanguage } from '@/i18n-config/language'
 import { cn } from '@/utils/classnames'
+import { useMarketplaceMoreClick } from '../atoms'
 import CardWrapper from './card-wrapper'
 
 type ListWithCollectionProps = {
@@ -15,7 +15,6 @@ type ListWithCollectionProps = {
   showInstallButton?: boolean
   cardContainerClassName?: string
   cardRender?: (plugin: Plugin) => React.JSX.Element | null
-  onMoreClick?: (searchParams?: SearchParamsFromCollection) => void
 }
 const ListWithCollection = ({
   marketplaceCollections,
@@ -23,10 +22,10 @@ const ListWithCollection = ({
   showInstallButton,
   cardContainerClassName,
   cardRender,
-  onMoreClick,
 }: ListWithCollectionProps) => {
   const { t } = useTranslation()
   const locale = useLocale()
+  const onMoreClick = useMarketplaceMoreClick()
 
   return (
     <>
@@ -44,10 +43,10 @@ const ListWithCollection = ({
                 <div className="system-xs-regular text-text-tertiary">{collection.description[getLanguage(locale)]}</div>
               </div>
               {
-                collection.searchable && onMoreClick && (
+                collection.searchable && (
                   <div
                     className="system-xs-medium flex cursor-pointer items-center text-text-accent "
-                    onClick={() => onMoreClick?.(collection.search_params)}
+                    onClick={() => onMoreClick(collection.search_params)}
                   >
                     {t('marketplace.viewMore', { ns: 'plugin' })}
                     <RiArrowRightSLine className="h-4 w-4" />
diff --git a/web/app/components/plugins/marketplace/list/list-wrapper.tsx b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
index 84fcf92daf..a1b0c2529a 100644
--- a/web/app/components/plugins/marketplace/list/list-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/list/list-wrapper.tsx
@@ -1,46 +1,26 @@
 'use client'
-import type { Plugin } from '../../types'
-import type { MarketplaceCollection } from '../types'
 import { useTranslation } from '#i18n'
-import { useEffect } from 'react'
 import Loading from '@/app/components/base/loading'
-import { useMarketplaceContext } from '../context'
 import SortDropdown from '../sort-dropdown'
+import { useMarketplaceData } from '../state'
 import List from './index'
 
 type ListWrapperProps = {
-  marketplaceCollections: MarketplaceCollection[]
-  marketplaceCollectionPluginsMap: Record<string, Plugin[]>
   showInstallButton?: boolean
 }
 const ListWrapper = ({
-  marketplaceCollections,
-  marketplaceCollectionPluginsMap,
   showInstallButton,
 }: ListWrapperProps) => {
   const { t } = useTranslation()
-  const plugins = useMarketplaceContext(v => v.plugins)
-  const pluginsTotal = useMarketplaceContext(v => v.pluginsTotal)
-  const marketplaceCollectionsFromClient = useMarketplaceContext(v => v.marketplaceCollectionsFromClient)
-  const marketplaceCollectionPluginsMapFromClient = useMarketplaceContext(v => v.marketplaceCollectionPluginsMapFromClient)
-  const isLoading = useMarketplaceContext(v => v.isLoading)
-  const isSuccessCollections = useMarketplaceContext(v => v.isSuccessCollections)
-  const handleQueryPlugins = useMarketplaceContext(v => v.handleQueryPlugins)
-  const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
-  const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
-  const page = useMarketplaceContext(v => v.page)
-  const handleMoreClick = useMarketplaceContext(v => v.handleMoreClick)
 
-  useEffect(() => {
-    if (
-      !marketplaceCollectionsFromClient?.length
-      && isSuccessCollections
-      && !searchPluginText
-      && !filterPluginTags.length
-    ) {
-      handleQueryPlugins()
-    }
-  }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections, searchPluginText, filterPluginTags])
+  const {
+    plugins,
+    pluginsTotal,
+    marketplaceCollections,
+    marketplaceCollectionPluginsMap,
+    isLoading,
+    page,
+  } = useMarketplaceData()
 
   return (
     <div
@@ -66,11 +46,10 @@ const ListWrapper = ({
       {
         (!isLoading || page > 1) && (
           <List
-            marketplaceCollections={marketplaceCollectionsFromClient || marketplaceCollections}
-            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMapFromClient || marketplaceCollectionPluginsMap}
+            marketplaceCollections={marketplaceCollections || []}
+            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
             plugins={plugins}
             showInstallButton={showInstallButton}
-            onMoreClick={handleMoreClick}
           />
         )
       }
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index b9572413ed..6e56a288d8 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -1,4 +1,5 @@
 'use client'
+import type { ActivePluginType } from './constants'
 import { useTranslation } from '#i18n'
 import {
   RiArchive2Line,
@@ -8,35 +9,27 @@ import {
   RiPuzzle2Line,
   RiSpeakAiLine,
 } from '@remixicon/react'
-import { useCallback, useEffect } from 'react'
+import { useSetAtom } from 'jotai'
 import { Trigger as TriggerIcon } from '@/app/components/base/icons/src/vender/plugin'
 import { cn } from '@/utils/classnames'
-import { PluginCategoryEnum } from '../types'
-import { useMarketplaceContext } from './context'
+import { searchModeAtom, useActivePluginType } from './atoms'
+import { PLUGIN_CATEGORY_WITH_COLLECTIONS, PLUGIN_TYPE_SEARCH_MAP } from './constants'
 
-export const PLUGIN_TYPE_SEARCH_MAP = {
-  all: 'all',
-  model: PluginCategoryEnum.model,
-  tool: PluginCategoryEnum.tool,
-  agent: PluginCategoryEnum.agent,
-  extension: PluginCategoryEnum.extension,
-  datasource: PluginCategoryEnum.datasource,
-  trigger: PluginCategoryEnum.trigger,
-  bundle: 'bundle',
-}
 type PluginTypeSwitchProps = {
   className?: string
-  showSearchParams?: boolean
 }
 const PluginTypeSwitch = ({
   className,
-  showSearchParams,
 }: PluginTypeSwitchProps) => {
   const { t } = useTranslation()
-  const activePluginType = useMarketplaceContext(s => s.activePluginType)
-  const handleActivePluginTypeChange = useMarketplaceContext(s => s.handleActivePluginTypeChange)
+  const [activePluginType, handleActivePluginTypeChange] = useActivePluginType()
+  const setSearchMode = useSetAtom(searchModeAtom)
 
-  const options = [
+  const options: Array<{
+    value: ActivePluginType
+    text: string
+    icon: React.ReactNode | null
+  }> = [
     {
       value: PLUGIN_TYPE_SEARCH_MAP.all,
       text: t('category.all', { ns: 'plugin' }),
@@ -79,23 +72,6 @@ const PluginTypeSwitch = ({
     },
   ]
 
-  const handlePopState = useCallback(() => {
-    if (!showSearchParams)
-      return
-    // nuqs handles popstate automatically
-    const url = new URL(window.location.href)
-    const category = url.searchParams.get('category') || PLUGIN_TYPE_SEARCH_MAP.all
-    handleActivePluginTypeChange(category)
-  }, [showSearchParams, handleActivePluginTypeChange])
-
-  useEffect(() => {
-    // nuqs manages popstate internally, but we keep this for URL sync
-    window.addEventListener('popstate', handlePopState)
-    return () => {
-      window.removeEventListener('popstate', handlePopState)
-    }
-  }, [handlePopState])
-
   return (
     <div className={cn(
       'flex shrink-0 items-center justify-center space-x-2 bg-background-body py-3',
@@ -112,6 +88,9 @@ const PluginTypeSwitch = ({
             )}
             onClick={() => {
               handleActivePluginTypeChange(option.value)
+              if (PLUGIN_CATEGORY_WITH_COLLECTIONS.has(option.value)) {
+                setSearchMode(null)
+              }
             }}
           >
             {option.icon}
diff --git a/web/app/components/plugins/marketplace/query.ts b/web/app/components/plugins/marketplace/query.ts
new file mode 100644
index 0000000000..c5a1421146
--- /dev/null
+++ b/web/app/components/plugins/marketplace/query.ts
@@ -0,0 +1,38 @@
+import type { CollectionsAndPluginsSearchParams, PluginsSearchParams } from './types'
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import { getMarketplaceCollectionsAndPlugins, getMarketplacePlugins } from './utils'
+
+// TODO: Avoid manual maintenance of query keys and better service management,
+// https://github.com/langgenius/dify/issues/30342
+
+export const marketplaceKeys = {
+  all: ['marketplace'] as const,
+  collections: (params?: CollectionsAndPluginsSearchParams) => [...marketplaceKeys.all, 'collections', params] as const,
+  collectionPlugins: (collectionId: string, params?: CollectionsAndPluginsSearchParams) => [...marketplaceKeys.all, 'collectionPlugins', collectionId, params] as const,
+  plugins: (params?: PluginsSearchParams) => [...marketplaceKeys.all, 'plugins', params] as const,
+}
+
+export function useMarketplaceCollectionsAndPlugins(
+  collectionsParams: CollectionsAndPluginsSearchParams,
+) {
+  return useQuery({
+    queryKey: marketplaceKeys.collections(collectionsParams),
+    queryFn: ({ signal }) => getMarketplaceCollectionsAndPlugins(collectionsParams, { signal }),
+  })
+}
+
+export function useMarketplacePlugins(
+  queryParams: PluginsSearchParams | undefined,
+) {
+  return useInfiniteQuery({
+    queryKey: marketplaceKeys.plugins(queryParams),
+    queryFn: ({ pageParam = 1, signal }) => getMarketplacePlugins(queryParams, pageParam, signal),
+    getNextPageParam: (lastPage) => {
+      const nextPage = lastPage.page + 1
+      const loaded = lastPage.page * lastPage.pageSize
+      return loaded < (lastPage.total || 0) ? nextPage : undefined
+    },
+    initialPageParam: 1,
+    enabled: queryParams !== undefined,
+  })
+}
diff --git a/web/app/components/plugins/marketplace/search-box/index.spec.tsx b/web/app/components/plugins/marketplace/search-box/index.spec.tsx
index 3e9cc40be0..85be82cb33 100644
--- a/web/app/components/plugins/marketplace/search-box/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/search-box/index.spec.tsx
@@ -26,16 +26,19 @@ vi.mock('#i18n', () => ({
   }),
 }))
 
-// Mock useMarketplaceContext
-const mockContextValues = {
-  searchPluginText: '',
-  handleSearchPluginTextChange: vi.fn(),
-  filterPluginTags: [] as string[],
-  handleFilterPluginTagsChange: vi.fn(),
-}
+// Mock marketplace state hooks
+const { mockSearchPluginText, mockHandleSearchPluginTextChange, mockFilterPluginTags, mockHandleFilterPluginTagsChange } = vi.hoisted(() => {
+  return {
+    mockSearchPluginText: '',
+    mockHandleSearchPluginTextChange: vi.fn(),
+    mockFilterPluginTags: [] as string[],
+    mockHandleFilterPluginTagsChange: vi.fn(),
+  }
+})
 
-vi.mock('../context', () => ({
-  useMarketplaceContext: (selector: (v: typeof mockContextValues) => unknown) => selector(mockContextValues),
+vi.mock('../atoms', () => ({
+  useSearchPluginText: () => [mockSearchPluginText, mockHandleSearchPluginTextChange],
+  useFilterPluginTags: () => [mockFilterPluginTags, mockHandleFilterPluginTagsChange],
 }))
 
 // Mock useTags hook
@@ -430,9 +433,6 @@ describe('SearchBoxWrapper', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     mockPortalOpenState = false
-    // Reset context values
-    mockContextValues.searchPluginText = ''
-    mockContextValues.filterPluginTags = []
   })
 
   describe('Rendering', () => {
@@ -456,28 +456,14 @@ describe('SearchBoxWrapper', () => {
     })
   })
 
-  describe('Context Integration', () => {
-    it('should use searchPluginText from context', () => {
-      mockContextValues.searchPluginText = 'context search'
-      render(<SearchBoxWrapper />)
-
-      expect(screen.getByDisplayValue('context search')).toBeInTheDocument()
-    })
-
+  describe('Hook Integration', () => {
     it('should call handleSearchPluginTextChange when search changes', () => {
       render(<SearchBoxWrapper />)
 
       const input = screen.getByRole('textbox')
       fireEvent.change(input, { target: { value: 'new search' } })
 
-      expect(mockContextValues.handleSearchPluginTextChange).toHaveBeenCalledWith('new search')
-    })
-
-    it('should use filterPluginTags from context', () => {
-      mockContextValues.filterPluginTags = ['agent', 'rag']
-      render(<SearchBoxWrapper />)
-
-      expect(screen.getByTestId('portal-elem')).toBeInTheDocument()
+      expect(mockHandleSearchPluginTextChange).toHaveBeenCalledWith('new search')
     })
   })
 
diff --git a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
index d7fc004236..9957e9bc42 100644
--- a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
@@ -1,15 +1,13 @@
 'use client'
 
 import { useTranslation } from '#i18n'
-import { useMarketplaceContext } from '../context'
+import { useFilterPluginTags, useSearchPluginText } from '../atoms'
 import SearchBox from './index'
 
 const SearchBoxWrapper = () => {
   const { t } = useTranslation()
-  const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
-  const handleSearchPluginTextChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
-  const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
-  const handleFilterPluginTagsChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange)
+  const [searchPluginText, handleSearchPluginTextChange] = useSearchPluginText()
+  const [filterPluginTags, handleFilterPluginTagsChange] = useFilterPluginTags()
 
   return (
     <SearchBox
diff --git a/web/app/components/plugins/marketplace/search-params.ts b/web/app/components/plugins/marketplace/search-params.ts
new file mode 100644
index 0000000000..ad0b16977f
--- /dev/null
+++ b/web/app/components/plugins/marketplace/search-params.ts
@@ -0,0 +1,9 @@
+import type { ActivePluginType } from './constants'
+import { parseAsArrayOf, parseAsString, parseAsStringEnum } from 'nuqs/server'
+import { PLUGIN_TYPE_SEARCH_MAP } from './constants'
+
+export const marketplaceSearchParamsParsers = {
+  category: parseAsStringEnum<ActivePluginType>(Object.values(PLUGIN_TYPE_SEARCH_MAP) as ActivePluginType[]).withDefault('all').withOptions({ history: 'replace', clearOnDefault: false }),
+  q: parseAsString.withDefault('').withOptions({ history: 'replace' }),
+  tags: parseAsArrayOf(parseAsString).withDefault([]).withOptions({ history: 'replace' }),
+}
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.spec.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.spec.tsx
index 3ed7d78b07..f91c7ba4d3 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.spec.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.spec.tsx
@@ -1,4 +1,3 @@
-import type { MarketplaceContextValue } from '../context'
 import { fireEvent, render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -28,18 +27,12 @@ vi.mock('#i18n', () => ({
   }),
 }))
 
-// Mock marketplace context with controllable values
-let mockSort = { sortBy: 'install_count', sortOrder: 'DESC' }
+// Mock marketplace atoms with controllable values
+let mockSort: { sortBy: string, sortOrder: string } = { sortBy: 'install_count', sortOrder: 'DESC' }
 const mockHandleSortChange = vi.fn()
 
-vi.mock('../context', () => ({
-  useMarketplaceContext: (selector: (value: MarketplaceContextValue) => unknown) => {
-    const contextValue = {
-      sort: mockSort,
-      handleSortChange: mockHandleSortChange,
-    } as unknown as MarketplaceContextValue
-    return selector(contextValue)
-  },
+vi.mock('../atoms', () => ({
+  useMarketplaceSort: () => [mockSort, mockHandleSortChange],
 }))
 
 // Mock portal component with controllable open state
diff --git a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
index 984b114d03..1f7bab1005 100644
--- a/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
+++ b/web/app/components/plugins/marketplace/sort-dropdown/index.tsx
@@ -10,7 +10,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { useMarketplaceContext } from '../context'
+import { useMarketplaceSort } from '../atoms'
 
 const SortDropdown = () => {
   const { t } = useTranslation()
@@ -36,8 +36,7 @@ const SortDropdown = () => {
       text: t('marketplace.sortOption.firstReleased', { ns: 'plugin' }),
     },
   ]
-  const sort = useMarketplaceContext(v => v.sort)
-  const handleSortChange = useMarketplaceContext(v => v.handleSortChange)
+  const [sort, handleSortChange] = useMarketplaceSort()
   const [open, setOpen] = useState(false)
   const selectedOption = options.find(option => option.value === sort.sortBy && option.order === sort.sortOrder) ?? options[0]
 
diff --git a/web/app/components/plugins/marketplace/state.ts b/web/app/components/plugins/marketplace/state.ts
new file mode 100644
index 0000000000..1c1abfc0a1
--- /dev/null
+++ b/web/app/components/plugins/marketplace/state.ts
@@ -0,0 +1,54 @@
+import type { PluginsSearchParams } from './types'
+import { useDebounce } from 'ahooks'
+import { useCallback, useMemo } from 'react'
+import { useActivePluginType, useFilterPluginTags, useMarketplaceSearchMode, useMarketplaceSortValue, useSearchPluginText } from './atoms'
+import { PLUGIN_TYPE_SEARCH_MAP } from './constants'
+import { useMarketplaceContainerScroll } from './hooks'
+import { useMarketplaceCollectionsAndPlugins, useMarketplacePlugins } from './query'
+import { getCollectionsParams, getMarketplaceListFilterType } from './utils'
+
+export function useMarketplaceData() {
+  const [searchPluginTextOriginal] = useSearchPluginText()
+  const searchPluginText = useDebounce(searchPluginTextOriginal, { wait: 500 })
+  const [filterPluginTags] = useFilterPluginTags()
+  const [activePluginType] = useActivePluginType()
+
+  const collectionsQuery = useMarketplaceCollectionsAndPlugins(
+    getCollectionsParams(activePluginType),
+  )
+
+  const sort = useMarketplaceSortValue()
+  const isSearchMode = useMarketplaceSearchMode()
+  const queryParams = useMemo((): PluginsSearchParams | undefined => {
+    if (!isSearchMode)
+      return undefined
+    return {
+      query: searchPluginText,
+      category: activePluginType === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginType,
+      tags: filterPluginTags,
+      sortBy: sort.sortBy,
+      sortOrder: sort.sortOrder,
+      type: getMarketplaceListFilterType(activePluginType),
+    }
+  }, [isSearchMode, searchPluginText, activePluginType, filterPluginTags, sort])
+
+  const pluginsQuery = useMarketplacePlugins(queryParams)
+  const { hasNextPage, fetchNextPage, isFetching } = pluginsQuery
+
+  const handlePageChange = useCallback(() => {
+    if (hasNextPage && !isFetching)
+      fetchNextPage()
+  }, [fetchNextPage, hasNextPage, isFetching])
+
+  // Scroll pagination
+  useMarketplaceContainerScroll(handlePageChange)
+
+  return {
+    marketplaceCollections: collectionsQuery.data?.marketplaceCollections,
+    marketplaceCollectionPluginsMap: collectionsQuery.data?.marketplaceCollectionPluginsMap,
+    plugins: pluginsQuery.data?.pages.flatMap(page => page.plugins),
+    pluginsTotal: pluginsQuery.data?.pages[0]?.total,
+    page: pluginsQuery.data?.pages.length || 1,
+    isLoading: collectionsQuery.isLoading || pluginsQuery.isLoading,
+  }
+}
diff --git a/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
index 3d3530c83e..4da3844c0a 100644
--- a/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
+++ b/web/app/components/plugins/marketplace/sticky-search-and-switch-wrapper.tsx
@@ -6,12 +6,10 @@ import SearchBoxWrapper from './search-box/search-box-wrapper'
 
 type StickySearchAndSwitchWrapperProps = {
   pluginTypeSwitchClassName?: string
-  showSearchParams?: boolean
 }
 
 const StickySearchAndSwitchWrapper = ({
   pluginTypeSwitchClassName,
-  showSearchParams,
 }: StickySearchAndSwitchWrapperProps) => {
   const hasCustomTopClass = pluginTypeSwitchClassName?.includes('top-')
 
@@ -24,9 +22,7 @@ const StickySearchAndSwitchWrapper = ({
       )}
     >
       <SearchBoxWrapper />
-      <PluginTypeSwitch
-        showSearchParams={showSearchParams}
-      />
+      <PluginTypeSwitch />
     </div>
   )
 }
diff --git a/web/app/components/plugins/marketplace/utils.ts b/web/app/components/plugins/marketplace/utils.ts
index e51c9b76a6..eaf299314c 100644
--- a/web/app/components/plugins/marketplace/utils.ts
+++ b/web/app/components/plugins/marketplace/utils.ts
@@ -1,16 +1,19 @@
+import type { ActivePluginType } from './constants'
 import type {
   CollectionsAndPluginsSearchParams,
   MarketplaceCollection,
+  PluginsSearchParams,
 } from '@/app/components/plugins/marketplace/types'
-import type { Plugin } from '@/app/components/plugins/types'
+import type { Plugin, PluginsFromMarketplaceResponse } from '@/app/components/plugins/types'
 import { PluginCategoryEnum } from '@/app/components/plugins/types'
 import {
   APP_VERSION,
   IS_MARKETPLACE,
   MARKETPLACE_API_PREFIX,
 } from '@/config'
+import { postMarketplace } from '@/service/base'
 import { getMarketplaceUrl } from '@/utils/var'
-import { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
+import { PLUGIN_TYPE_SEARCH_MAP } from './constants'
 
 type MarketplaceFetchOptions = {
   signal?: AbortSignal
@@ -26,12 +29,13 @@ export const getPluginIconInMarketplace = (plugin: Plugin) => {
   return `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/icon`
 }
 
-export const getFormattedPlugin = (bundle: any) => {
+export const getFormattedPlugin = (bundle: Plugin): Plugin => {
   if (bundle.type === 'bundle') {
     return {
       ...bundle,
       icon: getPluginIconInMarketplace(bundle),
       brief: bundle.description,
+      // @ts-expect-error I do not have enough information
       label: bundle.labels,
     }
   }
@@ -129,6 +133,64 @@ export const getMarketplaceCollectionsAndPlugins = async (
   }
 }
 
+export const getMarketplacePlugins = async (
+  queryParams: PluginsSearchParams | undefined,
+  pageParam: number,
+  signal?: AbortSignal,
+) => {
+  if (!queryParams) {
+    return {
+      plugins: [] as Plugin[],
+      total: 0,
+      page: 1,
+      pageSize: 40,
+    }
+  }
+
+  const {
+    query,
+    sortBy,
+    sortOrder,
+    category,
+    tags,
+    type,
+    pageSize = 40,
+  } = queryParams
+  const pluginOrBundle = type === 'bundle' ? 'bundles' : 'plugins'
+
+  try {
+    const res = await postMarketplace<{ data: PluginsFromMarketplaceResponse }>(`/${pluginOrBundle}/search/advanced`, {
+      body: {
+        page: pageParam,
+        page_size: pageSize,
+        query,
+        sort_by: sortBy,
+        sort_order: sortOrder,
+        category: category !== 'all' ? category : '',
+        tags,
+        type,
+      },
+      signal,
+    })
+    const resPlugins = res.data.bundles || res.data.plugins || []
+
+    return {
+      plugins: resPlugins.map(plugin => getFormattedPlugin(plugin)),
+      total: res.data.total,
+      page: pageParam,
+      pageSize,
+    }
+  }
+  catch {
+    return {
+      plugins: [],
+      total: 0,
+      page: pageParam,
+      pageSize,
+    }
+  }
+}
+
 export const getMarketplaceListCondition = (pluginType: string) => {
   if ([PluginCategoryEnum.tool, PluginCategoryEnum.agent, PluginCategoryEnum.model, PluginCategoryEnum.datasource, PluginCategoryEnum.trigger].includes(pluginType as PluginCategoryEnum))
     return `category=${pluginType}`
@@ -142,7 +204,7 @@ export const getMarketplaceListCondition = (pluginType: string) => {
   return ''
 }
 
-export const getMarketplaceListFilterType = (category: string) => {
+export const getMarketplaceListFilterType = (category: ActivePluginType) => {
   if (category === PLUGIN_TYPE_SEARCH_MAP.all)
     return undefined
 
@@ -151,3 +213,14 @@ export const getMarketplaceListFilterType = (category: string) => {
 
   return 'plugin'
 }
+
+export function getCollectionsParams(category: ActivePluginType): CollectionsAndPluginsSearchParams {
+  if (category === PLUGIN_TYPE_SEARCH_MAP.all) {
+    return {}
+  }
+  return {
+    category,
+    condition: getMarketplaceListCondition(category),
+    type: getMarketplaceListFilterType(category),
+  }
+}
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index b8fc891254..1f88f691ef 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -27,7 +27,7 @@ import { cn } from '@/utils/classnames'
 import { PLUGIN_PAGE_TABS_MAP } from '../hooks'
 import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
 import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
-import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/plugin-type-switch'
+import { PLUGIN_TYPE_SEARCH_MAP } from '../marketplace/constants'
 import {
   PluginPageContextProvider,
   usePluginPageContext,
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.spec.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.spec.tsx
index d65b0b7957..1008ef461d 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.spec.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/index.spec.tsx
@@ -262,7 +262,7 @@ vi.mock('@/app/components/base/icons/src/vender/other', () => ({
 }))
 
 // Mock PLUGIN_TYPE_SEARCH_MAP
-vi.mock('../../marketplace/plugin-type-switch', () => ({
+vi.mock('../../marketplace/constants', () => ({
   PLUGIN_TYPE_SEARCH_MAP: {
     all: 'all',
     model: 'model',
diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
index a91df6c793..4e681a6b67 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
@@ -1,5 +1,6 @@
 'use client'
 import type { FC } from 'react'
+import type { ActivePluginType } from '../../marketplace/constants'
 import * as React from 'react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -12,7 +13,7 @@ import {
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
 import { useInstalledPluginList } from '@/service/use-plugins'
 import { cn } from '@/utils/classnames'
-import { PLUGIN_TYPE_SEARCH_MAP } from '../../marketplace/plugin-type-switch'
+import { PLUGIN_TYPE_SEARCH_MAP } from '../../marketplace/constants'
 import { PluginSource } from '../../types'
 import NoDataPlaceholder from './no-data-placeholder'
 import ToolItem from './tool-item'
@@ -73,7 +74,7 @@ const ToolPicker: FC<Props> = ({
     },
   ]
 
-  const [pluginType, setPluginType] = useState(PLUGIN_TYPE_SEARCH_MAP.all)
+  const [pluginType, setPluginType] = useState<ActivePluginType>(PLUGIN_TYPE_SEARCH_MAP.all)
   const [query, setQuery] = useState('')
   const [tags, setTags] = useState<string[]>([])
   const { data, isLoading } = useInstalledPluginList()
diff --git a/web/context/query-client-server.ts b/web/context/query-client-server.ts
new file mode 100644
index 0000000000..3650e30f52
--- /dev/null
+++ b/web/context/query-client-server.ts
@@ -0,0 +1,16 @@
+import { QueryClient } from '@tanstack/react-query'
+import { cache } from 'react'
+
+const STALE_TIME = 1000 * 60 * 30 // 30 minutes
+
+export function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: STALE_TIME,
+      },
+    },
+  })
+}
+
+export const getQueryClientServer = cache(makeQueryClient)
diff --git a/web/context/query-client.tsx b/web/context/query-client.tsx
index 9562686f6f..a72393490c 100644
--- a/web/context/query-client.tsx
+++ b/web/context/query-client.tsx
@@ -1,23 +1,27 @@
 'use client'
 
+import type { QueryClient } from '@tanstack/react-query'
 import type { FC, PropsWithChildren } from 'react'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { useState } from 'react'
 import { TanStackDevtoolsLoader } from '@/app/components/devtools/tanstack/loader'
+import { makeQueryClient } from './query-client-server'
 
-const STALE_TIME = 1000 * 60 * 30 // 30 minutes
+let browserQueryClient: QueryClient | undefined
 
-const client = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: STALE_TIME,
-    },
-  },
-})
+function getQueryClient() {
+  if (typeof window === 'undefined') {
+    return makeQueryClient()
+  }
+  if (!browserQueryClient)
+    browserQueryClient = makeQueryClient()
+  return browserQueryClient
+}
 
-export const TanstackQueryInitializer: FC<PropsWithChildren> = (props) => {
-  const { children } = props
+export const TanstackQueryInitializer: FC<PropsWithChildren> = ({ children }) => {
+  const [queryClient] = useState(getQueryClient)
   return (
-    <QueryClientProvider client={client}>
+    <QueryClientProvider client={queryClient}>
       {children}
       <TanStackDevtoolsLoader />
     </QueryClientProvider>
diff --git a/web/hooks/use-query-params.spec.tsx b/web/hooks/use-query-params.spec.tsx
index 2aa6b7998f..b187471809 100644
--- a/web/hooks/use-query-params.spec.tsx
+++ b/web/hooks/use-query-params.spec.tsx
@@ -8,7 +8,6 @@ import {
   PRICING_MODAL_QUERY_PARAM,
   PRICING_MODAL_QUERY_VALUE,
   useAccountSettingModal,
-  useMarketplaceFilters,
   usePluginInstallation,
   usePricingModal,
 } from './use-query-params'
@@ -302,174 +301,6 @@ describe('useQueryParams hooks', () => {
     })
   })
 
-  // Marketplace filters query behavior.
-  describe('useMarketplaceFilters', () => {
-    it('should return default filters when query params are missing', () => {
-      // Arrange
-      const { result } = renderWithAdapter(() => useMarketplaceFilters())
-
-      // Act
-      const [filters] = result.current
-
-      // Assert
-      expect(filters.q).toBe('')
-      expect(filters.category).toBe('all')
-      expect(filters.tags).toEqual([])
-    })
-
-    it('should parse filters when query params are present', () => {
-      // Arrange
-      const { result } = renderWithAdapter(
-        () => useMarketplaceFilters(),
-        '?q=prompt&category=tool&tags=ai,ml',
-      )
-
-      // Act
-      const [filters] = result.current
-
-      // Assert
-      expect(filters.q).toBe('prompt')
-      expect(filters.category).toBe('tool')
-      expect(filters.tags).toEqual(['ai', 'ml'])
-    })
-
-    it('should treat empty tags param as empty array', () => {
-      // Arrange
-      const { result } = renderWithAdapter(
-        () => useMarketplaceFilters(),
-        '?tags=',
-      )
-
-      // Act
-      const [filters] = result.current
-
-      // Assert
-      expect(filters.tags).toEqual([])
-    })
-
-    it('should preserve other filters when updating a single field', async () => {
-      // Arrange
-      const { result } = renderWithAdapter(
-        () => useMarketplaceFilters(),
-        '?category=tool&tags=ai,ml',
-      )
-
-      // Act
-      act(() => {
-        result.current[1]({ q: 'search' })
-      })
-
-      // Assert
-      await waitFor(() => expect(result.current[0].q).toBe('search'))
-      expect(result.current[0].category).toBe('tool')
-      expect(result.current[0].tags).toEqual(['ai', 'ml'])
-    })
-
-    it('should clear q param when q is empty', async () => {
-      // Arrange
-      const { result, onUrlUpdate } = renderWithAdapter(
-        () => useMarketplaceFilters(),
-        '?q=search',
-      )
-
-      // Act
-      act(() => {
-        result.current[1]({ q: '' })
-      })
-
-      // Assert
-      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
-      expect(update.searchParams.has('q')).toBe(false)
-    })
-
-    it('should serialize tags as comma-separated values', async () => {
-      // Arrange
-      const { result, onUrlUpdate } = renderWithAdapter(() => useMarketplaceFilters())
-
-      // Act
-      act(() => {
-        result.current[1]({ tags: ['ai', 'ml'] })
-      })
-
-      // Assert
-      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
-      expect(update.searchParams.get('tags')).toBe('ai,ml')
-    })
-
-    it('should remove tags param when list is empty', async () => {
-      // Arrange
-      const { result, onUrlUpdate } = renderWithAdapter(
-        () => useMarketplaceFilters(),
-        '?tags=ai,ml',
-      )
-
-      // Act
-      act(() => {
-        result.current[1]({ tags: [] })
-      })
-
-      // Assert
-      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
-      expect(update.searchParams.has('tags')).toBe(false)
-    })
-
-    it('should keep category in the URL when set to default', async () => {
-      // Arrange
-      const { result, onUrlUpdate } = renderWithAdapter(
-        () => useMarketplaceFilters(),
-        '?category=tool',
-      )
-
-      // Act
-      act(() => {
-        result.current[1]({ category: 'all' })
-      })
-
-      // Assert
-      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
-      expect(update.searchParams.get('category')).toBe('all')
-    })
-
-    it('should clear all marketplace filters when set to null', async () => {
-      // Arrange
-      const { result, onUrlUpdate } = renderWithAdapter(
-        () => useMarketplaceFilters(),
-        '?q=search&category=tool&tags=ai,ml',
-      )
-
-      // Act
-      act(() => {
-        result.current[1](null)
-      })
-
-      // Assert
-      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
-      expect(update.searchParams.has('q')).toBe(false)
-      expect(update.searchParams.has('category')).toBe(false)
-      expect(update.searchParams.has('tags')).toBe(false)
-    })
-
-    it('should use replace history when updating filters', async () => {
-      // Arrange
-      const { result, onUrlUpdate } = renderWithAdapter(() => useMarketplaceFilters())
-
-      // Act
-      act(() => {
-        result.current[1]({ q: 'search' })
-      })
-
-      // Assert
-      await waitFor(() => expect(onUrlUpdate).toHaveBeenCalled())
-      const update = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1][0]
-      expect(update.options.history).toBe('replace')
-    })
-  })
-
   // Plugin installation query behavior.
   describe('usePluginInstallation', () => {
     it('should parse package ids from JSON arrays', () => {
diff --git a/web/hooks/use-query-params.ts b/web/hooks/use-query-params.ts
index e0d7cc3c02..73798a4a4f 100644
--- a/web/hooks/use-query-params.ts
+++ b/web/hooks/use-query-params.ts
@@ -15,7 +15,6 @@
 
 import {
   createParser,
-  parseAsArrayOf,
   parseAsString,
   useQueryState,
   useQueryStates,
@@ -93,39 +92,6 @@ export function useAccountSettingModal<T extends string = string>() {
   return [{ isOpen, payload: currentTab }, setState] as const
 }
 
-/**
- * Marketplace Search Query Parameters
- */
-export type MarketplaceFilters = {
-  q: string // search query
-  category: string // plugin category
-  tags: string[] // array of tags
-}
-
-/**
- * Hook to manage marketplace search/filter state via URL
- * Provides atomic updates - all params update together
- *
- * @example
- * const [filters, setFilters] = useMarketplaceFilters()
- * setFilters({ q: 'search', category: 'tool', tags: ['ai'] }) // Updates all at once
- * setFilters({ q: '' }) // Only updates q, keeps others
- * setFilters(null) // Clears all marketplace params
- */
-export function useMarketplaceFilters() {
-  return useQueryStates(
-    {
-      q: parseAsString.withDefault(''),
-      category: parseAsString.withDefault('all').withOptions({ clearOnDefault: false }),
-      tags: parseAsArrayOf(parseAsString).withDefault([]),
-    },
-    {
-      // Update URL without pushing to history (replaceState behavior)
-      history: 'replace',
-    },
-  )
-}
-
 /**
  * Plugin Installation Query Parameters
  */