diff --git a/web/app/components/plugins/install-plugin/install-bundle/index.tsx b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
new file mode 100644
index 0000000000..6086f0cbc3
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@@ -0,0 +1,38 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { InstallStep } from '../../types'
+import type { PluginDeclaration } from '../../types'
+import SelectPackage from './steps/select-package'
+
+export enum InstallType {
+  fromLocal = 'fromLocal',
+  fromMarketplace = 'fromMarketplace',
+  fromDSL = 'fromDSL',
+}
+
+type Props = {
+  installType?: InstallType
+  plugins?: PluginDeclaration[]
+}
+
+const InstallBundle: FC<Props> = ({
+  installType = InstallType.fromMarketplace,
+  plugins = [],
+}) => {
+  const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
+  const [selectedPlugins, setSelectedPlugins] = useState<PluginDeclaration[]>([])
+
+  const handleSelectedPluginsChange = (plugins: PluginDeclaration[]) => {
+    setSelectedPlugins(plugins)
+  }
+  return (
+    <div>
+      {step === InstallStep.readyToInstall && (
+        <SelectPackage plugins={plugins || []} onChange={handleSelectedPluginsChange} />
+      )}
+    </div>
+  )
+}
+
+export default React.memo(InstallBundle)
diff --git a/web/app/components/plugins/install-plugin/install-bundle/steps/select-package.tsx b/web/app/components/plugins/install-plugin/install-bundle/steps/select-package.tsx
new file mode 100644
index 0000000000..70a51c265c
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/select-package.tsx
@@ -0,0 +1,20 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { PluginDeclaration } from '../../../types'
+
+type Props = {
+  plugins: PluginDeclaration[],
+  onChange: (plugins: PluginDeclaration[]) => void
+}
+
+const SelectPackage: FC<Props> = ({
+  plugins,
+  onChange,
+}) => {
+  return (
+    <div>
+    </div>
+  )
+}
+export default React.memo(SelectPackage)
diff --git a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
index 793977519d..499326c63e 100644
--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
@@ -48,6 +48,7 @@ const Uploading: FC<Props> = ({
 
   React.useEffect(() => {
     handleUpload()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
   return (
     <>