diff --git a/web/app/components/header/account-setting/access-rules-page/access-rule-row.tsx b/web/app/components/header/account-setting/access-rules-page/access-rule-row.tsx
index 1f93f09177..61e984b455 100644
--- a/web/app/components/header/account-setting/access-rules-page/access-rule-row.tsx
+++ b/web/app/components/header/account-setting/access-rules-page/access-rule-row.tsx
@@ -1,10 +1,13 @@
 'use client'
 
-import type { AccessPolicyWithBindings } from '@/models/access-control'
+import type { AccessPolicyWithBindings, BindingType } from '@/models/access-control'
 import { cn } from '@langgenius/dify-ui/cn'
 import { toast } from '@langgenius/dify-ui/toast'
 import { memo, useCallback } from 'react'
-import { useUpdateAppAccessRuleBindings, useUpdateDatasetAccessRuleBindings } from '@/service/access-control/use-workspace-access-rules'
+import {
+  useUpdateAppAccessRuleBindings,
+  useUpdateDatasetAccessRuleBindings,
+} from '@/service/access-control/use-workspace-access-rules'
 import AccessRuleRowMenu from './access-rule-row-menu'
 import RoleTag from './role-tag'
 
@@ -23,7 +26,8 @@ const AccessRuleRow = ({
   onEdit,
   onAddRole,
 }: AccessRuleRowProps) => {
-  const { policy, role_ids } = rule
+  const { policy, role_ids, account_ids } = rule
+  const { id: policyId, resource_type } = policy
 
   const handleEdit = useCallback(() => onEdit?.(rule), [onEdit, rule])
   const handleAddRole = useCallback(() => onAddRole?.(rule), [onAddRole, rule])
@@ -31,27 +35,33 @@ const AccessRuleRow = ({
   const { mutateAsync: updateAppAccessRuleBindings } = useUpdateAppAccessRuleBindings()
   const { mutateAsync: updateDatasetAccessRuleBindings } = useUpdateDatasetAccessRuleBindings()
 
-  const handleRemoveRole = useCallback((roleId: string) => {
+  const handleRemoveRole = useCallback((id: string, type: BindingType) => {
     const payload = {
-      id: policy.id,
-      role_ids: role_ids.filter(id => id !== roleId),
-      account_ids: [],
+      id: policyId,
+      role_ids: role_ids.map(role => role.id),
+      account_ids: account_ids.map(account => account.id),
     }
-    if (policy.resource_type === 'app') {
+    if (type === 'role') {
+      payload.role_ids = payload.role_ids.filter(roleId => roleId !== id)
+    }
+    else if (type === 'account') {
+      payload.account_ids = payload.account_ids.filter(accountId => accountId !== id)
+    }
+    if (resource_type === 'app') {
       updateAppAccessRuleBindings(payload, {
         onSuccess: () => {
           toast.success('Access rule updated successfully')
         },
       })
     }
-    else if (policy.resource_type === 'dataset') {
+    else if (resource_type === 'dataset') {
       updateDatasetAccessRuleBindings(payload, {
         onSuccess: () => {
           toast.success('Access rule updated successfully')
         },
       })
     }
-  }, [policy.id, policy.resource_type, role_ids, updateAppAccessRuleBindings, updateDatasetAccessRuleBindings])
+  }, [account_ids, policyId, resource_type, role_ids, updateAppAccessRuleBindings, updateDatasetAccessRuleBindings])
 
   return (
     <div className={cn('flex items-start gap-2 py-3.5', className)}>
@@ -65,9 +75,19 @@ const AccessRuleRow = ({
         <div className="mt-2 flex flex-wrap items-center gap-1.5">
           {role_ids.map(role => (
             <RoleTag
-              key={role}
-              id={role}
-              label={role}
+              key={role.id}
+              id={role.id}
+              label={role.name}
+              type="role"
+              onRemove={handleRemoveRole}
+            />
+          ))}
+          {account_ids.map(account => (
+            <RoleTag
+              key={account.id}
+              id={account.id}
+              label={account.name}
+              type="account"
               onRemove={handleRemoveRole}
             />
           ))}
diff --git a/web/app/components/header/account-setting/access-rules-page/add-rule-targets-modal/index.tsx b/web/app/components/header/account-setting/access-rules-page/add-rule-targets-modal/index.tsx
index 3a5e3abd4a..717c2ff5c4 100644
--- a/web/app/components/header/account-setting/access-rules-page/add-rule-targets-modal/index.tsx
+++ b/web/app/components/header/account-setting/access-rules-page/add-rule-targets-modal/index.tsx
@@ -35,9 +35,7 @@ type AddRuleTargetsModalBaseProps = {
   onSubmit: (selection: { roleIds: string[], memberIds: string[] }) => void
 }
 
-export type AddRuleTargetsModalProps = AddRuleTargetsModalBaseProps & {
-  open: boolean
-}
+export type AddRuleTargetsModalProps = AddRuleTargetsModalBaseProps
 
 const TABS: Array<{ key: TabKey, label: string }> = [
   { key: 'roles', label: 'ROLES' },
@@ -237,11 +235,9 @@ const AddRuleTargetsModalBody = ({
                               <div className="system-sm-semibold text-text-secondary">
                                 {role.name}
                               </div>
-                              {role.description && (
-                                <div className="mt-0.5 system-xs-regular text-text-tertiary">
-                                  {role.description}
-                                </div>
-                              )}
+                              <div className="mt-0.5 system-xs-regular text-text-tertiary">
+                                {role.description || 'No description'}
+                              </div>
                             </div>
                           </div>
                         </li>
@@ -330,7 +326,6 @@ const AddRuleTargetsModalBody = ({
 }
 
 const AddRuleTargetsModal = ({
-  open,
   ruleName,
   initialRoleIds,
   initialMemberIds,
@@ -339,7 +334,7 @@ const AddRuleTargetsModal = ({
 }: AddRuleTargetsModalProps) => {
   return (
     <Dialog
-      open={open}
+      open
       onOpenChange={(nextOpen) => {
         if (!nextOpen)
           onClose()
diff --git a/web/app/components/header/account-setting/access-rules-page/index.tsx b/web/app/components/header/account-setting/access-rules-page/index.tsx
index 0ce129e7dd..cc4e2ca102 100644
--- a/web/app/components/header/account-setting/access-rules-page/index.tsx
+++ b/web/app/components/header/account-setting/access-rules-page/index.tsx
@@ -130,10 +130,9 @@ const AccessRulesPage = () => {
       </div>
       {addingRule && (
         <AddRuleTargetsModal
-          open
           ruleName={addingRule.policy.name}
-          initialRoleIds={addingRule.role_ids}
-          initialMemberIds={[]}
+          initialRoleIds={addingRule.role_ids.map(role => role.id)}
+          initialMemberIds={addingRule.account_ids.map(account => account.id)}
           onClose={closeAddModal}
           onSubmit={handleAddSubmit}
         />
diff --git a/web/app/components/header/account-setting/access-rules-page/role-tag.tsx b/web/app/components/header/account-setting/access-rules-page/role-tag.tsx
index 5a78abad55..724b0c50bf 100644
--- a/web/app/components/header/account-setting/access-rules-page/role-tag.tsx
+++ b/web/app/components/header/account-setting/access-rules-page/role-tag.tsx
@@ -1,18 +1,21 @@
 'use client'
 
+import type { BindingType } from '@/models/access-control'
 import { cn } from '@langgenius/dify-ui/cn'
 import { memo } from 'react'
 
 export type RoleTagProps = {
   id: string
   label: string
-  onRemove?: (id: string) => void
+  type: BindingType
+  onRemove?: (id: string, type: BindingType) => void
   className?: string
 }
 
 const RoleTag = ({
   id,
   label,
+  type,
   onRemove,
   className,
 }: RoleTagProps) => {
@@ -31,7 +34,7 @@ const RoleTag = ({
           aria-label={`Remove ${label}`}
           onClick={(e) => {
             e.stopPropagation()
-            onRemove(id)
+            onRemove(id, type)
           }}
           className="flex h-4 w-4 items-center justify-center rounded text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
         >
diff --git a/web/models/access-control.ts b/web/models/access-control.ts
index e590694605..97f3e487e5 100644
--- a/web/models/access-control.ts
+++ b/web/models/access-control.ts
@@ -128,7 +128,20 @@ export type UpdateAccessPolicyRequest = {
   permission_keys?: PermissionKey[]
 }
 
+export type BindingType = 'role' | 'account'
+
 export type Bindings = {
+  role_ids: Array<{
+    id: string
+    name: string
+  }>
+  account_ids: Array<{
+    id: string
+    name: string
+  }>
+}
+
+export type BindingsPayload = {
   role_ids: string[]
   account_ids: string[]
 }
diff --git a/web/service/access-control/use-workspace-access-rules.ts b/web/service/access-control/use-workspace-access-rules.ts
index 12f8dd0125..f206090340 100644
--- a/web/service/access-control/use-workspace-access-rules.ts
+++ b/web/service/access-control/use-workspace-access-rules.ts
@@ -1,7 +1,8 @@
 import type {
   AccessPolicy,
   AccessPolicyResourceType,
-  Bindings,
+  AccessPolicyWithBindings,
+  BindingsPayload,
   CreateAccessPolicyRequest,
   GetAppAccessPoliciesResponse,
   GetDatasetAccessPoliciesResponse,
@@ -107,9 +108,9 @@ export const useUpdateAppAccessRuleBindings = () => {
 
   return useMutation({
     mutationKey: [NAME_SPACE, 'update-app-bindings'],
-    mutationFn: (data: Bindings & { id: string }) => {
+    mutationFn: (data: BindingsPayload & { id: string }) => {
       const { id, ...rest } = data
-      return put(`/workspaces/current/rbac/workspace/apps/access-policies/${id}/bindings`, {
+      return put<AccessPolicyWithBindings>(`/workspaces/current/rbac/workspace/apps/access-policies/${id}/bindings`, {
         body: {
           ...rest,
         },
@@ -126,9 +127,9 @@ export const useUpdateDatasetAccessRuleBindings = () => {
 
   return useMutation({
     mutationKey: [NAME_SPACE, 'update-dataset-bindings'],
-    mutationFn: (data: Bindings & { id: string }) => {
+    mutationFn: (data: BindingsPayload & { id: string }) => {
       const { id, ...rest } = data
-      return put(`/workspaces/current/rbac/workspace/datasets/access-policies/${id}/bindings`, {
+      return put<AccessPolicyWithBindings>(`/workspaces/current/rbac/workspace/datasets/access-policies/${id}/bindings`, {
         body: {
           ...rest,
         },