diff --git a/web/app/components/plugins/marketplace/list/index.tsx b/web/app/components/plugins/marketplace/list/index.tsx
index c3d7ff1d24..a805522b43 100644
--- a/web/app/components/plugins/marketplace/list/index.tsx
+++ b/web/app/components/plugins/marketplace/list/index.tsx
@@ -1,11 +1,9 @@
+'use client'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import { toolNotion } from '@/app/components/plugins/card/card-mock'
-import { getLocaleOnServer } from '@/i18n/server'
 
 const List = () => {
-  const locale = getLocaleOnServer()
-
   return (
     <div className='px-12 py-2 bg-background-default-subtle'>
       <div className='py-3'>
diff --git a/web/app/components/plugins/marketplace/types.ts b/web/app/components/plugins/marketplace/types.ts
new file mode 100644
index 0000000000..6af481cfb8
--- /dev/null
+++ b/web/app/components/plugins/marketplace/types.ts
@@ -0,0 +1,19 @@
+import type { Plugin } from '../types'
+
+export type MarketplaceCollection = {
+  name: string
+  description: string
+  rule: string
+  created_at: string
+  updated_at: string
+}
+
+export type MarketplaceCollectionsResponse = {
+  collections: MarketplaceCollection[]
+  total: number
+}
+
+export type MarketplaceCollectionPluginsResponse = {
+  plugins: Plugin[]
+  total: number
+}
diff --git a/web/service/plugins.ts b/web/service/plugins.ts
index f1d6f8e223..655825004d 100644
--- a/web/service/plugins.ts
+++ b/web/service/plugins.ts
@@ -9,6 +9,10 @@ import type {
   UpdateEndpointRequest,
 } from '@/app/components/plugins/types'
 import type { DebugInfo as DebugInfoTypes } from '@/app/components/plugins/types'
+import type {
+  MarketplaceCollectionPluginsResponse,
+  MarketplaceCollectionsResponse,
+} from '@/app/components/plugins/marketplace/types'
 
 export const createEndpoint: Fetcher<EndpointOperationResponse, { url: string; body: CreateEndpointRequest }> = ({ url, body }) => {
   // url = /workspaces/current/endpoints/create
@@ -64,3 +68,11 @@ export const installPackageFromLocal = async (uniqueIdentifier: string) => {
     body: { plugin_unique_identifiers: [uniqueIdentifier] },
   })
 }
+
+export const fetchMarketplaceCollections: Fetcher<MarketplaceCollectionsResponse, { url: string; }> = ({ url }) => {
+  return get<MarketplaceCollectionsResponse>(url)
+}
+
+export const fetchMarketplaceCollectionPlugins: Fetcher<MarketplaceCollectionPluginsResponse, { url: string }> = ({ url }) => {
+  return get<MarketplaceCollectionPluginsResponse>(url)
+}