diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
index 79b45941f1..98e65235f7 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/cardView.tsx
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext, useContextSelector } from 'use-context-selector'
 import AppCard from '@/app/components/app/overview/appCard'
 import Loading from '@/app/components/base/loading'
+import MCPServiceCard from '@/app/components/tools/mcp/mcp-service-card'
 import { ToastContext } from '@/app/components/base/toast'
 import {
   fetchAppDetail,
@@ -137,6 +138,12 @@ const CardView: FC<ICardViewProps> = ({ appId, isInPanel, className }) => {
         isInPanel={isInPanel}
         onChangeStatus={onChangeApiStatus}
       />
+      {isInPanel && appDetail.mode === 'workflow' && (
+        <MCPServiceCard
+          appInfo={appDetail}
+          onGenerateCode={onGenerateCode}
+        />
+      )}
     </div>
   )
 }
diff --git a/web/app/components/app/overview/appCard.tsx b/web/app/components/app/overview/appCard.tsx
index 7c12f1edee..684276f496 100644
--- a/web/app/components/app/overview/appCard.tsx
+++ b/web/app/components/app/overview/appCard.tsx
@@ -16,7 +16,7 @@ import style from './style.module.css'
 import type { ConfigParams } from './settings'
 import Tooltip from '@/app/components/base/tooltip'
 import AppBasic from '@/app/components/app-sidebar/basic'
-import { asyncRunSafe, randomString } from '@/utils'
+import { asyncRunSafe } from '@/utils'
 import { basePath } from '@/utils/var'
 import Button from '@/app/components/base/button'
 import Switch from '@/app/components/base/switch'
@@ -147,7 +147,7 @@ function AppCard({
                   : t('appOverview.overview.apiInfo.explanation')
               }
             />
-            <div className='flex items-center gap-1'>
+            <div className='flex shrink-0 items-center gap-1'>
               <Indicator color={runningStatus ? 'green' : 'yellow'} />
               <div className={`${runningStatus ? 'text-text-success' : 'text-text-warning'} system-xs-semibold-uppercase`}>
                 {runningStatus
@@ -173,7 +173,7 @@ function AppCard({
                 content={isApp ? appUrl : apiUrl}
                 className={'!size-6'}
               />
-              {isApp && <ShareQRCode content={isApp ? appUrl : apiUrl} className='z-50 !size-6 rounded-md hover:bg-state-base-hover' selectorId={randomString(8)} />}
+              {isApp && <ShareQRCode content={isApp ? appUrl : apiUrl} />}
               {isApp && <Divider type="vertical" className="!mx-0.5 !h-3.5 shrink-0" />}
               {/* button copy link/ button regenerate */}
               {showConfirmDelete && (
diff --git a/web/app/components/tools/mcp/mcp-service-card.tsx b/web/app/components/tools/mcp/mcp-service-card.tsx
new file mode 100644
index 0000000000..2454e90e62
--- /dev/null
+++ b/web/app/components/tools/mcp/mcp-service-card.tsx
@@ -0,0 +1,129 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiLoopLeftLine,
+} from '@remixicon/react'
+import Tooltip from '@/app/components/base/tooltip'
+import AppBasic from '@/app/components/app-sidebar/basic'
+import { asyncRunSafe } from '@/utils'
+import { basePath } from '@/utils/var'
+import Switch from '@/app/components/base/switch'
+import Divider from '@/app/components/base/divider'
+import CopyFeedback from '@/app/components/base/copy-feedback'
+import Confirm from '@/app/components/base/confirm'
+import ShareQRCode from '@/app/components/base/qrcode'
+import type { AppDetailResponse } from '@/models/app'
+import { useAppContext } from '@/context/app-context'
+import type { AppSSO } from '@/types/app'
+import Indicator from '@/app/components/header/indicator'
+import cn from '@/utils/classnames'
+
+export type IAppCardProps = {
+  appInfo: AppDetailResponse & Partial<AppSSO>
+  onGenerateCode?: () => Promise<void>
+}
+
+function MCPServiceCard({
+  appInfo,
+  onGenerateCode,
+}: IAppCardProps) {
+  const { t } = useTranslation()
+  const { isCurrentWorkspaceManager, isCurrentWorkspaceEditor } = useAppContext()
+  const [genLoading, setGenLoading] = useState(false)
+  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+
+  const basicName = t('appOverview.overview.apiInfo.title')
+  const toggleDisabled = !isCurrentWorkspaceEditor
+  const runningStatus = appInfo.enable_site // TODO
+  const { app_base_url, access_token } = appInfo.site ?? {}
+  const appMode = (appInfo.mode !== 'completion' && appInfo.mode !== 'workflow') ? 'chat' : appInfo.mode
+  const appUrl = `${app_base_url}${basePath}/${appMode}/${access_token}`
+
+  const onGenCode = async () => {
+    if (onGenerateCode) {
+      setGenLoading(true)
+      await asyncRunSafe(onGenerateCode())
+      setGenLoading(false)
+    }
+  }
+
+  const onChangeStatus = async (status: boolean) => {
+    // TODO
+  }
+
+  return (
+    <div className={cn('w-full max-w-full rounded-xl border-l-[0.5px] border-t border-effects-highlight')}>
+      <div className='rounded-xl bg-background-default'>
+        <div className='flex w-full flex-col items-start justify-center gap-3 self-stretch p-3'>
+          <div className='flex w-full items-center gap-3 self-stretch'>
+            <AppBasic
+              iconType={'app'}
+              icon={appInfo.icon}
+              icon_background={appInfo.icon_background}
+              name={basicName}
+              type={t('appOverview.overview.appInfo.explanation')}
+            />
+            <div className='flex items-center gap-1'>
+              <Indicator color={runningStatus ? 'green' : 'yellow'} />
+              <div className={`${runningStatus ? 'text-text-success' : 'text-text-warning'} system-xs-semibold-uppercase`}>
+                {runningStatus
+                  ? t('appOverview.overview.status.running')
+                  : t('appOverview.overview.status.disable')}
+              </div>
+            </div>
+            <Switch defaultValue={runningStatus} onChange={onChangeStatus} disabled={toggleDisabled} />
+          </div>
+          <div className='flex flex-col items-start justify-center self-stretch'>
+            <div className="system-xs-medium pb-1 text-text-tertiary">
+              {t('appOverview.overview.appInfo.accessibleAddress')}
+            </div>
+            <div className="inline-flex h-9 w-full items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2">
+              <div className="flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1">
+                <div className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-medium text-text-secondary">
+                  {appUrl}
+                </div>
+              </div>
+              <CopyFeedback
+                content={appUrl}
+                className={'!size-6'}
+              />
+              <ShareQRCode content={appUrl} />
+              <Divider type="vertical" className="!mx-0.5 !h-3.5 shrink-0" />
+              {/* button copy link/ button regenerate */}
+              {showConfirmDelete && (
+                <Confirm
+                  type='warning'
+                  title={t('appOverview.overview.appInfo.regenerate')}
+                  content={t('appOverview.overview.appInfo.regenerateNotice')}
+                  isShow={showConfirmDelete}
+                  onConfirm={() => {
+                    onGenCode()
+                    setShowConfirmDelete(false)
+                  }}
+                  onCancel={() => setShowConfirmDelete(false)}
+                />
+              )}
+              {isCurrentWorkspaceManager && (
+                <Tooltip
+                  popupContent={t('appOverview.overview.appInfo.regenerate') || ''}
+                >
+                  <div
+                    className="cursor-pointer rounded-md p-1 hover:bg-state-base-hover"
+                    onClick={() => setShowConfirmDelete(true)}
+                  >
+                    <RiLoopLeftLine className={cn('h-4 w-4 text-text-tertiary hover:text-text-secondary', genLoading && 'animate-spin')}/>
+                  </div>
+                </Tooltip>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className='flex items-center gap-1 self-stretch p-3'>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MCPServiceCard