diff --git a/web/app/components/tools/mcp/index.tsx b/web/app/components/tools/mcp/index.tsx
index 248d791202..557d187562 100644
--- a/web/app/components/tools/mcp/index.tsx
+++ b/web/app/components/tools/mcp/index.tsx
@@ -2,6 +2,7 @@
 import { useMemo, useState } from 'react'
 import NewMCPCard from './create-card'
 import MCPCard from './provider-card'
+import MCPDetailPanel from './provider-detail'
 import { useAllMCPTools, useInvalidateAllMCPTools } from '@/service/use-tools'
 import type { MCPProvider } from '@/app/components/tools/types'
 import cn from '@/utils/classnames'
@@ -10,6 +11,24 @@ type Props = {
   searchText: string
 }
 
+function renderDefaultCard() {
+  const defaultCards = Array.from({ length: 36 }, (_, index) => (
+    <div
+      key={index}
+      className={cn(
+        'inline-flex h-[111px] rounded-xl bg-background-default-lighter opacity-10',
+        index < 4 && 'opacity-60',
+        index >= 4 && index < 8 && 'opacity-50',
+        index >= 8 && index < 12 && 'opacity-40',
+        index >= 12 && index < 16 && 'opacity-30',
+        index >= 16 && index < 20 && 'opacity-25',
+        index >= 20 && index < 24 && 'opacity-20',
+      )}
+    ></div>
+  ))
+  return defaultCards
+}
+
 const MCPList = ({
   searchText,
 }: Props) => {
@@ -26,24 +45,6 @@ const MCPList = ({
 
   const [currentProvider, setCurrentProvider] = useState<MCPProvider>()
 
-  function renderDefaultCard() {
-    const defaultCards = Array.from({ length: 36 }, (_, index) => (
-      <div
-        key={index}
-        className={cn(
-          'inline-flex h-[111px] rounded-xl bg-background-default-lighter opacity-10',
-          index < 4 && 'opacity-60',
-          index >= 4 && index < 8 && 'opacity-50',
-          index >= 8 && index < 12 && 'opacity-40',
-          index >= 12 && index < 16 && 'opacity-30',
-          index >= 16 && index < 20 && 'opacity-25',
-          index >= 20 && index < 24 && 'opacity-20',
-        )}
-      ></div>
-    ))
-    return defaultCards
-  }
-
   return (
     <>
       <div
@@ -63,6 +64,13 @@ const MCPList = ({
         ))}
         {!list.length && renderDefaultCard()}
       </div>
+      {currentProvider && (
+        <MCPDetailPanel
+          detail={currentProvider}
+          onHide={() => setCurrentProvider(undefined)}
+          onUpdate={() => invalidateMCPList()}
+        />
+      )}
     </>
   )
 }
diff --git a/web/app/components/tools/mcp/provider-detail.tsx b/web/app/components/tools/mcp/provider-detail.tsx
new file mode 100644
index 0000000000..46d3077378
--- /dev/null
+++ b/web/app/components/tools/mcp/provider-detail.tsx
@@ -0,0 +1,50 @@
+'use client'
+import React from 'react'
+import type { FC } from 'react'
+import Drawer from '@/app/components/base/drawer'
+import type { MCPProvider } from '@/app/components/tools/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  detail?: MCPProvider
+  onUpdate: () => void
+  onHide: () => void
+}
+
+const MCPDetailPanel: FC<Props> = ({
+  detail,
+  onUpdate,
+  onHide,
+}) => {
+  const handleUpdate = (isDelete = false) => {
+    if (isDelete)
+      onHide()
+    onUpdate()
+  }
+
+  if (!detail)
+    return null
+
+  return (
+    <Drawer
+      isOpen={!!detail}
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassName={cn('mb-2 mr-2 mt-[64px] !w-[420px] !max-w-[420px] justify-start rounded-2xl border-[0.5px] border-components-panel-border !bg-components-panel-bg !p-0 shadow-xl')}
+    >
+      {detail && (
+        <>
+          <div>HEADER</div>
+          <div className='grow overflow-y-auto'>
+            TOOL list
+          </div>
+        </>
+      )}
+    </Drawer>
+  )
+}
+
+export default MCPDetailPanel