diff --git a/apps/edr-freight-web/backoffice/src/App.tsx b/apps/edr-freight-web/backoffice/src/App.tsx
index 6d28d8ac9..10a69ae5e 100644
--- a/apps/edr-freight-web/backoffice/src/App.tsx
+++ b/apps/edr-freight-web/backoffice/src/App.tsx
@@ -5,6 +5,8 @@ import { LayoutDashboard, Network } from "lucide-react";
 import { useAuth } from "./auth/useAuth";
 import LoginPage from "./pages/auth/LoginPage";
 import OverviewPage from "./pages/dashboard/OverviewPage";
+import PermissionsPage from "./pages/dashboard/user-management/PermissionsPage";
+import RolesPage from "./pages/dashboard/user-management/RolesPage";
 import UserManagementPage from "./pages/dashboard/user-management/UserManagementPage";
 import LoadingScreen from "./components/LoadingScreen";
 
@@ -18,6 +20,16 @@ const sidebarItems: SidebarItem[] = [
     label: "User management",
     href: "/dashboard/user-management",
     icon: <Network />,
+    children: [
+      {
+        label: "Permissions",
+        href: "/dashboard/user-management/permissions",
+      },
+      {
+        label: "Roles",
+        href: "/dashboard/user-management/roles",
+      },
+    ],
   },
 ];
 
@@ -67,6 +79,8 @@ const App = () => {
       <Route path="/dashboard" element={<DashboardShell />}>
         <Route path="overview" element={<OverviewPage />} />
         <Route path="user-management" element={<UserManagementPage />} />
+        <Route path="user-management/permissions" element={<PermissionsPage />} />
+        <Route path="user-management/roles" element={<RolesPage />} />
         <Route path="org-structure" element={<Navigate to="/dashboard/user-management" replace />} />
         <Route path="org-structure/*" element={<Navigate to="/dashboard/user-management" replace />} />
       </Route>
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx
new file mode 100644
index 000000000..d0d9a7867
--- /dev/null
+++ b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/PermissionsPage.tsx
@@ -0,0 +1,202 @@
+import { useEffect, useState } from "react";
+import { isAxiosError } from "axios";
+
+import { api } from "@/auth/http";
+
+interface LocaleText {
+  en?: string;
+  am?: string;
+}
+
+interface PermissionRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+}
+
+interface ListResponse<T> {
+  count?: number;
+  items?: T[];
+  data?: T[];
+}
+
+const PAGE_SIZE = 2000;
+
+const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") =>
+  value?.en ?? value?.am ?? fallback;
+
+const getItems = <T,>(payload: ListResponse<T> | T[] | undefined | null) => {
+  if (!payload) {
+    return [] as T[];
+  }
+
+  if (Array.isArray(payload)) {
+    return payload;
+  }
+
+  return payload.items ?? payload.data ?? [];
+};
+
+const sortPermissions = (items: PermissionRecord[]) =>
+  [...items].sort((left, right) =>
+    getLocaleLabel(left.name, left.key).localeCompare(
+      getLocaleLabel(right.name, right.key),
+    ),
+  );
+
+const PermissionsPage = () => {
+  const [permissions, setPermissions] = useState<PermissionRecord[]>([]);
+  const [count, setCount] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadPermissions = async () => {
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        const response = await api.get<ListResponse<PermissionRecord>>("/permissions", {
+          params: {
+            skip: 0,
+            take: PAGE_SIZE,
+          },
+        });
+
+        if (!isMounted) {
+          return;
+        }
+
+        const items = sortPermissions(getItems(response.data));
+
+        setPermissions(items);
+        setCount(response.data.count ?? items.length);
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setErrorMessage(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load permissions."
+            : "Unable to load permissions.",
+        );
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void loadPermissions();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const hasMore = count > permissions.length;
+
+  const handleLoadMore = async () => {
+    setLoadingMore(true);
+    setErrorMessage(null);
+
+    try {
+      const response = await api.get<ListResponse<PermissionRecord>>("/permissions", {
+        params: {
+          skip: permissions.length,
+          take: PAGE_SIZE,
+        },
+      });
+
+      const nextItems = sortPermissions(getItems(response.data));
+
+      setPermissions((current) => [...current, ...nextItems]);
+      setCount(response.data.count ?? permissions.length + nextItems.length);
+    } catch (error) {
+      setErrorMessage(
+        isAxiosError(error)
+          ? error.response?.data?.message ?? "Unable to load more permissions."
+          : "Unable to load more permissions.",
+      );
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  return (
+    <section className="p-6">
+      <div className="space-y-6 rounded-2xl border border-border bg-card p-8 shadow-sm">
+        <div className="space-y-3">
+          <p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
+            User Management
+          </p>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-semibold text-foreground">Permissions</h1>
+              <p className="mt-3 max-w-2xl text-sm text-muted-foreground">
+                Browse the full IAM permission catalog for the freight backoffice environment.
+              </p>
+            </div>
+            <div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
+              {count || permissions.length} permissions
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            Loading permissions...
+          </div>
+        ) : errorMessage ? (
+          <div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-8 text-center text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
+            {errorMessage}
+          </div>
+        ) : permissions.length ? (
+          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
+            {permissions.map((permission) => (
+              <article
+                key={permission.id}
+                className="rounded-2xl border border-border/70 bg-background/80 p-4 shadow-sm transition hover:border-border hover:bg-accent/20"
+              >
+                <div className="min-w-0 space-y-1">
+                  <p className="truncate text-sm font-semibold leading-5 text-foreground">
+                    {getLocaleLabel(permission.name, permission.key)}
+                  </p>
+                  <p className="truncate font-mono text-xs text-muted-foreground/90">
+                    {permission.key}
+                  </p>
+                </div>
+              </article>
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            No permissions are available in the system.
+          </div>
+        )}
+
+        {hasMore ? (
+          <div className="flex items-center justify-between gap-4 rounded-2xl border border-border bg-background px-4 py-3">
+            <p className="text-sm text-muted-foreground">
+              Showing {permissions.length} of {count} permissions.
+            </p>
+            <button
+              type="button"
+              onClick={() => void handleLoadMore()}
+              disabled={loadingMore}
+              className="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              {loadingMore ? "Loading..." : "Load more"}
+            </button>
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+};
+
+export default PermissionsPage;
diff --git a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx
index fd02787cf..862df0119 100644
--- a/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx
+++ b/apps/edr-freight-web/backoffice/src/pages/dashboard/user-management/RolesPage.tsx
@@ -1,11 +1,292 @@
-import FeaturePlaceholder from "@/components/FeaturePlaceholder";
+import { useEffect, useState } from "react";
+import { isAxiosError } from "axios";
+import { Shield } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@edr/ui-common";
+
+import { api } from "@/auth/http";
+
+interface LocaleText {
+  en?: string;
+  am?: string;
+}
+
+interface RoleRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+}
+
+interface PermissionRecord {
+  id: string;
+  key: string;
+  name?: LocaleText;
+}
+
+interface ListResponse<T> {
+  items?: T[];
+  data?: T[];
+}
+
+const getLocaleLabel = (value?: LocaleText | null, fallback = "Unnamed") =>
+  value?.en ?? value?.am ?? fallback;
+
+const getItems = <T,>(payload: ListResponse<T> | T[] | undefined | null) => {
+  if (!payload) {
+    return [] as T[];
+  }
+
+  if (Array.isArray(payload)) {
+    return payload;
+  }
+
+  return payload.items ?? payload.data ?? [];
+};
 
 const RolesPage = () => {
+  const [roles, setRoles] = useState<RoleRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [selectedRole, setSelectedRole] = useState<RoleRecord | null>(null);
+  const [rolePermissions, setRolePermissions] = useState<PermissionRecord[]>([]);
+  const [rolePermissionsLoading, setRolePermissionsLoading] = useState(false);
+  const [rolePermissionsError, setRolePermissionsError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadRoles = async () => {
+      setLoading(true);
+      setErrorMessage(null);
+
+      try {
+        const response = await api.get<ListResponse<RoleRecord>>("/roles");
+
+        if (!isMounted) {
+          return;
+        }
+
+        setRoles(
+          getItems(response.data).sort((left, right) =>
+            getLocaleLabel(left.name, left.key).localeCompare(
+              getLocaleLabel(right.name, right.key),
+            ),
+          ),
+        );
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setErrorMessage(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load roles."
+            : "Unable to load roles.",
+        );
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void loadRoles();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!selectedRole) {
+      setRolePermissions([]);
+      setRolePermissionsError(null);
+      setRolePermissionsLoading(false);
+      return;
+    }
+
+    let isMounted = true;
+
+    const loadRolePermissions = async () => {
+      setRolePermissionsLoading(true);
+      setRolePermissionsError(null);
+
+      try {
+        const response = await api.get<ListResponse<PermissionRecord>>(
+          `/role-permissions/given-first/${selectedRole.id}`,
+        );
+
+        if (!isMounted) {
+          return;
+        }
+
+        setRolePermissions(
+          getItems(response.data).sort((left, right) =>
+            getLocaleLabel(left.name, left.key).localeCompare(
+              getLocaleLabel(right.name, right.key),
+            ),
+          ),
+        );
+      } catch (error) {
+        if (!isMounted) {
+          return;
+        }
+
+        setRolePermissionsError(
+          isAxiosError(error)
+            ? error.response?.data?.message ?? "Unable to load role details."
+            : "Unable to load role details.",
+        );
+      } finally {
+        if (isMounted) {
+          setRolePermissionsLoading(false);
+        }
+      }
+    };
+
+    void loadRolePermissions();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [selectedRole]);
+
   return (
-    <FeaturePlaceholder
-      title="Roles"
-      description="Define backoffice access roles, capability groups, and permission boundaries for freight administration."
-    />
+    <section className="p-6">
+      <div className="space-y-6 rounded-2xl border border-border bg-card p-8 shadow-sm">
+        <div className="space-y-3">
+          <p className="text-sm font-medium uppercase tracking-[0.2em] text-muted-foreground">
+            User Management
+          </p>
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-semibold text-foreground">Roles</h1>
+              <p className="mt-3 max-w-2xl text-sm text-muted-foreground">
+                Browse freight backoffice roles and their internal keys in a simple grid view.
+              </p>
+            </div>
+            <div className="rounded-full border border-border bg-muted px-3 py-1 text-sm font-medium text-muted-foreground">
+              {roles.length} roles
+            </div>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            Loading roles...
+          </div>
+        ) : errorMessage ? (
+          <div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-8 text-center text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
+            {errorMessage}
+          </div>
+        ) : roles.length ? (
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+            {roles.map((role) => (
+              <button
+                key={role.id}
+                type="button"
+                onClick={() => setSelectedRole(role)}
+                className="rounded-2xl border border-border bg-background p-5 text-left transition hover:border-border/80 hover:bg-accent/20"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-sky-50 text-sky-600 dark:bg-sky-950/40 dark:text-sky-300">
+                    <Shield className="h-5 w-5" />
+                  </div>
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-semibold text-foreground">
+                      {getLocaleLabel(role.name, role.key)}
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">{role.key}</p>
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        ) : (
+          <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+            No roles available.
+          </div>
+        )}
+      </div>
+
+      <Dialog open={Boolean(selectedRole)} onOpenChange={(open) => !open && setSelectedRole(null)}>
+        <DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>{selectedRole ? getLocaleLabel(selectedRole.name, selectedRole.key) : "Role details"}</DialogTitle>
+            <DialogDescription>
+              {selectedRole
+                ? `Review the permission set assigned to ${getLocaleLabel(selectedRole.name, selectedRole.key)}.`
+                : undefined}
+            </DialogDescription>
+          </DialogHeader>
+
+          {selectedRole ? (
+            <div className="space-y-6">
+              <div className="grid gap-4 rounded-2xl border border-border bg-muted/40 p-4 sm:grid-cols-2">
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Role name
+                  </p>
+                  <p className="mt-2 text-sm font-semibold text-foreground">
+                    {getLocaleLabel(selectedRole.name, selectedRole.key)}
+                  </p>
+                </div>
+                <div>
+                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
+                    Role key
+                  </p>
+                  <p className="mt-2 font-mono text-sm text-foreground">{selectedRole.key}</p>
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                <div className="flex items-center justify-between gap-3">
+                  <h2 className="text-sm font-semibold text-foreground">Permissions</h2>
+                  <div className="rounded-full border border-border bg-muted px-3 py-1 text-xs font-medium text-muted-foreground">
+                    {rolePermissions.length} permissions
+                  </div>
+                </div>
+
+                {rolePermissionsLoading ? (
+                  <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+                    Loading role details...
+                  </div>
+                ) : rolePermissionsError ? (
+                  <div className="rounded-2xl border border-red-200 bg-red-50 px-4 py-8 text-center text-sm text-red-700 dark:border-red-950 dark:bg-red-950/30 dark:text-red-300">
+                    {rolePermissionsError}
+                  </div>
+                ) : rolePermissions.length ? (
+                  <div className="grid gap-3 md:grid-cols-2">
+                    {rolePermissions.map((permission) => (
+                      <article
+                        key={permission.id}
+                        className="rounded-2xl border border-border/70 bg-background/80 p-4 shadow-sm"
+                      >
+                        <p className="truncate text-sm font-semibold leading-5 text-foreground">
+                          {getLocaleLabel(permission.name, permission.key)}
+                        </p>
+                        <p className="mt-1 truncate font-mono text-xs text-muted-foreground/90">
+                          {permission.key}
+                        </p>
+                      </article>
+                    ))}
+                  </div>
+                ) : (
+                  <div className="rounded-2xl border border-dashed border-border bg-muted px-4 py-8 text-center text-sm text-muted-foreground">
+                    No permissions are assigned to this role.
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : null}
+        </DialogContent>
+      </Dialog>
+    </section>
   );
 };