diff --git a/web/app/components/plugins/install-plugin/base/version.tsx b/web/app/components/plugins/install-plugin/base/version.tsx
new file mode 100644
index 0000000000..891294f095
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/base/version.tsx
@@ -0,0 +1,39 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+
+type Props = {
+  hasInstalled: boolean
+  installedVersion?: string
+  toInstallVersion: string
+}
+
+const Version: FC<Props> = ({
+  hasInstalled,
+  installedVersion,
+  toInstallVersion,
+}) => {
+  return (
+    <>
+      {
+        !hasInstalled
+          ? (
+            <Badge className='mx-1' size="s" state={BadgeState.Default}>{toInstallVersion}</Badge>
+          )
+          : (
+            <>
+              <Badge className='mx-1' size="s" state={BadgeState.Warning}>
+                {`${installedVersion} -> ${toInstallVersion}`}
+              </Badge>
+              {/* <div className='flex px-0.5 justify-center items-center gap-0.5'>
+              <div className='text-text-warning system-xs-medium'>Used in 3 apps</div>
+              <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+            </div> */}
+            </>
+          )
+      }
+    </>
+  )
+}
+export default React.memo(Version)
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
index 43c2a03319..d37275f19a 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -1,16 +1,16 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useEffect } from 'react'
 import type { PluginDeclaration } from '../../../types'
 import Card from '../../../card'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import Button from '@/app/components/base/button'
 import { Trans, useTranslation } from 'react-i18next'
 import { RiLoader2Line } from '@remixicon/react'
-import Badge, { BadgeState } from '@/app/components/base/badge/index'
-import { useInstallPackageFromLocal } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
-import { usePluginTaskList } from '@/service/use-plugins'
+import { useInstallPackageFromLocal, usePluginTaskList, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import Version from '../../base/version'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -32,8 +32,24 @@ const Installed: FC<Props> = ({
   onFailed,
 }) => {
   const { t } = useTranslation()
+  const toInstallVersion = payload.version
+  const pluginId = `${payload.author}/${payload.name}`
+  const { installedInfo, isLoading } = useCheckInstalled({
+    pluginIds: [pluginId],
+    enabled: !!pluginId,
+  })
+  const installedInfoPayload = installedInfo?.[pluginId]
+  const installedVersion = installedInfoPayload?.installedVersion
+  const hasInstalled = !!installedVersion
+
+  useEffect(() => {
+    if (hasInstalled && toInstallVersion === installedVersion)
+      onInstalled()
+  }, [hasInstalled, toInstallVersion, installedVersion])
+
   const [isInstalling, setIsInstalling] = React.useState(false)
   const { mutateAsync: installPackageFromLocal } = useInstallPackageFromLocal()
+  const { mutateAsync: updatePackageFromMarketPlace } = useUpdatePackageFromMarketPlace()
 
   const {
     check,
@@ -52,10 +68,28 @@ const Installed: FC<Props> = ({
     onStartToInstall?.()
 
     try {
-      const {
-        all_installed: isInstalled,
-        task_id: taskId,
-      } = await installPackageFromLocal(uniqueIdentifier)
+      let taskId
+      let isInstalled
+      if (hasInstalled) {
+        const {
+          all_installed,
+          task_id,
+        } = await updatePackageFromMarketPlace({
+          original_plugin_unique_identifier: installedInfoPayload.uniqueIdentifier,
+          new_plugin_unique_identifier: uniqueIdentifier,
+        })
+        taskId = task_id
+        isInstalled = all_installed
+      }
+      else {
+        const {
+          all_installed,
+          task_id,
+        } = await installPackageFromLocal(uniqueIdentifier)
+        taskId = task_id
+        isInstalled = all_installed
+      }
+
       if (isInstalled) {
         onInstalled()
         return
@@ -92,7 +126,11 @@ const Installed: FC<Props> = ({
           <Card
             className='w-full'
             payload={pluginManifestToCardPluginProps(payload)}
-            titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
+            titleLeft={!isLoading && <Version
+              hasInstalled={hasInstalled}
+              installedVersion={installedVersion}
+              toInstallVersion={toInstallVersion}
+            />}
           />
         </div>
       </div>
@@ -106,7 +144,7 @@ const Installed: FC<Props> = ({
         <Button
           variant='primary'
           className='min-w-[72px] flex space-x-0.5'
-          disabled={isInstalling}
+          disabled={isInstalling || isLoading}
           onClick={handleInstall}
         >
           {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
index 1cb0594e32..0b3728e2a1 100644
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useMemo } from 'react'
+import React, { useEffect } from 'react'
 // import { RiInformation2Line } from '@remixicon/react'
 import type { Plugin, PluginManifestInMarket } from '../../../types'
 import Card from '../../../card'
@@ -8,10 +8,10 @@ import { pluginManifestInMarketToPluginProps } from '../../utils'
 import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
 import { RiLoader2Line } from '@remixicon/react'
-import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { useInstallPackageFromMarketPlace, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
 import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import Version from '../../base/version'
 
 const i18nPrefix = 'plugin.installModal'
 
@@ -35,7 +35,7 @@ const Installed: FC<Props> = ({
   const { t } = useTranslation()
   const toInstallVersion = payload.version || payload.latest_version
   const pluginId = (payload as Plugin).plugin_id
-  const { installedInfo } = useCheckInstalled({
+  const { installedInfo, isLoading } = useCheckInstalled({
     pluginIds: [pluginId],
     enabled: !!pluginId,
   })
@@ -51,6 +51,11 @@ const Installed: FC<Props> = ({
     stop,
   } = checkTaskStatus()
 
+  useEffect(() => {
+    if (hasInstalled && toInstallVersion === installedVersion)
+      onInstalled()
+  }, [hasInstalled, toInstallVersion, installedVersion])
+
   const handleCancel = () => {
     stop()
     onCancel()
@@ -103,26 +108,6 @@ const Installed: FC<Props> = ({
     }
   }
 
-  const versionInfo = useMemo(() => {
-    return (<>{
-      !installedVersion
-        ? (
-          <Badge className='mx-1' size="s" state={BadgeState.Default}>{ }</Badge>
-        )
-        : (
-          <>
-            <Badge className='mx-1' size="s" state={BadgeState.Warning}>
-              {`${installedVersion} -> ${toInstallVersion}`}
-            </Badge>
-            {/* <div className='flex px-0.5 justify-center items-center gap-0.5'>
-              <div className='text-text-warning system-xs-medium'>Used in 3 apps</div>
-              <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
-            </div> */}
-          </>
-        )
-    }</>)
-  }, [installedVersion, payload])
-
   return (
     <>
       <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
@@ -133,7 +118,11 @@ const Installed: FC<Props> = ({
           <Card
             className='w-full'
             payload={pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket)}
-            titleLeft={versionInfo}
+            titleLeft={!isLoading && <Version
+              hasInstalled={hasInstalled}
+              installedVersion={installedVersion}
+              toInstallVersion={toInstallVersion}
+            />}
           />
         </div>
       </div>
@@ -147,7 +136,7 @@ const Installed: FC<Props> = ({
         <Button
           variant='primary'
           className='min-w-[72px] flex space-x-0.5'
-          disabled={isInstalling}
+          disabled={isInstalling || isLoading}
           onClick={handleInstall}
         >
           {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}