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 bc32e642a5..27ae871d97 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
@@ -9,7 +9,7 @@ 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 { installPackageFromMarketPlace } from '@/service/plugins'
+import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
 
 const i18nPrefix = 'plugin.installModal'
@@ -32,6 +32,7 @@ const Installed: FC<Props> = ({
   onFailed,
 }) => {
   const { t } = useTranslation()
+  const { mutateAsync: installPackageFromMarketPlace } = useInstallPackageFromMarketPlace()
   const [isInstalling, setIsInstalling] = React.useState(false)
   const {
     check,
diff --git a/web/service/plugins.ts b/web/service/plugins.ts
index b7d5125f2e..3e5d872bf2 100644
--- a/web/service/plugins.ts
+++ b/web/service/plugins.ts
@@ -104,12 +104,6 @@ export const fetchManifestFromMarketPlace = async (uniqueIdentifier: string) =>
   return getMarketplace<{ data: { plugin: PluginManifestInMarket } }>(`/plugins/identifier?unique_identifier=${uniqueIdentifier}`)
 }
 
-export const installPackageFromMarketPlace = async (uniqueIdentifier: string) => {
-  return post<InstallPackageResponse>('/workspaces/current/plugin/install/marketplace', {
-    body: { plugin_unique_identifiers: [uniqueIdentifier] },
-  })
-}
-
 export const fetchMarketplaceCollections: Fetcher<MarketplaceCollectionsResponse, { url: string; }> = ({ url }) => {
   return get<MarketplaceCollectionsResponse>(url)
 }
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index 251e3a40cd..2274250b58 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -1,5 +1,6 @@
 import type {
   DebugInfo as DebugInfoTypes,
+  InstallPackageResponse,
   InstalledPluginListResponse,
   Permissions,
   PluginsFromMarketplaceResponse,
@@ -34,6 +35,14 @@ export const useInvalidateInstalledPluginList = () => {
   }
 }
 
+export const useInstallPackageFromMarketPlace = () => {
+  return useMutation({
+    mutationFn: (uniqueIdentifier: string) => {
+      return post<InstallPackageResponse>('/workspaces/current/plugin/install/marketplace', { body: { plugin_unique_identifiers: [uniqueIdentifier] } })
+    },
+  })
+}
+
 export const useDebugKey = () => {
   return useQuery({
     queryKey: [NAME_SPACE, 'debugKey'],