diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index eea1d32bec..6316f40e64 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -8,10 +8,12 @@ import ProviderCard from '@/app/components/plugins/provider-card'
 import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { getLocaleOnServer, useTranslation as translate } from '@/i18n/server'
 import Badge from '@/app/components/base/badge'
+
 const PluginList = async () => {
   const locale = getLocaleOnServer()
   const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
   const { t: pluginI8n } = await translate(locale, 'plugin')
+
   return (
     <div className='pb-3 bg-white'>
       <div className='mx-3 '>
diff --git a/web/app/(commonLayout)/plugins/test/other/page.tsx b/web/app/(commonLayout)/plugins/test/other/page.tsx
new file mode 100644
index 0000000000..3166e34ba3
--- /dev/null
+++ b/web/app/(commonLayout)/plugins/test/other/page.tsx
@@ -0,0 +1,20 @@
+'use client'
+import { useBoolean } from 'ahooks'
+import UpdatePlugin from '@/app/components/plugins/update-plugin'
+
+const Page = () => {
+  const [isShowUpdateModal, {
+    setTrue: showUpdateModal,
+    setFalse: hideUpdateModal,
+  }] = useBoolean(false)
+  return (
+    <div>
+      <div onClick={showUpdateModal}>Show Upgrade</div>
+      {isShowUpdateModal && (
+        <UpdatePlugin onHide={hideUpdateModal} />
+      )}
+    </div>
+  )
+}
+
+export default Page
diff --git a/web/app/components/plugins/update-plugin/index.tsx b/web/app/components/plugins/update-plugin/index.tsx
new file mode 100644
index 0000000000..d0abd21e0c
--- /dev/null
+++ b/web/app/components/plugins/update-plugin/index.tsx
@@ -0,0 +1,101 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
+import { useContext } from 'use-context-selector'
+import { RiInformation2Line } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Card from '@/app/components/plugins/card'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import I18n from '@/context/i18n'
+import { toolNotion } from '@/app/components/plugins/card/card-mock'
+
+const i18nPrefix = 'plugin.upgrade'
+
+type Props = {
+  onHide: () => void
+}
+
+enum UploadStep {
+  notStarted = 'notStarted',
+  upgrading = 'upgrading',
+  installed = 'installed',
+}
+
+const UpdatePluginModal: FC<Props> = ({
+  onHide,
+}) => {
+  const { locale } = useContext(I18n)
+  const { t } = useTranslation()
+  const [uploadStep, setUploadStep] = useState<UploadStep>(UploadStep.notStarted)
+  const configBtnText = useMemo(() => {
+    return ({
+      [UploadStep.notStarted]: t(`${i18nPrefix}.upgrade`),
+      [UploadStep.upgrading]: t(`${i18nPrefix}.upgrading`),
+      [UploadStep.installed]: t(`${i18nPrefix}.close`),
+    })[uploadStep]
+  }, [uploadStep])
+  const handleConfirm = useCallback(() => {
+    if (uploadStep === UploadStep.notStarted) {
+      setUploadStep(UploadStep.upgrading)
+      setTimeout(() => {
+        setUploadStep(UploadStep.installed)
+      }, 1500)
+      return
+    }
+    if (uploadStep === UploadStep.installed)
+      onHide()
+  }, [uploadStep])
+  return (
+    <Modal
+      isShow={true}
+      onClose={onHide}
+      className='min-w-[560px]'
+      closable
+      title={t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
+    >
+      <div className='mt-3 mb-2 text-text-secondary system-md-regular'>
+        {t(`${i18nPrefix}.description`)}
+      </div>
+      <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+        <Card
+          installed={uploadStep === UploadStep.installed}
+          payload={toolNotion as any}
+          locale={locale}
+          className='w-full'
+          titleLeft={
+            <>
+              <Badge className='mx-1' size="s" state={BadgeState.Warning}>
+                {'1.2.0 -> 1.3.2'}
+              </Badge>
+              <div className='flex px-0.5 justify-center items-center gap-0.5'>
+                <div className='text-text-warning system-xs-medium'>{t(`${i18nPrefix}.usedInApps`, { num: 3 })}</div>
+                {/* show the used apps */}
+                <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+              </div>
+            </>
+          }
+        />
+      </div>
+      <div className='flex pt-5 justify-end items-center gap-2 self-stretch'>
+        {uploadStep === UploadStep.notStarted && (
+          <Button
+            onClick={onHide}
+          >
+            {t('common.operation.cancel')}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          loading={uploadStep === UploadStep.upgrading}
+          onClick={handleConfirm}
+          disabled={uploadStep === UploadStep.upgrading}
+        >
+          {configBtnText}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+export default React.memo(UpdatePluginModal)
diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts
index 73361f9fe1..9d94549d64 100644
--- a/web/i18n/en-US/plugin.ts
+++ b/web/i18n/en-US/plugin.ts
@@ -47,6 +47,15 @@ const translation = {
     deleteContentRight: ' plugin?',
     usedInApps: 'This plugin is being used in {{num}} apps.',
   },
+  upgrade: {
+    title: 'Upgrade Plugin',
+    successfulTitle: 'Upgrade successful',
+    description: 'About to upgrade the following plugin',
+    usedInApps: 'Used in {{num}} apps',
+    upgrade: 'Upgrade',
+    upgrading: 'Upgrading...',
+    close: 'Close',
+  },
 }
 
 export default translation
diff --git a/web/i18n/zh-Hans/plugin.ts b/web/i18n/zh-Hans/plugin.ts
index 2549533865..30f6032261 100644
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@@ -47,6 +47,15 @@ const translation = {
     deleteContentRight: ' 插件?',
     usedInApps: '此插件正在 {{num}} 个应用中使用。',
   },
+  upgrade: {
+    title: '升级插件',
+    successfulTitle: '升级成功',
+    description: '即将升级以下插件',
+    usedInApps: '在 {{num}} 个应用中使用',
+    upgrade: '升级',
+    upgrading: '升级中...',
+    close: '关闭',
+  },
 }
 
 export default translation