diff --git a/app/api/__tests__/safety.spec.ts b/app/api/__tests__/safety.spec.ts
index 2af4a0cff..a10c3fb22 100644
--- a/app/api/__tests__/safety.spec.ts
+++ b/app/api/__tests__/safety.spec.ts
@@ -45,7 +45,6 @@ it('mock-api is only referenced in test files', () => {
       "test/e2e/ip-pool-silo-config.e2e.ts",
       "test/e2e/profile.e2e.ts",
       "test/e2e/project-access.e2e.ts",
-      "test/e2e/silo-access.e2e.ts",
       "tsconfig.json",
     ]
   `)
diff --git a/app/api/roles.spec.ts b/app/api/roles.spec.ts
index e8b44c638..abd906176 100644
--- a/app/api/roles.spec.ts
+++ b/app/api/roles.spec.ts
@@ -82,68 +82,41 @@ const user1 = {
 const groups = [{ id: 'group1' }, { id: 'group2' }]
 
 describe('getEffectiveRole', () => {
-  it('returns null when there are no policies', () => {
-    expect(userRoleFromPolicies(user1, groups, [])).toBe(null)
-  })
-
   it('returns null when there are no roles', () => {
-    expect(userRoleFromPolicies(user1, groups, [{ roleAssignments: [] }])).toBe(null)
+    expect(userRoleFromPolicies(user1, groups, { roleAssignments: [] })).toBe(null)
   })
 
   it('returns role if user matches directly', () => {
     expect(
-      userRoleFromPolicies(user1, groups, [
-        {
-          roleAssignments: [
-            { identityId: 'user1', identityType: 'silo_user', roleName: 'admin' },
-          ],
-        },
-      ])
+      userRoleFromPolicies(user1, groups, {
+        roleAssignments: [
+          { identityId: 'user1', identityType: 'silo_user', roleName: 'admin' },
+        ],
+      })
     ).toEqual('admin')
   })
 
   it('returns strongest role if both group and user match', () => {
     expect(
-      userRoleFromPolicies(user1, groups, [
-        {
-          roleAssignments: [
-            { identityId: 'user1', identityType: 'silo_user', roleName: 'viewer' },
-            { identityId: 'group1', identityType: 'silo_group', roleName: 'collaborator' },
-          ],
-        },
-      ])
+      userRoleFromPolicies(user1, groups, {
+        roleAssignments: [
+          { identityId: 'user1', identityType: 'silo_user', roleName: 'viewer' },
+          { identityId: 'group1', identityType: 'silo_group', roleName: 'collaborator' },
+        ],
+      })
     ).toEqual('collaborator')
   })
 
   it('ignores groups and users that do not match', () => {
     expect(
-      userRoleFromPolicies(user1, groups, [
-        {
-          roleAssignments: [
-            { identityId: 'other', identityType: 'silo_user', roleName: 'viewer' },
-            { identityId: 'group3', identityType: 'silo_group', roleName: 'viewer' },
-          ],
-        },
-      ])
+      userRoleFromPolicies(user1, groups, {
+        roleAssignments: [
+          { identityId: 'other', identityType: 'silo_user', roleName: 'viewer' },
+          { identityId: 'group3', identityType: 'silo_group', roleName: 'viewer' },
+        ],
+      })
     ).toEqual(null)
   })
-
-  it('resolves multiple policies', () => {
-    expect(
-      userRoleFromPolicies(user1, groups, [
-        {
-          roleAssignments: [
-            { identityId: 'user1', identityType: 'silo_user', roleName: 'viewer' },
-          ],
-        },
-        {
-          roleAssignments: [
-            { identityId: 'group1', identityType: 'silo_group', roleName: 'admin' },
-          ],
-        },
-      ])
-    ).toEqual('admin')
-  })
 })
 
 test('byGroupThenName sorts as expected', () => {
diff --git a/app/api/roles.ts b/app/api/roles.ts
index 70c12ecaa..5ba0787a3 100644
--- a/app/api/roles.ts
+++ b/app/api/roles.ts
@@ -11,10 +11,19 @@
  * layer and not in app/ because we are experimenting with it to decide whether
  * it belongs in the API proper.
  */
+import { useQueries } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import * as R from 'remeda'
 
-import type { FleetRole, IdentityType, ProjectRole, SiloRole } from './__generated__/Api'
+import { ALL_ISH } from '~/util/consts'
+
+import type {
+  FleetRole,
+  Group,
+  IdentityType,
+  ProjectRole,
+  SiloRole,
+} from './__generated__/Api'
 import { api, q, usePrefetchedQuery } from './client'
 
 /**
@@ -76,6 +85,13 @@ export function updateRole<Role extends RoleKey>(
   return { roleAssignments }
 }
 
+/** Map from identity ID to role name for quick lookup. */
+export function rolesByIdFromPolicy<Role extends RoleKey>(
+  policy: Policy<Role>
+): Map<string, Role> {
+  return new Map(policy.roleAssignments.map((a) => [a.identityId, a.roleName]))
+}
+
 /**
  * Delete any role assignments for user or group ID. Returns a new updated
  * policy. Does not modify the passed-in policy.
@@ -90,47 +106,6 @@ export function deleteRole<Role extends RoleKey>(
   return { roleAssignments }
 }
 
-type UserAccessRow<Role extends RoleKey = RoleKey> = {
-  id: string
-  identityType: IdentityType
-  name: string
-  roleName: Role
-  roleSource: string
-}
-
-/**
- * Role assignments come from the API in (user, role) pairs without display
- * names and without info about which resource the role came from. This tags
- * each row with that info. It has to be a hook because it depends on the result
- * of an API request for the list of users. It's a bit awkward, but the logic is
- * identical between projects and orgs so it is worth sharing.
- */
-export function useUserRows<Role extends RoleKey = RoleKey>(
-  roleAssignments: RoleAssignment<Role>[],
-  roleSource: string
-): UserAccessRow<Role>[] {
-  // HACK: because the policy has no names, we are fetching ~all the users,
-  // putting them in a dictionary, and adding the names to the rows
-  const { data: users } = usePrefetchedQuery(q(api.userList, {}))
-  const { data: groups } = usePrefetchedQuery(q(api.groupList, {}))
-  return useMemo(() => {
-    const userItems = users?.items || []
-    const groupItems = groups?.items || []
-    const usersDict = Object.fromEntries(userItems.concat(groupItems).map((u) => [u.id, u]))
-    return roleAssignments.map((ra) => ({
-      id: ra.identityId,
-      identityType: ra.identityType,
-      // A user might not appear here if they are not in the current user's
-      // silo. This could happen in a fleet policy, which might have users from
-      // different silos. Hence the ID fallback. The code that displays this
-      // detects when we've fallen back and includes an explanatory tooltip.
-      name: usersDict[ra.identityId]?.displayName || ra.identityId,
-      roleName: ra.roleName,
-      roleSource,
-    }))
-  }, [roleAssignments, roleSource, users, groups])
-}
-
 type SortableUserRow = { identityType: IdentityType; name: string }
 
 /**
@@ -156,8 +131,10 @@ export type Actor = {
 export function useActorsNotInPolicy<Role extends RoleKey = RoleKey>(
   policy: Policy<Role>
 ): Actor[] {
-  const { data: users } = usePrefetchedQuery(q(api.userList, {}))
-  const { data: groups } = usePrefetchedQuery(q(api.groupList, {}))
+  const { data: users } = usePrefetchedQuery(q(api.userList, { query: { limit: ALL_ISH } }))
+  const { data: groups } = usePrefetchedQuery(
+    q(api.groupList, { query: { limit: ALL_ISH } })
+  )
   return useMemo(() => {
     // IDs are UUIDs, so no need to include identity type in set value to disambiguate
     const actorsInPolicy = new Set(policy?.roleAssignments.map((ra) => ra.identityId) || [])
@@ -174,15 +151,104 @@ export function useActorsNotInPolicy<Role extends RoleKey = RoleKey>(
   }, [users, groups, policy])
 }
 
-export function userRoleFromPolicies(
+export function userRoleFromPolicies<Role extends RoleKey>(
   user: { id: string },
   groups: { id: string }[],
-  policies: Policy[]
-): RoleKey | null {
+  policy: Policy<Role>
+): Role | null {
   const myIds = new Set([user.id, ...groups.map((g) => g.id)])
-  const myRoles = policies
-    .flatMap((p) => p.roleAssignments) // concat all the role assignments together
+  const myRoles = policy.roleAssignments
     .filter((ra) => myIds.has(ra.identityId))
     .map((ra) => ra.roleName)
   return getEffectiveRole(myRoles) || null
 }
+
+export type AccessScope = 'silo' | 'project'
+export type ScopedPolicy = { scope: AccessScope; policy: Policy }
+
+export type ScopedRoleEntry = {
+  roleName: RoleKey
+  scope: AccessScope
+  source: { type: 'direct' } | { type: 'group'; group: { id: string; displayName: string } }
+}
+
+/**
+ * Enumerate all role assignments relevant to a user — one entry per direct
+ * assignment and one per group assignment — across the given policies. Each
+ * entry is tagged with the scope of the policy it came from.
+ * Callers are responsible for sorting and any display-layer merging.
+ */
+export function userScopedRoleEntries(
+  userId: string,
+  userGroups: { id: string; displayName: string }[],
+  scopedPolicies: ScopedPolicy[]
+): ScopedRoleEntry[] {
+  const entries: ScopedRoleEntry[] = []
+  for (const { scope, policy } of scopedPolicies) {
+    const direct = policy.roleAssignments.find((ra) => ra.identityId === userId)
+    if (direct) {
+      entries.push({ roleName: direct.roleName, scope, source: { type: 'direct' } })
+    }
+    for (const group of userGroups) {
+      const via = policy.roleAssignments.find((ra) => ra.identityId === group.id)
+      if (via) {
+        entries.push({ roleName: via.roleName, scope, source: { type: 'group', group } })
+      }
+    }
+  }
+  return entries
+}
+
+/**
+ * Pick the strongest role across entries. Ties go to silo scope, since silo
+ * roles cascade into projects.
+ */
+export function effectiveScopedRole(
+  entries: ScopedRoleEntry[]
+): { role: RoleKey; scope: AccessScope } | null {
+  if (entries.length === 0) return null
+  // strongest role overall
+  const strongest = R.firstBy(entries, (e) => roleOrder[e.roleName])!
+  const role = strongest.roleName
+  // prefer silo scope when silo has a role at least as strong
+  const siloDominates = entries.some(
+    (e) => e.scope === 'silo' && roleOrder[e.roleName] <= roleOrder[role]
+  )
+  return { role, scope: siloDominates ? 'silo' : 'project' }
+}
+
+/**
+ * Builds a map from user ID to the list of groups that user belongs to,
+ * firing one query per group to fetch members. Shared between user tabs.
+ *
+ * The returned Map is referentially stable between data updates, which keeps
+ * downstream useMemos (column definitions) from invalidating every render.
+ * `useQueries` returns a new array reference each render, so we can't put it in
+ * a useMemo deps array directly — instead we encode the relevant inputs (group
+ * IDs and per-query updated-at timestamps) into a single version string and
+ * memoize on that.
+ */
+export function useGroupsByUserId(groups: Group[]): Map<string, Group[]> {
+  const groupMemberQueries = useQueries({
+    queries: groups.map((g) => q(api.userList, { query: { group: g.id, limit: ALL_ISH } })),
+  })
+
+  const version = [
+    groups.map((g) => g.id).join(','),
+    ...groupMemberQueries.map((query) => query.dataUpdatedAt),
+  ].join('|')
+
+  return useMemo(() => {
+    const map = new Map<string, Group[]>()
+    groups.forEach((group, i) => {
+      const members = groupMemberQueries[i]?.data?.items ?? []
+      members.forEach((member) => {
+        const existing = map.get(member.id)
+        if (existing) existing.push(group)
+        else map.set(member.id, [group])
+      })
+    })
+    return map
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- groups and queries are encoded in version
+  }, [version])
+}
diff --git a/app/components/access/AccessGroupsTab.tsx b/app/components/access/AccessGroupsTab.tsx
new file mode 100644
index 000000000..8bedae818
--- /dev/null
+++ b/app/components/access/AccessGroupsTab.tsx
@@ -0,0 +1,226 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { createColumnHelper } from '@tanstack/react-table'
+import { useCallback, useMemo, useState, type ComponentType } from 'react'
+
+import {
+  api,
+  deleteRole,
+  effectiveScopedRole,
+  getListQFn,
+  rolesByIdFromPolicy,
+  type AccessScope,
+  type Group,
+  type Policy,
+  type RoleKey,
+  type ScopedPolicy,
+} from '@oxide/api'
+import { PersonGroup24Icon } from '@oxide/design-system/icons/react'
+import { Badge } from '@oxide/design-system/ui'
+
+import { HL } from '~/components/HL'
+import { type EditRoleModalProps } from '~/forms/access-util'
+import { confirmDelete } from '~/stores/confirm-delete'
+import { EmptyCell } from '~/table/cells/EmptyCell'
+import { ButtonCell } from '~/table/cells/LinkCell'
+import { MemberCountCell } from '~/table/cells/MemberCountCell'
+import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
+import { useQueryTable } from '~/table/QueryTable'
+import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { roleColor } from '~/util/access'
+
+import { GroupMembersSideModal } from './GroupMembersSideModal'
+
+const groupList = getListQFn(api.groupList, {})
+
+const colHelper = createColumnHelper<Group>()
+
+const GroupEmptyState = () => (
+  <EmptyMessage
+    icon={<PersonGroup24Icon />}
+    title="No groups"
+    body="No groups have been added to this silo"
+  />
+)
+
+type EditingState = { group: Group; defaultRole: RoleKey | undefined }
+
+type Props = {
+  /** Policies that contribute to a group's effective role on this page. */
+  scopedPolicies: ScopedPolicy[]
+  /** Scope managed by this tab — its direct roles are assignable/removable. */
+  managedScope: AccessScope
+  /** Modal for assigning/editing a role on the managed policy. */
+  EditModal: ComponentType<EditRoleModalProps>
+  /** Update the managed policy. Called when removing a role. */
+  updateManagedPolicy: (newPolicy: Policy) => Promise<unknown>
+}
+
+export function AccessGroupsTab({
+  scopedPolicies,
+  managedScope,
+  EditModal,
+  updateManagedPolicy,
+}: Props) {
+  const [selectedGroup, setSelectedGroup] = useState<Group | null>(null)
+  const [editingGroup, setEditingGroup] = useState<EditingState | null>(null)
+
+  // non-null: caller is responsible for including the managed scope
+  const managedPolicy = scopedPolicies.find((sp) => sp.scope === managedScope)!.policy
+
+  const managedRoleById = useMemo(() => rolesByIdFromPolicy(managedPolicy), [managedPolicy])
+
+  const roleCol = useMemo(
+    () =>
+      colHelper.display({
+        id: 'role',
+        header: 'Role',
+        cell: ({ row }) => {
+          // groups never inherit roles, so each scoped policy contributes at
+          // most one direct entry
+          const entries = scopedPolicies.flatMap(({ scope, policy }) => {
+            const ra = policy.roleAssignments.find((r) => r.identityId === row.original.id)
+            return ra
+              ? [{ scope, roleName: ra.roleName, source: { type: 'direct' as const } }]
+              : []
+          })
+          const effective = effectiveScopedRole(entries)
+          if (!effective) return <EmptyCell />
+          return (
+            <Badge color={roleColor[effective.role]}>
+              {effective.scope}.{effective.role}
+            </Badge>
+          )
+        },
+      }),
+    [scopedPolicies]
+  )
+
+  const staticColumns = useMemo(
+    () => [
+      colHelper.accessor('displayName', {
+        header: 'Name',
+        cell: (info) => (
+          <ButtonCell onClick={() => setSelectedGroup(info.row.original)}>
+            {info.getValue()}
+          </ButtonCell>
+        ),
+      }),
+      roleCol,
+      colHelper.display({
+        id: 'memberCount',
+        header: 'Users',
+        cell: ({ row }) => <MemberCountCell groupId={row.original.id} />,
+      }),
+      colHelper.accessor('timeCreated', Columns.timeCreated),
+    ],
+    [roleCol]
+  )
+
+  const isProject = managedScope === 'project'
+  const assignLabel = isProject ? 'Assign project role' : 'Assign role'
+  const changeLabel = isProject ? 'Change project role' : 'Change role'
+  const removeLabel = isProject ? 'Remove project role' : 'Remove role'
+
+  const makeActions = useCallback(
+    (group: Group): MenuAction[] => {
+      const directManagedRole = managedRoleById.get(group.id)
+      const entries = scopedPolicies.flatMap(({ scope, policy }) => {
+        const ra = policy.roleAssignments.find((r) => r.identityId === group.id)
+        return ra
+          ? [{ scope, roleName: ra.roleName, source: { type: 'direct' as const } }]
+          : []
+      })
+      const effective = effectiveScopedRole(entries)
+      const removeAction = {
+        label: directManagedRole ? removeLabel : 'Remove role',
+        onActivate: confirmDelete({
+          doDelete: () => updateManagedPolicy(deleteRole(group.id, managedPolicy)),
+          label: (
+            <span>
+              the <HL>{directManagedRole}</HL> role for <HL>{group.displayName}</HL>
+            </span>
+          ),
+          resourceKind: 'role assignment',
+        }),
+        disabled:
+          !directManagedRole &&
+          `Role is inherited from another scope; modify it there to revoke`,
+      }
+      if (!effective) {
+        return [
+          {
+            label: assignLabel,
+            onActivate: () => setEditingGroup({ group, defaultRole: undefined }),
+          },
+        ]
+      }
+      // On the project tab, a group's silo role isn't a project assignment to
+      // change — frame it as assigning a project role.
+      if (isProject && !directManagedRole) {
+        return [
+          {
+            label: assignLabel,
+            onActivate: () => setEditingGroup({ group, defaultRole: undefined }),
+          },
+          removeAction,
+        ]
+      }
+      const defaultRole = directManagedRole ?? effective.role
+      return [
+        {
+          label: changeLabel,
+          onActivate: () => setEditingGroup({ group, defaultRole }),
+        },
+        removeAction,
+      ]
+    },
+    [
+      managedRoleById,
+      managedPolicy,
+      updateManagedPolicy,
+      scopedPolicies,
+      isProject,
+      assignLabel,
+      changeLabel,
+      removeLabel,
+    ]
+  )
+
+  const columns = useColsWithActions(staticColumns, makeActions)
+
+  const { table } = useQueryTable({
+    query: groupList,
+    columns,
+    emptyState: <GroupEmptyState />,
+  })
+
+  return (
+    <>
+      {table}
+      {editingGroup && (
+        <EditModal
+          onDismiss={() => setEditingGroup(null)}
+          policy={managedPolicy}
+          name={editingGroup.group.displayName}
+          identityId={editingGroup.group.id}
+          identityType="silo_group"
+          defaultValues={{ roleName: editingGroup.defaultRole }}
+        />
+      )}
+      {selectedGroup && (
+        <GroupMembersSideModal
+          group={selectedGroup}
+          onDismiss={() => setSelectedGroup(null)}
+          scopedPolicies={scopedPolicies}
+        />
+      )}
+    </>
+  )
+}
diff --git a/app/components/access/AccessUsersTab.tsx b/app/components/access/AccessUsersTab.tsx
new file mode 100644
index 000000000..0260d41df
--- /dev/null
+++ b/app/components/access/AccessUsersTab.tsx
@@ -0,0 +1,288 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { createColumnHelper } from '@tanstack/react-table'
+import { useCallback, useMemo, useState, type ComponentType } from 'react'
+
+import {
+  api,
+  deleteRole,
+  effectiveScopedRole,
+  getListQFn,
+  q,
+  roleOrder,
+  rolesByIdFromPolicy,
+  useGroupsByUserId,
+  usePrefetchedQuery,
+  userScopedRoleEntries,
+  type AccessScope,
+  type Policy,
+  type RoleKey,
+  type ScopedPolicy,
+  type User,
+} from '@oxide/api'
+import { Person24Icon } from '@oxide/design-system/icons/react'
+import { Badge } from '@oxide/design-system/ui'
+
+import { HL } from '~/components/HL'
+import { ListPlusCell } from '~/components/ListPlusCell'
+import { type EditRoleModalProps } from '~/forms/access-util'
+import { confirmDelete } from '~/stores/confirm-delete'
+import { EmptyCell } from '~/table/cells/EmptyCell'
+import { ButtonCell } from '~/table/cells/LinkCell'
+import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
+import { Columns } from '~/table/columns/common'
+import { useQueryTable } from '~/table/QueryTable'
+import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { TipIcon } from '~/ui/lib/TipIcon'
+import { roleColor } from '~/util/access'
+import { ALL_ISH } from '~/util/consts'
+
+import { UserDetailsSideModal } from './UserDetailsSideModal'
+
+const userList = getListQFn(api.userList, {})
+const groupListAll = q(api.groupList, { query: { limit: ALL_ISH } })
+
+const colHelper = createColumnHelper<User>()
+
+const timeCreatedCol = colHelper.accessor('timeCreated', Columns.timeCreated)
+
+const EmptyState = () => (
+  <EmptyMessage
+    icon={<Person24Icon />}
+    title="No users"
+    body="No users have been added to this silo"
+  />
+)
+
+type EditingState = { user: User; defaultRole: RoleKey | undefined }
+
+type Props = {
+  /** Policies that contribute to a user's effective role on this page. */
+  scopedPolicies: ScopedPolicy[]
+  /** Scope managed by this tab — its direct roles are assignable/removable. */
+  managedScope: AccessScope
+  /** Modal for assigning/editing a role on the managed policy. */
+  EditModal: ComponentType<EditRoleModalProps>
+  /** Update the managed policy. Called when removing a role. */
+  updateManagedPolicy: (newPolicy: Policy) => Promise<unknown>
+}
+
+export function AccessUsersTab({
+  scopedPolicies,
+  managedScope,
+  EditModal,
+  updateManagedPolicy,
+}: Props) {
+  const [selectedUser, setSelectedUser] = useState<User | null>(null)
+  const [editingUser, setEditingUser] = useState<EditingState | null>(null)
+
+  const { data: groups } = usePrefetchedQuery(groupListAll)
+  const groupsByUserId = useGroupsByUserId(groups.items)
+
+  // non-null: caller is responsible for including the managed scope
+  const managedPolicy = scopedPolicies.find((sp) => sp.scope === managedScope)!.policy
+
+  const managedRoleById = useMemo(() => rolesByIdFromPolicy(managedPolicy), [managedPolicy])
+
+  const roleCol = useMemo(
+    () =>
+      colHelper.display({
+        id: 'role',
+        header: 'Role',
+        cell: ({ row }) => {
+          const userGroups = groupsByUserId.get(row.original.id) ?? []
+          const entries = userScopedRoleEntries(row.original.id, userGroups, scopedPolicies)
+          const effective = effectiveScopedRole(entries)
+          if (!effective) return <EmptyCell />
+          // show "via groups" tooltip when the displayed role+scope isn't
+          // covered by a direct assignment in that scope. (a direct project
+          // role doesn't suppress the tooltip if the displayed badge is the
+          // silo scope coming via a group, since silo wins ties.)
+          const displayedScopeHasDirect = entries.some(
+            (e) =>
+              e.source.type === 'direct' &&
+              e.scope === effective.scope &&
+              roleOrder[e.roleName] <= roleOrder[effective.role]
+          )
+          const viaGroupsMap = new Map<string, { id: string; displayName: string }>()
+          if (!displayedScopeHasDirect) {
+            for (const e of entries) {
+              if (
+                e.source.type === 'group' &&
+                e.scope === effective.scope &&
+                roleOrder[e.roleName] <= roleOrder[effective.role]
+              ) {
+                viaGroupsMap.set(e.source.group.id, e.source.group)
+              }
+            }
+          }
+          const viaGroups = [...viaGroupsMap.values()]
+          return (
+            <div className="flex items-center gap-1.5">
+              <Badge color={roleColor[effective.role]}>
+                {effective.scope}.{effective.role}
+              </Badge>
+              {viaGroups.length > 0 && (
+                <TipIcon>
+                  via{' '}
+                  {viaGroups.map((g, i) => (
+                    <span key={g.id}>
+                      {i > 0 && ', '}
+                      {g.displayName}
+                    </span>
+                  ))}
+                </TipIcon>
+              )}
+            </div>
+          )
+        },
+      }),
+    [groupsByUserId, scopedPolicies]
+  )
+
+  const groupsCol = useMemo(
+    () =>
+      colHelper.display({
+        id: 'groups',
+        header: 'Groups',
+        cell: ({ row }) => {
+          const userGroups = groupsByUserId.get(row.original.id) ?? []
+          return (
+            <ListPlusCell tooltipTitle="Groups">
+              {userGroups.map((g) => (
+                <span key={g.id}>{g.displayName}</span>
+              ))}
+            </ListPlusCell>
+          )
+        },
+      }),
+    [groupsByUserId]
+  )
+
+  const staticColumns = useMemo(
+    () => [
+      colHelper.accessor('displayName', {
+        header: 'Name',
+        cell: (info) => (
+          <ButtonCell onClick={() => setSelectedUser(info.row.original)}>
+            {info.getValue()}
+          </ButtonCell>
+        ),
+      }),
+      roleCol,
+      groupsCol,
+      timeCreatedCol,
+    ],
+    [roleCol, groupsCol]
+  )
+
+  const isProject = managedScope === 'project'
+  const assignLabel = isProject ? 'Assign project role' : 'Assign role'
+  const changeLabel = isProject ? 'Change project role' : 'Change role'
+  const removeLabel = isProject ? 'Remove project role' : 'Remove role'
+
+  const makeActions = useCallback(
+    (user: User): MenuAction[] => {
+      const directManagedRole = managedRoleById.get(user.id)
+      const userGroups = groupsByUserId.get(user.id) ?? []
+      const entries = userScopedRoleEntries(user.id, userGroups, scopedPolicies)
+      const effective = effectiveScopedRole(entries)
+      const removeAction = {
+        label: directManagedRole ? removeLabel : 'Remove role',
+        onActivate: confirmDelete({
+          doDelete: () => updateManagedPolicy(deleteRole(user.id, managedPolicy)),
+          label: (
+            <span>
+              the <HL>{directManagedRole}</HL> role for <HL>{user.displayName}</HL>
+            </span>
+          ),
+          resourceKind: 'role assignment',
+        }),
+        // a direct role on the managed policy is required to remove anything
+        disabled:
+          !directManagedRole &&
+          `Role is inherited; modify the source ${
+            entries.find((e) => e.source.type === 'group') ? 'group' : 'silo assignment'
+          } to revoke`,
+      }
+      // No role at all — direct or inherited.
+      if (!effective) {
+        return [
+          {
+            label: assignLabel,
+            onActivate: () => setEditingUser({ user, defaultRole: undefined }),
+          },
+        ]
+      }
+      // For the project tab, an inherited silo role doesn't give us anything to
+      // "change" on the project policy — frame it as assigning a project role.
+      // For the silo tab, an inherited (via group) role can be promoted to a
+      // direct silo assignment via "Change role" pre-filled with the effective
+      // role.
+      if (isProject && !directManagedRole) {
+        return [
+          {
+            label: assignLabel,
+            onActivate: () => setEditingUser({ user, defaultRole: undefined }),
+          },
+          removeAction,
+        ]
+      }
+      // Pre-fill with the direct managed role if any; otherwise the effective
+      // role so the modal opens in 'edit' mode showing the role currently in
+      // effect.
+      const defaultRole = directManagedRole ?? effective.role
+      return [
+        {
+          label: changeLabel,
+          onActivate: () => setEditingUser({ user, defaultRole }),
+        },
+        removeAction,
+      ]
+    },
+    [
+      managedRoleById,
+      managedPolicy,
+      updateManagedPolicy,
+      groupsByUserId,
+      scopedPolicies,
+      isProject,
+      assignLabel,
+      changeLabel,
+      removeLabel,
+    ]
+  )
+
+  const columns = useColsWithActions(staticColumns, makeActions)
+
+  const { table } = useQueryTable({ query: userList, columns, emptyState: <EmptyState /> })
+
+  return (
+    <>
+      {table}
+      {editingUser && (
+        <EditModal
+          onDismiss={() => setEditingUser(null)}
+          policy={managedPolicy}
+          name={editingUser.user.displayName}
+          identityId={editingUser.user.id}
+          identityType="silo_user"
+          defaultValues={{ roleName: editingUser.defaultRole }}
+        />
+      )}
+      {selectedUser && (
+        <UserDetailsSideModal
+          user={selectedUser}
+          onDismiss={() => setSelectedUser(null)}
+          scopedPolicies={scopedPolicies}
+          userGroups={groupsByUserId.get(selectedUser.id) ?? []}
+        />
+      )}
+    </>
+  )
+}
diff --git a/app/components/access/GroupMembersSideModal.tsx b/app/components/access/GroupMembersSideModal.tsx
new file mode 100644
index 000000000..487955122
--- /dev/null
+++ b/app/components/access/GroupMembersSideModal.tsx
@@ -0,0 +1,114 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { useQuery } from '@tanstack/react-query'
+
+import { api, q, type Group, type ScopedPolicy, type User } from '@oxide/api'
+import { PersonGroup16Icon, PersonGroup24Icon } from '@oxide/design-system/icons/react'
+import { Badge } from '@oxide/design-system/ui'
+
+import { ReadOnlySideModalForm } from '~/components/form/ReadOnlySideModalForm'
+import { RowActions } from '~/table/columns/action-col'
+import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
+import { ResourceLabel } from '~/ui/lib/SideModal'
+import { Table } from '~/ui/lib/Table'
+import { roleColor } from '~/util/access'
+import { ALL_ISH } from '~/util/consts'
+
+type Props = {
+  group: Group
+  onDismiss: () => void
+  scopedPolicies: ScopedPolicy[]
+}
+
+export function GroupMembersSideModal({ group, onDismiss, scopedPolicies }: Props) {
+  const { data } = useQuery(q(api.userList, { query: { group: group.id, limit: ALL_ISH } }))
+  const members = data?.items ?? []
+
+  // role assignments for this group across all relevant policies
+  const assignments = scopedPolicies.flatMap(({ scope, policy }) => {
+    const ra = policy.roleAssignments.find((ra) => ra.identityId === group.id)
+    return ra ? [{ scope, roleName: ra.roleName }] : []
+  })
+
+  return (
+    <ReadOnlySideModalForm
+      title="Group"
+      subtitle={
+        <ResourceLabel>
+          <PersonGroup16Icon /> {group.displayName}
+        </ResourceLabel>
+      }
+      onDismiss={onDismiss}
+      animate
+    >
+      <PropertiesTable>
+        <PropertiesTable.IdRow id={group.id} />
+        <PropertiesTable.DateRow label="Created" date={group.timeCreated} />
+      </PropertiesTable>
+      <div className="mt-6">
+        <table className="ox-table text-sans-md w-full border-separate">
+          <Table.Header>
+            <Table.HeaderRow>
+              <Table.HeadCell>Role</Table.HeadCell>
+              <Table.HeadCell>Source</Table.HeadCell>
+            </Table.HeaderRow>
+          </Table.Header>
+          <Table.Body>
+            {assignments.length === 0 ? (
+              <Table.Row>
+                <Table.Cell colSpan={2} className="text-secondary">
+                  No roles assigned
+                </Table.Cell>
+              </Table.Row>
+            ) : (
+              assignments.map(({ scope, roleName }) => (
+                <Table.Row key={scope}>
+                  <Table.Cell>
+                    <Badge color={roleColor[roleName]}>
+                      {scope}.{roleName}
+                    </Badge>
+                  </Table.Cell>
+                  <Table.Cell>Assigned</Table.Cell>
+                </Table.Row>
+              ))
+            )}
+          </Table.Body>
+        </table>
+      </div>
+      <div className="mt-6">
+        {members.length === 0 ? (
+          <EmptyMessage
+            icon={<PersonGroup24Icon />}
+            title="No members"
+            body="This group has no members"
+          />
+        ) : (
+          <table className="ox-table text-sans-md w-full border-separate">
+            <Table.Header>
+              <Table.HeaderRow>
+                <Table.HeadCell>Members</Table.HeadCell>
+                <Table.HeadCell />
+              </Table.HeaderRow>
+            </Table.Header>
+            <Table.Body>
+              {members.map((member: User) => (
+                <Table.Row key={member.id}>
+                  <Table.Cell>{member.displayName}</Table.Cell>
+                  <Table.Cell className="action-col w-10 *:p-0">
+                    <RowActions id={member.id} />
+                  </Table.Cell>
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </table>
+        )}
+      </div>
+    </ReadOnlySideModalForm>
+  )
+}
diff --git a/app/components/access/UserDetailsSideModal.tsx b/app/components/access/UserDetailsSideModal.tsx
new file mode 100644
index 000000000..f70bb4512
--- /dev/null
+++ b/app/components/access/UserDetailsSideModal.tsx
@@ -0,0 +1,123 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import * as R from 'remeda'
+
+import {
+  roleOrder,
+  userScopedRoleEntries,
+  type Group,
+  type ScopedPolicy,
+  type User,
+} from '@oxide/api'
+import { Person16Icon } from '@oxide/design-system/icons/react'
+import { Badge } from '@oxide/design-system/ui'
+
+import { ReadOnlySideModalForm } from '~/components/form/ReadOnlySideModalForm'
+import { RowActions } from '~/table/columns/action-col'
+import { PropertiesTable } from '~/ui/lib/PropertiesTable'
+import { ResourceLabel } from '~/ui/lib/SideModal'
+import { Table } from '~/ui/lib/Table'
+import { roleColor } from '~/util/access'
+
+type Props = {
+  user: User
+  onDismiss: () => void
+  userGroups: Group[]
+  scopedPolicies: ScopedPolicy[]
+}
+
+export function UserDetailsSideModal({
+  user,
+  onDismiss,
+  userGroups,
+  scopedPolicies,
+}: Props) {
+  const roleEntries = R.sortBy(
+    userScopedRoleEntries(user.id, userGroups, scopedPolicies),
+    (e) => roleOrder[e.roleName]
+  )
+
+  return (
+    <ReadOnlySideModalForm
+      title="User"
+      subtitle={
+        <ResourceLabel>
+          <Person16Icon /> {user.displayName}
+        </ResourceLabel>
+      }
+      onDismiss={onDismiss}
+      animate
+    >
+      <PropertiesTable>
+        <PropertiesTable.IdRow id={user.id} />
+        <PropertiesTable.DateRow label="Created" date={user.timeCreated} />
+      </PropertiesTable>
+      <div className="mt-6">
+        <table className="ox-table text-sans-md w-full border-separate">
+          <Table.Header>
+            <Table.HeaderRow>
+              <Table.HeadCell>Role</Table.HeadCell>
+              <Table.HeadCell>Source</Table.HeadCell>
+            </Table.HeaderRow>
+          </Table.Header>
+          <Table.Body>
+            {roleEntries.length === 0 ? (
+              <Table.Row>
+                <Table.Cell colSpan={2} className="text-secondary">
+                  No roles assigned
+                </Table.Cell>
+              </Table.Row>
+            ) : (
+              roleEntries.map(({ roleName, scope, source }, i) => (
+                <Table.Row key={i}>
+                  <Table.Cell>
+                    <Badge color={roleColor[roleName]}>
+                      {scope}.{roleName}
+                    </Badge>
+                  </Table.Cell>
+                  <Table.Cell>
+                    {source.type === 'direct' && 'Assigned'}
+                    {source.type === 'group' && `via ${source.group.displayName}`}
+                  </Table.Cell>
+                </Table.Row>
+              ))
+            )}
+          </Table.Body>
+        </table>
+      </div>
+      <div className="mt-6">
+        <table className="ox-table text-sans-md w-full border-separate">
+          <Table.Header>
+            <Table.HeaderRow>
+              <Table.HeadCell>Groups</Table.HeadCell>
+              <Table.HeadCell />
+            </Table.HeaderRow>
+          </Table.Header>
+          <Table.Body>
+            {userGroups.length === 0 ? (
+              <Table.Row>
+                <Table.Cell colSpan={2} className="text-secondary">
+                  Not a member of any groups
+                </Table.Cell>
+              </Table.Row>
+            ) : (
+              userGroups.map((group) => (
+                <Table.Row key={group.id}>
+                  <Table.Cell>{group.displayName}</Table.Cell>
+                  <Table.Cell className="action-col w-10 *:p-0">
+                    <RowActions id={group.id} />
+                  </Table.Cell>
+                </Table.Row>
+              ))
+            )}
+          </Table.Body>
+        </table>
+      </div>
+    </ReadOnlySideModalForm>
+  )
+}
diff --git a/app/forms/access-util.tsx b/app/forms/access-util.tsx
index de4a93b94..0f0c91f43 100644
--- a/app/forms/access-util.tsx
+++ b/app/forms/access-util.tsx
@@ -83,7 +83,7 @@ export type EditRoleModalProps<Role extends RoleKey = RoleKey> = AddRoleModalPro
   name?: string
   identityId: string
   identityType: IdentityType
-  defaultValues: { roleName: Role }
+  defaultValues: { roleName?: Role }
 }
 
 const AccessDocs = () => (
diff --git a/app/forms/fleet-access.tsx b/app/forms/fleet-access.tsx
index 018097f55..ce2d91488 100644
--- a/app/forms/fleet-access.tsx
+++ b/app/forms/fleet-access.tsx
@@ -110,6 +110,7 @@ export function FleetAccessEditUserSideModal({
         </ResourceLabel>
       }
       onSubmit={({ roleName }) => {
+        if (!roleName) return
         updatePolicy.mutate({
           body: updateRole({ identityId, identityType, roleName }, policy),
         })
diff --git a/app/forms/project-access.tsx b/app/forms/project-access.tsx
index 15566bc56..8fcee1470 100644
--- a/app/forms/project-access.tsx
+++ b/app/forms/project-access.tsx
@@ -7,79 +7,16 @@
  */
 import { useForm } from 'react-hook-form'
 
-import {
-  api,
-  queryClient,
-  updateRole,
-  useActorsNotInPolicy,
-  useApiMutation,
-} from '@oxide/api'
+import { api, queryClient, updateRole, useApiMutation } from '@oxide/api'
 import { Access16Icon } from '@oxide/design-system/icons/react'
 
-import { ListboxField } from '~/components/form/fields/ListboxField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useProjectSelector } from '~/hooks/use-params'
-import { addToast } from '~/stores/toast'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { ResourceLabel } from '~/ui/lib/SideModal'
 import { docLinks } from '~/util/links'
 
-import {
-  actorToItem,
-  defaultValues,
-  RoleRadioField,
-  type AddRoleModalProps,
-  type EditRoleModalProps,
-} from './access-util'
-
-export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalProps) {
-  const { project } = useProjectSelector()
-
-  const actors = useActorsNotInPolicy(policy)
-
-  const updatePolicy = useApiMutation(api.projectPolicyUpdate, {
-    onSuccess: () => {
-      queryClient.invalidateEndpoint('projectPolicyView')
-      // We don't have the name of the user or group, so we'll just have a generic message
-      addToast({ content: 'Role assigned' })
-      onDismiss()
-    },
-  })
-
-  const form = useForm({ defaultValues })
-
-  return (
-    <SideModalForm
-      title="Add user or group"
-      resourceName="role"
-      form={form}
-      formType="create"
-      submitLabel="Assign role"
-      onSubmit={({ identityId, roleName }) => {
-        // actor is guaranteed to be in the list because it came from there
-        const identityType = actors.find((a) => a.id === identityId)!.identityType
-
-        updatePolicy.mutate({
-          path: { project },
-          body: updateRole({ identityId, identityType, roleName }, policy),
-        })
-      }}
-      loading={updatePolicy.isPending}
-      submitError={updatePolicy.error}
-      onDismiss={onDismiss}
-    >
-      <ListboxField
-        name="identityId"
-        items={actors.map(actorToItem)}
-        label="User or group"
-        required
-        control={form.control}
-      />
-      <RoleRadioField name="roleName" control={form.control} scope="Project" />
-      <SideModalFormDocs docs={[docLinks.access]} />
-    </SideModalForm>
-  )
-}
+import { RoleRadioField, type EditRoleModalProps } from './access-util'
 
 export function ProjectAccessEditUserSideModal({
   onDismiss,
@@ -90,11 +27,11 @@ export function ProjectAccessEditUserSideModal({
   defaultValues,
 }: EditRoleModalProps) {
   const { project } = useProjectSelector()
+  const isAssigning = !defaultValues.roleName
 
   const updatePolicy = useApiMutation(api.projectPolicyUpdate, {
     onSuccess: () => {
       queryClient.invalidateEndpoint('projectPolicyView')
-      addToast({ content: 'Role updated' })
       onDismiss()
     },
   })
@@ -104,15 +41,16 @@ export function ProjectAccessEditUserSideModal({
   return (
     <SideModalForm
       form={form}
-      formType="edit"
+      formType={isAssigning ? 'create' : 'edit'}
       resourceName="role"
-      title="Edit role"
+      title={isAssigning ? 'Assign role' : 'Edit role'}
       subtitle={
         <ResourceLabel>
           <Access16Icon /> {name}
         </ResourceLabel>
       }
       onSubmit={({ roleName }) => {
+        if (!roleName) return
         updatePolicy.mutate({
           path: { project },
           body: updateRole({ identityId, identityType, roleName }, policy),
@@ -120,7 +58,10 @@ export function ProjectAccessEditUserSideModal({
       }}
       loading={updatePolicy.isPending}
       submitError={updatePolicy.error}
-      onDismiss={onDismiss}
+      onDismiss={() => {
+        updatePolicy.reset() // clear API error state so it doesn't persist on next open
+        onDismiss()
+      }}
     >
       <RoleRadioField name="roleName" control={form.control} scope="Project" />
       <SideModalFormDocs docs={[docLinks.access]} />
diff --git a/app/forms/silo-access.tsx b/app/forms/silo-access.tsx
index 6bc711230..448e8128d 100644
--- a/app/forms/silo-access.tsx
+++ b/app/forms/silo-access.tsx
@@ -7,76 +7,15 @@
  */
 import { useForm } from 'react-hook-form'
 
-import {
-  api,
-  queryClient,
-  updateRole,
-  useActorsNotInPolicy,
-  useApiMutation,
-} from '@oxide/api'
+import { api, queryClient, updateRole, useApiMutation } from '@oxide/api'
 import { Access16Icon } from '@oxide/design-system/icons/react'
 
-import { ListboxField } from '~/components/form/fields/ListboxField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { ResourceLabel } from '~/ui/lib/SideModal'
 import { docLinks } from '~/util/links'
 
-import {
-  actorToItem,
-  defaultValues,
-  RoleRadioField,
-  type AddRoleModalProps,
-  type EditRoleModalProps,
-} from './access-util'
-
-export function SiloAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalProps) {
-  const actors = useActorsNotInPolicy(policy)
-
-  const updatePolicy = useApiMutation(api.policyUpdate, {
-    onSuccess: () => {
-      queryClient.invalidateEndpoint('policyView')
-      onDismiss()
-    },
-  })
-
-  const form = useForm({ defaultValues })
-
-  return (
-    <SideModalForm
-      form={form}
-      formType="create"
-      resourceName="role"
-      title="Add user or group"
-      submitLabel="Assign role"
-      onDismiss={() => {
-        updatePolicy.reset() // clear API error state so it doesn't persist on next open
-        onDismiss()
-      }}
-      onSubmit={({ identityId, roleName }) => {
-        // TODO: DRY logic
-        // actor is guaranteed to be in the list because it came from there
-        const identityType = actors.find((a) => a.id === identityId)!.identityType
-
-        updatePolicy.mutate({
-          body: updateRole({ identityId, identityType, roleName }, policy),
-        })
-      }}
-      loading={updatePolicy.isPending}
-      submitError={updatePolicy.error}
-    >
-      <ListboxField
-        name="identityId"
-        items={actors.map(actorToItem)}
-        label="User or group"
-        required
-        control={form.control}
-      />
-      <RoleRadioField name="roleName" control={form.control} scope="Silo" />
-      <SideModalFormDocs docs={[docLinks.access]} />
-    </SideModalForm>
-  )
-}
+import { RoleRadioField, type EditRoleModalProps } from './access-util'
 
 export function SiloAccessEditUserSideModal({
   onDismiss,
@@ -86,6 +25,7 @@ export function SiloAccessEditUserSideModal({
   policy,
   defaultValues,
 }: EditRoleModalProps) {
+  const isAssigning = !defaultValues.roleName
   const updatePolicy = useApiMutation(api.policyUpdate, {
     onSuccess: () => {
       queryClient.invalidateEndpoint('policyView')
@@ -97,15 +37,16 @@ export function SiloAccessEditUserSideModal({
   return (
     <SideModalForm
       form={form}
-      formType="edit"
+      formType={isAssigning ? 'create' : 'edit'}
       resourceName="role"
-      title="Edit role"
+      title={isAssigning ? 'Assign role' : 'Edit role'}
       subtitle={
         <ResourceLabel>
           <Access16Icon /> {name}
         </ResourceLabel>
       }
       onSubmit={({ roleName }) => {
+        if (!roleName) return
         updatePolicy.mutate({
           body: updateRole({ identityId, identityType, roleName }, policy),
         })
diff --git a/app/pages/SiloAccessGroupsTab.tsx b/app/pages/SiloAccessGroupsTab.tsx
new file mode 100644
index 000000000..867019079
--- /dev/null
+++ b/app/pages/SiloAccessGroupsTab.tsx
@@ -0,0 +1,44 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import {
+  api,
+  q,
+  queryClient,
+  useApiMutation,
+  usePrefetchedQuery,
+  type Policy,
+} from '@oxide/api'
+
+import { AccessGroupsTab } from '~/components/access/AccessGroupsTab'
+import { SiloAccessEditUserSideModal } from '~/forms/silo-access'
+import { titleCrumb } from '~/hooks/use-crumbs'
+import { addToast } from '~/stores/toast'
+
+const policyView = q(api.policyView, {})
+
+export const handle = titleCrumb('Groups')
+
+export default function SiloAccessGroupsTab() {
+  const { data: siloPolicy } = usePrefetchedQuery(policyView)
+
+  const { mutateAsync: updatePolicy } = useApiMutation(api.policyUpdate, {
+    onSuccess: () => {
+      queryClient.invalidateEndpoint('policyView')
+      addToast({ content: 'Role removed' })
+    },
+  })
+
+  return (
+    <AccessGroupsTab
+      scopedPolicies={[{ scope: 'silo', policy: siloPolicy }]}
+      managedScope="silo"
+      EditModal={SiloAccessEditUserSideModal}
+      updateManagedPolicy={(body: Policy) => updatePolicy({ body })}
+    />
+  )
+}
diff --git a/app/pages/SiloAccessPage.tsx b/app/pages/SiloAccessPage.tsx
index 66a7f3aab..9ae3a3c1e 100644
--- a/app/pages/SiloAccessPage.tsx
+++ b/app/pages/SiloAccessPage.tsx
@@ -5,178 +5,42 @@
  *
  * Copyright Oxide Computer Company
  */
-import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { useMemo, useState } from 'react'
-
-import {
-  api,
-  byGroupThenName,
-  deleteRole,
-  q,
-  queryClient,
-  useApiMutation,
-  usePrefetchedQuery,
-  useUserRows,
-  type IdentityType,
-  type RoleKey,
-} from '@oxide/api'
+import { api, getListQFn, q, queryClient } from '@oxide/api'
 import { Access16Icon, Access24Icon } from '@oxide/design-system/icons/react'
-import { Badge } from '@oxide/design-system/ui'
 
 import { DocsPopover } from '~/components/DocsPopover'
-import { HL } from '~/components/HL'
-import {
-  SiloAccessAddUserSideModal,
-  SiloAccessEditUserSideModal,
-} from '~/forms/silo-access'
-import { useCurrentUser } from '~/hooks/use-current-user'
-import { useQuickActions } from '~/hooks/use-quick-actions'
-import { confirmDelete } from '~/stores/confirm-delete'
-import { addToast } from '~/stores/toast'
-import { getActionsCol } from '~/table/columns/action-col'
-import { Table } from '~/table/Table'
-import { CreateButton } from '~/ui/lib/CreateButton'
-import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { RouteTabs, Tab } from '~/components/RouteTabs'
+import { makeCrumb } from '~/hooks/use-crumbs'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
-import { identityTypeLabel, roleColor } from '~/util/access'
-import { groupBy } from '~/util/array'
+import { ALL_ISH } from '~/util/consts'
 import { docLinks } from '~/util/links'
+import { pb } from '~/util/path-builder'
 
-const EmptyState = ({ onClick }: { onClick: () => void }) => (
-  <TableEmptyBox>
-    <EmptyMessage
-      icon={<Access24Icon />}
-      title="No authorized users"
-      body="Give permission to view, edit, or administer this silo"
-      buttonText="Add user or group"
-      onClick={onClick}
-    />
-  </TableEmptyBox>
-)
-
+// Parent prefetches everything both tabs need so switching between Users and
+// Groups doesn't trigger a fetch. This loader runs once on entry to /access;
+// react-router won't re-run it when navigating between sibling tab routes.
 const policyView = q(api.policyView, {})
-const userList = q(api.userList, {})
-const groupList = q(api.groupList, {})
+const userList = getListQFn(api.userList, {})
+const groupList = getListQFn(api.groupList, {})
+const groupListAll = q(api.groupList, { query: { limit: ALL_ISH } })
 
 export async function clientLoader() {
+  // groups must resolve before fanning out per-group member fetches
+  const groups = await queryClient.fetchQuery(groupListAll)
   await Promise.all([
     queryClient.prefetchQuery(policyView),
-    // used to resolve user names
-    queryClient.prefetchQuery(userList),
-    queryClient.prefetchQuery(groupList),
+    queryClient.prefetchQuery(userList.optionsFn()),
+    queryClient.prefetchQuery(groupList.optionsFn()),
+    ...groups.items.map((g) =>
+      queryClient.prefetchQuery(q(api.userList, { query: { group: g.id, limit: ALL_ISH } }))
+    ),
   ])
   return null
 }
 
-export const handle = { crumb: 'Silo Access' }
-
-type UserRow = {
-  id: string
-  identityType: IdentityType
-  name: string
-  siloRole: RoleKey | undefined
-}
-
-const colHelper = createColumnHelper<UserRow>()
+export const handle = makeCrumb('Silo Access', pb.siloAccess())
 
 export default function SiloAccessPage() {
-  const [addModalOpen, setAddModalOpen] = useState(false)
-  const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
-
-  const { me } = useCurrentUser()
-  const { data: siloPolicy } = usePrefetchedQuery(policyView)
-  const siloRows = useUserRows(siloPolicy.roleAssignments, 'silo')
-
-  const rows = useMemo(() => {
-    return groupBy(siloRows, (u) => u.id)
-      .map(([userId, userAssignments]) => {
-        const siloRole = userAssignments.find((a) => a.roleSource === 'silo')?.roleName
-
-        const { name, identityType } = userAssignments[0]
-
-        const row: UserRow = {
-          id: userId,
-          identityType,
-          name,
-          siloRole,
-        }
-
-        return row
-      })
-      .sort(byGroupThenName)
-  }, [siloRows])
-
-  const { mutateAsync: updatePolicy } = useApiMutation(api.policyUpdate, {
-    onSuccess: () => {
-      queryClient.invalidateEndpoint('policyView')
-      addToast({ content: 'Access removed' })
-    },
-    // TODO: handle 403
-  })
-
-  // TODO: checkboxes and bulk delete? not sure
-  // TODO: disable delete on permissions you can't delete
-
-  const columns = useMemo(
-    () => [
-      colHelper.accessor('name', { header: 'Name' }),
-      colHelper.accessor('identityType', {
-        header: 'Type',
-        cell: (info) => identityTypeLabel[info.getValue()],
-      }),
-      colHelper.accessor('siloRole', {
-        header: 'Role',
-        cell: (info) => {
-          const role = info.getValue()
-          return role ? <Badge color={roleColor[role]}>silo.{role}</Badge> : null
-        },
-      }),
-      // TODO: tooltips on disabled elements explaining why
-      getActionsCol((row: UserRow) => [
-        {
-          label: 'Change role',
-          onActivate: () => setEditingUserRow(row),
-          disabled: !row.siloRole && "You don't have permission to change this user's role",
-        },
-        // TODO: only show if you have permission to do this
-        {
-          label: 'Delete',
-          onActivate: confirmDelete({
-            doDelete: () => updatePolicy({ body: deleteRole(row.id, siloPolicy) }),
-            label: (
-              <span>
-                the <HL>{row.siloRole}</HL> role for <HL>{row.name}</HL>
-              </span>
-            ),
-            resourceKind: 'role assignment',
-            extraContent:
-              row.id === me.id ? 'This will remove your own silo access.' : undefined,
-          }),
-          disabled: !row.siloRole && "You don't have permission to delete this user",
-        },
-      ]),
-    ],
-    [siloPolicy, updatePolicy, me]
-  )
-
-  const tableInstance = useReactTable({
-    columns,
-    data: rows,
-    getCoreRowModel: getCoreRowModel(),
-  })
-
-  useQuickActions(
-    () => [
-      {
-        value: 'Add user or group',
-        navGroup: 'Actions',
-        action: () => setAddModalOpen(true),
-      },
-    ],
-    []
-  )
-
   return (
     <>
       <PageHeader>
@@ -185,34 +49,13 @@ export default function SiloAccessPage() {
           heading="access"
           icon={<Access16Icon />}
           summary="Roles determine who can view, edit, or administer this silo and the projects within it. If a user or group has both a silo and project role, the stronger role takes precedence."
-          links={[docLinks.keyConceptsIam, docLinks.access]}
+          links={[docLinks.keyConceptsIam, docLinks.access, docLinks.identityProviders]}
         />
       </PageHeader>
-
-      <TableActions>
-        <CreateButton onClick={() => setAddModalOpen(true)}>Add user or group</CreateButton>
-      </TableActions>
-      {addModalOpen && (
-        <SiloAccessAddUserSideModal
-          onDismiss={() => setAddModalOpen(false)}
-          policy={siloPolicy}
-        />
-      )}
-      {editingUserRow?.siloRole && (
-        <SiloAccessEditUserSideModal
-          onDismiss={() => setEditingUserRow(null)}
-          policy={siloPolicy}
-          name={editingUserRow.name}
-          identityId={editingUserRow.id}
-          identityType={editingUserRow.identityType}
-          defaultValues={{ roleName: editingUserRow.siloRole }}
-        />
-      )}
-      {rows.length === 0 ? (
-        <EmptyState onClick={() => setAddModalOpen(true)} />
-      ) : (
-        <Table table={tableInstance} />
-      )}
+      <RouteTabs fullWidth>
+        <Tab to={pb.siloAccessGroups()}>Groups</Tab>
+        <Tab to={pb.siloAccessUsers()}>Users</Tab>
+      </RouteTabs>
     </>
   )
 }
diff --git a/app/pages/SiloAccessUsersTab.tsx b/app/pages/SiloAccessUsersTab.tsx
new file mode 100644
index 000000000..713cf3a2e
--- /dev/null
+++ b/app/pages/SiloAccessUsersTab.tsx
@@ -0,0 +1,44 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import {
+  api,
+  q,
+  queryClient,
+  useApiMutation,
+  usePrefetchedQuery,
+  type Policy,
+} from '@oxide/api'
+
+import { AccessUsersTab } from '~/components/access/AccessUsersTab'
+import { SiloAccessEditUserSideModal } from '~/forms/silo-access'
+import { titleCrumb } from '~/hooks/use-crumbs'
+import { addToast } from '~/stores/toast'
+
+const policyView = q(api.policyView, {})
+
+export const handle = titleCrumb('Users')
+
+export default function SiloAccessUsersTab() {
+  const { data: siloPolicy } = usePrefetchedQuery(policyView)
+
+  const { mutateAsync: updatePolicy } = useApiMutation(api.policyUpdate, {
+    onSuccess: () => {
+      queryClient.invalidateEndpoint('policyView')
+      addToast({ content: 'Role removed' })
+    },
+  })
+
+  return (
+    <AccessUsersTab
+      scopedPolicies={[{ scope: 'silo', policy: siloPolicy }]}
+      managedScope="silo"
+      EditModal={SiloAccessEditUserSideModal}
+      updateManagedPolicy={(body: Policy) => updatePolicy({ body })}
+    />
+  )
+}
diff --git a/app/pages/project/access/ProjectAccessGroupsTab.tsx b/app/pages/project/access/ProjectAccessGroupsTab.tsx
new file mode 100644
index 000000000..fcb323621
--- /dev/null
+++ b/app/pages/project/access/ProjectAccessGroupsTab.tsx
@@ -0,0 +1,52 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import {
+  api,
+  q,
+  queryClient,
+  useApiMutation,
+  usePrefetchedQuery,
+  type Policy,
+} from '@oxide/api'
+
+import { AccessGroupsTab } from '~/components/access/AccessGroupsTab'
+import { ProjectAccessEditUserSideModal } from '~/forms/project-access'
+import { titleCrumb } from '~/hooks/use-crumbs'
+import { useProjectSelector } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
+
+const policyView = q(api.policyView, {})
+
+export const handle = titleCrumb('Groups')
+
+export default function ProjectAccessGroupsTab() {
+  const { project } = useProjectSelector()
+  const { data: siloPolicy } = usePrefetchedQuery(policyView)
+  const { data: projectPolicy } = usePrefetchedQuery(
+    q(api.projectPolicyView, { path: { project } })
+  )
+
+  const { mutateAsync: updatePolicy } = useApiMutation(api.projectPolicyUpdate, {
+    onSuccess: () => {
+      queryClient.invalidateEndpoint('projectPolicyView')
+      addToast({ content: 'Role removed' })
+    },
+  })
+
+  return (
+    <AccessGroupsTab
+      scopedPolicies={[
+        { scope: 'silo', policy: siloPolicy },
+        { scope: 'project', policy: projectPolicy },
+      ]}
+      managedScope="project"
+      EditModal={ProjectAccessEditUserSideModal}
+      updateManagedPolicy={(body: Policy) => updatePolicy({ path: { project }, body })}
+    />
+  )
+}
diff --git a/app/pages/project/access/ProjectAccessPage.tsx b/app/pages/project/access/ProjectAccessPage.tsx
index bcf10c78b..bdaeb11cd 100644
--- a/app/pages/project/access/ProjectAccessPage.tsx
+++ b/app/pages/project/access/ProjectAccessPage.tsx
@@ -5,219 +5,49 @@
  *
  * Copyright Oxide Computer Company
  */
-
-import { createColumnHelper, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { useMemo, useState } from 'react'
 import type { LoaderFunctionArgs } from 'react-router'
-import * as R from 'remeda'
 
-import {
-  api,
-  byGroupThenName,
-  deleteRole,
-  q,
-  queryClient,
-  roleOrder,
-  useApiMutation,
-  usePrefetchedQuery,
-  useUserRows,
-  type IdentityType,
-  type RoleKey,
-} from '@oxide/api'
+import { api, getListQFn, q, queryClient } from '@oxide/api'
 import { Access16Icon, Access24Icon } from '@oxide/design-system/icons/react'
-import { Badge } from '@oxide/design-system/ui'
 
 import { DocsPopover } from '~/components/DocsPopover'
-import { HL } from '~/components/HL'
-import { ListPlusCell } from '~/components/ListPlusCell'
-import {
-  ProjectAccessAddUserSideModal,
-  ProjectAccessEditUserSideModal,
-} from '~/forms/project-access'
+import { RouteTabs, Tab } from '~/components/RouteTabs'
 import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
-import { useQuickActions } from '~/hooks/use-quick-actions'
-import { confirmDelete } from '~/stores/confirm-delete'
-import { addToast } from '~/stores/toast'
-import { getActionsCol } from '~/table/columns/action-col'
-import { Table } from '~/table/Table'
-import { CreateButton } from '~/ui/lib/CreateButton'
-import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
-import { TableActions, TableEmptyBox } from '~/ui/lib/Table'
-import { TipIcon } from '~/ui/lib/TipIcon'
-import { identityTypeLabel, roleColor } from '~/util/access'
-import { groupBy } from '~/util/array'
+import { ALL_ISH } from '~/util/consts'
 import { docLinks } from '~/util/links'
+import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
 
+// Parent prefetches everything both tabs need so switching between Users and
+// Groups doesn't trigger a fetch.
 const policyView = q(api.policyView, {})
 const projectPolicyView = ({ project }: PP.Project) =>
   q(api.projectPolicyView, { path: { project } })
-const userList = q(api.userList, {})
-const groupList = q(api.groupList, {})
-
-const EmptyState = ({ onClick }: { onClick: () => void }) => (
-  <TableEmptyBox>
-    <EmptyMessage
-      icon={<Access24Icon />}
-      title="No authorized users"
-      body="Give permission to view, edit, or administer this project"
-      buttonText="Add user or group to project"
-      onClick={onClick}
-    />
-  </TableEmptyBox>
-)
+const userList = getListQFn(api.userList, {})
+const groupList = getListQFn(api.groupList, {})
+const groupListAll = q(api.groupList, { query: { limit: ALL_ISH } })
 
 export async function clientLoader({ params }: LoaderFunctionArgs) {
   const selector = getProjectSelector(params)
+  // groups must resolve before fanning out per-group member fetches
+  const groups = await queryClient.fetchQuery(groupListAll)
   await Promise.all([
     queryClient.prefetchQuery(policyView),
     queryClient.prefetchQuery(projectPolicyView(selector)),
-    // used to resolve user names
-    queryClient.prefetchQuery(userList),
-    queryClient.prefetchQuery(groupList),
+    queryClient.prefetchQuery(userList.optionsFn()),
+    queryClient.prefetchQuery(groupList.optionsFn()),
+    ...groups.items.map((g) =>
+      queryClient.prefetchQuery(q(api.userList, { query: { group: g.id, limit: ALL_ISH } }))
+    ),
   ])
   return null
 }
 
 export const handle = { crumb: 'Project Access' }
 
-type UserRow = {
-  id: string
-  identityType: IdentityType
-  name: string
-  projectRole: RoleKey | undefined
-  roleBadges: { roleSource: string; roleName: RoleKey }[]
-}
-
-const colHelper = createColumnHelper<UserRow>()
-
 export default function ProjectAccessPage() {
-  const [addModalOpen, setAddModalOpen] = useState(false)
-  const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
   const projectSelector = useProjectSelector()
-
-  const { data: siloPolicy } = usePrefetchedQuery(policyView)
-  const siloRows = useUserRows(siloPolicy.roleAssignments, 'silo')
-
-  const { data: projectPolicy } = usePrefetchedQuery(projectPolicyView(projectSelector))
-  const projectRows = useUserRows(projectPolicy.roleAssignments, 'project')
-
-  const rows = useMemo(() => {
-    return groupBy(siloRows.concat(projectRows), (u) => u.id)
-      .map(([userId, userAssignments]) => {
-        const { name, identityType } = userAssignments[0]
-
-        const siloAccessRow = userAssignments.find((a) => a.roleSource === 'silo')
-        const projectAccessRow = userAssignments.find((a) => a.roleSource === 'project')
-
-        const roleBadges = R.sortBy(
-          [siloAccessRow, projectAccessRow].filter((r) => !!r),
-          (r) => roleOrder[r.roleName] // sorts strongest role first
-        )
-
-        return {
-          id: userId,
-          identityType,
-          name,
-          projectRole: projectAccessRow?.roleName,
-          roleBadges,
-        } satisfies UserRow
-      })
-      .sort(byGroupThenName)
-  }, [siloRows, projectRows])
-
-  const { mutateAsync: updatePolicy } = useApiMutation(api.projectPolicyUpdate, {
-    onSuccess: () => {
-      queryClient.invalidateEndpoint('projectPolicyView')
-      addToast({ content: 'Access removed' })
-    },
-    // TODO: handle 403
-  })
-
-  // TODO: checkboxes and bulk delete? not sure
-  // TODO: disable delete on permissions you can't delete
-
-  const columns = useMemo(
-    () => [
-      colHelper.accessor('name', { header: 'Name' }),
-      colHelper.accessor('identityType', {
-        header: 'Type',
-        cell: (info) => identityTypeLabel[info.getValue()],
-      }),
-      colHelper.accessor('roleBadges', {
-        header: () => (
-          <span className="inline-flex items-center">
-            Role
-            <TipIcon className="ml-2">
-              A user or group&apos;s effective role for this project is the strongest role
-              on either the silo or project
-            </TipIcon>
-          </span>
-        ),
-        cell: (info) => (
-          <ListPlusCell tooltipTitle="Other roles">
-            {info.getValue().map(({ roleName, roleSource }) => (
-              <Badge key={roleSource} color={roleColor[roleName]}>
-                {roleSource}.{roleName}
-              </Badge>
-            ))}
-          </ListPlusCell>
-        ),
-      }),
-
-      // TODO: tooltips on disabled elements explaining why
-      getActionsCol((row: UserRow) => [
-        {
-          label: 'Change role',
-          onActivate: () => setEditingUserRow(row),
-          disabled:
-            !row.projectRole && "You don't have permission to change this user's role",
-        },
-        // TODO: only show if you have permission to do this
-        {
-          label: 'Delete',
-          onActivate: confirmDelete({
-            doDelete: () =>
-              updatePolicy({
-                path: { project: projectSelector.project },
-                body: deleteRole(row.id, projectPolicy),
-              }),
-            // TODO: explain that this will not affect the role inherited from
-            // the silo or roles inherited from group membership. Ideally we'd
-            // be able to say: this will cause the user to have an effective
-            // role of X. However we would have to look at their groups too.
-            label: (
-              <span>
-                the <HL>{row.projectRole}</HL> role for <HL>{row.name}</HL>
-              </span>
-            ),
-            resourceKind: 'role assignment',
-          }),
-          disabled: !row.projectRole && "You don't have permission to delete this user",
-        },
-      ]),
-    ],
-    [projectPolicy, projectSelector.project, updatePolicy]
-  )
-
-  const tableInstance = useReactTable({
-    columns,
-    data: rows,
-    getCoreRowModel: getCoreRowModel(),
-  })
-
-  useQuickActions(
-    () => [
-      {
-        value: 'Add user or group',
-        navGroup: 'Actions',
-        action: () => setAddModalOpen(true),
-      },
-    ],
-    []
-  )
-
   return (
     <>
       <PageHeader>
@@ -226,34 +56,13 @@ export default function ProjectAccessPage() {
           heading="access"
           icon={<Access16Icon />}
           summary="Roles determine who can view, edit, or administer this project. Silo roles are inherited from the silo. If a user or group has both a silo and project role, the stronger role takes precedence."
-          links={[docLinks.keyConceptsIam, docLinks.access]}
+          links={[docLinks.keyConceptsIam, docLinks.access, docLinks.identityProviders]}
         />
       </PageHeader>
-
-      <TableActions>
-        <CreateButton onClick={() => setAddModalOpen(true)}>Add user or group</CreateButton>
-      </TableActions>
-      {projectPolicy && addModalOpen && (
-        <ProjectAccessAddUserSideModal
-          onDismiss={() => setAddModalOpen(false)}
-          policy={projectPolicy}
-        />
-      )}
-      {projectPolicy && editingUserRow?.projectRole && (
-        <ProjectAccessEditUserSideModal
-          onDismiss={() => setEditingUserRow(null)}
-          policy={projectPolicy}
-          name={editingUserRow.name}
-          identityId={editingUserRow.id}
-          identityType={editingUserRow.identityType}
-          defaultValues={{ roleName: editingUserRow.projectRole }}
-        />
-      )}
-      {rows.length === 0 ? (
-        <EmptyState onClick={() => setAddModalOpen(true)} />
-      ) : (
-        <Table table={tableInstance} />
-      )}
+      <RouteTabs fullWidth>
+        <Tab to={pb.projectAccessGroups(projectSelector)}>Groups</Tab>
+        <Tab to={pb.projectAccessUsers(projectSelector)}>Users</Tab>
+      </RouteTabs>
     </>
   )
 }
diff --git a/app/pages/project/access/ProjectAccessUsersTab.tsx b/app/pages/project/access/ProjectAccessUsersTab.tsx
new file mode 100644
index 000000000..10acd04e2
--- /dev/null
+++ b/app/pages/project/access/ProjectAccessUsersTab.tsx
@@ -0,0 +1,52 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import {
+  api,
+  q,
+  queryClient,
+  useApiMutation,
+  usePrefetchedQuery,
+  type Policy,
+} from '@oxide/api'
+
+import { AccessUsersTab } from '~/components/access/AccessUsersTab'
+import { ProjectAccessEditUserSideModal } from '~/forms/project-access'
+import { titleCrumb } from '~/hooks/use-crumbs'
+import { useProjectSelector } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
+
+const policyView = q(api.policyView, {})
+
+export const handle = titleCrumb('Users')
+
+export default function ProjectAccessUsersTab() {
+  const { project } = useProjectSelector()
+  const { data: siloPolicy } = usePrefetchedQuery(policyView)
+  const { data: projectPolicy } = usePrefetchedQuery(
+    q(api.projectPolicyView, { path: { project } })
+  )
+
+  const { mutateAsync: updatePolicy } = useApiMutation(api.projectPolicyUpdate, {
+    onSuccess: () => {
+      queryClient.invalidateEndpoint('projectPolicyView')
+      addToast({ content: 'Role removed' })
+    },
+  })
+
+  return (
+    <AccessUsersTab
+      scopedPolicies={[
+        { scope: 'silo', policy: siloPolicy },
+        { scope: 'project', policy: projectPolicy },
+      ]}
+      managedScope="project"
+      EditModal={ProjectAccessEditUserSideModal}
+      updateManagedPolicy={(body: Policy) => updatePolicy({ path: { project }, body })}
+    />
+  )
+}
diff --git a/app/pages/system/FleetAccessPage.tsx b/app/pages/system/FleetAccessPage.tsx
index 341020849..9c33c1c6f 100644
--- a/app/pages/system/FleetAccessPage.tsx
+++ b/app/pages/system/FleetAccessPage.tsx
@@ -19,7 +19,6 @@ import {
   queryClient,
   useApiMutation,
   usePrefetchedQuery,
-  useUserRows,
   type FleetRole,
   type IdentityType,
 } from '@oxide/api'
@@ -63,8 +62,8 @@ const EmptyState = ({ onClick }: { onClick: () => void }) => (
 )
 
 const systemPolicyView = q(api.systemPolicyView, {})
-const userList = q(api.userList, {})
-const groupList = q(api.groupList, {})
+const userList = q(api.userList, { query: { limit: ALL_ISH } })
+const groupList = q(api.groupList, { query: { limit: ALL_ISH } })
 const siloList = q(api.siloList, { query: { limit: ALL_ISH } })
 
 export async function clientLoader() {
@@ -106,17 +105,34 @@ export default function FleetAccessPage() {
   const navigate = useNavigate()
   const { me } = useCurrentUser()
   const { data: fleetPolicy } = usePrefetchedQuery(systemPolicyView)
+  const { data: users } = usePrefetchedQuery(userList)
+  const { data: groups } = usePrefetchedQuery(groupList)
   const { data: silos } = usePrefetchedQuery(siloList)
-  const fleetRows = useUserRows(fleetPolicy.roleAssignments, 'fleet')
 
   const rows: AccessRow[] = useMemo(() => {
-    const assignmentRows: AssignmentRow[] = groupBy(fleetRows, (u) => u.id)
-      .map(([userId, userAssignments]) => {
-        const { name, identityType } = userAssignments[0]
-        // non-null: userAssignments is non-empty (groupBy only creates groups for existing items)
+    // A user might not appear here if they're not in the current user's silo
+    // (can happen for cross-silo fleet assignments), so fall back to the raw ID.
+    // The name column detects the fallback and shows an explanatory tooltip.
+    const nameById = new Map(
+      [...users.items, ...groups.items].map((u) => [u.id, u.displayName])
+    )
+
+    const assignmentRows: AssignmentRow[] = groupBy(
+      fleetPolicy.roleAssignments,
+      (ra) => ra.identityId
+    )
+      .map(([userId, assignments]) => {
+        const { identityType } = assignments[0]
+        // non-null: assignments is non-empty (groupBy only creates groups for existing items)
         // getEffectiveRole needed because API allows multiple fleet role assignments for the same user, even though that's probably rare
-        const fleetRole = getEffectiveRole(userAssignments.map((a) => a.roleName))!
-        return { kind: 'assignment' as const, id: userId, identityType, name, fleetRole }
+        const fleetRole = getEffectiveRole(assignments.map((a) => a.roleName))!
+        return {
+          kind: 'assignment' as const,
+          id: userId,
+          identityType,
+          name: nameById.get(userId) ?? userId,
+          fleetRole,
+        }
       })
       .sort(byGroupThenName)
 
@@ -134,7 +150,7 @@ export default function FleetAccessPage() {
       )
 
     return [...assignmentRows, ...mappingRows]
-  }, [fleetRows, silos])
+  }, [fleetPolicy, users, groups, silos])
 
   const { mutateAsync: updatePolicy } = useApiMutation(api.systemPolicyUpdate, {
     onSuccess: () => {
diff --git a/app/routes.tsx b/app/routes.tsx
index 5d07ce94b..743e1bc7b 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -308,7 +308,17 @@ export const routes = createRoutesFromElements(
           />
         </Route>
 
-        <Route path="access" lazy={() => import('./pages/SiloAccessPage').then(convert)} />
+        <Route path="access" lazy={() => import('./pages/SiloAccessPage').then(convert)}>
+          <Route index element={<Navigate to="groups" replace />} />
+          <Route
+            path="groups"
+            lazy={() => import('./pages/SiloAccessGroupsTab').then(convert)}
+          />
+          <Route
+            path="users"
+            lazy={() => import('./pages/SiloAccessUsersTab').then(convert)}
+          />
+        </Route>
       </Route>
 
       {/* PROJECT */}
@@ -579,7 +589,21 @@ export const routes = createRoutesFromElements(
           <Route
             path="access"
             lazy={() => import('./pages/project/access/ProjectAccessPage').then(convert)}
-          />
+          >
+            <Route index element={<Navigate to="groups" replace />} />
+            <Route
+              path="groups"
+              lazy={() =>
+                import('./pages/project/access/ProjectAccessGroupsTab').then(convert)
+              }
+            />
+            <Route
+              path="users"
+              lazy={() =>
+                import('./pages/project/access/ProjectAccessUsersTab').then(convert)
+              }
+            />
+          </Route>
           <Route
             lazy={() => import('./pages/project/affinity/AffinityPage').then(convert)}
             handle={{ crumb: 'Affinity Groups' }}
diff --git a/app/table/cells/MemberCountCell.tsx b/app/table/cells/MemberCountCell.tsx
new file mode 100644
index 000000000..e91e58900
--- /dev/null
+++ b/app/table/cells/MemberCountCell.tsx
@@ -0,0 +1,16 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { useQuery } from '@tanstack/react-query'
+
+import { api, q } from '~/api'
+import { ALL_ISH } from '~/util/consts'
+
+export function MemberCountCell({ groupId }: { groupId: string }) {
+  const { data } = useQuery(q(api.userList, { query: { group: groupId, limit: ALL_ISH } }))
+  return data ? <>{data.items.length}</> : null
+}
diff --git a/app/ui/lib/DropdownMenu.tsx b/app/ui/lib/DropdownMenu.tsx
index 6e9b086f4..f8e352089 100644
--- a/app/ui/lib/DropdownMenu.tsx
+++ b/app/ui/lib/DropdownMenu.tsx
@@ -14,6 +14,7 @@ import { Link } from 'react-router'
 import { OpenLink12Icon } from '@oxide/design-system/icons/react'
 
 import { Wrap } from '../util/wrap'
+import { useIsInModal, useIsInSideModal } from './modal-context'
 import { Tooltip } from './Tooltip'
 
 // Re-export Root with modal={false} default to prevent scroll locking
@@ -62,6 +63,7 @@ type ContentProps = {
   anchor?: AnchorProp
   /** Spacing in px between trigger and menu */
   gap?: 8
+  /** Overrides the default, which is derived from modal context */
   zIndex?: ZIndex
   collisionPadding?: React.ComponentProps<typeof Menu.Positioner>['collisionPadding']
 }
@@ -71,14 +73,21 @@ export function Content({
   children,
   anchor = 'bottom end',
   gap,
-  zIndex = 'dropdown',
+  zIndex,
   collisionPadding,
 }: ContentProps) {
   const { side, align, sideOffset, alignOffset } = parseAnchor(anchor, gap)
+  const isInModal = useIsInModal()
+  const isInSideModal = useIsInSideModal()
+  const contextZIndex: ZIndex = isInModal
+    ? 'modal'
+    : isInSideModal
+      ? 'sideModal'
+      : 'dropdown'
   return (
     <Menu.Portal>
       <Menu.Positioner
-        className={zIndexClass[zIndex]}
+        className={zIndexClass[zIndex ?? contextZIndex]}
         side={side}
         align={align}
         sideOffset={sideOffset}
diff --git a/app/util/__snapshots__/path-builder.spec.ts.snap b/app/util/__snapshots__/path-builder.spec.ts.snap
index 0ac260b92..2ebf1ff04 100644
--- a/app/util/__snapshots__/path-builder.spec.ts.snap
+++ b/app/util/__snapshots__/path-builder.spec.ts.snap
@@ -493,7 +493,35 @@ exports[`breadcrumbs 2`] = `
       "path": "/projects/p/instances",
     },
   ],
-  "projectAccess (/projects/p/access)": [
+  "projectAccess (/projects/p/access/groups)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Project Access",
+      "path": "/projects/p/access",
+    },
+  ],
+  "projectAccessGroups (/projects/p/access/groups)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Project Access",
+      "path": "/projects/p/access",
+    },
+  ],
+  "projectAccessUsers (/projects/p/access/users)": [
     {
       "label": "Projects",
       "path": "/projects",
@@ -617,10 +645,22 @@ exports[`breadcrumbs 2`] = `
       "path": "/system/silos/s/idps",
     },
   ],
-  "siloAccess (/access)": [
+  "siloAccess (/access/groups)": [
+    {
+      "label": "Silo Access",
+      "path": "/access/groups",
+    },
+  ],
+  "siloAccessGroups (/access/groups)": [
+    {
+      "label": "Silo Access",
+      "path": "/access/groups",
+    },
+  ],
+  "siloAccessUsers (/access/users)": [
     {
       "label": "Silo Access",
-      "path": "/access",
+      "path": "/access/groups",
     },
   ],
   "siloFleetRoles (/system/silos/s/fleet-roles)": [
diff --git a/app/util/path-builder.spec.ts b/app/util/path-builder.spec.ts
index ebd7d3e3d..6ddecf63d 100644
--- a/app/util/path-builder.spec.ts
+++ b/app/util/path-builder.spec.ts
@@ -78,7 +78,9 @@ test('path builder', () => {
         "ipPoolsNew": "/system/networking/ip-pools-new",
         "profile": "/settings/profile",
         "project": "/projects/p/instances",
-        "projectAccess": "/projects/p/access",
+        "projectAccess": "/projects/p/access/groups",
+        "projectAccessGroups": "/projects/p/access/groups",
+        "projectAccessUsers": "/projects/p/access/users",
         "projectEdit": "/projects/p/edit",
         "projectImageEdit": "/projects/p/images/im/edit",
         "projectImages": "/projects/p/images",
@@ -88,7 +90,9 @@ test('path builder', () => {
         "samlIdp": "/system/silos/s/idps/saml/pr",
         "serialConsole": "/projects/p/instances/i/serial-console",
         "silo": "/system/silos/s/idps",
-        "siloAccess": "/access",
+        "siloAccess": "/access/groups",
+        "siloAccessGroups": "/access/groups",
+        "siloAccessUsers": "/access/users",
         "siloFleetRoles": "/system/silos/s/fleet-roles",
         "siloIdps": "/system/silos/s/idps",
         "siloIdpsNew": "/system/silos/s/idps-new",
diff --git a/app/util/path-builder.ts b/app/util/path-builder.ts
index 468a4e714..30ebec15a 100644
--- a/app/util/path-builder.ts
+++ b/app/util/path-builder.ts
@@ -26,7 +26,10 @@ export const pb = {
   project: (params: PP.Project) => `${projectBase(params)}/instances`,
   projectEdit: (params: PP.Project) => `${projectBase(params)}/edit`,
 
-  projectAccess: (params: PP.Project) => `${projectBase(params)}/access`,
+  projectAccessUsers: (params: PP.Project) => `${projectBase(params)}/access/users`,
+  projectAccessGroups: (params: PP.Project) => `${projectBase(params)}/access/groups`,
+  // points to the default tab to avoid bouncing through the parent's redirect
+  projectAccess: (params: PP.Project) => pb.projectAccessGroups(params),
   projectImages: (params: PP.Project) => `${projectBase(params)}/images`,
   projectImagesNew: (params: PP.Project) => `${projectBase(params)}/images-new`,
   projectImageEdit: (params: PP.Image) =>
@@ -111,7 +114,10 @@ export const pb = {
     `${pb.antiAffinityGroup(params)}/edit`,
 
   siloUtilization: () => '/utilization',
-  siloAccess: () => '/access',
+  siloAccessUsers: () => '/access/users',
+  siloAccessGroups: () => '/access/groups',
+  // points to the default tab to avoid bouncing through the parent's redirect
+  siloAccess: () => pb.siloAccessGroups(),
   siloImages: () => '/images',
   siloImageEdit: (params: PP.SiloImage) => `${pb.siloImages()}/${params.image}/edit`,
 
diff --git a/mock-api/user-group.ts b/mock-api/user-group.ts
index e3ad27dec..2dd6353b5 100644
--- a/mock-api/user-group.ts
+++ b/mock-api/user-group.ts
@@ -35,7 +35,8 @@ export const userGroup3: Json<Group> = {
   time_modified: new Date(2021, 3, 1).toISOString(),
 }
 
-export const userGroups = [userGroup1, userGroup2, userGroup3]
+// ordered by display_name
+export const userGroups = [userGroup3, userGroup2, userGroup1]
 
 type GroupMembership = {
   userId: string
@@ -55,4 +56,8 @@ export const groupMemberships: GroupMembership[] = [
     userId: user5.id,
     groupId: userGroup3.id,
   },
+  {
+    userId: user1.id,
+    groupId: userGroup2.id,
+  },
 ]
diff --git a/test/e2e/project-access.e2e.ts b/test/e2e/project-access.e2e.ts
index d4f34d8ce..3ff387b3d 100644
--- a/test/e2e/project-access.e2e.ts
+++ b/test/e2e/project-access.e2e.ts
@@ -5,114 +5,196 @@
  *
  * Copyright Oxide Computer Company
  */
-import { user3, user4 } from '@oxide/api-mocks'
+import { user3 } from '@oxide/api-mocks'
 
-import { expect, expectNotVisible, expectRowVisible, expectVisible, test } from './utils'
+import { expect, expectRowVisible, expectVisible, test } from './utils'
 
-test('Click through project access page', async ({ page }) => {
+test('Project access lands on Groups tab; Users tab shows effective project roles', async ({
+  page,
+}) => {
   await page.goto('/projects/mock-project')
   await page.click('role=link[name*="Access"]')
-
-  // we see groups and users 1, 3, 6 but not users 2, 4, 5
   await expectVisible(page, ['role=heading[name*="Access"]'])
-  const table = page.locator('table')
-  await expectRowVisible(table, {
-    Name: 'Hannah Arendt',
-    Type: 'User',
-    Role: 'silo.admin',
-  })
-  await expectRowVisible(table, {
-    Name: 'Jacob Klein',
-    Type: 'User',
-    Role: 'project.collaborator',
-  })
+  await expect(page).toHaveURL(/\/access\/groups$/)
+
+  // Groups tab: kernel-devs has direct project.viewer; real-estate-devs has
+  // direct silo.collaborator only; web-devs has nothing
+  let table = page.getByRole('table')
+  await expectRowVisible(table, { Name: 'kernel-devs', Role: 'project.viewer' })
+  await expectRowVisible(table, { Name: 'real-estate-devs', Role: 'silo.collaborator' })
+  await expectRowVisible(table, { Name: 'web-devs', Role: '—' })
+
+  // Switch to Users tab
+  await page.getByRole('tab', { name: 'Users' }).click()
+  await expect(page).toHaveURL(/\/access\/users$/)
+
+  table = page.getByRole('table')
+  // Hannah has direct silo.admin which dominates over kernel-devs project.viewer
+  await expectRowVisible(table, { Name: 'Hannah Arendt', Role: 'silo.admin' })
+  // Jacob has direct project.collaborator
+  await expectRowVisible(table, { Name: 'Jacob Klein', Role: 'project.collaborator' })
+  // Herbert has direct project.limited_collaborator
   await expectRowVisible(table, {
     Name: 'Herbert Marcuse',
-    Type: 'User',
     Role: 'project.limited_collaborator',
   })
-  await expectRowVisible(table, {
-    Name: 'real-estate-devs',
-    Type: 'Group',
-    Role: 'silo.collaborator',
-  })
-  await expectRowVisible(table, {
-    Name: 'kernel-devs',
-    Type: 'Group',
-    Role: 'project.viewer',
-  })
+  // Hans inherits silo.collaborator via real-estate-devs
+  await expectRowVisible(table, { Name: 'Hans Jonas', Role: 'silo.collaborator' })
+})
 
-  await expectNotVisible(page, [
-    `role=cell[name="Hans Jonas"]`,
-    `role=cell[name="Simone de Beauvoir"]`,
-  ])
-
-  // Add user 4 as collab
-  await page.click('role=button[name="Add user or group"]')
-  await expectVisible(page, ['role=heading[name*="Add user or group"]'])
-
-  await page.click('role=button[name*="User or group"]')
-  // only users not already on the project should be visible
-  await expectNotVisible(page, [
-    'role=option[name="Jacob Klein"]',
-    'role=option[name="Herbert Marcuse"]',
-  ])
-
-  await expectVisible(page, [
-    'role=option[name="Hannah Arendt"]',
-    'role=option[name="Hans Jonas"]',
-    'role=option[name="Simone de Beauvoir"]',
-  ])
-
-  await page.click('role=option[name="Simone de Beauvoir"]')
-  await page.getByRole('radio', { name: /^Collaborator / }).click()
-  await page.click('role=button[name="Assign role"]')
+test('Change and remove a user project role from the Users tab', async ({ page }) => {
+  await page.goto('/projects/mock-project/access/users')
+  const table = page.getByRole('table')
+
+  // Jacob Klein has direct project.collaborator — change to viewer
+  await table
+    .getByRole('row', { name: user3.display_name, exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Change project role' }).click()
+  await expectVisible(page, ['role=heading[name*="Edit role"]'])
+  await expect(page.getByRole('radio', { name: /^Collaborator / })).toBeChecked()
+  await page.getByRole('radio', { name: /^Viewer / }).click()
+  await page.getByRole('button', { name: 'Update role' }).click()
+  await expectRowVisible(table, { Name: user3.display_name, Role: 'project.viewer' })
+
+  // Remove Jacob's direct project role; he has no other access so badge becomes —
+  await table
+    .getByRole('row', { name: user3.display_name, exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Remove project role' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
+  await expectRowVisible(table, { Name: user3.display_name, Role: '—' })
+})
+
+test('Inherited silo role on Users tab shows Assign + disabled Remove', async ({
+  page,
+}) => {
+  await page.goto('/projects/mock-project/access/users')
+  const table = page.getByRole('table')
+
+  // Hans Jonas inherits silo.collaborator via real-estate-devs but has no
+  // direct project role — show "Assign project role", and disabled "Remove role"
+  await table
+    .getByRole('row', { name: 'Hans Jonas', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await expect(page.getByRole('menuitem', { name: 'Assign project role' })).toBeEnabled()
+  await expect(page.getByRole('menuitem', { name: 'Change project role' })).toBeHidden()
+  await expect(
+    page.getByRole('menuitem', { name: 'Remove role', exact: true })
+  ).toBeDisabled()
+
+  // Assign opens the modal with no role pre-selected
+  await page.getByRole('menuitem', { name: 'Assign project role' }).click()
+  await expectVisible(page, ['role=heading[name*="Assign role"]'])
+})
+
+test('Assign a project role to an unassigned user', async ({ page }) => {
+  await page.goto('/projects/mock-project/access/users')
+  const table = page.getByRole('table')
+
+  // Simone de Beauvoir has no roles at all
+  await table
+    .getByRole('row', { name: 'Simone de Beauvoir', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await expect(page.getByRole('menuitem', { name: 'Change project role' })).toBeHidden()
+  await expect(page.getByRole('menuitem', { name: 'Remove role' })).toBeHidden()
+  await page.getByRole('menuitem', { name: 'Assign project role' }).click()
+
+  await expectVisible(page, ['role=heading[name*="Assign role"]'])
+  await expect(page.getByRole('dialog')).toContainText('Simone de Beauvoir')
+
+  await page.getByRole('radio', { name: /^Viewer / }).click()
+  await page.getByRole('button', { name: 'Assign role' }).click()
 
-  // User 4 shows up in the table
   await expectRowVisible(table, {
     Name: 'Simone de Beauvoir',
-    Type: 'User',
-    Role: 'project.collaborator',
+    Role: 'project.viewer',
   })
+})
 
-  // now change user 4 role from collab to viewer
-  await page
-    .locator('role=row', { hasText: user4.display_name })
-    .locator('role=button[name="Row actions"]')
-    .click()
-  await page.click('role=menuitem[name="Change role"]')
+test('Change and remove a group project role from the Groups tab', async ({ page }) => {
+  await page.goto('/projects/mock-project/access/groups')
+  const table = page.getByRole('table')
 
+  // kernel-devs has direct project.viewer — change to collaborator
+  await table
+    .getByRole('row', { name: 'kernel-devs', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Change project role' }).click()
   await expectVisible(page, ['role=heading[name*="Edit role"]'])
+  await expect(page.getByRole('radio', { name: /^Viewer / })).toBeChecked()
+  await page.getByRole('radio', { name: /^Collaborator / }).click()
+  await page.getByRole('button', { name: 'Update role' }).click()
+  await expectRowVisible(table, { Name: 'kernel-devs', Role: 'project.collaborator' })
 
-  // Verify Collaborator is currently selected
-  await expect(page.getByRole('radio', { name: /^Collaborator / })).toBeChecked()
+  // Remove the direct project role
+  await table
+    .getByRole('row', { name: 'kernel-devs', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Remove project role' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
+  await expectRowVisible(table, { Name: 'kernel-devs', Role: '—' })
+})
 
-  // Select Viewer role
-  await page.getByRole('radio', { name: /^Viewer / }).click()
-  await page.click('role=button[name="Update role"]')
+test('Assign stronger project role to a silo-only user, then remove it', async ({
+  page,
+}) => {
+  await page.goto('/projects/mock-project/access/users')
+  const table = page.getByRole('table')
+  const janeRow = table.getByRole('row', { name: 'Jane Austen', exact: false })
+
+  // Jane Austen is in real-estate-devs (silo.collaborator) and has no direct project role
+  await expectRowVisible(table, { Name: 'Jane Austen', Role: 'silo.collaborator' })
+
+  // Assign project.collaborator — same level as the silo role; silo wins ties,
+  // so the badge should keep showing silo.collaborator
+  await janeRow.getByRole('button', { name: 'Row actions' }).click()
+  await page.getByRole('menuitem', { name: 'Assign project role' }).click()
+  await expectVisible(page, ['role=heading[name*="Assign role"]'])
+  await page.getByRole('radio', { name: /^Collaborator / }).click()
+  await page.getByRole('button', { name: 'Assign role' }).click()
+  await expectRowVisible(table, { Name: 'Jane Austen', Role: 'silo.collaborator' })
 
-  await expectRowVisible(table, { Name: user4.display_name, Role: 'project.viewer' })
+  // Now that there's a direct project role, the row action menu should expose
+  // "Change project role" instead of "Assign project role"
+  await janeRow.getByRole('button', { name: 'Row actions' }).click()
+  await expect(page.getByRole('menuitem', { name: 'Change project role' })).toBeEnabled()
+  await expect(page.getByRole('menuitem', { name: 'Assign project role' })).toBeHidden()
+
+  // Change the project role to admin — stronger than the silo collaborator
+  await page.getByRole('menuitem', { name: 'Change project role' }).click()
+  await expectVisible(page, ['role=heading[name*="Edit role"]'])
+  await expect(page.getByRole('radio', { name: /^Collaborator / })).toBeChecked()
+  await page.getByRole('radio', { name: /^Admin / }).click()
+  await page.getByRole('button', { name: 'Update role' }).click()
+  await expectRowVisible(table, { Name: 'Jane Austen', Role: 'project.admin' })
 
-  // now delete user 3. has to be 3 or 4 because they're the only ones that come
-  // from the project policy
-  const user3Row = page.getByRole('row', { name: user3.display_name, exact: false })
-  await expect(user3Row).toBeVisible()
-  await user3Row.getByRole('button', { name: 'Row actions' }).click()
-  await page.getByRole('menuitem', { name: 'Delete' }).click()
+  // Remove the project role; the row falls back to the inherited silo role
+  await janeRow.getByRole('button', { name: 'Row actions' }).click()
+  await page.getByRole('menuitem', { name: 'Remove project role' }).click()
   await page.getByRole('button', { name: 'Confirm' }).click()
-  await expect(user3Row).toBeHidden()
+  await expectRowVisible(table, { Name: 'Jane Austen', Role: 'silo.collaborator' })
+})
 
-  // now add a project role to user 1, who currently only has silo role
-  await page.click('role=button[name="Add user or group"]')
-  await page.click('role=button[name*="User or group"]')
-  await page.click('role=option[name="Hannah Arendt"]')
-  // Select Viewer role
-  await page.getByRole('radio', { name: /^Viewer / }).click()
-  await page.click('role=button[name="Assign role"]')
-  // because we only show the "effective" role, we should still see the silo admin role, but should now have an additional count value
-  await expectRowVisible(table, {
-    Name: 'Hannah Arendt',
-    Type: 'User',
-    Role: 'silo.admin+1',
-  })
+test('Group with only a silo role on Project Groups tab', async ({ page }) => {
+  await page.goto('/projects/mock-project/access/groups')
+  const table = page.getByRole('table')
+
+  // real-estate-devs has direct silo.collaborator but no direct project role —
+  // show "Assign project role", and disabled "Remove role"
+  await table
+    .getByRole('row', { name: 'real-estate-devs', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await expect(page.getByRole('menuitem', { name: 'Assign project role' })).toBeEnabled()
+  await expect(page.getByRole('menuitem', { name: 'Change project role' })).toBeHidden()
+  await expect(
+    page.getByRole('menuitem', { name: 'Remove role', exact: true })
+  ).toBeDisabled()
 })
diff --git a/test/e2e/silo-access.e2e.ts b/test/e2e/silo-access.e2e.ts
index 720ef8ba1..9c2466cfd 100644
--- a/test/e2e/silo-access.e2e.ts
+++ b/test/e2e/silo-access.e2e.ts
@@ -5,78 +5,219 @@
  *
  * Copyright Oxide Computer Company
  */
-import { user3, user4 } from '@oxide/api-mocks'
+import { expect, expectRowVisible, expectVisible, test } from './utils'
 
-import { expect, expectNotVisible, expectRowVisible, expectVisible, test } from './utils'
-
-test('Click through silo access page', async ({ page }) => {
+test('Access page lands on Groups tab; Users tab shows direct + via-group silo roles', async ({
+  page,
+}) => {
   await page.goto('/')
-
-  const table = page.locator('role=table')
-
-  // page is there; we see user 1 and 2 but not 3
   await page.click('role=link[name*="Access"]')
 
   await expectVisible(page, ['role=heading[name*="Access"]'])
-  await expectRowVisible(table, {
-    Name: 'real-estate-devs',
-    Type: 'Group',
-    Role: 'silo.collaborator',
-  })
+  await expect(page).toHaveURL(/\/access\/groups$/)
+
+  await page.getByRole('tab', { name: 'Users' }).click()
+  await expect(page).toHaveURL(/\/access\/users$/)
+
+  const table = page.getByRole('table')
+
+  // Hannah has a direct silo.admin assignment; Groups column shows the first
+  // group (kernel-devs) and "+1" for web-devs
   await expectRowVisible(table, {
     Name: 'Hannah Arendt',
-    Type: 'User',
     Role: 'silo.admin',
+    Groups: 'kernel-devs+1',
+  })
+
+  // Hans Jonas has no direct role but inherits silo.collaborator from real-estate-devs
+  await expectRowVisible(table, {
+    Name: 'Hans Jonas',
+    Role: 'silo.collaborator',
+    Groups: 'real-estate-devs',
   })
-  await expectNotVisible(page, [`role=cell[name="${user4.display_name}"]`])
-
-  // Add user 2 as collab
-  await page.click('role=button[name="Add user or group"]')
-  await expectVisible(page, ['role=heading[name*="Add user or group"]'])
-
-  await page.click('role=button[name*="User or group"]')
-  // only users not already on the org should be visible
-  await expectNotVisible(page, ['role=option[name="Hannah Arendt"]'])
-  await expectVisible(page, [
-    'role=option[name="Hans Jonas"]',
-    'role=option[name="Jacob Klein"]',
-    'role=option[name="Simone de Beauvoir"]',
-  ])
-
-  await page.click('role=option[name="Jacob Klein"]')
+
+  // Jacob Klein has no silo role and no groups
+  await expectRowVisible(table, { Name: 'Jacob Klein', Role: '—', Groups: '—' })
+})
+
+test('User details side modal shows assigned + via-group roles and group list', async ({
+  page,
+}) => {
+  await page.goto('/access/users')
+
+  // Open Hannah's details
+  await page.getByRole('button', { name: 'Hannah Arendt' }).click()
+  const modal = page.getByRole('dialog')
+  await expect(modal).toBeVisible()
+  await expect(modal.getByText('Hannah Arendt')).toBeVisible()
+
+  // Direct silo.admin assignment
+  const roleRow = modal.getByRole('row').filter({ hasText: 'silo.admin' })
+  await expect(roleRow).toBeVisible()
+  await expect(roleRow).toContainText('Assigned')
+
+  // Group memberships
+  await expect(modal.getByRole('cell', { name: 'kernel-devs' })).toBeVisible()
+  await expect(modal.getByRole('cell', { name: 'web-devs' })).toBeVisible()
+
+  await page.getByRole('contentinfo').getByRole('button', { name: 'Close' }).click()
+  await expect(modal).toBeHidden()
+
+  // Hans Jonas inherits silo.collaborator via real-estate-devs
+  await page.getByRole('button', { name: 'Hans Jonas' }).click()
+  await expect(modal).toBeVisible()
+  const viaRow = modal.getByRole('row').filter({ hasText: 'silo.collaborator' })
+  await expect(viaRow).toContainText('via real-estate-devs')
+})
+
+test('Change and remove a user role from the Users tab', async ({ page }) => {
+  await page.goto('/access/users')
+  const table = page.getByRole('table')
+
+  // Hannah has a direct silo.admin role; change it to viewer
+  await table
+    .getByRole('row', { name: 'Hannah Arendt', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Change role' }).click()
+  await expectVisible(page, ['role=heading[name*="Edit role"]'])
+  await expect(page.getByRole('radio', { name: /^Admin / })).toBeChecked()
+  await page.getByRole('radio', { name: /^Viewer / }).click()
+  await page.getByRole('button', { name: 'Update role' }).click()
+  await expectRowVisible(table, { Name: 'Hannah Arendt', Role: 'silo.viewer' })
+
+  // Remove Hannah's direct role; she still inherits via groups so the row stays
+  await table
+    .getByRole('row', { name: 'Hannah Arendt', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Remove role' }).click()
+  await page.getByRole('button', { name: 'Confirm' }).click()
+  // After removal, Hannah no longer has a direct silo role, so her displayed role
+  // reflects whatever she inherits via her groups (kernel-devs, web-devs have no
+  // silo role assignments by default in mock data).
+  await expectRowVisible(table, { Name: 'Hannah Arendt', Role: '—' })
+})
+
+test('Assign role to a user with no direct role from the row action', async ({ page }) => {
+  await page.goto('/access/users')
+  const table = page.getByRole('table')
+
+  // Jacob Klein has no direct or inherited role
+  await table
+    .getByRole('row', { name: 'Jacob Klein', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  // unassigned users show only "Assign role" — no Change/Remove
+  await expect(page.getByRole('menuitem', { name: 'Change role' })).toBeHidden()
+  await expect(page.getByRole('menuitem', { name: 'Remove role' })).toBeHidden()
+  await page.getByRole('menuitem', { name: 'Assign role' }).click()
+
+  // Modal opens with the user already targeted (no listbox), and no role pre-selected
+  await expectVisible(page, ['role=heading[name*="Assign role"]'])
+  await expect(page.getByRole('button', { name: 'User or group' })).toBeHidden()
+  await expect(page.getByRole('dialog')).toContainText('Jacob Klein')
+
   await page.getByRole('radio', { name: /^Collaborator / }).click()
-  await page.click('role=button[name="Assign role"]')
+  await page.getByRole('button', { name: 'Assign role' }).click()
 
-  // User 3 shows up in the table
   await expectRowVisible(table, {
     Name: 'Jacob Klein',
     Role: 'silo.collaborator',
-    Type: 'User',
   })
+})
+
+test('Inherited-only role shows Change/Remove with Remove disabled', async ({ page }) => {
+  await page.goto('/access/users')
+  const table = page.getByRole('table')
 
-  // now change user 3's role from collab to viewer
-  await page
-    .locator('role=row', { hasText: user3.display_name })
-    .locator('role=button[name="Row actions"]')
+  // Hans Jonas has no direct silo role but inherits silo.collaborator via
+  // real-estate-devs, so the badge shows but Remove can't act on a direct role
+  await table
+    .getByRole('row', { name: 'Hans Jonas', exact: false })
+    .getByRole('button', { name: 'Row actions' })
     .click()
-  await page.click('role=menuitem[name="Change role"]')
+  await expect(page.getByRole('menuitem', { name: 'Assign role' })).toBeHidden()
+  await expect(page.getByRole('menuitem', { name: 'Change role' })).toBeEnabled()
+  await expect(page.getByRole('menuitem', { name: 'Remove role' })).toBeDisabled()
 
+  // Change role opens the edit modal with the inherited role pre-selected
+  await page.getByRole('menuitem', { name: 'Change role' }).click()
   await expectVisible(page, ['role=heading[name*="Edit role"]'])
-
-  // Verify Collaborator is currently selected
   await expect(page.getByRole('radio', { name: /^Collaborator / })).toBeChecked()
+})
 
-  // Select Viewer role
-  await page.getByRole('radio', { name: /^Viewer / }).click()
-  await page.click('role=button[name="Update role"]')
+test('Groups tab shows roles and member counts; modal lists members', async ({ page }) => {
+  await page.goto('/access/users')
+
+  await page.getByRole('tab', { name: 'Groups' }).click()
+  await expect(page).toHaveURL(/\/access\/groups$/)
+
+  const table = page.getByRole('table')
+
+  await expectRowVisible(table, {
+    Name: 'real-estate-devs',
+    Role: 'silo.collaborator',
+    Users: '2',
+  })
+  await expectRowVisible(table, { Name: 'kernel-devs', Role: '—', Users: '1' })
+  await expectRowVisible(table, { Name: 'web-devs', Role: '—', Users: '1' })
+
+  // Open the real-estate-devs group modal
+  await page.getByRole('button', { name: 'real-estate-devs' }).click()
+  const modal = page.getByRole('dialog')
+  await expect(modal).toBeVisible()
+  await expect(modal.getByText('silo.collaborator')).toBeVisible()
+  await expect(modal.getByRole('cell', { name: 'Hans Jonas' })).toBeVisible()
+  await expect(modal.getByRole('cell', { name: 'Jane Austen' })).toBeVisible()
+})
 
-  await expectRowVisible(table, { Name: user3.display_name, Role: 'silo.viewer' })
+test('Change and remove a group role from the Groups tab', async ({ page }) => {
+  await page.goto('/access/groups')
+  const table = page.getByRole('table')
 
-  // now delete user 3
-  const user3Row = page.getByRole('row', { name: user3.display_name, exact: false })
-  await expect(user3Row).toBeVisible()
-  await user3Row.getByRole('button', { name: 'Row actions' }).click()
-  await page.getByRole('menuitem', { name: 'Delete' }).click()
+  // real-estate-devs has silo.collaborator; change to viewer
+  await table
+    .getByRole('row', { name: 'real-estate-devs', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Change role' }).click()
+  await expectVisible(page, ['role=heading[name*="Edit role"]'])
+  await expect(page.getByRole('radio', { name: /^Collaborator / })).toBeChecked()
+  await page.getByRole('radio', { name: /^Viewer / }).click()
+  await page.getByRole('button', { name: 'Update role' }).click()
+  await expectRowVisible(table, {
+    Name: 'real-estate-devs',
+    Role: 'silo.viewer',
+  })
+
+  // Remove the role
+  await table
+    .getByRole('row', { name: 'real-estate-devs', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Remove role' }).click()
   await page.getByRole('button', { name: 'Confirm' }).click()
-  await expect(user3Row).toBeHidden()
+  await expectRowVisible(table, { Name: 'real-estate-devs', Role: '—' })
+})
+
+test('Assign a role to a group with no direct role from the row action', async ({
+  page,
+}) => {
+  await page.goto('/access/groups')
+  const table = page.getByRole('table')
+
+  // kernel-devs has no direct silo role
+  await table
+    .getByRole('row', { name: 'kernel-devs', exact: false })
+    .getByRole('button', { name: 'Row actions' })
+    .click()
+  await page.getByRole('menuitem', { name: 'Assign role' }).click()
+  await expectVisible(page, ['role=heading[name*="Assign role"]'])
+  await expect(page.getByRole('dialog')).toContainText('kernel-devs')
+
+  await page.getByRole('radio', { name: /^Viewer / }).click()
+  await page.getByRole('button', { name: 'Assign role' }).click()
+
+  await expectRowVisible(table, { Name: 'kernel-devs', Role: 'silo.viewer' })
 })