diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 312f00ff1f..70ce4274d7 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -72,7 +72,6 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import { fetchFileUploadConfig } from '@/service/common'
 import { correctProvider } from '@/utils'
-import PluginDependency from '@/app/components/workflow/plugin-dependency'
 
 type PublishConfig = {
   modelConfig: ModelConfig
@@ -1042,7 +1041,6 @@ const Configuration: FC = () => {
               onAutoAddPromptVariable={handleAddPromptVariable}
             />
           )}
-          <PluginDependency />
         </>
       </FeaturesProvider>
     </ConfigContext.Provider>
diff --git a/web/app/components/app/create-from-dsl-modal/index.tsx b/web/app/components/app/create-from-dsl-modal/index.tsx
index 08469715ed..12e2266c22 100644
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@@ -26,6 +26,7 @@ import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
 import cn from '@/utils/classnames'
 import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
+import PluginDependency from '@/app/components/workflow/plugin-dependency'
 
 type CreateFromDSLModalProps = {
   show: boolean
@@ -102,10 +103,10 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
       if (!response)
         return
 
-      const { id, status, app_id, imported_dsl_version, current_dsl_version, leaked } = response
-      if (leaked?.length) {
+      const { id, status, app_id, imported_dsl_version, current_dsl_version, leaked_dependencies } = response
+      if (leaked_dependencies?.length) {
         const { setDependencies } = usePluginDependencyStore.getState()
-        setDependencies(leaked)
+        setDependencies(leaked_dependencies)
       }
       if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
         if (onSuccess)
@@ -281,6 +282,7 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
             <div>{t('app.newApp.appCreateDSLErrorPart4')}<span className='system-md-medium'>{versions?.systemVersion}</span></div>
           </div>
         </div>
+        <PluginDependency />
         <div className='flex pt-6 justify-end items-start gap-2 self-stretch'>
           <Button variant='secondary' onClick={() => setShowErrorModal(false)}>{t('app.newApp.Cancel')}</Button>
           <Button variant='primary' destructive onClick={onDSLConfirm}>{t('app.newApp.Confirm')}</Button>
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 2eccb38e47..ecd35876e7 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -72,7 +72,6 @@ import SyncingDataModal from './syncing-data-modal'
 import UpdateDSLModal from './update-dsl-modal'
 import DSLExportConfirmModal from './dsl-export-confirm-modal'
 import LimitTips from './limit-tips'
-import PluginDependency from './plugin-dependency'
 import {
   useStore,
   useWorkflowStore,
@@ -327,7 +326,6 @@ const Workflow: FC<WorkflowProps> = memo(({
           />
         )
       }
-      <PluginDependency />
       <LimitTips />
       <ReactFlow
         nodeTypes={nodeTypes}
diff --git a/web/app/components/workflow/plugin-dependency/index.tsx b/web/app/components/workflow/plugin-dependency/index.tsx
index 13f138114b..8fd87b9627 100644
--- a/web/app/components/workflow/plugin-dependency/index.tsx
+++ b/web/app/components/workflow/plugin-dependency/index.tsx
@@ -1,23 +1,43 @@
-import { useCallback } from 'react'
+import {
+  useCallback,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
 import { useStore } from './store'
-import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
+import ReadyToInstall from '@/app/components/plugins/install-plugin/install-bundle/ready-to-install'
+import { InstallStep } from '@/app/components/plugins/types'
 
+const i18nPrefix = 'plugin.installModal'
 const PluginDependency = () => {
   const dependencies = useStore(s => s.dependencies)
 
-  const handleCancelInstallBundle = useCallback(() => {
-    const { setDependencies } = useStore.getState()
-    setDependencies([])
-  }, [])
+  const [step, setStep] = useState<InstallStep>(InstallStep.readyToInstall)
+
+  const { t } = useTranslation()
+  const getTitle = useCallback(() => {
+    if (step === InstallStep.uploadFailed)
+      return t(`${i18nPrefix}.uploadFailed`)
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installComplete`)
+
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [step, t])
 
   if (!dependencies.length)
     return null
 
   return (
     <div>
-      <InstallBundle
-        fromDSLPayload={dependencies}
-        onClose={handleCancelInstallBundle}
+      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
+        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+          {getTitle()}
+        </div>
+      </div>
+      <ReadyToInstall
+        step={step}
+        onStepChange={setStep}
+        allPlugins={dependencies}
+        onClose={() => {}}
       />
     </div>
   )
diff --git a/web/app/components/workflow/update-dsl-modal.tsx b/web/app/components/workflow/update-dsl-modal.tsx
index 9bd1113749..a750ebe21e 100644
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@@ -38,6 +38,8 @@ import { ToastContext } from '@/app/components/base/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
+import PluginDependency from '@/app/components/workflow/plugin-dependency'
 
 type UpdateDSLModalProps = {
   onCancel: () => void
@@ -135,7 +137,11 @@ const UpdateDSLModal = ({
       if (appDetail && fileContent) {
         setLoading(true)
         const response = await importDSL({ mode: DSLImportMode.YAML_CONTENT, yaml_content: fileContent, app_id: appDetail.id })
-        const { id, status, app_id, imported_dsl_version, current_dsl_version } = response
+        const { id, status, app_id, imported_dsl_version, current_dsl_version, leaked_dependencies } = response
+        if (leaked_dependencies?.length) {
+          const { setDependencies } = usePluginDependencyStore.getState()
+          setDependencies(leaked_dependencies)
+        }
         if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
           if (!app_id) {
             notify({ type: 'error', message: t('workflow.common.importFailure') })
@@ -283,6 +289,7 @@ const UpdateDSLModal = ({
             <div>{t('app.newApp.appCreateDSLErrorPart4')}<span className='system-md-medium'>{versions?.systemVersion}</span></div>
           </div>
         </div>
+        <PluginDependency />
         <div className='flex pt-6 justify-end items-start gap-2 self-stretch'>
           <Button variant='secondary' onClick={() => setShowErrorModal(false)}>{t('app.newApp.Cancel')}</Button>
           <Button variant='primary' destructive onClick={onUpdateDSLConfirm}>{t('app.newApp.Confirm')}</Button>
diff --git a/web/models/app.ts b/web/models/app.ts
index 5cf3f23e83..81a8575dd8 100644
--- a/web/models/app.ts
+++ b/web/models/app.ts
@@ -88,7 +88,7 @@ export type DSLImportResponse = {
   current_dsl_version?: string
   imported_dsl_version?: string
   error: string
-  leaked: Dependency[]
+  leaked_dependencies: Dependency[]
 }
 
 export type AppSSOResponse = { enabled: AppSSO['enable_sso'] }
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index 0fb1c956a3..9072810426 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -24,7 +24,6 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query'
-import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
 import { useInvalidateAllBuiltInTools } from './use-tools'
 
 const NAME_SPACE = 'plugins'
@@ -324,36 +323,6 @@ export const useMutationClearAllTaskPlugin = () => {
   })
 }
 
-export const useMutationCheckDependenciesBeforeImportDSL = () => {
-  const mutation = useMutation({
-    mutationFn: ({ dslString, url }: { dslString?: string, url?: string }) => {
-      if (url) {
-        return post<{ leaked: Dependency[] }>(
-          '/apps/import/url/dependencies/check',
-          {
-            body: {
-              url,
-            },
-          },
-        )
-      }
-      return post<{ leaked: Dependency[] }>(
-        '/apps/import/dependencies/check',
-        {
-          body: {
-            data: dslString,
-          },
-        })
-    },
-    onSuccess: (data) => {
-      const { setDependencies } = usePluginDependencyStore.getState()
-      setDependencies(data.leaked || [])
-    },
-  })
-
-  return mutation
-}
-
 export const useDownloadPlugin = (info: { organization: string; pluginName: string; version: string }, needDownload: boolean) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'downloadPlugin', info],