diff --git a/src/api/fetchers.ts b/src/api/fetchers.ts
index 061fcfeb..ce0296c7 100644
--- a/src/api/fetchers.ts
+++ b/src/api/fetchers.ts
@@ -652,11 +652,9 @@ export async function logout() {
   // cross-origin URL the dev proxy can't follow, so the browser reports a
   // network error even though we're logged out. Handle it in LogoutPage
   // instead of surfacing the global connection-error modal.
-  const res = await axios.post(
-    `${BASE_URL}/loginManager/logout`,
-    undefined,
-    { skipErrorNotifications: true } as CustomAxiosRequestConfig
-  );
+  const res = await axios.post(`${BASE_URL}/loginManager/logout`, undefined, {
+    skipErrorNotifications: true,
+  } as CustomAxiosRequestConfig);
   return res.data;
 }
 
@@ -1509,3 +1507,101 @@ export async function updateDrawerGroup(
 export async function deleteDrawerGroup(groupId: number): Promise<void> {
   await axios.delete(`${BASE_URL}/drawerPermissions/groups/${groupId}`);
 }
+
+// The drawer-manager twin of fetchUserAutocomplete: same shape, but the
+// endpoint is open to any drawer manager, not just instance admins.
+export async function fetchDrawerUserAutocomplete(
+  query: string,
+  options?: { signal?: AbortSignal }
+): Promise<UserAutocompleteMatch[]> {
+  const res = await axios.get<{ matches: UserAutocompleteMatch[] }>(
+    `${BASE_URL}/drawerPermissions/userAutocomplete`,
+    { params: { q: query }, signal: options?.signal }
+  );
+
+  return res.data.matches;
+}
+
+export async function fetchDrawerGroupMembers(
+  groupId: number
+): Promise<GroupMember[]> {
+  const res = await axios.get<{ members: GroupMember[] }>(
+    `${BASE_URL}/drawerPermissions/groups/${groupId}/members`
+  );
+
+  return res.data.members;
+}
+
+export async function addDrawerGroupMember(
+  input: AddGroupMemberInput
+): Promise<GroupMember> {
+  const params = new URLSearchParams();
+  if ("localUserId" in input) {
+    params.append("localUserId", String(input.localUserId));
+  } else {
+    params.append("remoteUserId", input.remoteUserId);
+  }
+
+  const res = await axios.post<{ member: GroupMember }>(
+    `${BASE_URL}/drawerPermissions/groups/${input.groupId}/members`,
+    params
+  );
+
+  return res.data.member;
+}
+
+export async function removeDrawerGroupMember(
+  groupId: number,
+  userId: number
+): Promise<void> {
+  await axios.delete(
+    `${BASE_URL}/drawerPermissions/groups/${groupId}/members/${userId}`
+  );
+}
+
+export async function fetchDrawerGroupEntries(
+  groupId: PermissionsGroup["id"]
+): Promise<PermissionsGroupEntry[]> {
+  const res = await axios.get<{ entries: PermissionsGroupEntry[] }>(
+    `${BASE_URL}/drawerPermissions/groups/${groupId}/entries`
+  );
+  return res.data.entries;
+}
+
+export async function addDrawerGroupEntry({
+  groupId,
+  value,
+}: AddGroupEntryInput): Promise<PermissionsGroupEntry> {
+  const payload = new URLSearchParams({ value });
+
+  const res = await axios.post<{ entry: PermissionsGroupEntry }>(
+    `${BASE_URL}/drawerPermissions/groups/${groupId}/entries`,
+    payload
+  );
+
+  return res.data.entry;
+}
+
+export async function updateDrawerGroupEntry({
+  groupId,
+  entryId,
+  value,
+}: UpdateGroupEntryInput): Promise<PermissionsGroupEntry> {
+  const payload = new URLSearchParams({ value });
+
+  const res = await axios.put<{ entry: PermissionsGroupEntry }>(
+    `${BASE_URL}/drawerPermissions/groups/${groupId}/entries/${entryId}`,
+    payload
+  );
+
+  return res.data.entry;
+}
+
+export async function removeDrawerGroupEntry(
+  groupId: PermissionsGroup["id"],
+  entryId: PermissionsGroupEntry["id"]
+): Promise<void> {
+  await axios.delete(
+    `${BASE_URL}/drawerPermissions/groups/${groupId}/entries/${entryId}`
+  );
+}
diff --git a/src/pages/AdminPermissionsPage/GroupsTabContent.vue b/src/pages/AdminPermissionsPage/GroupsTabContent.vue
index 3b2782d3..2a030308 100644
--- a/src/pages/AdminPermissionsPage/GroupsTabContent.vue
+++ b/src/pages/AdminPermissionsPage/GroupsTabContent.vue
@@ -34,9 +34,12 @@
                 v-for="header in headerGroup.headers"
                 :key="header.id"
                 class="bg-surface-container-low"
-                :class="{
-                  'cursor-pointer select-none': header.column.getCanSort(),
-                }"
+                :class="[
+                  header.column.columnDef.meta?.widthClass,
+                  {
+                    'cursor-pointer select-none': header.column.getCanSort(),
+                  },
+                ]"
                 @click="header.column.getToggleSortingHandler()?.($event)">
                 <div class="flex items-center gap-2">
                   <FlexRender
diff --git a/src/pages/AdminPermissionsPage/RulesTabContent.vue b/src/pages/AdminPermissionsPage/RulesTabContent.vue
index 0e2747d0..82d74518 100644
--- a/src/pages/AdminPermissionsPage/RulesTabContent.vue
+++ b/src/pages/AdminPermissionsPage/RulesTabContent.vue
@@ -34,9 +34,12 @@
                 v-for="header in headerGroup.headers"
                 :key="header.id"
                 class="bg-surface-container-low"
-                :class="{
-                  'cursor-pointer select-none': header.column.getCanSort(),
-                }"
+                :class="[
+                  header.column.columnDef.meta?.widthClass,
+                  {
+                    'cursor-pointer select-none': header.column.getCanSort(),
+                  },
+                ]"
                 @click="header.column.getToggleSortingHandler()?.($event)">
                 <div class="flex items-center gap-2">
                   <FlexRender
diff --git a/src/pages/DrawerManagementPage/AddGroupEntryRow.vue b/src/pages/DrawerManagementPage/AddGroupEntryRow.vue
new file mode 100644
index 00000000..4049df66
--- /dev/null
+++ b/src/pages/DrawerManagementPage/AddGroupEntryRow.vue
@@ -0,0 +1,94 @@
+<template>
+  <TableRow v-if="isPending || isOpen">
+    <TableCell class="text-sm p-2" :colspan="colspan">
+      <p v-if="isPending">{{ pendingValue }} (saving...)</p>
+      <form
+        v-else
+        class="flex items-center gap-2"
+        :data-group-entry-add-form="group.id"
+        @submit.prevent="handleSave">
+        <GroupEntryValueInput
+          v-model="draftValue"
+          class="flex-1"
+          :group="group"
+          :inputId="`group-entry-add-input-${group.id}`"
+          :inputClass="`group-entry-add__input--${group.id}`"
+          :label="`New ${group.label} Entry Value`" />
+        <Button
+          type="submit"
+          :data-group-entry-add-save="group.id"
+          variant="secondary"
+          class="py-2 border border-secondary-container"
+          :aria-label="`Save new entry in ${group.label}`">
+          <CheckIcon class="size-4" />
+          Save
+        </Button>
+        <Button
+          type="button"
+          :data-group-entry-add-cancel="group.id"
+          variant="tertiary"
+          class="py-2"
+          :aria-label="`Cancel new entry in ${group.label}`"
+          @click="closeForm">
+          <XIcon class="size-4" />
+          Cancel
+        </Button>
+      </form>
+    </TableCell>
+  </TableRow>
+</template>
+<script setup lang="ts">
+import type { PermissionsGroup } from "@/types";
+import { TableRow, TableCell } from "@/components/ui/table";
+import { computed, ref } from "vue";
+import { XIcon, CheckIcon } from "lucide-vue-next";
+import GroupEntryValueInput from "./GroupEntryValueInput.vue";
+import { useAddDrawerGroupEntryMutation } from "./drawerGroupQueries";
+import Button from "@/components/Button/Button.vue";
+
+const props = withDefaults(
+  defineProps<{ group: PermissionsGroup; colspan?: number }>(),
+  {
+    colspan: 2,
+  }
+);
+
+// The in-flight "(saving...)" row renders here from the mutation, so the
+// parent toggles `open` instead of v-if. Unmounting would drop that row
+// while the add is still settling.
+const isOpen = defineModel<boolean>("open", { required: true });
+
+const draftValue = ref("");
+
+const {
+  mutate: addGroupEntry,
+  isPending,
+  variables,
+} = useAddDrawerGroupEntryMutation();
+
+// Show what was submitted, not the live input the user may keep editing.
+const pendingValue = computed(() => variables.value?.value ?? "");
+
+function closeForm(): void {
+  isOpen.value = false;
+  draftValue.value = "";
+}
+
+function handleSave(): void {
+  const trimmedDraft = draftValue.value.trim();
+
+  // a blank draft has nothing to save, treat it as a cancel
+  if (trimmedDraft === "") {
+    closeForm();
+    return;
+  }
+
+  // Close only on success so a failed add reopens the form with the
+  // typed value still in place for a retry.
+  addGroupEntry(
+    { groupId: props.group.id, value: trimmedDraft },
+    { onSuccess: closeForm }
+  );
+}
+</script>
+<style scoped></style>
diff --git a/src/pages/DrawerManagementPage/AddGroupMemberRow.vue b/src/pages/DrawerManagementPage/AddGroupMemberRow.vue
new file mode 100644
index 00000000..7b89ed93
--- /dev/null
+++ b/src/pages/DrawerManagementPage/AddGroupMemberRow.vue
@@ -0,0 +1,262 @@
+<template>
+  <TableRow v-if="isPending || isOpen">
+    <TableCell :colspan="colspan" class="text-sm p-2">
+      <p v-if="isPending">{{ pendingName }} (adding…)</p>
+      <form
+        v-else
+        class="flex items-center gap-2"
+        :data-group-add-member-form="group.id"
+        @submit.prevent="handleSave">
+        <div class="flex-1">
+          <label :for="`group-${group.id}-add-member`" class="sr-only">
+            Add member
+          </label>
+          <AutoCompleteInput
+            :id="`group-${group.id}-add-member`"
+            :modelValue="search"
+            :items="options"
+            :isLoading="isSearching"
+            :isItemDisabled="isOptionDisabled"
+            :blurOnSelect="false"
+            :minChars="2"
+            placeholder="Add member by name, email, or username…"
+            :inputClass="`w-full bg-surface border-outline-variant group-member-add__input--${group.id}`"
+            @update:modelValue="handleSearchInput"
+            @select="handleSelect">
+            <template #option="{ item }">
+              <template v-if="item.kind === 'match'">
+                <div
+                  class="border border-current rounded-full size-8 flex items-center justify-center">
+                  {{ initials(item.match.name) }}
+                </div>
+                <div>
+                  <span class="block truncate font-medium">
+                    {{ item.match.name }}
+                  </span>
+                  <span class="block truncate text-xs">
+                    {{ secondaryLine(item.match) }}
+                  </span>
+                  <em v-if="isAlreadyMember(item.match)" class="text-xs italic">
+                    already a member
+                  </em>
+                </div>
+              </template>
+              <template v-else>
+                <div
+                  class="border border-current rounded-md size-8 flex items-center justify-center">
+                  <PlusIcon class="size-4" />
+                </div>
+                <div>
+                  <span class="block truncate font-medium">
+                    Provision and add remote user
+                  </span>
+                  <span class="block truncate text-xs">
+                    with username: "{{ item.query }}"
+                  </span>
+                </div>
+              </template>
+            </template>
+          </AutoCompleteInput>
+        </div>
+        <Button
+          title="Save"
+          type="submit"
+          variant="secondary"
+          class="py-2 border border-secondary-container"
+          :data-group-add-member-save="group.id"
+          aria-label="Save new member">
+          <CheckIcon class="size-4" />
+          Save
+        </Button>
+        <Button
+          title="Cancel"
+          variant="tertiary"
+          class="py-2"
+          :data-group-add-member-cancel="group.id"
+          aria-label="Cancel new member"
+          @click="closeForm">
+          <XIcon class="size-4" />
+          Cancel
+        </Button>
+      </form>
+    </TableCell>
+  </TableRow>
+</template>
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useDebounce } from "@vueuse/core";
+import { useQuery } from "@tanstack/vue-query";
+import { TableRow, TableCell } from "@/components/ui/table";
+import { XIcon, CheckIcon, PlusIcon } from "lucide-vue-next";
+import { AutoCompleteInput } from "@/components/AutoCompleteInput";
+import { useDrawerUserAutocompleteQuery } from "@/queries/useUserAutocompleteQuery";
+import {
+  drawerGroupMembersQuery,
+  useAddDrawerGroupMemberMutation,
+} from "./drawerGroupQueries";
+import type { PermissionsGroup, UserAutocompleteMatch } from "@/types";
+import Button from "@/components/Button/Button.vue";
+
+// A row in the add-member dropdown: a person to pick, or the pinned action
+// that provisions a brand-new account from whatever was typed.
+type MemberOption =
+  | { kind: "match"; match: UserAutocompleteMatch }
+  | { kind: "create"; query: string };
+
+const props = defineProps<{
+  group: PermissionsGroup;
+  colspan: number;
+}>();
+
+// The in-flight "(adding…)" row renders here from the mutation, so the
+// parent toggles `open` instead of v-if. Unmounting would drop that row
+// while the add is still settling.
+const isOpen = defineModel<boolean>("open", { required: true });
+
+const search = ref("");
+const debouncedSearch = useDebounce(search, 300);
+const { data: matches, isFetching } =
+  useDrawerUserAutocompleteQuery(debouncedSearch);
+const matchList = computed(() => matches.value ?? []);
+
+// The debounce window counts as loading too: while the query waits for
+// typing to settle, matches still reflect the previous term, and the
+// dropdown must not present them as current.
+const isSearching = computed(
+  () => isFetching.value || search.value.trim() !== debouncedSearch.value.trim()
+);
+
+// matches first, then a create row pinned to the bottom whenever there is
+// text to provision, present even when matches exist, so creating someone
+// not in the directory is always one click away
+const options = computed<MemberOption[]>(() => {
+  const rows: MemberOption[] = matchList.value.map((match) => ({
+    kind: "match",
+    match,
+  }));
+  const query = search.value.trim();
+  if (query.length > 0) {
+    rows.push({ kind: "create", query });
+  }
+  return rows;
+});
+
+// Shares the cache entry the surrounding members table already fetched.
+const { data: members } = useQuery(
+  drawerGroupMembersQuery(() => props.group.id)
+);
+
+const memberIds = computed(
+  () => new Set((members.value ?? []).map((member) => member.userId))
+);
+
+function isAlreadyMember(match: UserAutocompleteMatch): boolean {
+  return match.localUserId !== null && memberIds.value.has(match.localUserId);
+}
+
+// only an existing member is unpickable, the create row is always actionable
+function isOptionDisabled(option: MemberOption): boolean {
+  return option.kind === "match" && isAlreadyMember(option.match);
+}
+
+// the picked option, held until Save commits it
+const stagedOption = ref<MemberOption | null>(null);
+
+// Selecting fills the input with the username (the one field that stays
+// meaningful as plain text) rather than saving, mirroring the entries
+// row's fill-on-select behavior.
+function handleSelect(option: MemberOption): void {
+  stagedOption.value = option;
+  search.value = option.kind === "match" ? option.match.username : option.query;
+}
+
+// Typing after a pick invalidates the pick: the text no longer describes
+// the staged person, so Save falls back to provisioning the typed text.
+function handleSearchInput(value: string): void {
+  search.value = value;
+  stagedOption.value = null;
+}
+
+const {
+  mutate: addGroupMember,
+  isPending,
+  variables,
+} = useAddDrawerGroupMemberMutation();
+
+// Show who was submitted, not the live input the user may keep editing.
+const pendingName = computed(() => variables.value?.name ?? "");
+
+function closeForm(): void {
+  isOpen.value = false;
+  search.value = "";
+  stagedOption.value = null;
+}
+
+function handleSave(): void {
+  const staged = stagedOption.value;
+  if (staged) {
+    commitAdd(staged);
+    return;
+  }
+
+  const typed = search.value.trim();
+
+  // a blank search has nothing to save, treat it as a cancel
+  if (typed === "") {
+    closeForm();
+    return;
+  }
+
+  commitAdd({ kind: "create", query: typed });
+}
+
+function commitAdd(option: MemberOption): void {
+  // the create row's text is the remote id to provision, a netid the user
+  // typed at a school whose directory the search can't reach
+  if (option.kind === "create") {
+    addGroupMember(
+      {
+        groupId: props.group.id,
+        remoteUserId: option.query,
+        name: option.query,
+      },
+      { onSuccess: closeForm }
+    );
+    return;
+  }
+
+  const { match } = option;
+
+  // a local match adds by id, a directory match with no local row yet
+  // provisions through its remote username
+  addGroupMember(
+    match.localUserId !== null
+      ? {
+          groupId: props.group.id,
+          localUserId: match.localUserId,
+          name: match.name,
+        }
+      : {
+          groupId: props.group.id,
+          remoteUserId: match.username,
+          name: match.name,
+        },
+    { onSuccess: closeForm }
+  );
+}
+
+// username, plus email when the directory gave us one
+function secondaryLine(match: UserAutocompleteMatch): string {
+  return match.email ? `${match.username} · ${match.email}` : match.username;
+}
+
+function initials(name: string): string {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("");
+}
+</script>
+<style scoped></style>
diff --git a/src/pages/DrawerManagementPage/DrawerManagementPage.vue b/src/pages/DrawerManagementPage/DrawerManagementPage.vue
index 5a1ce000..b5b0d787 100644
--- a/src/pages/DrawerManagementPage/DrawerManagementPage.vue
+++ b/src/pages/DrawerManagementPage/DrawerManagementPage.vue
@@ -8,9 +8,6 @@
       <Tabs
         v-model:activeTabId="activeTabId"
         labelsClass="border-b border-outline-variant">
-        <Tab id="drawers" label="Drawers">
-          <DrawersTabContent />
-        </Tab>
         <Tab id="rules" label="Rules">
           <RulesTabContent />
         </Tab>
@@ -30,11 +27,10 @@ import Tabs from "@/components/Tabs/Tabs.vue";
 import Tab from "@/components/Tabs/Tab.vue";
 import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import DrawersTabContent from "./DrawersTabContent.vue";
 import RulesTabContent from "./RulesTabContent.vue";
 import GroupsTabContent from "./GroupsTabContent.vue";
 
-const VALID_TABS = ["drawers", "rules", "groups"] as const;
+const VALID_TABS = ["rules", "groups"] as const;
 type ValidTab = (typeof VALID_TABS)[number];
 
 const route = useRoute();
diff --git a/src/pages/DrawerManagementPage/GroupEntriesManager.vue b/src/pages/DrawerManagementPage/GroupEntriesManager.vue
new file mode 100644
index 00000000..09724f2b
--- /dev/null
+++ b/src/pages/DrawerManagementPage/GroupEntriesManager.vue
@@ -0,0 +1,50 @@
+<template>
+  <GroupEntriesTable
+    :group="group"
+    :entries="sortedEntries"
+    :isLoading="isLoadingEntries"
+    :showEmptyMessage="!isAddingEntry">
+    <AddGroupEntryRow v-model:open="isAddingEntry" :group="group" />
+    <AddRowButton
+      v-if="!isAddingEntry"
+      :colspan="2"
+      label="Add Entry"
+      :data-group-entry-add-button="group.id"
+      @click="openAddEntryForm" />
+  </GroupEntriesTable>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useQuery } from "@tanstack/vue-query";
+import type { PermissionsGroup } from "@/types";
+import { drawerGroupEntriesQuery } from "./drawerGroupQueries";
+import GroupEntriesTable from "./GroupEntriesTable.vue";
+import AddGroupEntryRow from "./AddGroupEntryRow.vue";
+import AddRowButton from "../AdminPermissionsPage/AddRowButton.vue";
+import { tryFocus } from "@/helpers/tryFocus";
+
+const props = defineProps<{ group: PermissionsGroup; isOpen: boolean }>();
+
+const isAddingEntry = ref(false);
+
+const { data: groupEntries, isPending: isLoadingEntries } = useQuery(
+  drawerGroupEntriesQuery(() => props.group.id, { enabled: () => props.isOpen })
+);
+
+const sortedEntries = computed(() => {
+  const entries = groupEntries.value ?? [];
+  return entries.toSorted((a, b) => a.value.localeCompare(b.value));
+});
+
+function openAddEntryForm(): void {
+  isAddingEntry.value = true;
+
+  // focus the add form's input field after next render
+  tryFocus(() =>
+    document.querySelector<HTMLInputElement>(
+      `.group-entry-add__input--${props.group.id}`
+    )
+  );
+}
+</script>
diff --git a/src/pages/DrawerManagementPage/GroupEntriesTable.vue b/src/pages/DrawerManagementPage/GroupEntriesTable.vue
new file mode 100644
index 00000000..ee36887e
--- /dev/null
+++ b/src/pages/DrawerManagementPage/GroupEntriesTable.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="border border-outline-variant rounded-md">
+    <Table class="w-full">
+      <TableHeader>
+        <TableHead
+          class="font-medium uppercase text-xs tracking-wider border-b border-outline-variant">
+          Value
+        </TableHead>
+        <TableHead class="border-b border-outline-variant">
+          <span class="sr-only">Actions</span>
+        </TableHead>
+      </TableHeader>
+      <TableBody>
+        <template v-if="isLoading">
+          <TableRow v-for="row in 3" :key="`skeleton-${row}`">
+            <TableCell v-for="(_, index) in 2" :key="index">
+              <Skeleton height="1rem" width="70%" />
+            </TableCell>
+          </TableRow>
+        </template>
+        <template v-else>
+          <GroupEntriesTableRow
+            v-for="entry in entries"
+            :key="entry.id"
+            :entry="entry"
+            :group="group" />
+          <TableEmpty v-if="!entries.length && showEmptyMessage" :colspan="2">
+            No entries yet.
+          </TableEmpty>
+        </template>
+        <!-- slot for extra rows such as the add-member form or the "add entry"
+          button. Keep it OUTSIDE of the `<template v-*>` blocks so that
+          it renders regardless of whether the table is loading or empty.
+          This permits `tryFocus` to find the add button immediately after
+          creating a new group. -->
+        <slot />
+      </TableBody>
+    </Table>
+  </div>
+</template>
+<script setup lang="ts">
+import type { PermissionsGroup, PermissionsGroupEntry } from "@/types";
+import {
+  Table,
+  TableHeader,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableEmpty,
+  TableBody,
+} from "@/components/ui/table";
+import Skeleton from "@/components/Skeleton/Skeleton.vue";
+import GroupEntriesTableRow from "./GroupEntriesTableRow.vue";
+
+withDefaults(
+  defineProps<{
+    group: PermissionsGroup;
+    entries: PermissionsGroupEntry[];
+    isLoading: boolean;
+    // pass false while a slotted row (add form, in-flight entry) occupies
+    // the body, so "No entries yet." doesn't show beside it
+    showEmptyMessage?: boolean;
+  }>(),
+  { showEmptyMessage: true }
+);
+</script>
diff --git a/src/pages/DrawerManagementPage/GroupEntriesTableRow.vue b/src/pages/DrawerManagementPage/GroupEntriesTableRow.vue
new file mode 100644
index 00000000..64c6c790
--- /dev/null
+++ b/src/pages/DrawerManagementPage/GroupEntriesTableRow.vue
@@ -0,0 +1,143 @@
+<template>
+  <TableRow>
+    <TableCell class="text-sm p-2 text-on-surface">
+      <form
+        v-if="isEditing"
+        class="flex items-start gap-2"
+        :data-group-entry-edit-form="entry.id"
+        @submit.prevent="handleSave">
+        <GroupEntryValueInput
+          v-model="draftValue"
+          class="flex-1"
+          :group="group"
+          :excludeValue="entry.value"
+          :inputId="`group-entry-edit-input-${entry.id}`"
+          :inputClass="`group-entry__input--${entry.id}`"
+          :label="`Group ${group.label} Entry Value`" />
+        <IconButton
+          title="Save"
+          :data-group-entry-save="entry.id"
+          class="enabled:hover:bg-primary-container enabled:hover:text-on-primary-container"
+          :aria-label="`Save ${entry.value} in ${group.label}`"
+          @click="handleSave">
+          <CheckIcon class="size-4" />
+        </IconButton>
+        <IconButton
+          title="Cancel"
+          :data-group-entry-cancel="entry.id"
+          class="enabled:hover:bg-secondary-container enabled:hover:text-on-secondary-container"
+          :aria-label="`Cancel editing ${entry.value} in ${group.label}`"
+          @click="handleCancel">
+          <XIcon class="size-4" />
+        </IconButton>
+      </form>
+      <p v-else-if="isUpdatePending">{{ draftValue }} (saving...)</p>
+      <p v-else-if="isDeletePending">
+        <s>{{ entry.value }}</s>
+        (removing…)
+      </p>
+      <p v-else>{{ entry.value }}</p>
+    </TableCell>
+    <TableCell class="text-sm p-2">
+      <div class="flex justify-end gap-1">
+        <template v-if="!isEditing">
+          <IconButton
+            title="Edit"
+            :data-group-entry-edit="entry.id"
+            class="enabled:hover:bg-secondary-container enabled:hover:text-on-secondary-container"
+            :aria-label="`Edit ${entry.value} in ${group.label}`"
+            @click="handleEdit">
+            <PenIcon class="size-4" />
+          </IconButton>
+          <IconButton
+            title="Remove"
+            :data-group-entry-remove="entry.id"
+            class="enabled:hover:bg-error-container enabled:hover:text-on-error-container"
+            :aria-label="`Remove ${entry.value} from ${group.label}`"
+            @click="handleDelete">
+            <TrashIcon class="size-4" />
+          </IconButton>
+        </template>
+      </div>
+    </TableCell>
+
+    <ConfirmModal
+      :isOpen="isConfirmingRemoval"
+      title="Remove entry?"
+      type="danger"
+      confirmLabel="Remove"
+      @confirm="confirmRemove"
+      @close="isConfirmingRemoval = false">
+      <p>
+        Remove
+        <strong>{{ entry.value }}</strong>
+        from this group?
+      </p>
+    </ConfirmModal>
+  </TableRow>
+</template>
+<script setup lang="ts">
+import type { PermissionsGroup, PermissionsGroupEntry } from "@/types";
+import { TableRow, TableCell } from "@/components/ui/table";
+import { ref } from "vue";
+import IconButton from "@/components/IconButton/IconButton.vue";
+import { PenIcon, XIcon, CheckIcon, TrashIcon } from "lucide-vue-next";
+import ConfirmModal from "@/components/ConfirmModal/ConfirmModal.vue";
+import GroupEntryValueInput from "./GroupEntryValueInput.vue";
+import {
+  useUpdateDrawerGroupEntryMutation,
+  useRemoveDrawerGroupEntryMutation,
+} from "./drawerGroupQueries";
+
+const props = defineProps<{
+  group: PermissionsGroup;
+  entry: PermissionsGroupEntry;
+}>();
+
+const isEditing = ref(false);
+const isConfirmingRemoval = ref(false);
+const draftValue = ref(props.entry.value);
+
+const { mutate: updateGroupEntry, isPending: isUpdatePending } =
+  useUpdateDrawerGroupEntryMutation();
+const { mutate: removeGroupEntry, isPending: isDeletePending } =
+  useRemoveDrawerGroupEntryMutation();
+
+function handleEdit(): void {
+  draftValue.value = props.entry.value;
+  isEditing.value = true;
+}
+
+function handleCancel(): void {
+  isEditing.value = false;
+  draftValue.value = props.entry.value;
+}
+
+function handleSave(): void {
+  isEditing.value = false;
+  const trimmedDraft = draftValue.value.trim();
+
+  if (trimmedDraft === props.entry.value) return;
+
+  updateGroupEntry({
+    groupId: props.group.id,
+    entryId: props.entry.id,
+    value: trimmedDraft,
+  });
+}
+
+function handleDelete(): void {
+  isConfirmingRemoval.value = true;
+}
+
+function confirmRemove(): void {
+  removeGroupEntry({
+    groupId: props.group.id,
+    entryId: props.entry.id,
+  });
+  // Close the confirm modal right away. The row shows "(removing…)" until
+  // the refetch drops it, and a failure surfaces as an error toast.
+  isConfirmingRemoval.value = false;
+}
+</script>
+<style scoped></style>
diff --git a/src/pages/DrawerManagementPage/GroupEntryValueInput.vue b/src/pages/DrawerManagementPage/GroupEntryValueInput.vue
new file mode 100644
index 00000000..21cd6c5a
--- /dev/null
+++ b/src/pages/DrawerManagementPage/GroupEntryValueInput.vue
@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <label :for="inputId" class="sr-only">{{ label }}</label>
+    <AutoCompleteInput
+      :id="inputId"
+      v-model="draft"
+      :items="options"
+      :isItemDisabled="isOptionDisabled"
+      :isLoading="isLoadingHints"
+      :blurOnSelect="false"
+      :inputClass="cn('w-full bg-surface border-outline', inputClass)"
+      :placeholder="placeholder"
+      :minChars="0"
+      @select="handleSelect">
+      <template #option="{ item }">
+        <template v-if="item.kind === 'hint'">
+          <div>
+            <span class="block truncate font-medium">
+              {{ item.hint.label }}
+            </span>
+            <span
+              v-if="item.hint.value !== item.hint.label"
+              class="block truncate text-xs">
+              {{ item.hint.value }}
+            </span>
+            <em v-if="isOptionDisabled(item)" class="text-xs italic">
+              already added
+            </em>
+          </div>
+        </template>
+        <template v-else>
+          <div
+            class="border border-current rounded-md size-8 flex items-center justify-center">
+            <PlusIcon class="size-4" />
+          </div>
+          <span class="block truncate font-medium">Use "{{ item.value }}"</span>
+        </template>
+      </template>
+    </AutoCompleteInput>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import { useQuery } from "@tanstack/vue-query";
+import { AutoCompleteInput } from "@/components/AutoCompleteInput";
+import { PlusIcon } from "@/icons";
+import {
+  drawerGroupEntriesQuery,
+  drawerGroupTypesQuery,
+} from "./drawerGroupQueries";
+import {
+  buildEntryValueOptions,
+  isEntryValueOptionDisabled,
+  type EntryValueOption,
+} from "../AdminPermissionsPage/buildEntryValueOptions";
+import type { CSSClass, PermissionsGroup } from "@/types";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  group: PermissionsGroup;
+  inputId: string;
+  // visually hidden, for the accessible name
+  label: string;
+  // the edit row passes its entry's current value so editing back to it
+  // isn't blocked as "already added"
+  excludeValue?: string;
+  inputClass?: CSSClass;
+  placeholder?: string;
+}>();
+
+const draft = defineModel<string>({ required: true });
+
+const { data: groupTypes, isPending: isLoadingHints } = useQuery(
+  drawerGroupTypesQuery()
+);
+const hints = computed(
+  () =>
+    groupTypes.value?.find((details) => details.type === props.group.type)
+      ?.entryHints ?? []
+);
+
+// Shares the cache entry the surrounding entries table already fetched.
+const { data: entries } = useQuery(
+  drawerGroupEntriesQuery(() => props.group.id)
+);
+const existingValues = computed(() => {
+  const values = (entries.value ?? []).map((entry) => entry.value);
+  return props.excludeValue === undefined
+    ? values
+    : values.filter((value) => value !== props.excludeValue);
+});
+
+const options = computed(() =>
+  buildEntryValueOptions({ hints: hints.value, draft: draft.value })
+);
+
+function isOptionDisabled(option: EntryValueOption): boolean {
+  return isEntryValueOptionDisabled(option, existingValues.value);
+}
+
+function handleSelect(option: EntryValueOption): void {
+  draft.value = option.kind === "hint" ? option.hint.value : option.value;
+}
+</script>
+<style scoped></style>
diff --git a/src/pages/DrawerManagementPage/GroupMemberManager.vue b/src/pages/DrawerManagementPage/GroupMemberManager.vue
new file mode 100644
index 00000000..a5ab82d7
--- /dev/null
+++ b/src/pages/DrawerManagementPage/GroupMemberManager.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <GroupMembersTable
+      :columns="columns"
+      :data="memberList"
+      :isLoading="isLoadingMembers"
+      :showEmptyMessage="!isAddingMember"
+      class="mb-2">
+      <AddGroupMemberRow
+        v-model:open="isAddingMember"
+        :group="group"
+        :colspan="columns.length" />
+      <AddRowButton
+        v-if="!isAddingMember"
+        :colspan="columns.length"
+        label="Add Member"
+        :data-group-add-member="group.id"
+        @click="openAddMemberForm" />
+    </GroupMembersTable>
+
+    <ConfirmModal
+      :isOpen="memberToRemove !== null"
+      title="Remove member?"
+      type="danger"
+      confirmLabel="Remove"
+      @confirm="confirmRemove"
+      @close="memberToRemove = null">
+      <p v-if="memberToRemove">
+        Remove
+        <strong>{{ memberToRemove.name }}</strong>
+        from this group?
+      </p>
+    </ConfirmModal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import ConfirmModal from "@/components/ConfirmModal/ConfirmModal.vue";
+import GroupMembersTable from "../AdminPermissionsPage/GroupMembersTable.vue";
+import AddGroupMemberRow from "./AddGroupMemberRow.vue";
+import AddRowButton from "../AdminPermissionsPage/AddRowButton.vue";
+import { createGroupMemberColumns } from "../AdminPermissionsPage/GroupMembersTableColumns";
+import { useQuery } from "@tanstack/vue-query";
+import {
+  drawerGroupMembersQuery,
+  useRemoveDrawerGroupMemberMutation,
+} from "./drawerGroupQueries";
+import { tryFocus } from "@/helpers/tryFocus";
+import type { GroupMember, PermissionsGroup } from "@/types";
+
+const props = defineProps<{
+  group: PermissionsGroup;
+  isOpen: boolean;
+}>();
+
+// isPending is true only before the first data arrives. Refetches after
+// add/remove keep the old list on screen, so no skeleton flash.
+const { data: members, isPending: isLoadingMembers } = useQuery(
+  drawerGroupMembersQuery(() => props.group.id, { enabled: () => props.isOpen })
+);
+const memberList = computed(() => members.value ?? []);
+
+const isAddingMember = ref(false);
+
+function openAddMemberForm(): void {
+  isAddingMember.value = true;
+
+  // focus the add form's search field after next render
+  tryFocus(() =>
+    document.querySelector<HTMLInputElement>(
+      `.group-member-add__input--${props.group.id}`
+    )
+  );
+}
+
+const removeMutation = useRemoveDrawerGroupMemberMutation();
+
+// The member being removed shows a "(removing…)" marker until the refetch
+// drops the row. isPending holds through the refetch because onSettled
+// returns its promise.
+const removingUserId = computed((): number | null =>
+  removeMutation.isPending.value
+    ? removeMutation.variables.value?.userId ?? null
+    : null
+);
+
+const memberToRemove = ref<GroupMember | null>(null);
+
+function remove(member: GroupMember) {
+  memberToRemove.value = member;
+}
+
+function confirmRemove() {
+  if (!memberToRemove.value) return;
+  removeMutation.mutate({
+    groupId: props.group.id,
+    userId: memberToRemove.value.userId,
+  });
+  // Close the confirm modal right away. The row stays until the refetch
+  // drops it, and a failure surfaces as an error toast.
+  memberToRemove.value = null;
+}
+
+const columns = createGroupMemberColumns(remove, removingUserId);
+</script>
diff --git a/src/pages/DrawerManagementPage/GroupsTabContent.vue b/src/pages/DrawerManagementPage/GroupsTabContent.vue
index f19e578c..f4733889 100644
--- a/src/pages/DrawerManagementPage/GroupsTabContent.vue
+++ b/src/pages/DrawerManagementPage/GroupsTabContent.vue
@@ -34,9 +34,12 @@
                 v-for="header in headerGroup.headers"
                 :key="header.id"
                 class="bg-surface-container-low"
-                :class="{
-                  'cursor-pointer select-none': header.column.getCanSort(),
-                }"
+                :class="[
+                  header.column.columnDef.meta?.widthClass,
+                  {
+                    'cursor-pointer select-none': header.column.getCanSort(),
+                  },
+                ]"
                 @click="header.column.getToggleSortingHandler()?.($event)">
                 <div class="flex items-center gap-2">
                   <FlexRender
@@ -68,23 +71,51 @@
             </TableRow>
           </template>
           <template v-else>
-            <TableRow
-              v-for="row in table.getRowModel().rows"
-              :key="row.id"
-              :aria-current="
-                isCurrentGroup(row.original.group.id) ? 'true' : undefined
-              "
-              :class="{
-                'group-row--current': isCurrentGroup(row.original.group.id),
-                'opacity-50 pointer-events-none':
-                  row.original.group.id === deletingGroupId,
-              }">
-              <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
-                <FlexRender
-                  :render="cell.column.columnDef.cell"
-                  :props="cell.getContext()" />
-              </TableCell>
-            </TableRow>
+            <template v-for="row in table.getRowModel().rows" :key="row.id">
+              <TableRow
+                :data-group-row="row.original.group.id"
+                tabindex="-1"
+                :aria-current="
+                  isCurrentGroup(row.original.group.id) ? 'true' : undefined
+                "
+                :class="{
+                  'border-b-transparent': row.getIsExpanded(),
+                  'group-row--current': isCurrentGroup(row.original.group.id),
+                  'opacity-50 pointer-events-none':
+                    row.original.group.id === deletingGroupId,
+                }">
+                <TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+                  <FlexRender
+                    :render="cell.column.columnDef.cell"
+                    :props="cell.getContext()" />
+                </TableCell>
+              </TableRow>
+              <TableRow
+                v-if="row.getIsExpanded()"
+                :class="{
+                  'group-row--current': isCurrentGroup(row.original.group.id),
+                }">
+                <TableCell
+                  :colspan="row.getVisibleCells().length"
+                  class="px-4 pb-4 pl-12">
+                  <p
+                    v-if="row.original.description"
+                    class="mb-4 text-sm text-on-surface-variant">
+                    {{ row.original.description }}
+                  </p>
+                  <GroupMemberManager
+                    v-if="row.original.group.type === GROUP_TYPES.USER"
+                    :group="row.original.group"
+                    :isOpen="row.getIsExpanded()"
+                    class="bg-surface-container" />
+                  <GroupEntriesManager
+                    v-else-if="isAuthHelperGroupType(row.original.group)"
+                    :group="row.original.group"
+                    :isOpen="row.getIsExpanded()"
+                    class="bg-surface-container" />
+                </TableCell>
+              </TableRow>
+            </template>
             <TableRow v-if="!table.getRowModel().rows.length">
               <TableCell
                 :colspan="groupColumns.length"
@@ -125,7 +156,11 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useQuery } from "@tanstack/vue-query";
-import type { ColumnDef, SortingState } from "@tanstack/vue-table";
+import type {
+  ColumnDef,
+  ExpandedState,
+  SortingState,
+} from "@tanstack/vue-table";
 import {
   FlexRender,
   functionalUpdate,
@@ -148,12 +183,14 @@ import Skeleton from "@/components/Skeleton/Skeleton.vue";
 import InputGroup from "@/components/InputGroup/InputGroup.vue";
 import ConfirmModal from "@/components/ConfirmModal/ConfirmModal.vue";
 import GroupFormModal from "./GroupFormModal.vue";
+import GroupMemberManager from "./GroupMemberManager.vue";
+import GroupEntriesManager from "./GroupEntriesManager.vue";
 import {
   drawerGroupsQuery,
   drawerGroupTypesQuery,
   useDeleteDrawerGroupMutation,
 } from "./drawerGroupQueries";
-import { GROUP_TYPES } from "@/types";
+import { GROUP_TYPES, isAuthHelperGroupType, isManageableGroup } from "@/types";
 import type {
   GroupTypeValues,
   GroupTypeDetails,
@@ -198,6 +235,7 @@ const groupRows = computed((): DrawerGroupRow[] =>
       typeLabel: group.is_personal
         ? "Personal"
         : typeDetails?.label ?? group.type,
+      description: typeDetails?.description ?? "",
       entriesCount: group.entries_count,
       isGlobal: GLOBAL_GROUP_TYPES.includes(group.type),
       isPersonal: group.is_personal ?? false,
@@ -254,9 +292,12 @@ const groupColumns = createDrawerGroupColumns(openEdit, handleDelete);
 
 const searchGroupText = ref("");
 const sorting = ref<SortingState>([{ id: "name", desc: false }]);
+// ids of the currently expanded rows, so each group fetches its members
+// or entries only when its detail panel is open
+const expanded = ref<ExpandedState>({});
 
-// the group the user just created. Sorting or filtering means the user
-// has moved on, so the table's change handlers clear it.
+// the group the user just created. Sorting, filtering, or expanding means
+// the user has moved on, so the table's change handlers clear it.
 const currentGroupId = ref<number | null>(null);
 
 function isCurrentGroup(groupId: number): boolean {
@@ -269,6 +310,7 @@ const table = useVueTable({
   },
   columns: groupColumns as ColumnDef<DrawerGroupRow, unknown>[],
   getRowId: (row) => String(row.group.id),
+  getRowCanExpand: (row) => isManageableGroup(row.original.group),
   getCoreRowModel: getCoreRowModel(),
   getSortedRowModel: getSortedRowModel(),
   getFilteredRowModel: getFilteredRowModel(),
@@ -277,6 +319,10 @@ const table = useVueTable({
     currentGroupId.value = null;
     sorting.value = functionalUpdate(updater, sorting.value);
   },
+  onExpandedChange: (updater) => {
+    currentGroupId.value = null;
+    expanded.value = functionalUpdate(updater, expanded.value);
+  },
   onGlobalFilterChange: (updater) => {
     currentGroupId.value = null;
     searchGroupText.value = functionalUpdate(updater, searchGroupText.value);
@@ -285,21 +331,50 @@ const table = useVueTable({
     get sorting() {
       return sorting.value;
     },
+    get expanded() {
+      return expanded.value;
+    },
     get globalFilter() {
       return searchGroupText.value;
     },
   },
 });
 
-// Reveal a freshly created group and focus its edit button.
+// A User group's add-member row, an auth-helper group's add-entry row,
+// or the edit button for global groups, which have no detail panel.
+function focusSelectorForNewGroup(group: PermissionsGroup): string {
+  if (group.type === GROUP_TYPES.USER) {
+    return `[data-group-add-member="${group.id}"]`;
+  }
+  if (isAuthHelperGroupType(group)) {
+    return `[data-group-entry-add-button="${group.id}"]`;
+  }
+  return `[data-group-edit="${group.id}"]`;
+}
+
+// Reveal a freshly created group and put focus where the user works next.
 async function handleCreated(group: PermissionsGroup) {
   // an active search could hide the new row, so clear the search
   searchGroupText.value = "";
   currentGroupId.value = group.id;
 
+  if (isManageableGroup(group)) {
+    const groupId = String(group.id);
+    const currentlyExpanded = expanded.value === true ? {} : expanded.value;
+    expanded.value = { ...currentlyExpanded, [groupId]: true };
+  }
+
+  // The row, its detail panel, and the button mount across several
+  // frames, so tryFocus retries until focus lands rather than
+  // guessing a single tick.
   try {
-    const focused = await tryFocus(`[data-group-edit="${group.id}"]`);
+    const focused = await tryFocus(focusSelectorForNewGroup(group));
     focused.scrollIntoView({ block: "nearest" });
+    if (isManageableGroup(group)) {
+      // clicking the add row opens its form, which then moves focus
+      // into the input field
+      focused.click();
+    }
   } catch (error) {
     console.warn(`Could not focus new ${group.type} group`, error);
   }
diff --git a/src/pages/DrawerManagementPage/GroupsTableColumns.tsx b/src/pages/DrawerManagementPage/GroupsTableColumns.tsx
index 3dcef457..a0ac776d 100644
--- a/src/pages/DrawerManagementPage/GroupsTableColumns.tsx
+++ b/src/pages/DrawerManagementPage/GroupsTableColumns.tsx
@@ -4,12 +4,14 @@ import type { PermissionsGroup } from "@/types";
 import { cn } from "@/lib/utils";
 import IconButton from "@/components/IconButton/IconButton.vue";
 import Chip from "@/components/Chip/Chip.vue";
+import ChevronRightIcon from "@/icons/ChevronRightIcon.vue";
 import { ColHeader } from "../AdminPermissionsPage/ColHeader";
 
 export interface DrawerGroupRow {
   group: PermissionsGroup;
   name: string;
   typeLabel: string;
+  description: string;
   entriesCount: number;
   isGlobal: boolean; // e.g. `All`, `Authed`, `Users`, ...
   isPersonal: boolean;
@@ -21,10 +23,32 @@ export const createDrawerGroupColumns = (
   onEdit: (group: PermissionsGroup) => void,
   onDelete: (group: PermissionsGroup) => void
 ) => [
+  columnHelper.display({
+    id: "expander",
+    header: () => null,
+    enableSorting: false,
+    meta: { widthClass: "w-10" },
+    cell: ({ row }) =>
+      row.getCanExpand() ? (
+        <button
+          type="button"
+          aria-expanded={row.getIsExpanded()}
+          aria-label={`Toggle details for ${row.original.name}`}
+          class="flex size-8 items-center justify-center rounded-full hover:bg-surface-container-highest focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+          onClick={row.getToggleExpandedHandler()}>
+          <ChevronRightIcon
+            class={cn(
+              "!size-4 text-on-surface-variant transition-transform",
+              row.getIsExpanded() && "rotate-90"
+            )}
+          />
+        </button>
+      ) : null,
+  }),
   columnHelper.accessor("name", {
     id: "name",
     header: () => <ColHeader text="Name" />,
-    meta: { widthClass: "w-[42%]" },
+    meta: { widthClass: "w-[38%]" },
     cell: (ctx) => (
       <div class="text-sm font-medium text-on-surface">{ctx.getValue()}</div>
     ),
@@ -32,7 +56,7 @@ export const createDrawerGroupColumns = (
   columnHelper.accessor("typeLabel", {
     id: "type",
     header: () => <ColHeader text="Type" />,
-    meta: { widthClass: "w-[42%]" },
+    meta: { widthClass: "w-[38%]" },
     cell: (ctx) => (
       <div class="text-sm text-on-surface-variant">{ctx.getValue()}</div>
     ),
@@ -42,7 +66,7 @@ export const createDrawerGroupColumns = (
     header: () => <ColHeader text="Members / Entries" />,
     enableColumnFilter: false,
     enableGlobalFilter: false,
-    meta: { widthClass: "w-[16%]" },
+    meta: { widthClass: "w-[14%]" },
     cell: (ctx) =>
       ctx.row.original.isGlobal ? (
         <div class="text-sm text-on-surface-variant">—</div>
@@ -64,10 +88,6 @@ export const createDrawerGroupColumns = (
     enableSorting: false,
     meta: { widthClass: "w-20" },
     cell: ({ row }: { row: { original: DrawerGroupRow } }) => {
-      // The personal group is read-only
-      if (row.original.isPersonal) {
-        return null;
-      }
       return (
         <div class="flex justify-end">
           <IconButton
diff --git a/src/pages/DrawerManagementPage/drawerGroupQueries.ts b/src/pages/DrawerManagementPage/drawerGroupQueries.ts
index e644f0e6..f102a8e7 100644
--- a/src/pages/DrawerManagementPage/drawerGroupQueries.ts
+++ b/src/pages/DrawerManagementPage/drawerGroupQueries.ts
@@ -1,5 +1,7 @@
 import { queryOptions, useMutation, useQueryClient } from "@tanstack/vue-query";
+import { computed, toValue, type MaybeRefOrGetter } from "vue";
 import * as fetchers from "@/api/fetchers";
+import type { AddGroupMemberInput } from "@/api/fetchers";
 import { useToastStore } from "@/stores/toastStore";
 import { makeQueryKeysFor } from "@/helpers/makeQueryKeysFor";
 import type { UpdateGroupPayload, PermissionsGroup } from "@/types";
@@ -10,6 +12,10 @@ const drawerGroupKeys = makeQueryKeysFor("drawerGroups");
 export const queryKeys = {
   drawerGroupsList: drawerGroupKeys.list,
   drawerGroupItem: drawerGroupKeys.item,
+  drawerGroupMembers: (groupId: number) =>
+    [...drawerGroupKeys.item(groupId), "members"] as const,
+  drawerGroupEntries: (groupId: number) =>
+    [...drawerGroupKeys.item(groupId), "entries"] as const,
   drawerGroupTypes: () => ["drawerGroupTypes"] as const,
   manageableDrawers: () => ["manageableDrawers"] as const,
 };
@@ -21,6 +27,30 @@ export function drawerGroupsQuery() {
   });
 }
 
+// Pass `enabled` so a group's members load only when its row is expanded.
+export function drawerGroupMembersQuery(
+  groupId: MaybeRefOrGetter<number>,
+  options?: { enabled?: MaybeRefOrGetter<boolean> }
+) {
+  return queryOptions({
+    queryKey: computed(() => queryKeys.drawerGroupMembers(toValue(groupId))),
+    queryFn: () => fetchers.fetchDrawerGroupMembers(toValue(groupId)),
+    enabled: computed(() => toValue(options?.enabled) ?? true),
+  });
+}
+
+// Same lazy-on-expand shape as members.
+export function drawerGroupEntriesQuery(
+  groupId: MaybeRefOrGetter<number>,
+  options?: { enabled?: MaybeRefOrGetter<boolean> }
+) {
+  return queryOptions({
+    queryKey: computed(() => queryKeys.drawerGroupEntries(toValue(groupId))),
+    queryFn: () => fetchers.fetchDrawerGroupEntries(toValue(groupId)),
+    enabled: computed(() => toValue(options?.enabled) ?? true),
+  });
+}
+
 export function drawerGroupTypesQuery() {
   return queryOptions({
     queryKey: queryKeys.drawerGroupTypes(),
@@ -96,3 +126,110 @@ export function useDeleteDrawerGroupMutation() {
     },
   });
 }
+
+// The member's display name rides along so the in-flight row can show it.
+// The fetcher only reads the id fields.
+export type AddDrawerGroupMemberVars = AddGroupMemberInput & { name: string };
+
+export function useAddDrawerGroupMemberMutation() {
+  const queryClient = useQueryClient();
+  const toastStore = useToastStore();
+
+  return useMutation({
+    mutationFn: (vars: AddDrawerGroupMemberVars) =>
+      fetchers.addDrawerGroupMember(vars),
+    onError: (error) =>
+      toastStore.error(error.message, { title: "Could not add member" }),
+    // The list's count chip tallies members, so it goes stale along with
+    // the member list.
+    onSettled: (_member, _error, vars) =>
+      Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.drawerGroupMembers(vars.groupId),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.drawerGroupsList(),
+        }),
+      ]),
+  });
+}
+
+export function useRemoveDrawerGroupMemberMutation() {
+  const queryClient = useQueryClient();
+  const toastStore = useToastStore();
+
+  return useMutation({
+    mutationFn: (vars: { groupId: number; userId: number }) =>
+      fetchers.removeDrawerGroupMember(vars.groupId, vars.userId),
+    onError: (error) =>
+      toastStore.error(error.message, { title: "Could not remove member" }),
+    onSettled: (_data, _error, vars) =>
+      Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.drawerGroupMembers(vars.groupId),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.drawerGroupsList(),
+        }),
+      ]),
+  });
+}
+
+export function useAddDrawerGroupEntryMutation() {
+  const queryClient = useQueryClient();
+  const toastStore = useToastStore();
+
+  return useMutation({
+    mutationFn: fetchers.addDrawerGroupEntry,
+    onError: (error) =>
+      toastStore.error(error.message, { title: "Could not add value" }),
+    // The list shows entries_count, so it goes stale along with the entries.
+    onSettled: (_entry, _error, vars) =>
+      Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.drawerGroupEntries(vars.groupId),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.drawerGroupsList(),
+        }),
+      ]),
+  });
+}
+
+// Editing a value in place leaves entries_count alone, so the list stays fresh.
+export function useUpdateDrawerGroupEntryMutation() {
+  const queryClient = useQueryClient();
+  const toastStore = useToastStore();
+
+  return useMutation({
+    mutationFn: fetchers.updateDrawerGroupEntry,
+    onError: (error) =>
+      toastStore.error(error.message, { title: "Could not update value" }),
+    onSettled: (_entry, _error, vars) =>
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.drawerGroupEntries(vars.groupId),
+      }),
+  });
+}
+
+export function useRemoveDrawerGroupEntryMutation() {
+  const queryClient = useQueryClient();
+  const toastStore = useToastStore();
+
+  return useMutation({
+    mutationFn: (vars: { groupId: number; entryId: number }) =>
+      fetchers.removeDrawerGroupEntry(vars.groupId, vars.entryId),
+    onError: (error) =>
+      toastStore.error(error.message, { title: "Could not remove value" }),
+    // The list shows entries_count, so it goes stale along with the entries.
+    onSettled: (_data, _error, vars) =>
+      Promise.all([
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.drawerGroupEntries(vars.groupId),
+        }),
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.drawerGroupsList(),
+        }),
+      ]),
+  });
+}
diff --git a/src/queries/queryKeys.ts b/src/queries/queryKeys.ts
index 6c0331e3..e68950e1 100644
--- a/src/queries/queryKeys.ts
+++ b/src/queries/queryKeys.ts
@@ -12,3 +12,4 @@ export const FIELD_TYPES_QUERY_KEY = "fieldTypes";
 export const FILE_DOWNLOADS_QUERY_KEY = "fileDownloads";
 export const ORIGINAL_STORAGE_STATUS_QUERY_KEY = "originalStorageStatus";
 export const USER_AUTOCOMPLETE_QUERY_KEY = "userAutocomplete";
+export const DRAWER_USER_AUTOCOMPLETE_QUERY_KEY = "drawerUserAutocomplete";
diff --git a/src/queries/useUserAutocompleteQuery.ts b/src/queries/useUserAutocompleteQuery.ts
index 8e140c31..e73c99c4 100644
--- a/src/queries/useUserAutocompleteQuery.ts
+++ b/src/queries/useUserAutocompleteQuery.ts
@@ -1,14 +1,18 @@
 import { useQuery } from "@tanstack/vue-query";
 import { MaybeRefOrGetter, computed, toValue } from "vue";
-import { fetchUserAutocomplete } from "@/api/fetchers";
+import {
+  fetchDrawerUserAutocomplete,
+  fetchUserAutocomplete,
+} from "@/api/fetchers";
 import { UserAutocompleteMatch } from "@/types";
-import { USER_AUTOCOMPLETE_QUERY_KEY } from "./queryKeys";
+import {
+  DRAWER_USER_AUTOCOMPLETE_QUERY_KEY,
+  USER_AUTOCOMPLETE_QUERY_KEY,
+} from "./queryKeys";
 
 // Reactive user-search for a group's member field. Only fires at 2+ chars
 // to avoid a directory lookup on every keystroke.
-export function useUserAutocompleteQuery(
-  searchTerm: MaybeRefOrGetter<string>
-) {
+export function useUserAutocompleteQuery(searchTerm: MaybeRefOrGetter<string>) {
   return useQuery({
     queryKey: computed(() => [
       USER_AUTOCOMPLETE_QUERY_KEY,
@@ -20,3 +24,20 @@ export function useUserAutocompleteQuery(
     enabled: computed(() => toValue(searchTerm).trim().length >= 2),
   });
 }
+
+// The drawer-manager twin of useUserAutocompleteQuery, backed by the
+// drawerPermissions endpoint a non-admin drawer manager may call.
+export function useDrawerUserAutocompleteQuery(
+  searchTerm: MaybeRefOrGetter<string>
+) {
+  return useQuery({
+    queryKey: computed(() => [
+      DRAWER_USER_AUTOCOMPLETE_QUERY_KEY,
+      toValue(searchTerm),
+    ]),
+    placeholderData: () => [] as UserAutocompleteMatch[],
+    queryFn: ({ signal }) =>
+      fetchDrawerUserAutocomplete(toValue(searchTerm), { signal }),
+    enabled: computed(() => toValue(searchTerm).trim().length >= 2),
+  });
+}