diff --git a/web/src/app/dashboard/settings/users/page.tsx b/web/src/app/dashboard/settings/users/page.tsx
--- a/web/src/app/dashboard/settings/users/page.tsx
+++ b/web/src/app/dashboard/settings/users/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import React, { useCallback, useEffect, useState } from "react";
-import { ChevronDown, ChevronRight, Shield, Trash2 } from "lucide-react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { ChevronRight, Search, Shield, Trash2 } from "lucide-react";
 
 import { useAuth } from "@/lib/auth-context";
 import {
@@ -10,13 +10,16 @@ addUser,
   deleteUser,
   updateUserPermissions,
   transferSuper,
+  getPermissions,
 } from "@/lib/api";
+import type { PermissionEntry, PermissionTemplate } from "@/lib/api";
 import type { UserSummary } from "@/types/users";
 import { SiteHeader } from "@/components/site-header";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
 import { Switch } from "@/components/ui/switch";
 import {
   Select,
@@ -43,45 +46,61 @@ ResponsiveDialogHeader,
   ResponsiveDialogTitle,
   ResponsiveDialogTrigger,
 } from "@/components/ui/responsive-dialog";
+import {
+  Sheet,
+  SheetContent,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
 
-const PERMISSION_CATEGORIES: Record<string, string[]> = {
-  Lexicons: ["lexicons:create", "lexicons:read", "lexicons:delete"],
-  Records: ["records:read", "records:delete", "records:delete-collection"],
-  "Script Variables": [
-    "script-variables:create",
-    "script-variables:read",
-    "script-variables:delete",
-  ],
-  Users: ["users:create", "users:read", "users:update", "users:delete"],
-  "API Keys": ["api-keys:create", "api-keys:read", "api-keys:delete"],
-  Backfill: ["backfill:create", "backfill:read"],
-  "API Clients": ["api-clients:view", "api-clients:create", "api-clients:edit", "api-clients:delete"],
-  Plugins: ["plugins:read", "plugins:create", "plugins:delete"],
-  System: ["stats:read", "events:read"],
+type BskyProfile = {
+  avatar?: string;
+  displayName?: string;
+  description?: string;
 };
 
-const ALL_PERMISSIONS = Object.values(PERMISSION_CATEGORIES).flat();
-
-const TEMPLATES = [
-  { value: "viewer", label: "Viewer" },
-  { value: "operator", label: "Operator" },
-  { value: "manager", label: "Manager" },
-  { value: "full_access", label: "Full Access" },
-] as const;
-
-const TEMPLATE_PERMISSIONS: Record<string, string[]> = {
-  viewer: ["lexicons:read", "records:read", "script-variables:read", "users:read", "api-keys:read", "backfill:read", "stats:read", "events:read"],
-  operator: ["lexicons:read", "records:read", "records:delete", "script-variables:read", "script-variables:create", "users:read", "api-keys:read", "backfill:read", "backfill:create", "stats:read", "events:read"],
-  manager: ["lexicons:create", "lexicons:read", "lexicons:delete", "records:read", "records:delete", "records:delete-collection", "script-variables:create", "script-variables:read", "script-variables:delete", "users:read", "api-keys:read", "backfill:create", "backfill:read", "stats:read", "events:read", "plugins:read", "plugins:create", "plugins:delete"],
-  full_access: ALL_PERMISSIONS,
-};
+function buildCategories(permissions: PermissionEntry[]): Record<string, PermissionEntry[]> {
+  const cats: Record<string, PermissionEntry[]> = {};
+  for (const p of permissions) {
+    if (!cats[p.category]) cats[p.category] = [];
+    cats[p.category].push(p);
+  }
+  return cats;
+}
 
 export default function UsersPage() {
   const { did: currentDid } = useAuth();
   const [users, setUsers] = useState<UserSummary[]>([]);
   const [handles, setHandles] = useState<Record<string, string>>({});
   const [error, setError] = useState<string | null>(null);
-  const [expandedUserId, setExpandedUserId] = useState<string | null>(null);
+  const [selectedUserId, setSelectedUserId] = useState<string | null>(null);
+  const [permSearch, setPermSearch] = useState("");
+  const [permissionEntries, setPermissionEntries] = useState<PermissionEntry[]>([]);
+  const [profiles, setProfiles] = useState<Record<string, BskyProfile>>({});
+  const [templates, setTemplates] = useState<PermissionTemplate[]>([]);
+
+  const permissionCategories = React.useMemo(() => buildCategories(permissionEntries), [permissionEntries]);
+  const filteredCategories = useMemo(() => {
+    if (!permSearch.trim()) return permissionCategories;
+    const terms = permSearch.toLowerCase().split(/\s+/);
+    const result: Record<string, PermissionEntry[]> = {};
+    for (const [category, permissions] of Object.entries(permissionCategories)) {
+      const matched = permissions.filter((p) => {
+        const haystack = `${p.name} ${p.description} ${p.category} ${p.key}`.toLowerCase();
+        return terms.every((term) => haystack.includes(term));
+      });
+      if (matched.length > 0) result[category] = matched;
+    }
+    return result;
+  }, [permissionCategories, permSearch]);
+  const allPermissionKeys = React.useMemo(() => permissionEntries.map((p) => p.key), [permissionEntries]);
+  const templatePermissions = React.useMemo(() => {
+    const map: Record<string, string[]> = {};
+    for (const t of templates) map[t.key] = t.permissions;
+    return map;
+  }, [templates]);
 
   const currentUser = users.find((u) => u.did === currentDid);
   const isCurrentUserSuper = currentUser?.is_super ?? false;
@@ -94,6 +113,12 @@ }, []);
 
   useEffect(() => {
     load();
+    getPermissions()
+      .then((catalog) => {
+        setPermissionEntries(catalog.permissions);
+        setTemplates(catalog.templates);
+      })
+      .catch((e) => setError(e instanceof Error ? e.message : String(e)));
   }, [load]);
 
   // Resolve DIDs to handles via PLC directory
@@ -115,6 +140,27 @@ })
         .catch(() => {});
     }
   }, [users, handles]);
+
+  // Fetch Bluesky profile when a user is selected
+  useEffect(() => {
+    if (!selectedUserId) return;
+    const user = users.find((u) => u.id === selectedUserId);
+    if (!user || user.did in profiles) return;
+    fetch(`https://public.api.bsky.app/xrpc/app.bsky.actor.getProfile?actor=${encodeURIComponent(user.did)}`)
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (!data) return;
+        setProfiles((prev) => ({
+          ...prev,
+          [user.did]: {
+            avatar: data.avatar,
+            displayName: data.displayName,
+            description: data.description,
+          },
+        }));
+      })
+      .catch(() => {});
+  }, [selectedUserId, users, profiles]);
 
   async function handleDelete(id: string) {
     try {
@@ -193,7 +239,7 @@
         <div className="flex items-center justify-between">
           <h2 className="text-lg font-semibold">Users</h2>
           {(isCurrentUserSuper || currentUser?.permissions.includes("users:create")) && (
-            <AddUserDialog onSuccess={load} />
+            <AddUserDialog onSuccess={load} templates={templates} templatePermissions={templatePermissions} />
           )}
         </div>
 
@@ -201,19 +247,18 @@ <div className="overflow-clip rounded-lg border">
           <Table>
             <TableHeader>
               <TableRow>
-                <TableHead className="w-6" />
                 <TableHead>User</TableHead>
                 <TableHead>Permissions</TableHead>
                 <TableHead>Created</TableHead>
                 <TableHead>Last Used</TableHead>
-                <TableHead className="w-auto sticky right-0 bg-inherit z-[1]" />
+                <TableHead className="w-8" />
               </TableRow>
             </TableHeader>
             <TableBody>
               {users.length === 0 && (
                 <TableRow>
                   <TableCell
-                    colSpan={6}
+                    colSpan={5}
                     className="text-muted-foreground text-center"
                   >
                     No users yet.
@@ -221,125 +266,169 @@ </TableCell>
                 </TableRow>
               )}
               {users.map((user) => (
-                <React.Fragment key={user.id}>
-                    <TableRow className="cursor-pointer hover:bg-muted/50">
-                      <TableCell className="w-6 pr-0">
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="size-6"
-                            aria-label={
-                              expandedUserId === user.id
-                                ? "Collapse permissions"
-                                : "Expand permissions"
-                            }
-                            onClick={() =>
-                              setExpandedUserId(
-                                expandedUserId === user.id ? null : user.id
-                              )
-                            }
-                          >
-                            {expandedUserId === user.id ? (
-                              <ChevronDown className="size-4" />
+                <TableRow key={user.id} className="cursor-pointer hover:bg-muted/50" onClick={() => setSelectedUserId(user.id)}>
+                  <TableCell className="text-sm">
+                    <div className="flex items-center gap-2">
+                      <div className="flex flex-col">
+                        {handles[user.did] && (
+                          <span className="font-medium">@{handles[user.did]}</span>
+                        )}
+                        <span className="font-mono text-muted-foreground text-xs">{user.did}</span>
+                      </div>
+                      {user.is_super && (
+                        <Badge variant="secondary" className="text-xs">
+                          Owner
+                        </Badge>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {user.is_super
+                      ? `${allPermissionKeys.length}/${allPermissionKeys.length}`
+                      : `${user.permissions.filter((p) => allPermissionKeys.includes(p)).length}/${allPermissionKeys.length}`}
+                  </TableCell>
+                  <TableCell>
+                    {new Date(user.created_at).toLocaleString()}
+                  </TableCell>
+                  <TableCell>
+                    {user.last_used_at
+                      ? new Date(user.last_used_at).toLocaleString()
+                      : "Never"}
+                  </TableCell>
+                  <TableCell className="w-8 pr-2">
+                    <ChevronRight className="size-4 text-muted-foreground" />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+
+        {(() => {
+          const selectedUser = users.find((u) => u.id === selectedUserId);
+          return (
+            <Sheet open={!!selectedUser} onOpenChange={(open) => { if (!open) { setSelectedUserId(null); setPermSearch(""); } }}>
+              <SheetContent className="overflow-hidden">
+                {selectedUser && (
+                  <>
+                    <SheetHeader>
+                      <SheetTitle>User</SheetTitle>
+                    </SheetHeader>
+
+                    <Card className="mx-4">
+                      <CardContent className="flex items-start gap-3">
+                        {profiles[selectedUser.did]?.avatar && (
+                          <img
+                            src={profiles[selectedUser.did].avatar}
+                            alt=""
+                            className="size-12 rounded-full shrink-0"
+                          />
+                        )}
+                        <div className="flex flex-col gap-0.5 min-w-0">
+                          <p className="font-semibold">
+                            {profiles[selectedUser.did]?.displayName || handles[selectedUser.did] ? (
+                              <>
+                                {profiles[selectedUser.did]?.displayName && (
+                                  <span>{profiles[selectedUser.did].displayName}</span>
+                                )}
+                                {handles[selectedUser.did] && (
+                                  <span className="text-muted-foreground font-normal text-sm ml-1">
+                                    @{handles[selectedUser.did]}
+                                  </span>
+                                )}
+                              </>
                             ) : (
-                              <ChevronRight className="size-4" />
-                            )}
-                          </Button>
-                      </TableCell>
-                      <TableCell
-                        className="text-sm"
-                        onClick={() =>
-                          setExpandedUserId(
-                            expandedUserId === user.id ? null : user.id
-                          )
-                        }
-                      >
-                        <div className="flex items-center gap-2">
-                          <div className="flex flex-col">
-                            {handles[user.did] && (
-                              <span className="font-medium">@{handles[user.did]}</span>
+                              <span className="font-mono text-sm">{selectedUser.did}</span>
                             )}
-                            <span className="font-mono text-muted-foreground text-xs">{user.did}</span>
-                          </div>
-                          {user.is_super && (
-                            <Badge variant="secondary" className="text-xs">
-                              Owner
-                            </Badge>
+                          </p>
+                          <p className="font-mono text-xs text-muted-foreground break-all">{selectedUser.did}</p>
+                          {profiles[selectedUser.did]?.description && (
+                            <p className="mt-1 text-xs text-muted-foreground line-clamp-2">{profiles[selectedUser.did].description}</p>
                           )}
                         </div>
-                      </TableCell>
-                      <TableCell
-                        onClick={() =>
-                          setExpandedUserId(
-                            expandedUserId === user.id ? null : user.id
-                          )
-                        }
-                      >
-                        {user.is_super
-                          ? `${ALL_PERMISSIONS.length}/${ALL_PERMISSIONS.length}`
-                          : `${user.permissions.length}/${ALL_PERMISSIONS.length}`}
-                      </TableCell>
-                      <TableCell
-                        onClick={() =>
-                          setExpandedUserId(
-                            expandedUserId === user.id ? null : user.id
-                          )
-                        }
-                      >
-                        {new Date(user.created_at).toLocaleString()}
-                      </TableCell>
-                      <TableCell
-                        onClick={() =>
-                          setExpandedUserId(
-                            expandedUserId === user.id ? null : user.id
-                          )
-                        }
-                      >
-                        {user.last_used_at
-                          ? new Date(user.last_used_at).toLocaleString()
-                          : "Never"}
-                      </TableCell>
-                      <TableCell className="sticky right-0 bg-inherit z-[1]">
-                        <div className="flex items-center gap-1">
-                          {isCurrentUserSuper && (
-                            <TransferOwnershipDialog
-                              user={user}
-                              disabled={user.did === currentDid}
-                              onConfirm={() => handleTransferSuper(user.id)}
-                            />
-                          )}
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="size-8 text-muted-foreground hover:text-destructive"
-                            title="Delete user"
-                            aria-label="Delete user"
-                            disabled={user.is_super || user.did === currentDid || (!isCurrentUserSuper && !currentUser?.permissions.includes("users:delete"))}
-                            onClick={() => handleDelete(user.id)}
-                          >
-                            <Trash2 className="size-4" />
-                          </Button>
-                        </div>
-                      </TableCell>
-                    </TableRow>
-                    {expandedUserId === user.id && (
-                      <TableRow className="bg-muted/30 hover:bg-muted/30">
-                        <TableCell colSpan={6} className="p-4">
-                          <PermissionsPanel
-                            user={user}
-                            isSelf={user.did === currentDid}
-                            currentUserPermissions={currentUser?.permissions ?? []}
-                            isCurrentUserSuper={isCurrentUserSuper}
-                            onToggle={handleTogglePermission}
+                      </CardContent>
+                    </Card>
+
+                    <div className="grid grid-cols-2 gap-4 text-sm px-4">
+                      <div>
+                        <span className="text-muted-foreground text-xs">Role</span>
+                        <p className="text-xs">
+                          {selectedUser.is_super ? (
+                            <Badge variant="secondary" className="text-xs">Owner</Badge>
+                          ) : "Member"}
+                        </p>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground text-xs">Permissions</span>
+                        <p className="text-xs tabular-nums">
+                          {selectedUser.is_super
+                            ? `${allPermissionKeys.length}/${allPermissionKeys.length}`
+                            : `${selectedUser.permissions.filter((p) => allPermissionKeys.includes(p)).length}/${allPermissionKeys.length}`}
+                        </p>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground text-xs">Created</span>
+                        <p className="text-xs">{new Date(selectedUser.created_at).toLocaleString()}</p>
+                      </div>
+                      <div>
+                        <span className="text-muted-foreground text-xs">Last Active</span>
+                        <p className="text-xs">
+                          {selectedUser.last_used_at
+                            ? new Date(selectedUser.last_used_at).toLocaleString()
+                            : "Never"}
+                        </p>
+                      </div>
+                    </div>
+
+                    <hr className="mx-4" />
+
+                    <div className="relative px-4">
+                      <Search className="absolute left-6.5 top-2.5 size-4 text-muted-foreground" />
+                      <Input
+                        placeholder="Search permissions..."
+                        value={permSearch}
+                        onChange={(e) => setPermSearch(e.target.value)}
+                        className="pl-9"
+                      />
+                    </div>
+
+                    <div className="flex-1 min-h-0 overflow-y-auto px-4 pb-4">
+                      <PermissionsPanel
+                        user={selectedUser}
+                        isSelf={selectedUser.did === currentDid}
+                        currentUserPermissions={currentUser?.permissions ?? []}
+                        isCurrentUserSuper={isCurrentUserSuper}
+                        filteredCategories={filteredCategories}
+                        onToggle={handleTogglePermission}
+                      />
+                    </div>
+
+                    <SheetFooter className="border-t flex-row">
+                      <div className="flex items-center gap-2 ml-auto">
+                        {isCurrentUserSuper && (
+                          <TransferOwnershipDialog
+                            user={selectedUser}
+                            disabled={selectedUser.did === currentDid}
+                            onConfirm={() => handleTransferSuper(selectedUser.id)}
                           />
-                        </TableCell>
-                      </TableRow>
-                    )}
-                </React.Fragment>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
+                        )}
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          disabled={selectedUser.is_super || selectedUser.did === currentDid || (!isCurrentUserSuper && !currentUser?.permissions.includes("users:delete"))}
+                          onClick={() => { handleDelete(selectedUser.id); setSelectedUserId(null); }}
+                        >
+                          <Trash2 className="mr-1 size-3.5" />
+                          Delete User
+                        </Button>
+                      </div>
+                    </SheetFooter>
+                  </>
+                )}
+              </SheetContent>
+            </Sheet>
+          );
+        })()}
       </div>
     </>
   );
@@ -350,47 +439,50 @@ user,
   isSelf,
   currentUserPermissions,
   isCurrentUserSuper,
+  filteredCategories,
   onToggle,
 }: {
   user: UserSummary;
   isSelf: boolean;
   currentUserPermissions: string[];
   isCurrentUserSuper: boolean;
+  filteredCategories: Record<string, PermissionEntry[]>;
   onToggle: (user: UserSummary, permission: string, enabled: boolean) => void;
 }) {
   const canUpdate = isCurrentUserSuper || currentUserPermissions.includes("users:update");
 
   return (
-    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-      {Object.entries(PERMISSION_CATEGORIES).map(([category, permissions]) => (
-        <div key={category} className="flex flex-col gap-2">
+    <div className="grid gap-8 lg:grid-cols-2">
+      {Object.entries(filteredCategories).map(([category, permissions]) => (
+        <div key={category} className="flex flex-col items-start gap-2">
           <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
             {category}
           </p>
-          <div className="flex flex-col gap-1.5">
+          <div className="flex flex-col gap-3 w-full">
             {permissions.map((perm) => {
-              const enabled = user.is_super || user.permissions.includes(perm);
+              const enabled = user.is_super || user.permissions.includes(perm.key);
               return (
-                <div key={perm} className="flex items-center gap-2">
+                <div key={perm.key} className="flex items-start gap-2">
                   <Switch
-                    id={`${user.id}-${perm}`}
+                    id={`${user.id}-${perm.key}`}
                     checked={enabled}
                     disabled={
                       user.is_super ||
                       isSelf ||
                       !canUpdate ||
-                      (!isCurrentUserSuper && !currentUserPermissions.includes(perm))
+                      (!isCurrentUserSuper && !currentUserPermissions.includes(perm.key))
                     }
                     onCheckedChange={(checked) =>
-                      onToggle(user, perm, checked)
+                      onToggle(user, perm.key, checked)
                     }
-                    className="scale-75"
+                    className="mt-0.5 scale-75"
                   />
                   <Label
-                    htmlFor={`${user.id}-${perm}`}
-                    className="cursor-pointer font-mono text-xs"
+                    htmlFor={`${user.id}-${perm.key}`}
+                    className="flex flex-col items-start cursor-pointer text-xs leading-tight"
                   >
-                    {perm}
+                    <span>{perm.name}</span>
+                    <span className="text-muted-foreground font-normal">{perm.description}</span>
                   </Label>
                 </div>
               );
@@ -422,14 +514,12 @@ return (
     <ResponsiveDialog open={open} onOpenChange={setOpen}>
       <ResponsiveDialogTrigger asChild>
         <Button
-          variant="ghost"
-          size="icon"
-          className="size-8 text-muted-foreground hover:text-yellow-500"
-          title="Transfer ownership to this user"
-          aria-label="Transfer ownership to this user"
+          variant="outline"
+          size="sm"
           disabled={disabled}
         >
-          <Shield className="size-4" />
+          <Shield className="mr-1 size-3.5" />
+          Transfer Ownership
         </Button>
       </ResponsiveDialogTrigger>
       <ResponsiveDialogContent>
@@ -457,8 +547,12 @@ }
 
 function AddUserDialog({
   onSuccess,
+  templates,
+  templatePermissions,
 }: {
   onSuccess: () => void;
+  templates: PermissionTemplate[];
+  templatePermissions: Record<string, string[]>;
 }) {
   const [did, setDid] = useState("");
   const [template, setTemplate] = useState<string>("");
@@ -511,8 +605,8 @@ <SelectTrigger id="user-template">
                 <SelectValue placeholder="No template (no permissions)" />
               </SelectTrigger>
               <SelectContent>
-                {TEMPLATES.map((t) => (
-                  <SelectItem key={t.value} value={t.value}>
+                {templates.map((t) => (
+                  <SelectItem key={t.key} value={t.key}>
                     {t.label}
                   </SelectItem>
                 ))}
@@ -521,7 +615,7 @@ </Select>
           </div>
           {template && (
             <p className="text-muted-foreground text-xs">
-              Grants {TEMPLATE_PERMISSIONS[template]?.length ?? 0} permissions.
+              Grants {templatePermissions[template]?.length ?? 0} permissions.
             </p>
           )}
         </div>