diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index 15abf9c2ea..fe92c6b288 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/web/app/components/tools/mcp/index.tsx
@@ -1,6 +1,7 @@
 'use client'
-import React from 'react'
+import { useMemo } from 'react'
 import NewMCPCard from './create-card'
+import { useAllMCPTools, useInvalidateAllMCPTools } from '@/service/use-tools'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -10,9 +11,16 @@ type Props = {
 const MCPList = ({
   searchText,
 }: Props) => {
-  const handleCreate = () => {
-    console.log('handleCreate')
-  }
+  const { data: list = [] } = useAllMCPTools()
+  const invalidateMCPList = useInvalidateAllMCPTools()
+
+  const filteredList = useMemo(() => {
+    return list.filter((collection) => {
+      if (searchText)
+        return Object.values(collection.name).some(value => (value as string).toLowerCase().includes(searchText.toLowerCase()))
+      return true
+    })
+  }, [list, searchText])
 
   function renderDefaultCard() {
     const defaultCards = Array.from({ length: 36 }, (_, index) => (
@@ -37,11 +45,14 @@ const MCPList = ({
       <div
         className={cn(
           'relative grid shrink-0 grid-cols-1 content-start gap-4 px-12 pb-4 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
-          'h-[calc(100vh_-_136px)] overflow-hidden',
+          !list.length && 'h-[calc(100vh_-_136px)] overflow-hidden',
         )}
       >
-        <NewMCPCard handleCreate={handleCreate} />
-        {renderDefaultCard()}
+        <NewMCPCard handleCreate={invalidateMCPList} />
+        {filteredList.map((item, index) => (
+          <div key={index}></div>
+        ))}
+        {!list.length && renderDefaultCard()}
       </div>
     </>
   )
diff --git a/web/app/components/tools/mcp/mock.ts b/web/app/components/tools/mcp/mock.ts
new file mode 100644
index 0000000000..26633f824f
--- /dev/null
+++ b/web/app/components/tools/mcp/mock.ts
@@ -0,0 +1,35 @@
+export const listData = [
+  {
+    id: 'fdjklajfkljadslf',
+    author: 'KVOJJJin',
+    name: 'GOGOGO',
+    icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
+    server_url: 'https://mcp.composio.dev/notion/****/abc',
+    type: 'mcp',
+    is_team_authorization: false,
+    tools: ['aaa', 'bbb'],
+    update_elapsed_time: 1742892299,
+  },
+  {
+    id: 'fdjklajfkljadslf',
+    author: 'KVOJJJin',
+    name: 'GOGOGO2',
+    icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
+    server_url: 'https://mcp.composio.dev/notion/****/abc',
+    type: 'mcp',
+    is_team_authorization: false,
+    tools: ['aaa', 'bbb'],
+    update_elapsed_time: 1742892299,
+  },
+  {
+    id: 'fdjklajfkljadslf',
+    author: 'KVOJJJin',
+    name: 'GOGOGO3',
+    icon: 'https://cloud.dify.dev/console/api/workspaces/694cc430-fa36-4458-86a0-4a98c09c4684/model-providers/langgenius/openai/openai/icon_large/en_US',
+    server_url: 'https://mcp.composio.dev/notion/****/abc',
+    type: 'mcp',
+    is_team_authorization: false,
+    tools: ['aaa', 'bbb'],
+    update_elapsed_time: 1742892299,
+  },
+]
diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts
index 32c468cde8..a2e5fc135d 100644
--- a/web/app/components/tools/types.ts
+++ b/web/app/components/tools/types.ts
@@ -29,6 +29,7 @@ export enum CollectionType {
   custom = 'api',
   model = 'model',
   workflow = 'workflow',
+  mcp = 'mcp',
 }
 
 export type Emoji = {
@@ -168,3 +169,15 @@ export type WorkflowToolProviderResponse = {
   }
   privacy_policy: string
 }
+
+export type MCPProvider = {
+  id: string
+  author: string
+  name: string
+  icon: string | Emoji
+  server_url: string
+  type: CollectionType
+  is_team_authorization: boolean
+  tools: string[]
+  update_elapsed_time: number
+}
diff --git a/web/service/use-tools.ts b/web/service/use-tools.ts
index ceaa4b14b3..2a785a0150 100644
--- a/web/service/use-tools.ts
+++ b/web/service/use-tools.ts
@@ -4,6 +4,7 @@ import type {
   Tool,
 } from '@/app/components/tools/types'
 import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { MCPProvider } from '@/app/components/tools/types'
 import { useInvalid } from './use-base'
 import {
   useMutation,
@@ -11,6 +12,8 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 
+import { listData } from '@/app/components/tools/mcp/mock'
+
 const NAME_SPACE = 'tools'
 
 const useAllToolProvidersKey = [NAME_SPACE, 'allToolProviders']
@@ -61,6 +64,21 @@ export const useInvalidateAllWorkflowTools = () => {
   return useInvalid(useAllWorkflowToolsKey)
 }
 
+const useAllMCPToolsKey = [NAME_SPACE, 'MCPTools']
+export const useAllMCPTools = () => {
+  return useQuery<MCPProvider[]>({
+    queryKey: useAllMCPToolsKey,
+    // queryFn: () => get<MCPProvider[]>('/workspaces/current/tools/mcp'),
+    queryFn: () => {
+      return listData as unknown as MCPProvider[]
+    },
+  })
+}
+
+export const useInvalidateAllMCPTools = () => {
+  return useInvalid(useAllMCPToolsKey)
+}
+
 export const useBuiltinProviderInfo = (providerName: string) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'builtin-provider-info', providerName],