diff --git a/web/app/components/plugins/plugin-mutation-model/index.tsx b/web/app/components/plugins/plugin-mutation-model/index.tsx
new file mode 100644
index 0000000000..fadfd9a957
--- /dev/null
+++ b/web/app/components/plugins/plugin-mutation-model/index.tsx
@@ -0,0 +1,71 @@
+import type { FC, ReactNode } from 'react'
+import React, { memo } from 'react'
+import Card from '@/app/components/plugins/card'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import type { Plugin } from '../types'
+import type { UseMutationResult } from '@tanstack/react-query'
+
+type Props = {
+  plugin: Plugin
+  onSave: () => void
+  onCancel: () => void
+  mutation: UseMutationResult
+  confirmButtonText: ReactNode
+  cancelButtonText: ReactNode
+  modelTitle: ReactNode
+  description: ReactNode
+  cardTitleLeft: ReactNode
+}
+
+const PluginMutationModal: FC<Props> = ({
+  plugin,
+  onCancel,
+  mutation,
+  confirmButtonText,
+  cancelButtonText,
+  modelTitle,
+  description,
+  cardTitleLeft,
+}: Props) => {
+  return (
+    <Modal
+      isShow={true}
+      onClose={onCancel}
+      className='min-w-[560px]'
+      closable
+      title={modelTitle}
+    >
+      <div className='mt-3 mb-2 text-text-secondary system-md-regular'>
+        {description}
+      </div>
+      <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+        <Card
+          installed={mutation.isSuccess}
+          payload={plugin}
+          className='w-full'
+          titleLeft={cardTitleLeft}
+        />
+      </div>
+      <div className='flex pt-5 justify-end items-center gap-2 self-stretch'>
+        {mutation.isPending && (
+          <Button onClick={onCancel}>
+            {cancelButtonText}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          loading={mutation.isPending}
+          onClick={mutation.mutate}
+          disabled={mutation.isPending}
+        >
+          {confirmButtonText}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+PluginMutationModal.displayName = 'PluginMutationModal'
+
+export default memo(PluginMutationModal)
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index f9c8f0a2c2..f885efd761 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -41,7 +41,7 @@ export const useCheckInstalled = ({
   enabled: boolean
 }) => {
   return useQuery<{ plugins: PluginDetail[] }>({
-    queryKey: [NAME_SPACE, 'checkInstalled'],
+    queryKey: [NAME_SPACE, 'checkInstalled', pluginIds],
     queryFn: () => post<{ plugins: PluginDetail[] }>('/workspaces/current/plugin/list/installations/ids', {
       body: {
         plugin_ids: pluginIds,
@@ -82,8 +82,9 @@ export const useInstallPackageFromMarketPlace = (options?: MutateOptions<Install
   })
 }
 
-export const useUpdatePackageFromMarketPlace = () => {
+export const useUpdatePackageFromMarketPlace = (options?: MutateOptions<InstallPackageResponse, Error, object>) => {
   return useMutation({
+    ...options,
     mutationFn: (body: object) => {
       return post<InstallPackageResponse>('/workspaces/current/plugin/upgrade/marketplace', {
         body,