diff --git a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
index 0f9e2b9ea3..a1f049f134 100644
--- a/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/detail-header.tsx
@@ -37,6 +37,7 @@ import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 import { AutoUpdateLine } from '../../base/icons/src/vender/system'
 import { timeOfDayToDayjs } from '../reference-setting-modal/auto-update-setting/utils'
+import DowngradeWarningModal from '../update-plugin/downgrade-warning-modal'
 
 const i18nPrefix = 'plugin.action'
 
@@ -77,7 +78,6 @@ const DetailHeader = ({
   const [targetVersion, setTargetVersion] = useState({
     version: latest_version,
     unique_identifier: latest_unique_identifier,
-    isDowngrade: false,
   })
   const hasNewVersion = useMemo(() => {
     if (isFromMarketplace)
@@ -105,9 +105,9 @@ const DetailHeader = ({
     setFalse: hideDowngradeWarningModal,
   }] = useBoolean(false)
 
-  const handleUpdate = async () => {
+  const handleUpdate = async (isDowngrade?: boolean) => {
     if (isFromMarketplace) {
-      if(isAutoUpgradeEnabled && targetVersion.isDowngrade) {
+      if(isAutoUpgradeEnabled && isDowngrade) {
         showDowngradeWarningModal()
         return
       }
@@ -198,7 +198,7 @@ const DetailHeader = ({
               currentVersion={version}
               onSelect={(state) => {
                 setTargetVersion(state)
-                handleUpdate()
+                handleUpdate(state.isDowngrade)
               }}
               trigger={
                 <Badge
@@ -233,7 +233,6 @@ const DetailHeader = ({
                   setTargetVersion({
                     version: latest_version,
                     unique_identifier: latest_unique_identifier,
-                    isDowngrade: false,
                   })
                 }
                 handleUpdate()
@@ -328,7 +327,12 @@ const DetailHeader = ({
           />
         )
       }
-      { isShowDowngradeWarningModal && (<div>aaa</div>)}
+      { isShowDowngradeWarningModal && (
+        <DowngradeWarningModal
+          onCancel={hideDowngradeWarningModal}
+          onSave={handleUpdatedFromMarketplace}
+        />
+      )}
     </div>
   )
 }
diff --git a/web/app/components/plugins/update-plugin/downgrade-warning-modal.tsx b/web/app/components/plugins/update-plugin/downgrade-warning-modal.tsx
new file mode 100644
index 0000000000..fa5e90d182
--- /dev/null
+++ b/web/app/components/plugins/update-plugin/downgrade-warning-modal.tsx
@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+
+type Props = {
+  onCancel: () => void
+  onSave: () => void
+  confirmDisabled?: boolean
+}
+const DowngradeWarningModal = ({
+  onCancel,
+  onSave,
+  confirmDisabled = false,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <Modal
+      isShow
+      onClose={() => onCancel()}
+      className='w-[480px]'
+    >
+      <div className='flex flex-col items-start gap-2 self-stretch pb-4'>
+        <div className='title-2xl-semi-bold text-text-primary'>Plugin Downgrade</div>
+        <div className='system-md-regular flex grow flex-col text-text-secondary'>
+        Auto-update is currently enabled for this plugin. Downgrading the version may cause your changes to be overwritten during the next automatic update.
+        </div>
+      </div>
+      <div className='flex items-start justify-end gap-2 self-stretch pt-6'>
+        <Button variant='secondary' onClick={() => onCancel()}>{t('app.newApp.Cancel')}</Button>
+        <Button variant='primary' destructive onClick={onSave} disabled={confirmDisabled}>{t('app.newApp.Confirm')}</Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default DowngradeWarningModal