diff --git a/src/__tests__/rbac/group-permissions.test.ts b/src/__tests__/rbac/group-permissions.test.ts
new file mode 100644
index 0000000..9aeeaa7
--- /dev/null
+++ b/src/__tests__/rbac/group-permissions.test.ts
@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest"
+
+import { groupPermissionsByMenu, GLOBAL_GROUP_TITLE } from "@/lib/rbac/group-permissions"
+import type { PermissionDetail } from "@/types/iam/role"
+
+function perm(overrides: Partial<PermissionDetail>): PermissionDetail {
+    return {
+        permissionId: overrides.permissionId ?? "id",
+        permissionCode: overrides.permissionCode ?? "svc.mod.ent.view",
+        permissionName: overrides.permissionName ?? "Name",
+        description: overrides.description ?? "desc",
+        serviceName: overrides.serviceName ?? "svc",
+        moduleName: overrides.moduleName ?? "mod",
+        actionType: overrides.actionType ?? "view",
+        isActive: overrides.isActive ?? true,
+        roleCount: overrides.roleCount ?? 0,
+        menuId: overrides.menuId ?? "",
+        menuTitle: overrides.menuTitle ?? "",
+    } as PermissionDetail
+}
+
+describe("groupPermissionsByMenu", () => {
+    it("groups by menuId and puts the global bucket last", () => {
+        const perms = [
+            perm({ permissionCode: "finance.master.uom.view", menuId: "m1", menuTitle: "UOM" }),
+            perm({ permissionCode: "finance.master.uom.create", menuId: "m1", menuTitle: "UOM" }),
+            perm({ permissionCode: "dashboard.view", menuId: "" }),
+            perm({ permissionCode: "iam.rbac.role.view", menuId: "m2", menuTitle: "Roles" }),
+        ]
+
+        const groups = groupPermissionsByMenu(perms)
+
+        expect(groups).toHaveLength(3)
+        expect(groups[0]).toMatchObject({ menuId: "m1", menuTitle: "UOM" })
+        expect(groups[0].permissions).toHaveLength(2)
+        expect(groups[1]).toMatchObject({ menuId: "m2", menuTitle: "Roles" })
+        // Global bucket is always last.
+        expect(groups[2]).toMatchObject({ menuId: null, menuTitle: GLOBAL_GROUP_TITLE })
+        expect(groups[2].permissions).toHaveLength(1)
+    })
+
+    it("preserves first-seen order of named pages", () => {
+        const perms = [
+            perm({ menuId: "b", menuTitle: "B" }),
+            perm({ menuId: "a", menuTitle: "A" }),
+        ]
+        const groups = groupPermissionsByMenu(perms)
+        expect(groups.map((g) => g.menuId)).toEqual(["b", "a"])
+    })
+
+    it("omits the global bucket when every permission has a page", () => {
+        const groups = groupPermissionsByMenu([perm({ menuId: "m1", menuTitle: "UOM" })])
+        expect(groups).toHaveLength(1)
+        expect(groups.every((g) => g.menuId !== null)).toBe(true)
+    })
+
+    it("treats whitespace-only menuId as global", () => {
+        const groups = groupPermissionsByMenu([perm({ menuId: "   ", menuTitle: "" })])
+        expect(groups).toHaveLength(1)
+        expect(groups[0].menuId).toBeNull()
+    })
+
+    it("falls back to menuId as title when menuTitle is missing", () => {
+        const groups = groupPermissionsByMenu([perm({ menuId: "m9", menuTitle: "" })])
+        expect(groups[0].menuTitle).toBe("m9")
+    })
+})
diff --git a/src/app/(dashboard)/administrator/permissions/catalog/loading.tsx b/src/app/(dashboard)/administrator/permissions/catalog/loading.tsx
new file mode 100644
index 0000000..dead41e
--- /dev/null
+++ b/src/app/(dashboard)/administrator/permissions/catalog/loading.tsx
@@ -0,0 +1,15 @@
+export default function PermissionCatalogLoading() {
+    return (
+        <div className="space-y-6">
+            <div className="space-y-2">
+                <div className="h-4 w-48 animate-pulse rounded bg-muted" />
+                <div className="h-8 w-64 animate-pulse rounded bg-muted" />
+            </div>
+            <div className="space-y-3">
+                {Array.from({ length: 6 }).map((_, i) => (
+                    <div key={i} className="h-16 animate-pulse rounded-md bg-muted" />
+                ))}
+            </div>
+        </div>
+    )
+}
diff --git a/src/app/(dashboard)/administrator/permissions/catalog/page.tsx b/src/app/(dashboard)/administrator/permissions/catalog/page.tsx
new file mode 100644
index 0000000..209721f
--- /dev/null
+++ b/src/app/(dashboard)/administrator/permissions/catalog/page.tsx
@@ -0,0 +1,8 @@
+import { generateMetadata as genMeta } from "@/config/site"
+import PermissionCatalogClient from "./permission-catalog-client"
+
+export const metadata = genMeta("Permission Catalog")
+
+export default function PermissionCatalogPage() {
+    return <PermissionCatalogClient />
+}
diff --git a/src/app/(dashboard)/administrator/permissions/catalog/permission-catalog-client.tsx b/src/app/(dashboard)/administrator/permissions/catalog/permission-catalog-client.tsx
new file mode 100644
index 0000000..4737d74
--- /dev/null
+++ b/src/app/(dashboard)/administrator/permissions/catalog/permission-catalog-client.tsx
@@ -0,0 +1,106 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import Link from "next/link"
+import { Loader2, ArrowLeft } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { PageHeader } from "@/components/common/page-header"
+import { EmptyState } from "@/components/common/empty-state"
+import { DebouncedSearchInput } from "@/components/common/debounced-search-input"
+
+import { useAllPermissions } from "@/hooks/iam/use-permissions"
+import { groupPermissionsByMenu } from "@/lib/rbac/group-permissions"
+import type { PermissionDetail } from "@/types/iam/role"
+
+function matches(perm: PermissionDetail, q: string): boolean {
+    if (!q) return true
+    const needle = q.toLowerCase()
+    return (
+        perm.permissionCode.toLowerCase().includes(needle) ||
+        perm.permissionName.toLowerCase().includes(needle) ||
+        (perm.description?.toLowerCase().includes(needle) ?? false) ||
+        (perm.menuTitle?.toLowerCase().includes(needle) ?? false)
+    )
+}
+
+export default function PermissionCatalogClient() {
+    const [search, setSearch] = useState("")
+    const { data: all, isLoading } = useAllPermissions()
+
+    const groups = useMemo(() => {
+        const filtered = search ? all.filter((p) => matches(p, search)) : all
+        return groupPermissionsByMenu(filtered)
+    }, [all, search])
+
+    return (
+        <div className="space-y-6">
+            <PageHeader
+                title="Permission Catalog"
+                subtitle="Browse every permission grouped by the page it belongs to, with a description of what it does."
+            >
+                <Button variant="outline" asChild>
+                    <Link href="/administrator/permissions">
+                        <ArrowLeft className="mr-2 h-4 w-4" /> Back to management
+                    </Link>
+                </Button>
+            </PageHeader>
+
+            <DebouncedSearchInput
+                value={search}
+                onValueChange={setSearch}
+                placeholder="Search by page, permission name, code, or description…"
+                className="max-w-md"
+            />
+
+            {isLoading ? (
+                <div className="flex items-center justify-center py-12">
+                    <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                </div>
+            ) : groups.length === 0 ? (
+                <EmptyState title="No permissions found" description="Try a different search term." />
+            ) : (
+                <div className="space-y-4">
+                    {groups.map((group) => (
+                        <Card key={group.menuId ?? "__global__"}>
+                            <CardHeader className="flex flex-row items-center justify-between space-y-0">
+                                <CardTitle className="text-sm font-semibold">{group.menuTitle}</CardTitle>
+                                <span className="text-xs text-muted-foreground">
+                                    {group.permissions.length} permission(s)
+                                </span>
+                            </CardHeader>
+                            <CardContent className="space-y-2">
+                                {group.permissions.map((perm) => (
+                                    <div
+                                        key={perm.permissionId}
+                                        className="flex flex-col gap-1 border-b pb-2 last:border-b-0 last:pb-0 sm:flex-row sm:items-start sm:justify-between sm:gap-4"
+                                    >
+                                        <div className="min-w-0 space-y-0.5">
+                                            <div className="flex items-center gap-2">
+                                                <span className="text-sm font-medium">{perm.permissionName}</span>
+                                                <Badge variant="secondary" className="font-mono text-[10px] font-normal">
+                                                    {perm.actionType}
+                                                </Badge>
+                                            </div>
+                                            <p className="font-mono text-xs text-muted-foreground">
+                                                {perm.permissionCode}
+                                            </p>
+                                            {perm.description ? (
+                                                <p className="text-xs text-muted-foreground">{perm.description}</p>
+                                            ) : null}
+                                        </div>
+                                        <span className="shrink-0 text-xs text-muted-foreground">
+                                            {perm.roleCount} role(s)
+                                        </span>
+                                    </div>
+                                ))}
+                            </CardContent>
+                        </Card>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
diff --git a/src/app/(dashboard)/administrator/permissions/permissions-page-client.tsx b/src/app/(dashboard)/administrator/permissions/permissions-page-client.tsx
index c9de349..1099722 100644
--- a/src/app/(dashboard)/administrator/permissions/permissions-page-client.tsx
+++ b/src/app/(dashboard)/administrator/permissions/permissions-page-client.tsx
@@ -1,7 +1,8 @@
 "use client"
 
 import { useState, Suspense } from "react"
-import { Plus, Loader2 } from "lucide-react"
+import Link from "next/link"
+import { Plus, Loader2, BookOpen } from "lucide-react"
 
 import {
     Card,
@@ -75,7 +76,13 @@ function PermissionsPageContent() {
 
     return (
         <>
-            <PageHeader title="Permission Management" subtitle="Manage permissions for role-based access control." />
+            <PageHeader title="Permission Management" subtitle="Manage permissions for role-based access control.">
+                <Button variant="outline" asChild>
+                    <Link href="/administrator/permissions/catalog">
+                        <BookOpen className="mr-2 h-4 w-4" /> View catalog
+                    </Link>
+                </Button>
+            </PageHeader>
 
             <Card>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-4">
diff --git a/src/app/(dashboard)/administrator/users/users-page-client.tsx b/src/app/(dashboard)/administrator/users/users-page-client.tsx
index f4ecd54..745c998 100644
--- a/src/app/(dashboard)/administrator/users/users-page-client.tsx
+++ b/src/app/(dashboard)/administrator/users/users-page-client.tsx
@@ -20,6 +20,7 @@ import {
     UserTable,
     UserPagination,
     UserRoleDialog,
+    UserPermissionDialog,
 } from "@/components/settings/users"
 
 import { useUsers } from "@/hooks/iam/use-users"
@@ -47,6 +48,7 @@ function UsersPageContent() {
     const [isFormOpen, setIsFormOpen] = useState(false)
     const [isDeleteOpen, setIsDeleteOpen] = useState(false)
     const [isRoleDialogOpen, setIsRoleDialogOpen] = useState(false)
+    const [isPermissionDialogOpen, setIsPermissionDialogOpen] = useState(false)
     const [selectedUser, setSelectedUser] = useState<UserWithDetail | null>(null)
 
     const { data, isLoading } = useUsers(filters)
@@ -71,6 +73,11 @@ function UsersPageContent() {
         setIsRoleDialogOpen(true)
     }
 
+    const handleManagePermissions = (user: UserWithDetail) => {
+        setSelectedUser(user)
+        setIsPermissionDialogOpen(true)
+    }
+
     const handlePageChange = (page: number) => {
         setFilters({ ...filters, page })
     }
@@ -104,6 +111,7 @@ function UsersPageContent() {
                         onEdit={handleEdit}
                         onDelete={handleDelete}
                         onManageRoles={handleManageRoles}
+                        onManagePermissions={handleManagePermissions}
                     />
                     <UserPagination
                         pagination={data?.pagination}
@@ -128,6 +136,11 @@ function UsersPageContent() {
                 onOpenChange={setIsRoleDialogOpen}
                 user={selectedUser}
             />
+            <UserPermissionDialog
+                open={isPermissionDialogOpen}
+                onOpenChange={setIsPermissionDialogOpen}
+                user={selectedUser}
+            />
         </>
     )
 }
diff --git a/src/app/(dashboard)/finance/product-requests/product-requests-page-client.tsx b/src/app/(dashboard)/finance/product-requests/product-requests-page-client.tsx
index 70daf77..fa68707 100644
--- a/src/app/(dashboard)/finance/product-requests/product-requests-page-client.tsx
+++ b/src/app/(dashboard)/finance/product-requests/product-requests-page-client.tsx
@@ -32,6 +32,7 @@ import { useCostProductRequestCounts, useCostProductRequests } from "@/hooks/fin
 import { useUrlState } from "@/lib/hooks"
 import { getStatusDisplay } from "@/lib/ui/status-colors"
 import { usePermissionContext } from "@/providers/permission-provider"
+import { PERMISSIONS } from "@/lib/rbac/permissions"
 import type { CostProductRequest, ListCostProductRequestsParams, RequestStatus } from "@/types/finance/cost-product-request"
 
 const STATUSES: RequestStatus[] = [
@@ -52,7 +53,7 @@ const PAGE_SIZE_OPTIONS = [10, 25, 50, 100]
 export default function ProductRequestsPageClient() {
   const router = useRouter()
   const { hasPermission } = usePermissionContext()
-  const canCreate = hasPermission("finance.product.request.create")
+  const canCreate = hasPermission(PERMISSIONS.ProductRequests.requestCreate)
 
   const [filters, setFilters] = useUrlState<ListCostProductRequestsParams>({ defaultValues: defaultFilters })
   const [formOpen, setFormOpen] = useState(false)
diff --git a/src/app/api/v1/iam/permissions/route.ts b/src/app/api/v1/iam/permissions/route.ts
index e82d339..84be892 100644
--- a/src/app/api/v1/iam/permissions/route.ts
+++ b/src/app/api/v1/iam/permissions/route.ts
@@ -19,6 +19,7 @@ export async function GET(request: NextRequest) {
                 serviceName: searchParams.get("serviceName") || searchParams.get("service_name") || "",
                 moduleName: searchParams.get("moduleName") || searchParams.get("module_name") || "",
                 actionType: searchParams.get("actionType") || searchParams.get("action_type") || "",
+                menuId: searchParams.get("menuId") || searchParams.get("menu_id") || "",
                 sortBy: searchParams.get("sortBy") || searchParams.get("sort_by") || "",
                 sortOrder: searchParams.get("sortOrder") || searchParams.get("sort_order") || "",
             },
diff --git a/src/app/api/v1/iam/users/[userId]/permissions/remove/route.ts b/src/app/api/v1/iam/users/[userId]/permissions/remove/route.ts
new file mode 100644
index 0000000..dc0ddf8
--- /dev/null
+++ b/src/app/api/v1/iam/users/[userId]/permissions/remove/route.ts
@@ -0,0 +1,33 @@
+// IAM User Permissions - Remove direct permissions from a user
+
+import { NextRequest, NextResponse } from "next/server"
+import { getUserClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+type RouteContext = { params: Promise<{ userId: string }> }
+
+// POST /api/v1/iam/users/[userId]/permissions/remove
+export async function POST(request: NextRequest, context: RouteContext) {
+    try {
+        const { userId } = await context.params
+        const body = await request.json()
+        const metadata = createMetadataFromRequest(request)
+        const client = getUserClient()
+        const response = await client.removeUserPermissions({ userId, permissionIds: body.permissionIds }, metadata)
+
+        return NextResponse.json({ base: response.base })
+    } catch (error) {
+        if (isGrpcError(error)) return handleGrpcError(error)
+        console.error("Error removing permissions:", error)
+        return NextResponse.json(
+            {
+                base: {
+                    isSuccess: false,
+                    statusCode: "500",
+                    message: "Failed to remove permissions",
+                    validationErrors: [],
+                },
+            },
+            { status: 500 }
+        )
+    }
+}
diff --git a/src/app/api/v1/iam/users/[userId]/permissions/route.ts b/src/app/api/v1/iam/users/[userId]/permissions/route.ts
new file mode 100644
index 0000000..0df0200
--- /dev/null
+++ b/src/app/api/v1/iam/users/[userId]/permissions/route.ts
@@ -0,0 +1,33 @@
+// IAM User Permissions - Assign direct permissions to a user
+
+import { NextRequest, NextResponse } from "next/server"
+import { getUserClient, createMetadataFromRequest, isGrpcError, handleGrpcError } from "@/lib/grpc"
+
+type RouteContext = { params: Promise<{ userId: string }> }
+
+// POST /api/v1/iam/users/[userId]/permissions - Assign direct permissions
+export async function POST(request: NextRequest, context: RouteContext) {
+    try {
+        const { userId } = await context.params
+        const body = await request.json()
+        const metadata = createMetadataFromRequest(request)
+        const client = getUserClient()
+        const response = await client.assignUserPermissions({ userId, permissionIds: body.permissionIds }, metadata)
+
+        return NextResponse.json({ base: response.base })
+    } catch (error) {
+        if (isGrpcError(error)) return handleGrpcError(error)
+        console.error("Error assigning permissions:", error)
+        return NextResponse.json(
+            {
+                base: {
+                    isSuccess: false,
+                    statusCode: "500",
+                    message: "Failed to assign permissions",
+                    validationErrors: [],
+                },
+            },
+            { status: 500 }
+        )
+    }
+}
diff --git a/src/components/iam/menus/menu-permission-dialog.tsx b/src/components/iam/menus/menu-permission-dialog.tsx
index da9faef..cedd461 100644
--- a/src/components/iam/menus/menu-permission-dialog.tsx
+++ b/src/components/iam/menus/menu-permission-dialog.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Loader2, Search } from "lucide-react"
+import { Loader2 } from "lucide-react"
 
 import {
     Dialog,
@@ -12,18 +12,15 @@ import {
     DialogTitle,
 } from "@/components/ui/dialog"
 import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Checkbox } from "@/components/ui/checkbox"
-import { Badge } from "@/components/ui/badge"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import { Separator } from "@/components/ui/separator"
 
 import {
     useMenuPermissions,
     useAssignMenuPermissions,
     useRemoveMenuPermissions,
 } from "@/hooks/iam/use-menu"
-import { usePermissions } from "@/hooks/iam/use-permissions"
+import { useAllPermissions } from "@/hooks/iam/use-permissions"
+import { PermissionPicker } from "@/components/settings/rbac/permission-picker"
 import type { NormalizedMenuWithChildren } from "@/types/iam/menu"
 import type { PermissionDetail } from "@/types/generated/iam/v1/role"
 
@@ -38,48 +35,31 @@ export function MenuPermissionDialog({
     onOpenChange,
     menu,
 }: MenuPermissionDialogProps) {
-    const [search, setSearch] = useState("")
     const [selected, setSelected] = useState<Set<string>>(new Set())
 
     const { data: menuPerms, isLoading: isLoadingPerms } = useMenuPermissions(menu?.menuId ?? "")
-    const { data: allPermsData, isLoading: isLoadingAll } = usePermissions({ pageSize: 100 })
+    const { data: allPermissions, isLoading: isLoadingAll } = useAllPermissions()
     const assign = useAssignMenuPermissions()
-    const remove  = useRemoveMenuPermissions()
+    const remove = useRemoveMenuPermissions()
 
-    const allPermissions: PermissionDetail[] = (allPermsData?.data ?? []) as PermissionDetail[]
     const currentPermIds: string[] = ((menuPerms as PermissionDetail[]) ?? []).map((p) => p.permissionId)
 
-    // Sync selection to current menu permissions when dialog opens
+    // Sync selection to current menu permissions when dialog opens.
     useEffect(() => {
-        if (open && currentPermIds.length >= 0) {
+        if (open) {
             // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: sync selection state when dialog opens
             setSelected(new Set(currentPermIds))
         }
     }, [open, JSON.stringify(currentPermIds)]) // eslint-disable-line react-hooks/exhaustive-deps
 
-    const filtered = allPermissions.filter((p) =>
-        !search ||
-        p.permissionCode.toLowerCase().includes(search.toLowerCase()) ||
-        p.permissionName.toLowerCase().includes(search.toLowerCase())
-    )
-
     const isLoading = isLoadingPerms || isLoadingAll
     const isPending = assign.isPending || remove.isPending
 
-    function toggle(permId: string) {
-        setSelected((prev) => {
-            const next = new Set(prev)
-            if (next.has(permId)) next.delete(permId)
-            else next.add(permId)
-            return next
-        })
-    }
-
     async function handleSave() {
         if (!menu) return
 
         const currentSet = new Set(currentPermIds)
-        const toAdd    = [...selected].filter((id) => !currentSet.has(id))
+        const toAdd = [...selected].filter((id) => !currentSet.has(id))
         const toRemove = currentPermIds.filter((id) => !selected.has(id))
 
         if (toAdd.length > 0) {
@@ -93,86 +73,36 @@ export function MenuPermissionDialog({
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-lg">
+            <DialogContent className="sm:max-w-[640px]">
                 <DialogHeader>
                     <DialogTitle>Manage Permissions</DialogTitle>
                     <DialogDescription>
-                        Assign required permissions for{" "}
-                        <strong>&quot;{menu?.menuTitle}&quot;</strong>. Users must have at least
-                        one of these permissions to see this menu.
+                        Assign required permissions for <strong>&quot;{menu?.menuTitle}&quot;</strong>. Users must
+                        have at least one of these permissions to see this menu. Permissions are grouped by the page
+                        they belong to.
                     </DialogDescription>
                 </DialogHeader>
 
-                <div className="space-y-3">
-                    <div className="relative">
-                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
-                        <Input
-                            className="pl-8"
-                            placeholder="Search permissions..."
-                            value={search}
-                            onChange={(e) => setSearch(e.target.value)}
-                        />
+                {isLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
                     </div>
-
-                    {selected.size > 0 && (
-                        <div className="flex flex-wrap gap-1">
-                            {[...selected].map((id) => {
-                                const perm = allPermissions.find((p) => p.permissionId === id)
-                                return perm ? (
-                                    <Badge
-                                        key={id}
-                                        variant="secondary"
-                                        className="text-xs cursor-pointer"
-                                        onClick={() => toggle(id)}
-                                    >
-                                        {perm.permissionCode} ×
-                                    </Badge>
-                                ) : null
-                            })}
-                        </div>
-                    )}
-
-                    <Separator />
-
-                    <ScrollArea className="h-64 pr-2">
-                        {isLoading ? (
-                            <div className="flex h-32 items-center justify-center">
-                                <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-                            </div>
-                        ) : filtered.length === 0 ? (
-                            <p className="py-4 text-center text-sm text-muted-foreground">
-                                No permissions found
-                            </p>
-                        ) : (
-                            <div className="space-y-1">
-                                {filtered.map((perm) => (
-                                    <div
-                                        key={perm.permissionId}
-                                        className="flex cursor-pointer items-start gap-3 rounded-md px-2 py-1.5 hover:bg-muted/50"
-                                        onClick={() => toggle(perm.permissionId)}
-                                    >
-                                        <Checkbox
-                                            checked={selected.has(perm.permissionId)}
-                                            onCheckedChange={() => toggle(perm.permissionId)}
-                                            className="mt-0.5 shrink-0"
-                                        />
-                                        <div className="min-w-0">
-                                            <p className="text-sm font-mono leading-none">
-                                                {perm.permissionCode}
-                                            </p>
-                                            <p className="mt-0.5 text-xs text-muted-foreground">
-                                                {perm.permissionName}
-                                            </p>
-                                        </div>
-                                    </div>
-                                ))}
-                            </div>
-                        )}
+                ) : (
+                    <ScrollArea className="max-h-[500px] pr-4">
+                        <PermissionPicker
+                            permissions={allPermissions}
+                            value={selected}
+                            onChange={setSelected}
+                            disabled={isPending}
+                        />
                     </ScrollArea>
-                </div>
+                )}
 
                 <DialogFooter>
-                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                    <div className="mr-auto flex items-center gap-2 text-sm text-muted-foreground">
+                        {selected.size} permission(s) selected
+                    </div>
+                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
                         Cancel
                     </Button>
                     <Button onClick={handleSave} disabled={isPending}>
diff --git a/src/components/settings/permissions/permission-form-dialog.tsx b/src/components/settings/permissions/permission-form-dialog.tsx
index 2529fdb..270fd51 100644
--- a/src/components/settings/permissions/permission-form-dialog.tsx
+++ b/src/components/settings/permissions/permission-form-dialog.tsx
@@ -37,6 +37,7 @@ import {
 
 import type { PermissionDetail } from "@/types/iam/role"
 import { useCreatePermission, useUpdatePermission } from "@/hooks/iam/use-permissions"
+import { MenuCombobox } from "@/components/settings/rbac/menu-combobox"
 
 const ACTION_TYPES = ["view", "create", "update", "delete", "export", "import"] as const
 
@@ -50,10 +51,11 @@ const permissionFormSchema = z.object({
             "Format: service.module.entity.action (lowercase, dots)"
         ),
     permissionName: z.string().min(1, "Name is required").max(100, "Maximum 100 characters"),
-    description: z.string().max(500, "Maximum 500 characters"),
+    description: z.string().min(1, "Description is required").max(500, "Maximum 500 characters"),
     serviceName: z.string().min(1, "Service is required").max(50, "Maximum 50 characters"),
     moduleName: z.string().min(1, "Module is required").max(50, "Maximum 50 characters"),
     actionType: z.enum(ACTION_TYPES, { message: "Action type is required" }),
+    menuId: z.string(),
     isActive: z.boolean(),
 })
 
@@ -79,6 +81,7 @@ export function PermissionFormDialog({ open, onOpenChange, permission }: Permiss
             serviceName: "",
             moduleName: "",
             actionType: "view",
+            menuId: "",
             isActive: true,
         },
     })
@@ -93,6 +96,7 @@ export function PermissionFormDialog({ open, onOpenChange, permission }: Permiss
                     serviceName: permission.serviceName || "",
                     moduleName: permission.moduleName || "",
                     actionType: (permission.actionType as typeof ACTION_TYPES[number]) || "view",
+                    menuId: permission.menuId || "",
                     isActive: permission.isActive ?? true,
                 })
             } else {
@@ -103,6 +107,7 @@ export function PermissionFormDialog({ open, onOpenChange, permission }: Permiss
                     serviceName: "",
                     moduleName: "",
                     actionType: "view",
+                    menuId: "",
                     isActive: true,
                 })
             }
@@ -139,6 +144,7 @@ export function PermissionFormDialog({ open, onOpenChange, permission }: Permiss
                         permissionName: values.permissionName,
                         description: values.description || "",
                         isActive: values.isActive,
+                        menuId: values.menuId,
                     },
                 })
             } else {
@@ -149,6 +155,7 @@ export function PermissionFormDialog({ open, onOpenChange, permission }: Permiss
                     serviceName: values.serviceName,
                     moduleName: values.moduleName,
                     actionType: values.actionType,
+                    menuId: values.menuId,
                 })
             }
             onOpenChange(false)
@@ -292,16 +299,43 @@ export function PermissionFormDialog({ open, onOpenChange, permission }: Permiss
                             name="description"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>Description</FormLabel>
+                                    <FormLabel>
+                                        Description <span className="text-destructive">*</span>
+                                    </FormLabel>
                                     <FormControl>
                                         <Textarea
-                                            placeholder="Optional description..."
+                                            placeholder="Explain what this permission allows, e.g. 'View the Unit of Measure master list'"
                                             {...field}
                                             value={field.value || ""}
                                             disabled={isPending}
                                             rows={2}
                                         />
                                     </FormControl>
+                                    <FormDescription>
+                                        Shown to admins when assigning this permission — describe what it does.
+                                    </FormDescription>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="menuId"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>Page / Menu</FormLabel>
+                                    <FormControl>
+                                        <MenuCombobox
+                                            value={field.value || ""}
+                                            onChange={field.onChange}
+                                            disabled={isPending}
+                                        />
+                                    </FormControl>
+                                    <FormDescription>
+                                        The page this permission belongs to. Choose &quot;Global / none&quot; for
+                                        cross-page permissions.
+                                    </FormDescription>
                                     <FormMessage />
                                 </FormItem>
                             )}
diff --git a/src/components/settings/rbac/menu-combobox.tsx b/src/components/settings/rbac/menu-combobox.tsx
new file mode 100644
index 0000000..34739ec
--- /dev/null
+++ b/src/components/settings/rbac/menu-combobox.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import { useState } from "react"
+import { Check, ChevronsUpDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+} from "@/components/ui/command"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { useMenus } from "@/hooks/iam/use-menu"
+
+interface MenuComboboxProps {
+    value: string
+    onChange: (menuId: string) => void
+    disabled?: boolean
+}
+
+// GLOBAL_OPTION represents a permission that is not scoped to any single page.
+const GLOBAL_VALUE = "__global__"
+
+/**
+ * MenuCombobox is a searchable selector for the owning page/menu of a permission.
+ * It never exposes raw UUIDs to the user — it shows the menu title (and URL when present).
+ * Selecting "Global / none" clears the association (empty menuId).
+ */
+export function MenuCombobox({ value, onChange, disabled }: MenuComboboxProps) {
+    const [open, setOpen] = useState(false)
+    // page_size is capped at 100 by proto validation; 100 covers the current menu set.
+    // sort_by must be one of the proto-allowed values (snake_case): "", code, title, sort_order, created_at.
+    const { data, isLoading } = useMenus({ page: 1, pageSize: 100, sortBy: "sort_order", sortOrder: "asc" })
+    const menus = data?.data ?? []
+
+    const selected = menus.find((m) => m.menuId === value)
+    const label = value === "" ? "Global / none" : selected ? selected.menuTitle : "Select page…"
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    type="button"
+                    variant="outline"
+                    role="combobox"
+                    aria-expanded={open}
+                    disabled={disabled}
+                    className="w-full justify-between font-normal"
+                >
+                    <span className="truncate">{label}</span>
+                    <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-[--radix-popover-trigger-width] p-0" align="start">
+                <Command
+                    filter={(itemValue, search) => (itemValue.toLowerCase().includes(search.toLowerCase()) ? 1 : 0)}
+                >
+                    <CommandInput placeholder="Search page…" />
+                    <CommandList>
+                        <CommandEmpty>{isLoading ? "Loading…" : "No page found."}</CommandEmpty>
+                        <CommandGroup>
+                            <CommandItem
+                                value="Global / none"
+                                onSelect={() => {
+                                    onChange("")
+                                    setOpen(false)
+                                }}
+                            >
+                                <Check className={cn("mr-2 h-4 w-4", value === "" ? "opacity-100" : "opacity-0")} />
+                                <span className="text-muted-foreground">Global / none (no owning page)</span>
+                            </CommandItem>
+                            {menus.map((menu) => (
+                                <CommandItem
+                                    key={menu.menuId}
+                                    value={`${menu.menuTitle} ${menu.menuUrl ?? ""} ${menu.menuCode}`}
+                                    onSelect={() => {
+                                        onChange(menu.menuId)
+                                        setOpen(false)
+                                    }}
+                                >
+                                    <Check
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            value === menu.menuId ? "opacity-100" : "opacity-0"
+                                        )}
+                                    />
+                                    <span className="flex min-w-0 flex-col">
+                                        <span className="truncate">{menu.menuTitle}</span>
+                                        {menu.menuUrl ? (
+                                            <span className="truncate font-mono text-xs text-muted-foreground">
+                                                {menu.menuUrl}
+                                            </span>
+                                        ) : null}
+                                    </span>
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+export { GLOBAL_VALUE }
diff --git a/src/components/settings/rbac/permission-picker.tsx b/src/components/settings/rbac/permission-picker.tsx
new file mode 100644
index 0000000..12260f9
--- /dev/null
+++ b/src/components/settings/rbac/permission-picker.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { ChevronDown, ChevronRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Checkbox } from "@/components/ui/checkbox"
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { groupPermissionsByMenu } from "@/lib/rbac/group-permissions"
+import type { PermissionDetail } from "@/types/iam/role"
+
+interface PermissionPickerProps {
+    permissions: PermissionDetail[]
+    // Selected permission IDs.
+    value: Set<string>
+    onChange: (next: Set<string>) => void
+    // Permission IDs that are inherited (e.g. from roles) — shown checked and disabled.
+    readOnlyIds?: Set<string>
+    disabled?: boolean
+}
+
+/**
+ * PermissionPicker renders permissions grouped by their owning page, with a
+ * per-page select-all and a description under each permission. Shared by the
+ * role assignment dialog and the direct user-permission dialog.
+ */
+export function PermissionPicker({
+    permissions,
+    value,
+    onChange,
+    readOnlyIds,
+    disabled,
+}: PermissionPickerProps) {
+    const groups = useMemo(() => groupPermissionsByMenu(permissions), [permissions])
+
+    if (permissions.length === 0) {
+        return <p className="py-6 text-center text-sm text-muted-foreground">No permissions available.</p>
+    }
+
+    return (
+        <div className="space-y-2">
+            {groups.map((group) => (
+                <PermissionGroupBlock
+                    key={group.menuId ?? "__global__"}
+                    title={group.menuTitle}
+                    groupPermissions={group.permissions}
+                    value={value}
+                    onChange={onChange}
+                    readOnlyIds={readOnlyIds}
+                    disabled={disabled}
+                />
+            ))}
+        </div>
+    )
+}
+
+interface GroupBlockProps {
+    title: string
+    groupPermissions: PermissionDetail[]
+    value: Set<string>
+    onChange: (next: Set<string>) => void
+    readOnlyIds?: Set<string>
+    disabled?: boolean
+}
+
+function PermissionGroupBlock({
+    title,
+    groupPermissions,
+    value,
+    onChange,
+    readOnlyIds,
+    disabled,
+}: GroupBlockProps) {
+    const [open, setOpen] = useState(true)
+
+    // Toggleable IDs exclude read-only (inherited) ones.
+    const toggleableIds = groupPermissions
+        .map((p) => p.permissionId)
+        .filter((id) => !readOnlyIds?.has(id))
+    const selectedCount = toggleableIds.filter((id) => value.has(id)).length
+    const allSelected = toggleableIds.length > 0 && selectedCount === toggleableIds.length
+    const someSelected = selectedCount > 0 && !allSelected
+    const groupState: boolean | "indeterminate" = someSelected ? "indeterminate" : allSelected
+
+    function toggleGroup(next: boolean) {
+        const set = new Set(value)
+        for (const id of toggleableIds) {
+            if (next) set.add(id)
+            else set.delete(id)
+        }
+        onChange(set)
+    }
+
+    function togglePermission(id: string, next: boolean) {
+        const set = new Set(value)
+        if (next) set.add(id)
+        else set.delete(id)
+        onChange(set)
+    }
+
+    return (
+        <Collapsible open={open} onOpenChange={setOpen} className="rounded-md border">
+            <div className="flex items-center gap-2 px-3 py-2">
+                <Checkbox
+                    checked={groupState}
+                    disabled={disabled || toggleableIds.length === 0}
+                    onCheckedChange={(c) => toggleGroup(c === true)}
+                    aria-label={`Select all in ${title}`}
+                />
+                <CollapsibleTrigger className="flex flex-1 items-center justify-between gap-2 text-left">
+                    <span className="text-sm font-semibold">{title}</span>
+                    <span className="flex items-center gap-2 text-xs text-muted-foreground">
+                        {selectedCount}/{toggleableIds.length}
+                        {open ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                    </span>
+                </CollapsibleTrigger>
+            </div>
+            <CollapsibleContent>
+                <div className="divide-y border-t">
+                    {groupPermissions.map((perm) => {
+                        const inherited = readOnlyIds?.has(perm.permissionId) ?? false
+                        const checked = inherited || value.has(perm.permissionId)
+                        return (
+                            <label
+                                key={perm.permissionId}
+                                className={cn(
+                                    "flex cursor-pointer items-start gap-3 px-3 py-2",
+                                    inherited && "cursor-not-allowed opacity-70"
+                                )}
+                            >
+                                <Checkbox
+                                    checked={checked}
+                                    disabled={disabled || inherited}
+                                    onCheckedChange={(c) => togglePermission(perm.permissionId, c === true)}
+                                    className="mt-0.5"
+                                />
+                                <span className="flex min-w-0 flex-col">
+                                    <span className="flex items-center gap-2">
+                                        <span className="text-sm">{perm.permissionName}</span>
+                                        <span className="font-mono text-xs text-muted-foreground">
+                                            {perm.actionType}
+                                        </span>
+                                        {inherited && (
+                                            <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground">
+                                                from role
+                                            </span>
+                                        )}
+                                    </span>
+                                    {perm.description ? (
+                                        <span className="text-xs text-muted-foreground">{perm.description}</span>
+                                    ) : null}
+                                </span>
+                            </label>
+                        )
+                    })}
+                </div>
+            </CollapsibleContent>
+        </Collapsible>
+    )
+}
diff --git a/src/components/settings/roles/role-permissions-dialog.tsx b/src/components/settings/roles/role-permissions-dialog.tsx
index 68634cc..c5bb988 100644
--- a/src/components/settings/roles/role-permissions-dialog.tsx
+++ b/src/components/settings/roles/role-permissions-dialog.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import { Loader2, Check, ChevronRight } from "lucide-react"
+import { Loader2 } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
 import {
@@ -12,17 +12,12 @@ import {
     DialogHeader,
     DialogTitle,
 } from "@/components/ui/dialog"
-import { Checkbox } from "@/components/ui/checkbox"
 import { ScrollArea } from "@/components/ui/scroll-area"
-import {
-    Collapsible,
-    CollapsibleContent,
-    CollapsibleTrigger,
-} from "@/components/ui/collapsible"
 
 import type { Role } from "@/types/iam/role"
-import { usePermissionsByService } from "@/hooks/iam/use-permissions"
+import { useAllPermissions } from "@/hooks/iam/use-permissions"
 import { useRolePermissions, useAssignRolePermissions, useRemoveRolePermissions } from "@/hooks/iam/use-roles"
+import { PermissionPicker } from "@/components/settings/rbac/permission-picker"
 
 interface RolePermissionsDialogProps {
     open: boolean
@@ -33,69 +28,23 @@ interface RolePermissionsDialogProps {
 function RolePermissionsDialog({ open, onOpenChange, role }: RolePermissionsDialogProps) {
     const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
     const [originalIds, setOriginalIds] = useState<Set<string>>(new Set())
-    const [expandedServices, setExpandedServices] = useState<Set<string>>(new Set())
 
     const roleId = role?.roleId || ""
-    const { data: permissionsData, isLoading: permissionsLoading } = usePermissionsByService()
+    const { data: permissions, isLoading: permissionsLoading } = useAllPermissions()
     const { data: rolePermsData, isLoading: rolePermsLoading } = useRolePermissions(roleId)
     const assignMutation = useAssignRolePermissions()
     const removeMutation = useRemoveRolePermissions()
 
-    // Populate from existing role permissions
+    // Populate selection from the role's existing permissions when the dialog opens.
     useEffect(() => {
         if (open && rolePermsData?.data) {
             const ids = new Set((rolePermsData.data || []).map((p) => p.permissionId))
-            // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: sync state from fetched data when dialog opens
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: sync selection + baseline from fetched data when dialog opens
             setSelectedIds(ids)
             setOriginalIds(ids)
         }
     }, [open, rolePermsData])
 
-    // Expand all services by default
-    useEffect(() => {
-        if (permissionsData?.data) {
-            // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: sync expanded state from fetched data
-            setExpandedServices(new Set(permissionsData.data.map((s) => s.serviceName)))
-        }
-    }, [permissionsData])
-
-    const toggleService = (serviceName: string) => {
-        setExpandedServices((prev) => {
-            const next = new Set(prev)
-            if (next.has(serviceName)) {
-                next.delete(serviceName)
-            } else {
-                next.add(serviceName)
-            }
-            return next
-        })
-    }
-
-    const togglePermission = (permissionId: string) => {
-        setSelectedIds((prev) => {
-            const next = new Set(prev)
-            if (next.has(permissionId)) {
-                next.delete(permissionId)
-            } else {
-                next.add(permissionId)
-            }
-            return next
-        })
-    }
-
-    const toggleModule = (modulePermissionIds: string[]) => {
-        setSelectedIds((prev) => {
-            const next = new Set(prev)
-            const allSelected = modulePermissionIds.every((id) => next.has(id))
-            if (allSelected) {
-                modulePermissionIds.forEach((id) => next.delete(id))
-            } else {
-                modulePermissionIds.forEach((id) => next.add(id))
-            }
-            return next
-        })
-    }
-
     const handleSave = async () => {
         if (!roleId) return
 
@@ -117,7 +66,6 @@ function RolePermissionsDialog({ open, onOpenChange, role }: RolePermissionsDial
 
     const isPending = assignMutation.isPending || removeMutation.isPending
     const isLoading = permissionsLoading || rolePermsLoading
-    const services = permissionsData?.data || []
     const hasChanges = (() => {
         if (selectedIds.size !== originalIds.size) return true
         for (const id of selectedIds) {
@@ -128,11 +76,12 @@ function RolePermissionsDialog({ open, onOpenChange, role }: RolePermissionsDial
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-[600px]">
+            <DialogContent className="sm:max-w-[640px]">
                 <DialogHeader>
                     <DialogTitle>Manage Permissions</DialogTitle>
                     <DialogDescription>
-                        Assign or remove permissions for role: <strong>{role?.roleName}</strong> ({role?.roleCode})
+                        Assign or remove permissions for role: <strong>{role?.roleName}</strong> ({role?.roleCode}).
+                        Permissions are grouped by the page they belong to.
                     </DialogDescription>
                 </DialogHeader>
 
@@ -142,79 +91,17 @@ function RolePermissionsDialog({ open, onOpenChange, role }: RolePermissionsDial
                     </div>
                 ) : (
                     <ScrollArea className="max-h-[500px] pr-4">
-                        <div className="space-y-3">
-                            {services.map((service) => (
-                                <Collapsible
-                                    key={service.serviceName}
-                                    open={expandedServices.has(service.serviceName)}
-                                    onOpenChange={() => toggleService(service.serviceName)}
-                                >
-                                    <CollapsibleTrigger className="flex items-center gap-2 w-full p-2 rounded-lg hover:bg-accent/50 transition-colors">
-                                        <ChevronRight className={`h-4 w-4 transition-transform ${expandedServices.has(service.serviceName) ? "rotate-90" : ""}`} />
-                                        <span className="font-semibold text-sm uppercase tracking-wide">{service.serviceName}</span>
-                                    </CollapsibleTrigger>
-                                    <CollapsibleContent className="pl-6 space-y-2 mt-1">
-                                        {(service.modules || []).map((module) => {
-                                            const modulePermIds = (module.permissions || []).map((p) => p.permissionId)
-                                            const allSelected = modulePermIds.every((id) => selectedIds.has(id))
-                                            const someSelected = modulePermIds.some((id) => selectedIds.has(id))
-
-                                            return (
-                                                <div key={module.moduleName} className="space-y-1">
-                                                    <label className="flex items-center gap-2 p-1.5 rounded cursor-pointer hover:bg-accent/30">
-                                                        <Checkbox
-                                                            checked={allSelected ? true : (someSelected ? "indeterminate" : false)}
-                                                            onCheckedChange={() => toggleModule(modulePermIds)}
-                                                            disabled={isPending}
-                                                        />
-                                                        <span className="text-sm font-medium capitalize">{module.moduleName}</span>
-                                                        <span className="text-xs text-muted-foreground">
-                                                            ({modulePermIds.filter((id) => selectedIds.has(id)).length}/{modulePermIds.length})
-                                                        </span>
-                                                    </label>
-                                                    <div className="grid grid-cols-2 gap-1 pl-6">
-                                                        {(module.permissions || []).map((perm) => {
-                                                            // Extract entity from permission code (3rd segment: service.module.entity.action)
-                                                            const codeParts = (perm.permissionCode || "").split(".")
-                                                            const entity = codeParts.length >= 3 ? codeParts[2] : ""
-                                                            // Show "entity > action" to distinguish permissions with same action under same module
-                                                            const label = entity && entity !== module.moduleName
-                                                                ? `${entity} : ${perm.actionType}`
-                                                                : perm.actionType
-
-                                                            return (
-                                                                <label
-                                                                    key={perm.permissionId}
-                                                                    className="flex items-center gap-2 p-1 rounded cursor-pointer hover:bg-accent/30 text-sm"
-                                                                >
-                                                                    <Checkbox
-                                                                        checked={selectedIds.has(perm.permissionId)}
-                                                                        onCheckedChange={() => togglePermission(perm.permissionId)}
-                                                                        disabled={isPending}
-                                                                    />
-                                                                    <span className="capitalize">{label}</span>
-                                                                    {selectedIds.has(perm.permissionId) && (
-                                                                        <Check className="h-3 w-3 text-primary ml-auto" />
-                                                                    )}
-                                                                </label>
-                                                            )
-                                                        })}
-                                                    </div>
-                                                </div>
-                                            )
-                                        })}
-                                    </CollapsibleContent>
-                                </Collapsible>
-                            ))}
-                            {services.length === 0 && (
-                                <p className="text-center text-muted-foreground py-4">No permissions available</p>
-                            )}
-                        </div>
+                        <PermissionPicker
+                            permissions={permissions}
+                            value={selectedIds}
+                            onChange={setSelectedIds}
+                            disabled={isPending}
+                        />
                     </ScrollArea>
                 )}
 
                 <DialogFooter>
-                    <div className="flex items-center gap-2 mr-auto text-sm text-muted-foreground">
+                    <div className="mr-auto flex items-center gap-2 text-sm text-muted-foreground">
                         {selectedIds.size} permission(s) selected
                     </div>
                     <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
diff --git a/src/components/settings/users/index.ts b/src/components/settings/users/index.ts
index 991f37b..ca843a3 100644
--- a/src/components/settings/users/index.ts
+++ b/src/components/settings/users/index.ts
@@ -4,3 +4,4 @@ export { UserFormDialog } from "./user-form-dialog"
 export { UserDeleteDialog } from "./user-delete-dialog"
 export { UserPagination } from "./user-pagination"
 export { UserRoleDialog } from "./user-role-dialog"
+export { UserPermissionDialog } from "./user-permission-dialog"
diff --git a/src/components/settings/users/user-permission-dialog.tsx b/src/components/settings/users/user-permission-dialog.tsx
new file mode 100644
index 0000000..cfb3d9d
--- /dev/null
+++ b/src/components/settings/users/user-permission-dialog.tsx
@@ -0,0 +1,137 @@
+"use client"
+
+import { useMemo, useState, useEffect } from "react"
+import { Loader2 } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import { ScrollArea } from "@/components/ui/scroll-area"
+
+import type { UserWithDetail } from "@/types/iam/user"
+import { useAllPermissions } from "@/hooks/iam/use-permissions"
+import { useAssignUserPermissions, useRemoveUserPermissions, useUserAccess } from "@/hooks/iam/use-users"
+import { PermissionPicker } from "@/components/settings/rbac/permission-picker"
+
+interface UserPermissionDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    user: UserWithDetail | null
+}
+
+export function UserPermissionDialog({ open, onOpenChange, user }: UserPermissionDialogProps) {
+    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+    const [originalIds, setOriginalIds] = useState<Set<string>>(new Set())
+
+    const userId = user?.user?.userId || ""
+    const { data: permissions, isLoading: permissionsLoading } = useAllPermissions()
+    const { data: userAccess, isLoading: accessLoading } = useUserAccess(userId)
+    const assignMutation = useAssignUserPermissions()
+    const removeMutation = useRemoveUserPermissions()
+
+    // Permission IDs the user has via a role but NOT as a direct grant — shown checked
+    // and read-only. Derived as (effective permission codes) minus (direct grant codes),
+    // then mapped to catalog IDs. The backend returns allPermissionCodes = effective union
+    // and directPermissions = true direct grants only.
+    const roleInheritedIds = useMemo(() => {
+        const directCodes = new Set((userAccess?.data?.directPermissions ?? []).map((p) => p.permissionCode))
+        const roleCodes = new Set(
+            (userAccess?.data?.allPermissionCodes ?? []).filter((code) => !directCodes.has(code))
+        )
+        const set = new Set<string>()
+        for (const perm of permissions) {
+            if (roleCodes.has(perm.permissionCode)) set.add(perm.permissionId)
+        }
+        return set
+    }, [userAccess, permissions])
+
+    // Populate direct-permission selection when the dialog opens.
+    useEffect(() => {
+        if (open && userAccess?.data) {
+            const ids = new Set((userAccess.data.directPermissions || []).map((p) => p.permissionId))
+            // eslint-disable-next-line react-hooks/set-state-in-effect -- intentional: sync selection + baseline from fetched data when dialog opens
+            setSelectedIds(ids)
+            setOriginalIds(ids)
+        }
+    }, [open, userAccess])
+
+    const handleSave = async () => {
+        if (!userId) return
+
+        const toAssign = [...selectedIds].filter((id) => !originalIds.has(id))
+        const toRemove = [...originalIds].filter((id) => !selectedIds.has(id))
+
+        try {
+            if (toAssign.length > 0) {
+                await assignMutation.mutateAsync({ userId, permissionIds: toAssign })
+            }
+            if (toRemove.length > 0) {
+                await removeMutation.mutateAsync({ userId, permissionIds: toRemove })
+            }
+            onOpenChange(false)
+        } catch (error) {
+            console.error("Failed to update permissions:", error)
+        }
+    }
+
+    const isPending = assignMutation.isPending || removeMutation.isPending
+    const isLoading = permissionsLoading || accessLoading
+    const displayName = user?.detail?.fullName || user?.user?.username || "user"
+    const hasChanges = (() => {
+        if (selectedIds.size !== originalIds.size) return true
+        for (const id of selectedIds) {
+            if (!originalIds.has(id)) return true
+        }
+        return false
+    })()
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-[640px]">
+                <DialogHeader>
+                    <DialogTitle>Manage Direct Permissions</DialogTitle>
+                    <DialogDescription>
+                        Grant permissions directly to <strong>{displayName}</strong>, without creating a role.
+                        Permissions already granted through a role are shown checked and marked{" "}
+                        <span className="font-medium">from role</span>.
+                    </DialogDescription>
+                </DialogHeader>
+
+                {isLoading ? (
+                    <div className="flex items-center justify-center py-8">
+                        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                    </div>
+                ) : (
+                    <ScrollArea className="max-h-[500px] pr-4">
+                        <PermissionPicker
+                            permissions={permissions}
+                            value={selectedIds}
+                            onChange={setSelectedIds}
+                            readOnlyIds={roleInheritedIds}
+                            disabled={isPending}
+                        />
+                    </ScrollArea>
+                )}
+
+                <DialogFooter>
+                    <div className="mr-auto flex items-center gap-2 text-sm text-muted-foreground">
+                        {selectedIds.size} direct permission(s)
+                    </div>
+                    <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
+                        Cancel
+                    </Button>
+                    <Button onClick={handleSave} disabled={isPending || !hasChanges}>
+                        {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                        Save Changes
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
diff --git a/src/components/settings/users/user-table.tsx b/src/components/settings/users/user-table.tsx
index ab5ea36..0da247a 100644
--- a/src/components/settings/users/user-table.tsx
+++ b/src/components/settings/users/user-table.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { Pencil, Trash2, Shield } from "lucide-react"
+import { Pencil, Trash2, Shield, KeyRound } from "lucide-react"
 
 import { Badge } from "@/components/ui/badge"
 import { DataTable, type ColumnDef, type RowAction } from "@/components/shared"
@@ -13,9 +13,10 @@ interface UserTableProps {
     onEdit: (user: UserWithDetail) => void
     onDelete: (user: UserWithDetail) => void
     onManageRoles: (user: UserWithDetail) => void
+    onManagePermissions?: (user: UserWithDetail) => void
 }
 
-export function UserTable({ data, isLoading, onEdit, onDelete, onManageRoles }: UserTableProps) {
+export function UserTable({ data, isLoading, onEdit, onDelete, onManageRoles, onManagePermissions }: UserTableProps) {
     const columns: ColumnDef<UserWithDetail>[] = [
         {
             id: "employeeCode",
@@ -108,6 +109,16 @@ export function UserTable({ data, isLoading, onEdit, onDelete, onManageRoles }:
             icon: <Shield className="h-4 w-4" />,
             onClick: onManageRoles,
         },
+        ...(onManagePermissions
+            ? [
+                  {
+                      id: "permissions",
+                      label: "Manage Permissions",
+                      icon: <KeyRound className="h-4 w-4" />,
+                      onClick: onManagePermissions,
+                  },
+              ]
+            : []),
         {
             id: "delete",
             label: "Delete",
diff --git a/src/hooks/iam/use-permissions.ts b/src/hooks/iam/use-permissions.ts
index 5ae419f..58bfae6 100644
--- a/src/hooks/iam/use-permissions.ts
+++ b/src/hooks/iam/use-permissions.ts
@@ -93,3 +93,17 @@ export function usePermissionsByService(serviceName?: string) {
         staleTime: 5 * 60 * 1000, // 5 minutes - permissions don't change often
     })
 }
+
+/**
+ * Hook returning the full flat permission catalog (all services), each entry
+ * carrying menuId/menuTitle. Backed by GetPermissionsByService which has NO
+ * pagination cap — unlike ListPermissions whose page_size is limited to 100,
+ * so it is the correct source when a picker/catalog needs every permission.
+ */
+export function useAllPermissions() {
+    const query = usePermissionsByService()
+    const data = (query.data?.data ?? [])
+        .flatMap((service) => service.modules ?? [])
+        .flatMap((mod) => mod.permissions ?? [])
+    return { data, isLoading: query.isLoading, isError: query.isError }
+}
diff --git a/src/hooks/iam/use-users.ts b/src/hooks/iam/use-users.ts
index 8b36afb..ab94e47 100644
--- a/src/hooks/iam/use-users.ts
+++ b/src/hooks/iam/use-users.ts
@@ -27,6 +27,10 @@ import {
     AssignUserRolesResponseParser,
     type RemoveUserRolesResponse,
     RemoveUserRolesResponseParser,
+    type AssignUserPermissionsResponse,
+    AssignUserPermissionsResponseParser,
+    type RemoveUserPermissionsResponse,
+    RemoveUserPermissionsResponseParser,
 } from "@/types/iam/user"
 
 // ============================================================================
@@ -166,3 +170,47 @@ export function useRemoveUserRoles() {
         },
     })
 }
+
+/**
+ * Hook for assigning direct permissions to a user (bypassing roles).
+ */
+export function useAssignUserPermissions() {
+    const queryClient = useQueryClient()
+
+    return useMutation({
+        mutationFn: async ({ userId, permissionIds }: { userId: string; permissionIds: string[] }): Promise<AssignUserPermissionsResponse> => {
+            const rawResponse = await apiClient.post<unknown>(`/api/v1/iam/users/${userId}/permissions`, { permissionIds })
+            return AssignUserPermissionsResponseParser.fromJSON(rawResponse)
+        },
+        onSuccess: (_, variables) => {
+            queryClient.invalidateQueries({ queryKey: ["iam", "user", "access", variables.userId] })
+            queryClient.invalidateQueries({ queryKey: userKeys.lists() })
+            toast.success("Permissions assigned successfully")
+        },
+        onError: (error: Error) => {
+            toast.error(error.message || "Failed to assign permissions")
+        },
+    })
+}
+
+/**
+ * Hook for removing direct permissions from a user.
+ */
+export function useRemoveUserPermissions() {
+    const queryClient = useQueryClient()
+
+    return useMutation({
+        mutationFn: async ({ userId, permissionIds }: { userId: string; permissionIds: string[] }): Promise<RemoveUserPermissionsResponse> => {
+            const rawResponse = await apiClient.post<unknown>(`/api/v1/iam/users/${userId}/permissions/remove`, { permissionIds })
+            return RemoveUserPermissionsResponseParser.fromJSON(rawResponse)
+        },
+        onSuccess: (_, variables) => {
+            queryClient.invalidateQueries({ queryKey: ["iam", "user", "access", variables.userId] })
+            queryClient.invalidateQueries({ queryKey: userKeys.lists() })
+            toast.success("Permissions removed successfully")
+        },
+        onError: (error: Error) => {
+            toast.error(error.message || "Failed to remove permissions")
+        },
+    })
+}
diff --git a/src/lib/rbac/group-permissions.ts b/src/lib/rbac/group-permissions.ts
new file mode 100644
index 0000000..9a3f853
--- /dev/null
+++ b/src/lib/rbac/group-permissions.ts
@@ -0,0 +1,42 @@
+import type { PermissionDetail } from "@/types/iam/role"
+
+// GLOBAL_GROUP_TITLE labels the bucket for permissions with no owning page.
+export const GLOBAL_GROUP_TITLE = "Global / Ungrouped"
+
+// PermissionGroup is one page's worth of permissions (or the global bucket).
+export interface PermissionGroup {
+    menuId: string | null
+    menuTitle: string
+    permissions: PermissionDetail[]
+}
+
+/**
+ * groupPermissionsByMenu groups a flat permission list by owning page (menuId).
+ * Named pages come first, preserving first-seen order (the backend already returns
+ * rows ordered by menu.sort_order); the global/ungrouped bucket is always last.
+ * Permissions with an empty menuId (or missing menuTitle) fall into the global bucket.
+ */
+export function groupPermissionsByMenu(permissions: PermissionDetail[]): PermissionGroup[] {
+    const named = new Map<string, PermissionGroup>()
+    const global: PermissionGroup = { menuId: null, menuTitle: GLOBAL_GROUP_TITLE, permissions: [] }
+
+    for (const perm of permissions) {
+        const menuId = perm.menuId?.trim() ?? ""
+        if (menuId === "") {
+            global.permissions.push(perm)
+            continue
+        }
+        let group = named.get(menuId)
+        if (!group) {
+            group = { menuId, menuTitle: perm.menuTitle?.trim() || menuId, permissions: [] }
+            named.set(menuId, group)
+        }
+        group.permissions.push(perm)
+    }
+
+    const groups = Array.from(named.values())
+    if (global.permissions.length > 0) {
+        groups.push(global)
+    }
+    return groups
+}
diff --git a/src/lib/rbac/permissions.ts b/src/lib/rbac/permissions.ts
new file mode 100644
index 0000000..f430e09
--- /dev/null
+++ b/src/lib/rbac/permissions.ts
@@ -0,0 +1,462 @@
+// AUTO-GENERATED from the 2026-07-01 RBAC audit (spec Appendix A). 279 permission codes,
+// grouped by owning page. Import these constants instead of hardcoding permission strings.
+// Regenerate when permissions change; keep in sync with the backend permission catalog.
+
+export const PERMISSIONS = {
+  // Employee Level (ADMIN_EMPLOYEE_LEVEL)
+  EmployeeLevel: {
+    employeelevelApprove: "iam.master.employeelevel.approve",
+    employeelevelBypass: "iam.master.employeelevel.bypass",
+    employeelevelCreate: "iam.master.employeelevel.create",
+    employeelevelDelete: "iam.master.employeelevel.delete",
+    employeelevelExport: "iam.master.employeelevel.export",
+    employeelevelImport: "iam.master.employeelevel.import",
+    employeelevelRelease: "iam.master.employeelevel.release",
+    employeelevelSubmit: "iam.master.employeelevel.submit",
+    employeelevelUpdate: "iam.master.employeelevel.update",
+    employeelevelView: "iam.master.employeelevel.view",
+  },
+  // User Management (ADMIN_USERS)
+  UserManagement: {
+    accountCreate: "iam.user.account.create",
+    accountDelete: "iam.user.account.delete",
+    accountExport: "iam.user.account.export",
+    accountImport: "iam.user.account.import",
+    accountUpdate: "iam.user.account.update",
+    accountView: "iam.user.account.view",
+    companymappingAssign: "iam.user.companymapping.assign",
+    companymappingRemove: "iam.user.companymapping.remove",
+    companymappingView: "iam.user.companymapping.view",
+  },
+  // Dashboards (BI_VIEWER_LIST)
+  Dashboards: {
+    dashboardView: "finance.bi.dashboard.view",
+  },
+  // Dashboard (CI_DASHBOARD)
+  Dashboard: {
+    dashboardView: "ci.module.dashboard.view",
+  },
+  // Dashboard (EXSIM_DASHBOARD)
+  Dashboard1: {
+    dashboardView: "exsim.module.dashboard.view",
+  },
+  // Costing Process (FINANCE_COSTING)
+  CostingProcess: {
+    costingCreate: "finance.transaction.costing.create",
+    costingUpdate: "finance.transaction.costing.update",
+    costingView: "finance.transaction.costing.view",
+  },
+  // Dashboard (FINANCE_DASHBOARD)
+  Dashboard2: {
+    dashboardView: "finance.module.dashboard.view",
+  },
+  // Machine (FINANCE_MACHINE)
+  Machine: {
+    machineCreate: "finance.yarnmaster.machine.create",
+    machineDelete: "finance.yarnmaster.machine.delete",
+    machineUpdate: "finance.yarnmaster.machine.update",
+    machineView: "finance.yarnmaster.machine.view",
+  },
+  // Product Requests (FINANCE_PRODUCT_REQUESTS)
+  ProductRequests: {
+    paramvalueUpdate: "finance.costing.paramvalue.update",
+    routeUnlock: "finance.costing.route.unlock",
+    requestApprove: "finance.product.request.approve",
+    requestAssign: "finance.product.request.assign",
+    requestConfirm: "finance.product.request.confirm",
+    requestCreate: "finance.product.request.create",
+    requestDelete: "finance.product.request.delete",
+    requestReject: "finance.product.request.reject",
+    requestRelease: "finance.product.request.release",
+    requestReopen: "finance.product.request.reopen",
+    requestResolve: "finance.product.request.resolve",
+    requestReview: "finance.product.request.review",
+    requestSubmit: "finance.product.request.submit",
+    requestUpdate: "finance.product.request.update",
+    requestView: "finance.product.request.view",
+    chatDelete: "finance.transaction.chat.delete",
+    chatRead: "finance.transaction.chat.read",
+    chatSend: "finance.transaction.chat.send",
+    costcalcTrigger: "finance.transaction.costcalc.trigger",
+    prdrequestCreate: "finance.transaction.prdrequest.create",
+    prdrequestDelete: "finance.transaction.prdrequest.delete",
+    prdrequestSubmit: "finance.transaction.prdrequest.submit",
+    prdrequestUpdate: "finance.transaction.prdrequest.update",
+    prdrequestView: "finance.transaction.prdrequest.view",
+    workflowApprove: "finance.transaction.workflow.approve",
+    workflowReassign: "finance.transaction.workflow.reassign",
+    workflowReject: "finance.transaction.workflow.reject",
+  },
+  // RM Groups (FINANCE_RM_GROUPS)
+  RmGroups: {
+    groupdetailCreate: "finance.rmpricing.groupdetail.create",
+    groupdetailDelete: "finance.rmpricing.groupdetail.delete",
+    groupdetailUpdate: "finance.rmpricing.groupdetail.update",
+    groupdetailView: "finance.rmpricing.groupdetail.view",
+    groupheadCreate: "finance.rmpricing.grouphead.create",
+    groupheadDelete: "finance.rmpricing.grouphead.delete",
+    groupheadUpdate: "finance.rmpricing.grouphead.update",
+    groupheadView: "finance.rmpricing.grouphead.view",
+  },
+  // Unit of Measure (FINANCE_UOM)
+  UnitOfMeasure: {
+    uomCreate: "finance.master.uom.create",
+    uomDelete: "finance.master.uom.delete",
+    uomExport: "finance.master.uom.export",
+    uomImport: "finance.master.uom.import",
+    uomUpdate: "finance.master.uom.update",
+    uomView: "finance.master.uom.view",
+  },
+  // Dashboard (HR_DASHBOARD)
+  Dashboard3: {
+    dashboardView: "hr.module.dashboard.view",
+  },
+  // Dashboard (IT_DASHBOARD)
+  Dashboard4: {
+    dashboardView: "it.module.dashboard.view",
+  },
+  // UOM Category (FINANCE_UOM_CATEGORY)
+  UomCategory: {
+    uomcategoryCreate: "finance.master.uomcategory.create",
+    uomcategoryDelete: "finance.master.uomcategory.delete",
+    uomcategoryExport: "finance.master.uomcategory.export",
+    uomcategoryImport: "finance.master.uomcategory.import",
+    uomcategoryUpdate: "finance.master.uomcategory.update",
+    uomcategoryView: "finance.master.uomcategory.view",
+  },
+  // RM Category (FINANCE_RM_CATEGORY)
+  RmCategory: {
+    rmcategoryCreate: "finance.master.rmcategory.create",
+    rmcategoryDelete: "finance.master.rmcategory.delete",
+    rmcategoryExport: "finance.master.rmcategory.export",
+    rmcategoryImport: "finance.master.rmcategory.import",
+    rmcategoryUpdate: "finance.master.rmcategory.update",
+    rmcategoryView: "finance.master.rmcategory.view",
+  },
+  // Employee Group (ADMIN_EMPLOYEE_GROUP)
+  EmployeeGroup: {
+    employeegroupCreate: "iam.master.employeegroup.create",
+    employeegroupDelete: "iam.master.employeegroup.delete",
+    employeegroupExport: "iam.master.employeegroup.export",
+    employeegroupImport: "iam.master.employeegroup.import",
+    employeegroupUpdate: "iam.master.employeegroup.update",
+    employeegroupView: "iam.master.employeegroup.view",
+  },
+  // Roles & Permissions (ADMIN_ROLES)
+  RolesPermissions: {
+    roleCreate: "iam.rbac.role.create",
+    roleDelete: "iam.rbac.role.delete",
+    roleExport: "iam.rbac.role.export",
+    roleImport: "iam.rbac.role.import",
+    roleUpdate: "iam.rbac.role.update",
+    roleView: "iam.rbac.role.view",
+  },
+  // Admin Panel (BI_ADMIN)
+  AdminPanel: {
+    auditView: "finance.bi.audit.view",
+    dashboardCreate: "finance.bi.dashboard.create",
+    dashboardDelete: "finance.bi.dashboard.delete",
+    dashboardUpdate: "finance.bi.dashboard.update",
+    datasourceUpdate: "finance.bi.datasource.update",
+    datasourceView: "finance.bi.datasource.view",
+    jobUpdate: "finance.bi.job.update",
+    jobView: "finance.bi.job.view",
+  },
+  // Finance (FINANCE)
+  Finance: {
+    rootView: "finance.module.root.view",
+  },
+  // Intermingling (FINANCE_INTERMINGLING)
+  Intermingling: {
+    interminglingCreate: "finance.yarnmaster.intermingling.create",
+    interminglingDelete: "finance.yarnmaster.intermingling.delete",
+    interminglingUpdate: "finance.yarnmaster.intermingling.update",
+    interminglingView: "finance.yarnmaster.intermingling.view",
+  },
+  // Master (FINANCE_MASTER)
+  Master: {
+    masterView: "finance.module.master.view",
+  },
+  // Oracle Sync (FINANCE_ORACLE_SYNC)
+  OracleSync: {
+    oraclesyncCreate: "finance.transaction.oraclesync.create",
+    oraclesyncDelete: "finance.transaction.oraclesync.delete",
+    oraclesyncView: "finance.transaction.oraclesync.view",
+  },
+  // Parameter (FINANCE_PARAMETER)
+  Parameter: {
+    parameterCreate: "finance.master.parameter.create",
+    parameterDelete: "finance.master.parameter.delete",
+    parameterExport: "finance.master.parameter.export",
+    parameterImport: "finance.master.parameter.import",
+    parameterUpdate: "finance.master.parameter.update",
+    parameterView: "finance.master.parameter.view",
+  },
+  // Parameters (FINANCE_PARAMETERS)
+  Parameters: {
+    parametersCreate: "finance.master.parameters.create",
+    parametersDelete: "finance.master.parameters.delete",
+    parametersUpdate: "finance.master.parameters.update",
+    parametersView: "finance.master.parameters.view",
+  },
+  // Products (FINANCE_PRODUCTS)
+  Products: {
+    masterCreate: "finance.product.master.create",
+    masterDelete: "finance.product.master.delete",
+    masterDuplicate: "finance.product.master.duplicate",
+    masterUpdate: "finance.product.master.update",
+    masterView: "finance.product.master.view",
+    cstproductCreate: "finance.transaction.cstproduct.create",
+    cstproductDelete: "finance.transaction.cstproduct.delete",
+    cstproductDuplicate: "finance.transaction.cstproduct.duplicate",
+    cstproductLock: "finance.transaction.cstproduct.lock",
+    cstproductUnlock: "finance.transaction.cstproduct.unlock",
+    cstproductUnlockoverride: "finance.transaction.cstproduct.unlockoverride",
+    cstproductUpdate: "finance.transaction.cstproduct.update",
+    cstproductView: "finance.transaction.cstproduct.view",
+  },
+  // RM Costs (FINANCE_RM_COSTS)
+  RmCosts: {
+    costRecalculate: "finance.rmpricing.cost.recalculate",
+    costView: "finance.rmpricing.cost.view",
+  },
+  // Product Routes (FINANCE_PRODUCT_ROUTES)
+  ProductRoutes: {
+    routeCreate: "finance.product.route.create",
+    routeUpdate: "finance.product.route.update",
+    routeView: "finance.product.route.view",
+  },
+  // Calc Jobs (FINANCE_CALC_JOBS)
+  CalcJobs: {
+    caljobCancel: "finance.cost.caljob.cancel",
+    caljobTrigger: "finance.cost.caljob.trigger",
+    caljobView: "finance.cost.caljob.view",
+  },
+  // Cost Results (FINANCE_COST_RESULTS)
+  CostResults: {
+    historyView: "finance.cost.history.view",
+    resultApprove: "finance.cost.result.approve",
+    resultVerify: "finance.cost.result.verify",
+    resultView: "finance.cost.result.view",
+  },
+  // Permission Management (ADMIN_PERMISSIONS)
+  PermissionManagement: {
+    permissionCreate: "iam.rbac.permission.create",
+    permissionDelete: "iam.rbac.permission.delete",
+    permissionExport: "iam.rbac.permission.export",
+    permissionImport: "iam.rbac.permission.import",
+    permissionUpdate: "iam.rbac.permission.update",
+    permissionView: "iam.rbac.permission.view",
+  },
+  // Calc Schedule (FINANCE_CALC_SCHEDULE)
+  CalcSchedule: {
+    caljobSchedule: "finance.cost.caljob.schedule",
+  },
+  // Product Types (FINANCE_PRODUCT_TYPE)
+  ProductTypes: {
+    producttypeCreate: "finance.master.producttype.create",
+    producttypeDelete: "finance.master.producttype.delete",
+    producttypeUpdate: "finance.master.producttype.update",
+    producttypeView: "finance.master.producttype.view",
+  },
+  // Menu Management (ADMIN_MENUS)
+  MenuManagement: {
+    menuCreate: "iam.menu.menu.create",
+    menuDelete: "iam.menu.menu.delete",
+    menuExport: "iam.menu.menu.export",
+    menuImport: "iam.menu.menu.import",
+    menuUpdate: "iam.menu.menu.update",
+    menuView: "iam.menu.menu.view",
+  },
+  // Upload Data (BI_UPLOAD)
+  UploadData: {
+    uploadCreate: "finance.bi.upload.create",
+    uploadImport: "finance.bi.upload.import",
+  },
+  // Formula (FINANCE_FORMULA)
+  Formula: {
+    formulaCreate: "finance.master.formula.create",
+    formulaDelete: "finance.master.formula.delete",
+    formulaExport: "finance.master.formula.export",
+    formulaImport: "finance.master.formula.import",
+    formulaUpdate: "finance.master.formula.update",
+    formulaView: "finance.master.formula.view",
+  },
+  // Item Cons Stock PO (FINANCE_ITEM_CONS_STOCK_PO)
+  ItemConsStockPo: {
+    itemconsstockpoView: "finance.transaction.itemconsstockpo.view",
+  },
+  // Product Grade (FINANCE_PRODUCT_GRADE)
+  ProductGrade: {
+    productgradeCreate: "finance.yarnmaster.productgrade.create",
+    productgradeDelete: "finance.yarnmaster.productgrade.delete",
+    productgradeUpdate: "finance.yarnmaster.productgrade.update",
+    productgradeView: "finance.yarnmaster.productgrade.view",
+  },
+  // Transaction (FINANCE_TRANSACTION)
+  Transaction: {
+    transactionView: "finance.module.transaction.view",
+  },
+  // Ungrouped Items (FINANCE_UNGROUPED_RM)
+  UngroupedItems: {
+    ungroupedView: "finance.rmpricing.ungrouped.view",
+  },
+  // IT (IT)
+  It: {
+    rootView: "it.module.root.view",
+  },
+  // Delivery Margin (BI_DELIVERY_MARGIN)
+  DeliveryMargin: {
+    deliverymarginExport: "finance.bi.deliverymargin.export",
+    deliverymarginView: "finance.bi.deliverymargin.view",
+  },
+  // CMS Management (ADMIN_CMS)
+  CmsManagement: {
+    pageCreate: "iam.cms.page.create",
+    pageDelete: "iam.cms.page.delete",
+    pageUpdate: "iam.cms.page.update",
+    pageView: "iam.cms.page.view",
+    sectionCreate: "iam.cms.section.create",
+    sectionDelete: "iam.cms.section.delete",
+    sectionUpdate: "iam.cms.section.update",
+    sectionView: "iam.cms.section.view",
+    settingUpdate: "iam.cms.setting.update",
+    settingView: "iam.cms.setting.view",
+  },
+  // MB Head (FINANCE_MB_HEAD)
+  MbHead: {
+    mbheadCreate: "finance.yarnmaster.mbhead.create",
+    mbheadDelete: "finance.yarnmaster.mbhead.delete",
+    mbheadUpdate: "finance.yarnmaster.mbhead.update",
+    mbheadView: "finance.yarnmaster.mbhead.view",
+  },
+  // HR (HR)
+  Hr: {
+    rootView: "hr.module.root.view",
+  },
+  // ERP Item Master (FINANCE_ERP_ITEM)
+  ErpItemMaster: {
+    erpitemCreate: "finance.master.erpitem.create",
+    erpitemDelete: "finance.master.erpitem.delete",
+    erpitemUpdate: "finance.master.erpitem.update",
+    erpitemView: "finance.master.erpitem.view",
+  },
+  // Companies (ADMIN_MASTER_COMPANY)
+  Companies: {
+    companyCreate: "iam.master.company.create",
+    companyDelete: "iam.master.company.delete",
+    companyUpdate: "iam.master.company.update",
+    companyView: "iam.master.company.view",
+    iamorganizationcompanycreate: "iam.organization.company.create",
+    iamorganizationcompanydelete: "iam.organization.company.delete",
+    companyExport: "iam.organization.company.export",
+    companyImport: "iam.organization.company.import",
+    iamorganizationcompanyupdate: "iam.organization.company.update",
+    iamorganizationcompanyview: "iam.organization.company.view",
+  },
+  // CI (CI)
+  Ci: {
+    rootView: "ci.module.root.view",
+  },
+  // MB Spin (FINANCE_MB_SPIN)
+  MbSpin: {
+    mbspinCreate: "finance.yarnmaster.mbspin.create",
+    mbspinDelete: "finance.yarnmaster.mbspin.delete",
+    mbspinUpdate: "finance.yarnmaster.mbspin.update",
+    mbspinView: "finance.yarnmaster.mbspin.view",
+  },
+  // Divisions (ADMIN_MASTER_DIVISION)
+  Divisions: {
+    divisionCreate: "iam.master.division.create",
+    divisionDelete: "iam.master.division.delete",
+    divisionUpdate: "iam.master.division.update",
+    divisionView: "iam.master.division.view",
+    iamorganizationdivisioncreate: "iam.organization.division.create",
+    iamorganizationdivisiondelete: "iam.organization.division.delete",
+    divisionExport: "iam.organization.division.export",
+    divisionImport: "iam.organization.division.import",
+    iamorganizationdivisionupdate: "iam.organization.division.update",
+    iamorganizationdivisionview: "iam.organization.division.view",
+  },
+  // Departments (ADMIN_MASTER_DEPARTMENT)
+  Departments: {
+    departmentCreate: "iam.master.department.create",
+    departmentDelete: "iam.master.department.delete",
+    departmentUpdate: "iam.master.department.update",
+    departmentView: "iam.master.department.view",
+    iamorganizationdepartmentcreate: "iam.organization.department.create",
+    iamorganizationdepartmentdelete: "iam.organization.department.delete",
+    departmentExport: "iam.organization.department.export",
+    departmentImport: "iam.organization.department.import",
+    iamorganizationdepartmentupdate: "iam.organization.department.update",
+    iamorganizationdepartmentview: "iam.organization.department.view",
+  },
+  // Sections (ADMIN_MASTER_SECTION)
+  Sections: {
+    sectionCreate: "iam.master.section.create",
+    sectionDelete: "iam.master.section.delete",
+    sectionUpdate: "iam.master.section.update",
+    sectionView: "iam.master.section.view",
+    iamorganizationsectioncreate: "iam.organization.section.create",
+    iamorganizationsectiondelete: "iam.organization.section.delete",
+    sectionExport: "iam.organization.section.export",
+    sectionImport: "iam.organization.section.import",
+    iamorganizationsectionupdate: "iam.organization.section.update",
+    iamorganizationsectionview: "iam.organization.section.view",
+  },
+  // Company Mappings (ADMIN_MASTER_COMPANY_MAPPING)
+  CompanyMappings: {
+    companymappingCreate: "iam.master.companymapping.create",
+    companymappingDelete: "iam.master.companymapping.delete",
+    companymappingUpdate: "iam.master.companymapping.update",
+    companymappingView: "iam.master.companymapping.view",
+  },
+  // Workflow Templates (ADMIN_WORKFLOW_TEMPLATE)
+  WorkflowTemplates: {
+    workflowtemplateCreate: "iam.master.workflowtemplate.create",
+    workflowtemplateDelete: "iam.master.workflowtemplate.delete",
+    workflowtemplateUpdate: "iam.master.workflowtemplate.update",
+    workflowtemplateView: "iam.master.workflowtemplate.view",
+  },
+  // Export Import (EXSIM)
+  ExportImport: {
+    rootView: "exsim.module.root.view",
+  },
+  // Box/Bobbin Cost (FINANCE_BOX_BOBBIN_COST)
+  BoxBobbinCost: {
+    boxbobbincostCreate: "finance.yarnmaster.boxbobbincost.create",
+    boxbobbincostDelete: "finance.yarnmaster.boxbobbincost.delete",
+    boxbobbincostUpdate: "finance.yarnmaster.boxbobbincost.update",
+    boxbobbincostView: "finance.yarnmaster.boxbobbincost.view",
+  },
+  // Fill Config (FINANCE_FILL_CONFIG)
+  FillConfig: {
+    fillconfigCreate: "finance.costing.fillconfig.create",
+    fillconfigDelete: "finance.costing.fillconfig.delete",
+    fillconfigUpdate: "finance.costing.fillconfig.update",
+    fillconfigView: "finance.costing.fillconfig.view",
+  },
+  // Fill Tasks (FINANCE_FILL_TASKS)
+  FillTasks: {
+    assignmentOverride: "finance.costing.assignment.override",
+    filltaskApprove: "finance.costing.filltask.approve",
+    filltaskCreate: "finance.costing.filltask.create",
+    filltaskDelete: "finance.costing.filltask.delete",
+    filltaskUpdate: "finance.costing.filltask.update",
+    filltaskView: "finance.costing.filltask.view",
+  },
+  // Lookup Master (FINANCE_LOOKUP_MASTER)
+  LookupMaster: {
+    lookupmasterCreate: "finance.yarnmaster.lookupmaster.create",
+    lookupmasterDelete: "finance.yarnmaster.lookupmaster.delete",
+    lookupmasterUpdate: "finance.yarnmaster.lookupmaster.update",
+    lookupmasterView: "finance.yarnmaster.lookupmaster.view",
+  },
+  // GLOBAL (GLOBAL)
+  Global: {
+    logExport: "iam.audit.log.export",
+    logView: "iam.audit.log.view",
+    sessionDelete: "iam.session.session.delete",
+    sessionView: "iam.session.session.view",
+  },
+} as const
diff --git a/src/types/generated/iam/v1/role.ts b/src/types/generated/iam/v1/role.ts
index 1f7ef0b..8187df8 100644
--- a/src/types/generated/iam/v1/role.ts
+++ b/src/types/generated/iam/v1/role.ts
@@ -157,7 +157,13 @@ export interface PermissionDetail {
   isActive: boolean;
   /** Number of roles with this permission */
   roleCount: number;
-  audit: AuditInfo | undefined;
+  audit:
+    | AuditInfo
+    | undefined;
+  /** Owning page/menu (empty = global/ungrouped) */
+  menuId: string;
+  /** Read-only, joined from mst_menu for display */
+  menuTitle: string;
 }
 
 export interface CreatePermissionRequest {
@@ -172,6 +178,8 @@ export interface CreatePermissionRequest {
   moduleName: string;
   /** Action type: view, create, update, delete, export, import */
   actionType: string;
+  /** Owning page/menu UUID. Empty = global/ungrouped permission. */
+  menuId: string;
 }
 
 export interface CreatePermissionResponse {
@@ -193,6 +201,7 @@ export interface UpdatePermissionRequest {
   permissionName?: string | undefined;
   description?: string | undefined;
   isActive?: boolean | undefined;
+  menuId?: string | undefined;
 }
 
 export interface UpdatePermissionResponse {
@@ -221,6 +230,8 @@ export interface ListPermissionsRequest {
   actionType: string;
   sortBy: string;
   sortOrder: string;
+  /** Filter by menu_id (owning page/menu) */
+  menuId: string;
 }
 
 export interface ListPermissionsResponse {
@@ -2467,6 +2478,8 @@ function createBasePermissionDetail(): PermissionDetail {
     isActive: false,
     roleCount: 0,
     audit: undefined,
+    menuId: "",
+    menuTitle: "",
   };
 }
 
@@ -2502,6 +2515,12 @@ export const PermissionDetail: MessageFns<PermissionDetail> = {
     if (message.audit !== undefined) {
       AuditInfo.encode(message.audit, writer.uint32(82).fork()).join();
     }
+    if (message.menuId !== "") {
+      writer.uint32(90).string(message.menuId);
+    }
+    if (message.menuTitle !== "") {
+      writer.uint32(98).string(message.menuTitle);
+    }
     return writer;
   },
 
@@ -2592,6 +2611,22 @@ export const PermissionDetail: MessageFns<PermissionDetail> = {
           message.audit = AuditInfo.decode(reader, reader.uint32());
           continue;
         }
+        case 11: {
+          if (tag !== 90) {
+            break;
+          }
+
+          message.menuId = reader.string();
+          continue;
+        }
+        case 12: {
+          if (tag !== 98) {
+            break;
+          }
+
+          message.menuTitle = reader.string();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -2645,6 +2680,16 @@ export const PermissionDetail: MessageFns<PermissionDetail> = {
         ? globalThis.Number(object.role_count)
         : 0,
       audit: isSet(object.audit) ? AuditInfo.fromJSON(object.audit) : undefined,
+      menuId: isSet(object.menuId)
+        ? globalThis.String(object.menuId)
+        : isSet(object.menu_id)
+        ? globalThis.String(object.menu_id)
+        : "",
+      menuTitle: isSet(object.menuTitle)
+        ? globalThis.String(object.menuTitle)
+        : isSet(object.menu_title)
+        ? globalThis.String(object.menu_title)
+        : "",
     };
   },
 
@@ -2680,6 +2725,12 @@ export const PermissionDetail: MessageFns<PermissionDetail> = {
     if (message.audit !== undefined) {
       obj.audit = AuditInfo.toJSON(message.audit);
     }
+    if (message.menuId !== "") {
+      obj.menuId = message.menuId;
+    }
+    if (message.menuTitle !== "") {
+      obj.menuTitle = message.menuTitle;
+    }
     return obj;
   },
 
@@ -2700,12 +2751,22 @@ export const PermissionDetail: MessageFns<PermissionDetail> = {
     message.audit = (object.audit !== undefined && object.audit !== null)
       ? AuditInfo.fromPartial(object.audit)
       : undefined;
+    message.menuId = object.menuId ?? "";
+    message.menuTitle = object.menuTitle ?? "";
     return message;
   },
 };
 
 function createBaseCreatePermissionRequest(): CreatePermissionRequest {
-  return { permissionCode: "", permissionName: "", description: "", serviceName: "", moduleName: "", actionType: "" };
+  return {
+    permissionCode: "",
+    permissionName: "",
+    description: "",
+    serviceName: "",
+    moduleName: "",
+    actionType: "",
+    menuId: "",
+  };
 }
 
 export const CreatePermissionRequest: MessageFns<CreatePermissionRequest> = {
@@ -2728,6 +2789,9 @@ export const CreatePermissionRequest: MessageFns<CreatePermissionRequest> = {
     if (message.actionType !== "") {
       writer.uint32(50).string(message.actionType);
     }
+    if (message.menuId !== "") {
+      writer.uint32(58).string(message.menuId);
+    }
     return writer;
   },
 
@@ -2786,6 +2850,14 @@ export const CreatePermissionRequest: MessageFns<CreatePermissionRequest> = {
           message.actionType = reader.string();
           continue;
         }
+        case 7: {
+          if (tag !== 58) {
+            break;
+          }
+
+          message.menuId = reader.string();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -2823,6 +2895,11 @@ export const CreatePermissionRequest: MessageFns<CreatePermissionRequest> = {
         : isSet(object.action_type)
         ? globalThis.String(object.action_type)
         : "",
+      menuId: isSet(object.menuId)
+        ? globalThis.String(object.menuId)
+        : isSet(object.menu_id)
+        ? globalThis.String(object.menu_id)
+        : "",
     };
   },
 
@@ -2846,6 +2923,9 @@ export const CreatePermissionRequest: MessageFns<CreatePermissionRequest> = {
     if (message.actionType !== "") {
       obj.actionType = message.actionType;
     }
+    if (message.menuId !== "") {
+      obj.menuId = message.menuId;
+    }
     return obj;
   },
 
@@ -2860,6 +2940,7 @@ export const CreatePermissionRequest: MessageFns<CreatePermissionRequest> = {
     message.serviceName = object.serviceName ?? "";
     message.moduleName = object.moduleName ?? "";
     message.actionType = object.actionType ?? "";
+    message.menuId = object.menuId ?? "";
     return message;
   },
 };
@@ -3089,7 +3170,13 @@ export const GetPermissionResponse: MessageFns<GetPermissionResponse> = {
 };
 
 function createBaseUpdatePermissionRequest(): UpdatePermissionRequest {
-  return { permissionId: "", permissionName: undefined, description: undefined, isActive: undefined };
+  return {
+    permissionId: "",
+    permissionName: undefined,
+    description: undefined,
+    isActive: undefined,
+    menuId: undefined,
+  };
 }
 
 export const UpdatePermissionRequest: MessageFns<UpdatePermissionRequest> = {
@@ -3106,6 +3193,9 @@ export const UpdatePermissionRequest: MessageFns<UpdatePermissionRequest> = {
     if (message.isActive !== undefined) {
       writer.uint32(32).bool(message.isActive);
     }
+    if (message.menuId !== undefined) {
+      writer.uint32(42).string(message.menuId);
+    }
     return writer;
   },
 
@@ -3148,6 +3238,14 @@ export const UpdatePermissionRequest: MessageFns<UpdatePermissionRequest> = {
           message.isActive = reader.bool();
           continue;
         }
+        case 5: {
+          if (tag !== 42) {
+            break;
+          }
+
+          message.menuId = reader.string();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -3175,6 +3273,11 @@ export const UpdatePermissionRequest: MessageFns<UpdatePermissionRequest> = {
         : isSet(object.is_active)
         ? globalThis.Boolean(object.is_active)
         : undefined,
+      menuId: isSet(object.menuId)
+        ? globalThis.String(object.menuId)
+        : isSet(object.menu_id)
+        ? globalThis.String(object.menu_id)
+        : undefined,
     };
   },
 
@@ -3192,6 +3295,9 @@ export const UpdatePermissionRequest: MessageFns<UpdatePermissionRequest> = {
     if (message.isActive !== undefined) {
       obj.isActive = message.isActive;
     }
+    if (message.menuId !== undefined) {
+      obj.menuId = message.menuId;
+    }
     return obj;
   },
 
@@ -3204,6 +3310,7 @@ export const UpdatePermissionRequest: MessageFns<UpdatePermissionRequest> = {
     message.permissionName = object.permissionName ?? undefined;
     message.description = object.description ?? undefined;
     message.isActive = object.isActive ?? undefined;
+    message.menuId = object.menuId ?? undefined;
     return message;
   },
 };
@@ -3423,6 +3530,7 @@ function createBaseListPermissionsRequest(): ListPermissionsRequest {
     actionType: "",
     sortBy: "",
     sortOrder: "",
+    menuId: "",
   };
 }
 
@@ -3455,6 +3563,9 @@ export const ListPermissionsRequest: MessageFns<ListPermissionsRequest> = {
     if (message.sortOrder !== "") {
       writer.uint32(74).string(message.sortOrder);
     }
+    if (message.menuId !== "") {
+      writer.uint32(82).string(message.menuId);
+    }
     return writer;
   },
 
@@ -3537,6 +3648,14 @@ export const ListPermissionsRequest: MessageFns<ListPermissionsRequest> = {
           message.sortOrder = reader.string();
           continue;
         }
+        case 10: {
+          if (tag !== 82) {
+            break;
+          }
+
+          message.menuId = reader.string();
+          continue;
+        }
       }
       if ((tag & 7) === 4 || tag === 0) {
         break;
@@ -3585,6 +3704,11 @@ export const ListPermissionsRequest: MessageFns<ListPermissionsRequest> = {
         : isSet(object.sort_order)
         ? globalThis.String(object.sort_order)
         : "",
+      menuId: isSet(object.menuId)
+        ? globalThis.String(object.menuId)
+        : isSet(object.menu_id)
+        ? globalThis.String(object.menu_id)
+        : "",
     };
   },
 
@@ -3617,6 +3741,9 @@ export const ListPermissionsRequest: MessageFns<ListPermissionsRequest> = {
     if (message.sortOrder !== "") {
       obj.sortOrder = message.sortOrder;
     }
+    if (message.menuId !== "") {
+      obj.menuId = message.menuId;
+    }
     return obj;
   },
 
@@ -3634,6 +3761,7 @@ export const ListPermissionsRequest: MessageFns<ListPermissionsRequest> = {
     message.actionType = object.actionType ?? "";
     message.sortBy = object.sortBy ?? "";
     message.sortOrder = object.sortOrder ?? "";
+    message.menuId = object.menuId ?? "";
     return message;
   },
 };
diff --git a/src/types/iam/role.ts b/src/types/iam/role.ts
index ff2e3b8..986282d 100644
--- a/src/types/iam/role.ts
+++ b/src/types/iam/role.ts
@@ -118,6 +118,7 @@ export interface ListPermissionsParams {
     serviceName?: string
     moduleName?: string
     actionType?: string
+    menuId?: string
     sortBy?: string
     sortOrder?: string
 }
diff --git a/src/types/iam/user.ts b/src/types/iam/user.ts
index 5aa6ea4..cc48302 100644
--- a/src/types/iam/user.ts
+++ b/src/types/iam/user.ts
@@ -35,6 +35,10 @@ export type {
     AssignUserRolesResponse,
     RemoveUserRolesRequest,
     RemoveUserRolesResponse,
+    AssignUserPermissionsRequest,
+    AssignUserPermissionsResponse,
+    RemoveUserPermissionsRequest,
+    RemoveUserPermissionsResponse,
     GetUserRolesAndPermissionsRequest,
     GetUserRolesAndPermissionsResponse,
     UserAccessInfo,
@@ -56,6 +60,8 @@ export {
     ListUsersResponse as ListUsersResponseParser,
     AssignUserRolesResponse as AssignUserRolesResponseParser,
     RemoveUserRolesResponse as RemoveUserRolesResponseParser,
+    AssignUserPermissionsResponse as AssignUserPermissionsResponseParser,
+    RemoveUserPermissionsResponse as RemoveUserPermissionsResponseParser,
     GetUserRolesAndPermissionsResponse as GetUserRolesAndPermissionsResponseParser,
 } from "@/types/generated/iam/v1/user"