diff --git a/web/app/components/plugins/permission-setting-modal/modal.tsx b/web/app/components/plugins/permission-setting-modal/modal.tsx
index c9e2d2da61..b5eaa4765c 100644
--- a/web/app/components/plugins/permission-setting-modal/modal.tsx
+++ b/web/app/components/plugins/permission-setting-modal/modal.tsx
@@ -34,7 +34,7 @@ const PluginSettingModal: FC<Props> = ({
   const handleSave = useCallback(async () => {
     await onSave(tempPrivilege)
     onHide()
-  }, [tempPrivilege])
+  }, [onHide, onSave, tempPrivilege])
 
   return (
     <Modal
diff --git a/web/app/components/plugins/plugin-page/context.tsx b/web/app/components/plugins/plugin-page/context.tsx
index 697d28a022..6554ce344a 100644
--- a/web/app/components/plugins/plugin-page/context.tsx
+++ b/web/app/components/plugins/plugin-page/context.tsx
@@ -11,16 +11,13 @@ import {
   useContextSelector,
 } from 'use-context-selector'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
-import type { Permissions, PluginDetail } from '../types'
+import type { PluginDetail } from '../types'
 import type { FilterState } from './filter-management'
-import { PermissionType } from '../types'
 import { useTranslation } from 'react-i18next'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
 
 export type PluginPageContextValue = {
   containerRef: React.RefObject<HTMLDivElement>
-  permissions: Permissions
-  setPermissions: (permissions: PluginPageContextValue['permissions']) => void
   currentPluginDetail: PluginDetail | undefined
   setCurrentPluginDetail: (plugin: PluginDetail) => void
   filters: FilterState
@@ -32,21 +29,16 @@ export type PluginPageContextValue = {
 
 export const PluginPageContext = createContext<PluginPageContextValue>({
   containerRef: { current: null },
-  permissions: {
-    install_permission: PermissionType.noOne,
-    debug_permission: PermissionType.noOne,
-  },
-  setPermissions: () => {},
   currentPluginDetail: undefined,
-  setCurrentPluginDetail: () => {},
+  setCurrentPluginDetail: () => { },
   filters: {
     categories: [],
     tags: [],
     searchQuery: '',
   },
-  setFilters: () => {},
+  setFilters: () => { },
   activeTab: '',
-  setActiveTab: () => {},
+  setActiveTab: () => { },
   options: [],
 })
 
@@ -63,10 +55,6 @@ export const PluginPageContextProvider = ({
 }: PluginPageContextProviderProps) => {
   const { t } = useTranslation()
   const containerRef = useRef<HTMLDivElement>(null)
-  const [permissions, setPermissions] = useState<PluginPageContextValue['permissions']>({
-    install_permission: PermissionType.noOne,
-    debug_permission: PermissionType.noOne,
-  })
   const [filters, setFilters] = useState<FilterState>({
     categories: [],
     tags: [],
@@ -93,8 +81,6 @@ export const PluginPageContextProvider = ({
     <PluginPageContext.Provider
       value={{
         containerRef,
-        permissions,
-        setPermissions,
         currentPluginDetail,
         setCurrentPluginDetail,
         filters,
diff --git a/web/app/components/plugins/plugin-page/index.tsx b/web/app/components/plugins/plugin-page/index.tsx
index f7b4f4ef74..f889bbc363 100644
--- a/web/app/components/plugins/plugin-page/index.tsx
+++ b/web/app/components/plugins/plugin-page/index.tsx
@@ -206,7 +206,7 @@ const PluginPage = ({
 
       {showPluginSettingModal && (
         <PermissionSetModal
-          payload={permissions}
+          payload={permissions!}
           onHide={setHidePluginSettingModal}
           onSave={setPermissions}
         />
diff --git a/web/app/components/plugins/plugin-page/use-permission.ts b/web/app/components/plugins/plugin-page/use-permission.ts
index 4a8cdc29c1..c4fc01f2c3 100644
--- a/web/app/components/plugins/plugin-page/use-permission.ts
+++ b/web/app/components/plugins/plugin-page/use-permission.ts
@@ -1,15 +1,12 @@
-import { useEffect } from 'react'
-import type { Permissions } from '../types'
 import { PermissionType } from '../types'
-import {
-  usePluginPageContext,
-} from './context'
 import { useAppContext } from '@/context/app-context'
-import { updatePermission as doUpdatePermission, fetchPermission } from '@/service/plugins'
 import Toast from '../../base/toast'
 import { useTranslation } from 'react-i18next'
+import { useInvalidatePermissions, useMutationPermissions, usePermissions } from '@/service/use-plugins'
 
-const hasPermission = (permission: PermissionType, isAdmin: boolean) => {
+const hasPermission = (permission: PermissionType | undefined, isAdmin: boolean) => {
+  if (!permission)
+    return false
   if (permission === PermissionType.noOne)
     return false
 
@@ -22,29 +19,26 @@ const hasPermission = (permission: PermissionType, isAdmin: boolean) => {
 const usePermission = () => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceManager, isCurrentWorkspaceOwner } = useAppContext()
-  const [permissions, setPermissions] = usePluginPageContext(v => [v.permissions, v.setPermissions])
+  const { data: permissions } = usePermissions()
+  const invalidatePermissions = useInvalidatePermissions()
+  const { mutate: updatePermission, isPending: isUpdatePending } = useMutationPermissions({
+    onSuccess: () => {
+      invalidatePermissions()
+      Toast.notify({
+        type: 'success',
+        message: t('common.api.actionSuccess'),
+      })
+    },
+  })
   const isAdmin = isCurrentWorkspaceManager || isCurrentWorkspaceOwner
 
-  const updatePermission = async (permission: Permissions) => {
-    await doUpdatePermission(permission)
-    setPermissions(permission)
-    Toast.notify({
-      type: 'success',
-      message: t('common.api.actionSuccess'),
-    })
-  }
-  useEffect(() => {
-    (async () => {
-      const permission = await fetchPermission()
-      setPermissions(permission)
-    })()
-  }, [])
   return {
-    canManagement: hasPermission(permissions.install_permission, isAdmin),
-    canDebugger: hasPermission(permissions.debug_permission, isAdmin),
+    canManagement: hasPermission(permissions?.install_permission, isAdmin),
+    canDebugger: hasPermission(permissions?.debug_permission, isAdmin),
     canSetPermissions: isAdmin,
     permissions,
     setPermissions: updatePermission,
+    isUpdatePending,
   }
 }
 
diff --git a/web/service/plugins.ts b/web/service/plugins.ts
index e9de724256..6d246e9239 100644
--- a/web/service/plugins.ts
+++ b/web/service/plugins.ts
@@ -15,7 +15,6 @@ import type {
   UpdateEndpointRequest,
   uploadGitHubResponse,
 } from '@/app/components/plugins/types'
-import type { DebugInfo as DebugInfoTypes } from '@/app/components/plugins/types'
 import type {
   MarketplaceCollectionPluginsResponse,
   MarketplaceCollectionsResponse,
@@ -51,10 +50,6 @@ export const disableEndpoint: Fetcher<EndpointOperationResponse, { url: string;
   return post<EndpointOperationResponse>(url, { body: { endpoint_id: endpointID } })
 }
 
-export const fetchDebugKey = async () => {
-  return get<DebugInfoTypes>('/workspaces/current/plugin/debugging-key')
-}
-
 export const uploadPackageFile = async (file: File) => {
   const formData = new FormData()
   formData.append('pkg', file)
@@ -131,10 +126,6 @@ export const checkTaskStatus = async (taskId: string) => {
   return get<TaskStatusResponse>(`/workspaces/current/plugin/tasks/${taskId}`)
 }
 
-export const fetchPermission = async () => {
-  return get<Permissions>('/workspaces/current/plugin/permission/fetch')
-}
-
 export const updatePermission = async (permissions: Permissions) => {
   return post('/workspaces/current/plugin/permission/change', { body: permissions })
 }
diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts
index 0f069f65cc..754cd1cc2d 100644
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@@ -1,6 +1,7 @@
-import type { DebugInfo as DebugInfoTypes, InstalledPluginListResponse } from '@/app/components/plugins/types'
-import { get } from './base'
+import type { DebugInfo as DebugInfoTypes, InstalledPluginListResponse, Permissions } from '@/app/components/plugins/types'
+import { get, post } from './base'
 import {
+  useMutation,
   useQueryClient,
 } from '@tanstack/react-query'
 
@@ -34,3 +35,34 @@ export const useDebugKey = () => {
     queryFn: () => get<DebugInfoTypes>('/workspaces/current/plugin/debugging-key'),
   })
 }
+
+const usePermissionsKey = [NAME_SPACE, 'permissions']
+export const usePermissions = () => {
+  return useQuery({
+    queryKey: usePermissionsKey,
+    queryFn: () => get<Permissions>('/workspaces/current/plugin/permission/fetch'),
+  })
+}
+
+export const useInvalidatePermissions = () => {
+  const queryClient = useQueryClient()
+  return () => {
+    queryClient.invalidateQueries(
+      {
+        queryKey: usePermissionsKey,
+      })
+  }
+}
+
+export const useMutationPermissions = ({
+  onSuccess,
+}: {
+  onSuccess?: () => void
+}) => {
+  return useMutation({
+    mutationFn: (payload: Permissions) => {
+      return post('/workspaces/current/plugin/permission/change', { body: payload })
+    },
+    onSuccess,
+  })
+}