diff --git a/app/api/roles.ts b/app/api/roles.ts
index 9c3ff07da..4870e2236 100644
--- a/app/api/roles.ts
+++ b/app/api/roles.ts
@@ -14,6 +14,8 @@
 import { useMemo } from 'react'
 import * as R from 'remeda'
 
+import type { IdentityFilter } from '~/util/access'
+
 import type { FleetRole, IdentityType, ProjectRole, SiloRole } from './__generated__/Api'
 import { api, q, usePrefetchedQuery } from './client'
 
@@ -23,6 +25,11 @@ import { api, q, usePrefetchedQuery } from './client'
  */
 export type RoleKey = FleetRole | SiloRole | ProjectRole
 
+/**
+ * The source of a role assignment (silo-level or project-level).
+ */
+export type RoleSource = 'silo' | 'project'
+
 /** Turn a role order record into a sorted array of strings. */
 // used for displaying lists of roles, like in a <select>
 const flatRoles = (roleOrder: Record<RoleKey, number>): RoleKey[] =>
@@ -77,12 +84,12 @@ export function deleteRole(identityId: string, policy: Policy): Policy {
   return { roleAssignments }
 }
 
-type UserAccessRow = {
+export type UserAccessRow = {
   id: string
   identityType: IdentityType
   name: string
   roleName: RoleKey
-  roleSource: string
+  roleSource: RoleSource
 }
 
 /**
@@ -94,7 +101,7 @@ type UserAccessRow = {
  */
 export function useUserRows(
   roleAssignments: RoleAssignment[],
-  roleSource: string
+  roleSource: RoleSource
 ): UserAccessRow[] {
   // 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
@@ -134,9 +141,9 @@ export type Actor = {
 
 /**
  * Fetch lists of users and groups, filtering out the ones that are already in
- * the given policy.
+ * the given policy. Optionally filter to only users or only groups.
  */
-export function useActorsNotInPolicy(policy: Policy): Actor[] {
+export function useActorsNotInPolicy(policy: Policy, filter?: IdentityFilter): Actor[] {
   const { data: users } = usePrefetchedQuery(q(api.userList, {}))
   const { data: groups } = usePrefetchedQuery(q(api.groupList, {}))
   return useMemo(() => {
@@ -150,9 +157,20 @@ export function useActorsNotInPolicy(policy: Policy): Actor[] {
       ...u,
       identityType: 'silo_user' as IdentityType,
     }))
-    // groups go before users
-    return allGroups.concat(allUsers).filter((u) => !actorsInPolicy.has(u.id)) || []
-  }, [users, groups, policy])
+
+    // Select which actors to include based on filter
+    let actors: Actor[]
+    if (filter === 'users') {
+      actors = allUsers
+    } else if (filter === 'groups') {
+      actors = allGroups
+    } else {
+      // 'all' or undefined; groups go before users
+      actors = allGroups.concat(allUsers)
+    }
+
+    return actors.filter((u) => !actorsInPolicy.has(u.id))
+  }, [policy, users, groups, filter])
 }
 
 export function userRoleFromPolicies(
diff --git a/app/components/AccessEmptyState.tsx b/app/components/AccessEmptyState.tsx
new file mode 100644
index 000000000..0bee25ca5
--- /dev/null
+++ b/app/components/AccessEmptyState.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 type { RoleSource } from '@oxide/api'
+import { Access24Icon } from '@oxide/design-system/icons/react'
+
+import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { TableEmptyBox } from '~/ui/lib/Table'
+import { identityFilterLabel, type IdentityFilter } from '~/util/access'
+
+type AccessEmptyStateProps = {
+  onClick: () => void
+  scope: RoleSource
+  filter: IdentityFilter
+}
+
+export const AccessEmptyState = ({ onClick, scope, filter }: AccessEmptyStateProps) => (
+  <TableEmptyBox>
+    <EmptyMessage
+      icon={<Access24Icon />}
+      title={`No authorized ${filter === 'all' ? 'users or groups' : filter}`}
+      body={`Give permission to view, edit, or administer this ${scope}`}
+      buttonText={`Add ${identityFilterLabel[filter]} to ${scope}`}
+      onClick={onClick}
+    />
+  </TableEmptyBox>
+)
diff --git a/app/components/GroupMembersModal.tsx b/app/components/GroupMembersModal.tsx
new file mode 100644
index 000000000..5c76b3c45
--- /dev/null
+++ b/app/components/GroupMembersModal.tsx
@@ -0,0 +1,72 @@
+/*
+ * 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 { Modal } from '~/ui/lib/Modal'
+import { Spinner } from '~/ui/lib/Spinner'
+import { ALL_ISH } from '~/util/consts'
+
+type GroupMembersModalProps = {
+  groupId: string
+  groupName: string
+  onDismiss: () => void
+}
+
+export const GroupMembersModal = ({
+  groupId,
+  groupName,
+  onDismiss,
+}: GroupMembersModalProps) => {
+  const { data: users, isLoading } = useQuery(
+    q(api.userList, { query: { group: groupId, limit: ALL_ISH } })
+  )
+
+  const hasMore = users ? !!users.nextPage : false
+
+  return (
+    <Modal isOpen title={`Members of ${groupName}`} onDismiss={onDismiss}>
+      <Modal.Body>
+        <Modal.Section>
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Spinner />
+            </div>
+          ) : !users ? (
+            <div className="text-secondary">Failed to load members</div>
+          ) : users.items.length === 0 ? (
+            <div className="text-secondary">No members in this group</div>
+          ) : (
+            <>
+              {hasMore && (
+                <div className="text-sans-md text-secondary mb-3">
+                  These are the first {users.items.length.toLocaleString()} results
+                  returned.
+                </div>
+              )}
+              <ul className="flex flex-col gap-2">
+                {users.items.map((user) => (
+                  <li key={user.id} className="text-default">
+                    {user.displayName}
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </Modal.Section>
+      </Modal.Body>
+      <Modal.Footer
+        onDismiss={onDismiss}
+        actionText="Close"
+        onAction={onDismiss}
+        showCancel={false}
+      />
+    </Modal>
+  )
+}
diff --git a/app/components/ProjectAccessTab.tsx b/app/components/ProjectAccessTab.tsx
new file mode 100644
index 000000000..a78f9fdc9
--- /dev/null
+++ b/app/components/ProjectAccessTab.tsx
@@ -0,0 +1,295 @@
+/*
+ * 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, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { useMemo, useState, type ReactNode } from 'react'
+import * as R from 'remeda'
+
+import {
+  api,
+  byGroupThenName,
+  deleteRole,
+  q,
+  queryClient,
+  roleOrder,
+  useApiMutation,
+  usePrefetchedQuery,
+  useUserRows,
+  type IdentityType,
+  type Policy,
+  type RoleKey,
+  type RoleSource,
+  type UserAccessRow,
+} from '@oxide/api'
+import { Badge } from '@oxide/design-system/ui'
+
+import { AccessEmptyState } from '~/components/AccessEmptyState'
+import { GroupMembersModal } from '~/components/GroupMembersModal'
+import { HL } from '~/components/HL'
+import { ListPlusCell } from '~/components/ListPlusCell'
+import {
+  ProjectAccessAddUserSideModal,
+  ProjectAccessEditUserSideModal,
+} from '~/forms/project-access'
+import { useProjectSelector } from '~/hooks/use-params'
+import { confirmDelete } from '~/stores/confirm-delete'
+import { addToast } from '~/stores/toast'
+import { MembersCell } from '~/table/cells/MembersCell'
+import { getActionsCol } from '~/table/columns/action-col'
+import { Table } from '~/table/Table'
+import { CreateButton } from '~/ui/lib/CreateButton'
+import { TableActions } from '~/ui/lib/Table'
+import { TipIcon } from '~/ui/lib/TipIcon'
+import {
+  filterByIdentityType,
+  identityFilterLabel,
+  identityTypeLabel,
+  roleColor,
+  type IdentityFilter,
+} from '~/util/access'
+import { groupBy } from '~/util/array'
+
+type ProjectAccessRow = {
+  id: string
+  identityType: IdentityType
+  name: string
+  // projectRole is optional because users can appear in this table with only inherited silo roles.
+  // Actions that modify project-level roles check this field to determine if they should be disabled.
+  projectRole: RoleKey | undefined
+  roleBadges: { roleSource: RoleSource; roleName: RoleKey }[]
+}
+
+type ProjectAccessTabProps = {
+  filter: IdentityFilter
+  children?: ReactNode
+}
+
+function useProjectAccessRows(
+  siloRows: UserAccessRow[],
+  projectRows: UserAccessRow[],
+  filter: IdentityFilter
+): ProjectAccessRow[] {
+  return useMemo(() => {
+    const rows = 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')
+
+        // Filter out undefined values, then map to expected shape
+        const roleBadges = R.sortBy(
+          [siloAccessRow, projectAccessRow].filter(
+            (r): r is UserAccessRow => r !== undefined
+          ),
+          (r) => roleOrder[r.roleName] // sorts strongest role first
+        ).map((r) => ({
+          roleSource: r.roleSource,
+          roleName: r.roleName,
+        }))
+
+        return {
+          id: userId,
+          identityType,
+          name,
+          projectRole: projectAccessRow?.roleName,
+          roleBadges,
+        } satisfies ProjectAccessRow
+      }
+    )
+
+    return filterByIdentityType(rows, filter).sort(byGroupThenName)
+  }, [siloRows, projectRows, filter])
+}
+
+/**
+ * Message explaining that an inherited silo role cannot be modified at the project level
+ */
+const getInheritedRoleMessage = (action: 'change' | 'delete', identityType: IdentityType) =>
+  `Cannot ${action} inherited silo role. This ${identityTypeLabel[identityType].toLowerCase()}'s role is set at the silo level.`
+
+function ProjectAccessTable({
+  filter,
+  rows,
+  policy,
+  projectName,
+  onEditRow,
+  onViewMembers,
+}: {
+  filter: IdentityFilter
+  rows: ProjectAccessRow[]
+  policy: Policy
+  projectName: string
+  onEditRow: (row: ProjectAccessRow) => void
+  onViewMembers: (row: ProjectAccessRow) => void
+}) {
+  const { mutateAsync: updatePolicy } = useApiMutation(api.projectPolicyUpdate, {
+    onSuccess: () => {
+      queryClient.invalidateEndpoint('projectPolicyView')
+    },
+  })
+
+  const columns = useMemo(() => {
+    const colHelper = createColumnHelper<ProjectAccessRow>()
+
+    return [
+      colHelper.accessor('name', { header: 'Name' }),
+      // TODO: Add lastAccessed column for users once API provides it.
+      ...(filter === 'all'
+        ? [
+            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 {identityFilterLabel[filter]}&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>
+        ),
+      }),
+      ...(filter === 'groups'
+        ? [
+            colHelper.display({
+              id: 'users',
+              header: 'Users',
+              cell: (info) => {
+                const row = info.row.original
+                return (
+                  <MembersCell groupId={row.id} onViewMembers={() => onViewMembers(row)} />
+                )
+              },
+            }),
+          ]
+        : []),
+      getActionsCol((row: ProjectAccessRow) => [
+        {
+          label: 'Change role',
+          onActivate: () => onEditRow(row),
+          disabled: !row.projectRole && getInheritedRoleMessage('change', row.identityType),
+        },
+        {
+          label: 'Delete',
+          // TODO: explain that delete 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.
+          onActivate: confirmDelete({
+            doDelete: async () => {
+              await updatePolicy({
+                path: { project: projectName },
+                body: deleteRole(row.id, policy),
+              })
+              addToast({ content: 'Access removed' })
+            },
+            label: (
+              <span>
+                the <HL>{row.projectRole}</HL> role for <HL>{row.name}</HL>
+              </span>
+            ),
+          }),
+          disabled: !row.projectRole && getInheritedRoleMessage('delete', row.identityType),
+        },
+      ]),
+    ]
+  }, [filter, policy, projectName, updatePolicy, onEditRow, onViewMembers])
+
+  const tableInstance = useReactTable<ProjectAccessRow>({
+    columns,
+    data: rows,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return <Table table={tableInstance} />
+}
+
+/**
+ * Access control tab for project-level permissions.
+ * Displays users and groups with their project and inherited silo roles,
+ * and allows adding/editing/deleting role assignments.
+ */
+export function ProjectAccessTab({ filter, children }: ProjectAccessTabProps) {
+  const [addModalOpen, setAddModalOpen] = useState(false)
+  const [editingRow, setEditingRow] = useState<ProjectAccessRow | null>(null)
+  const [viewingMembersRow, setViewingMembersRow] = useState<ProjectAccessRow | null>(null)
+
+  const { project } = useProjectSelector()
+
+  const { data: siloPolicy } = usePrefetchedQuery(q(api.policyView, {}))
+  const { data: projectPolicy } = usePrefetchedQuery(
+    q(api.projectPolicyView, { path: { project } })
+  )
+
+  const siloRows = useUserRows(siloPolicy.roleAssignments, 'silo')
+  const projectRows = useUserRows(projectPolicy.roleAssignments, 'project')
+  const rows = useProjectAccessRows(siloRows, projectRows, filter)
+
+  const addButtonText = `Add ${identityFilterLabel[filter]}`
+
+  return (
+    <>
+      <TableActions>
+        <CreateButton onClick={() => setAddModalOpen(true)}>{addButtonText}</CreateButton>
+      </TableActions>
+      {projectPolicy && addModalOpen && (
+        <ProjectAccessAddUserSideModal
+          onDismiss={() => setAddModalOpen(false)}
+          policy={projectPolicy}
+          filter={filter}
+        />
+      )}
+      {projectPolicy && editingRow && editingRow.projectRole && (
+        <ProjectAccessEditUserSideModal
+          onDismiss={() => setEditingRow(null)}
+          policy={projectPolicy}
+          name={editingRow.name}
+          identityId={editingRow.id}
+          identityType={editingRow.identityType}
+          defaultValues={{ roleName: editingRow.projectRole }}
+        />
+      )}
+      {viewingMembersRow && (
+        <GroupMembersModal
+          groupId={viewingMembersRow.id}
+          groupName={viewingMembersRow.name}
+          onDismiss={() => setViewingMembersRow(null)}
+        />
+      )}
+      {children}
+      {rows.length === 0 ? (
+        <AccessEmptyState
+          scope="project"
+          filter={filter}
+          onClick={() => setAddModalOpen(true)}
+        />
+      ) : (
+        <ProjectAccessTable
+          filter={filter}
+          rows={rows}
+          policy={projectPolicy}
+          projectName={project}
+          onEditRow={setEditingRow}
+          onViewMembers={setViewingMembersRow}
+        />
+      )}
+    </>
+  )
+}
diff --git a/app/components/SiloAccessTab.tsx b/app/components/SiloAccessTab.tsx
new file mode 100644
index 000000000..77ecfc7b7
--- /dev/null
+++ b/app/components/SiloAccessTab.tsx
@@ -0,0 +1,251 @@
+/*
+ * 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, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { useMemo, useState, type ReactNode } from 'react'
+
+import {
+  api,
+  byGroupThenName,
+  deleteRole,
+  getEffectiveRole,
+  q,
+  queryClient,
+  useApiMutation,
+  usePrefetchedQuery,
+  useUserRows,
+  type IdentityType,
+  type Policy,
+  type RoleKey,
+} from '@oxide/api'
+import { Badge } from '@oxide/design-system/ui'
+
+import { AccessEmptyState } from '~/components/AccessEmptyState'
+import { GroupMembersModal } from '~/components/GroupMembersModal'
+import { HL } from '~/components/HL'
+import {
+  SiloAccessAddUserSideModal,
+  SiloAccessEditUserSideModal,
+} from '~/forms/silo-access'
+import { confirmDelete } from '~/stores/confirm-delete'
+import { addToast } from '~/stores/toast'
+import { MembersCell } from '~/table/cells/MembersCell'
+import { getActionsCol } from '~/table/columns/action-col'
+import { Table } from '~/table/Table'
+import { CreateButton } from '~/ui/lib/CreateButton'
+import { TableActions } from '~/ui/lib/Table'
+import {
+  filterByIdentityType,
+  identityFilterLabel,
+  identityTypeLabel,
+  roleColor,
+  type IdentityFilter,
+} from '~/util/access'
+import { groupBy } from '~/util/array'
+
+type SiloAccessRow = {
+  id: string
+  identityType: IdentityType
+  name: string
+  siloRole: RoleKey
+  effectiveRole: RoleKey
+}
+
+type SiloAccessTabProps = {
+  filter: IdentityFilter
+  children?: ReactNode
+}
+
+function useSiloAccessRows(
+  siloRows: ReturnType<typeof useUserRows>,
+  filter: IdentityFilter
+) {
+  return useMemo(() => {
+    const rows = groupBy(siloRows, (u) => u.id)
+      .map(([userId, userAssignments]) => {
+        const { name, identityType } = userAssignments[0]
+        const siloRole = userAssignments.find((a) => a.roleSource === 'silo')?.roleName
+
+        // Silo access tab only shows identities with explicit silo roles
+        if (!siloRole) {
+          return null
+        }
+
+        const effectiveRole = getEffectiveRole([siloRole])
+        if (!effectiveRole) {
+          return null
+        }
+
+        const row: SiloAccessRow = {
+          id: userId,
+          identityType,
+          name,
+          siloRole,
+          effectiveRole,
+        }
+
+        return row
+      })
+      .filter((row): row is SiloAccessRow => row !== null)
+
+    return filterByIdentityType(rows, filter).sort(byGroupThenName)
+  }, [siloRows, filter])
+}
+
+function SiloAccessTable({
+  filter,
+  rows,
+  policy,
+  onEditRow,
+  onViewMembers,
+}: {
+  filter: IdentityFilter
+  rows: SiloAccessRow[]
+  policy: Policy
+  onEditRow: (row: SiloAccessRow) => void
+  onViewMembers: (row: SiloAccessRow) => void
+}) {
+  const { mutateAsync: updatePolicy } = useApiMutation(api.policyUpdate, {
+    onSuccess: () => {
+      queryClient.invalidateEndpoint('policyView')
+    },
+  })
+
+  const columns = useMemo(() => {
+    const colHelper = createColumnHelper<SiloAccessRow>()
+
+    return [
+      colHelper.accessor('name', { header: 'Name' }),
+      // TODO: Add lastAccessed column for users once API provides it.
+      ...(filter === 'all'
+        ? [
+            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
+        },
+      }),
+      // Show Users column only on groups filter
+      ...(filter === 'groups'
+        ? [
+            colHelper.display({
+              id: 'users',
+              header: 'Users',
+              cell: (info) => {
+                const row = info.row.original
+                return (
+                  <MembersCell groupId={row.id} onViewMembers={() => onViewMembers(row)} />
+                )
+              },
+            }),
+          ]
+        : []),
+      getActionsCol((row: SiloAccessRow) => [
+        {
+          label: 'Change role',
+          onActivate: () => onEditRow(row),
+        },
+        {
+          label: 'Delete',
+          onActivate: confirmDelete({
+            doDelete: async () => {
+              await updatePolicy({
+                body: deleteRole(row.id, policy),
+              })
+              addToast({ content: 'Access removed' })
+            },
+            label: (
+              <span>
+                the <HL>{row.siloRole}</HL> role for <HL>{row.name}</HL>
+              </span>
+            ),
+          }),
+          // TODO: disable delete on permissions you can't delete
+        },
+      ]),
+    ]
+  }, [filter, policy, updatePolicy, onEditRow, onViewMembers])
+
+  const tableInstance = useReactTable<SiloAccessRow>({
+    columns,
+    data: rows,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return <Table table={tableInstance} />
+}
+
+/**
+ * Access control tab for silo-level permissions.
+ * Displays users and groups with their silo roles, and allows adding/editing/deleting role assignments.
+ */
+export function SiloAccessTab({ filter, children }: SiloAccessTabProps) {
+  const [addModalOpen, setAddModalOpen] = useState(false)
+  const [editingRow, setEditingRow] = useState<SiloAccessRow | null>(null)
+  const [viewingMembersRow, setViewingMembersRow] = useState<SiloAccessRow | null>(null)
+
+  const { data: policy } = usePrefetchedQuery(q(api.policyView, {}))
+  const siloRows = useUserRows(policy.roleAssignments, 'silo')
+  const rows = useSiloAccessRows(siloRows, filter)
+
+  const addButtonText = `Add ${identityFilterLabel[filter]}`
+
+  return (
+    <>
+      <TableActions>
+        <CreateButton onClick={() => setAddModalOpen(true)}>{addButtonText}</CreateButton>
+      </TableActions>
+      {policy && addModalOpen && (
+        <SiloAccessAddUserSideModal
+          onDismiss={() => setAddModalOpen(false)}
+          policy={policy}
+          filter={filter}
+        />
+      )}
+      {policy && editingRow && editingRow.siloRole && (
+        <SiloAccessEditUserSideModal
+          onDismiss={() => setEditingRow(null)}
+          policy={policy}
+          name={editingRow.name}
+          identityId={editingRow.id}
+          identityType={editingRow.identityType}
+          defaultValues={{ roleName: editingRow.siloRole }}
+        />
+      )}
+      {viewingMembersRow && (
+        <GroupMembersModal
+          groupId={viewingMembersRow.id}
+          groupName={viewingMembersRow.name}
+          onDismiss={() => setViewingMembersRow(null)}
+        />
+      )}
+      {children}
+      {rows.length === 0 ? (
+        <AccessEmptyState
+          scope="silo"
+          filter={filter}
+          onClick={() => setAddModalOpen(true)}
+        />
+      ) : (
+        <SiloAccessTable
+          filter={filter}
+          rows={rows}
+          policy={policy}
+          onEditRow={setEditingRow}
+          onViewMembers={setViewingMembersRow}
+        />
+      )}
+    </>
+  )
+}
diff --git a/app/forms/access-util.tsx b/app/forms/access-util.tsx
index e30aa4478..87fc34be6 100644
--- a/app/forms/access-util.tsx
+++ b/app/forms/access-util.tsx
@@ -21,6 +21,7 @@ import { RadioFieldDyn } from '~/components/form/fields/RadioField'
 import { type ListboxItem } from '~/ui/lib/Listbox'
 import { Message } from '~/ui/lib/Message'
 import { Radio } from '~/ui/lib/Radio'
+import { type IdentityFilter } from '~/util/access'
 import { links } from '~/util/links'
 import { capitalize } from '~/util/str'
 
@@ -68,9 +69,12 @@ export const actorToItem = (actor: Actor): ListboxItem => ({
 export type AddRoleModalProps = {
   onDismiss: () => void
   policy: Policy
+  filter: IdentityFilter
 }
 
-export type EditRoleModalProps = AddRoleModalProps & {
+export type EditRoleModalProps = {
+  onDismiss: () => void
+  policy: Policy
   name?: string
   identityId: string
   identityType: IdentityType
diff --git a/app/forms/project-access.tsx b/app/forms/project-access.tsx
index 270fa9844..876826652 100644
--- a/app/forms/project-access.tsx
+++ b/app/forms/project-access.tsx
@@ -21,6 +21,8 @@ import { SideModalForm } from '~/components/form/SideModalForm'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { ResourceLabel } from '~/ui/lib/SideModal'
+import { identityFilterLabel } from '~/util/access'
+import { capitalize } from '~/util/str'
 
 import {
   actorToItem,
@@ -30,10 +32,14 @@ import {
   type EditRoleModalProps,
 } from './access-util'
 
-export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalProps) {
+export function ProjectAccessAddUserSideModal({
+  onDismiss,
+  policy,
+  filter,
+}: AddRoleModalProps) {
   const { project } = useProjectSelector()
 
-  const actors = useActorsNotInPolicy(policy)
+  const actors = useActorsNotInPolicy(policy, filter)
 
   const updatePolicy = useApiMutation(api.projectPolicyUpdate, {
     onSuccess: () => {
@@ -46,9 +52,11 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
 
   const form = useForm({ defaultValues })
 
+  const entityLabel = identityFilterLabel[filter]
+
   return (
     <SideModalForm
-      title="Add user or group"
+      title={`Add ${entityLabel}`}
       resourceName="role"
       form={form}
       formType="create"
@@ -69,7 +77,7 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
       <ListboxField
         name="identityId"
         items={actors.map(actorToItem)}
-        label="User or group"
+        label={capitalize(entityLabel)}
         required
         control={form.control}
       />
diff --git a/app/forms/silo-access.tsx b/app/forms/silo-access.tsx
index 150a9ca57..f1dfa0e8a 100644
--- a/app/forms/silo-access.tsx
+++ b/app/forms/silo-access.tsx
@@ -19,6 +19,8 @@ import { Access16Icon } from '@oxide/design-system/icons/react'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { ResourceLabel } from '~/ui/lib/SideModal'
+import { identityFilterLabel } from '~/util/access'
+import { capitalize } from '~/util/str'
 
 import {
   actorToItem,
@@ -28,8 +30,12 @@ import {
   type EditRoleModalProps,
 } from './access-util'
 
-export function SiloAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalProps) {
-  const actors = useActorsNotInPolicy(policy)
+export function SiloAccessAddUserSideModal({
+  onDismiss,
+  policy,
+  filter,
+}: AddRoleModalProps) {
+  const actors = useActorsNotInPolicy(policy, filter)
 
   const updatePolicy = useApiMutation(api.policyUpdate, {
     onSuccess: () => {
@@ -40,12 +46,14 @@ export function SiloAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalPr
 
   const form = useForm({ defaultValues })
 
+  const entityLabel = identityFilterLabel[filter]
+
   return (
     <SideModalForm
       form={form}
       formType="create"
       resourceName="role"
-      title="Add user or group"
+      title={`Add ${entityLabel}`}
       submitLabel="Assign role"
       onDismiss={onDismiss}
       onSubmit={({ identityId, roleName }) => {
@@ -63,7 +71,7 @@ export function SiloAccessAddUserSideModal({ onDismiss, policy }: AddRoleModalPr
       <ListboxField
         name="identityId"
         items={actors.map(actorToItem)}
-        label="User or group"
+        label={capitalize(entityLabel)}
         required
         control={form.control}
       />
diff --git a/app/pages/SiloAccessPage.tsx b/app/pages/SiloAccessPage.tsx
deleted file mode 100644
index eb65e9535..000000000
--- a/app/pages/SiloAccessPage.tsx
+++ /dev/null
@@ -1,207 +0,0 @@
-/*
- * 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, getCoreRowModel, useReactTable } from '@tanstack/react-table'
-import { useMemo, useState } from 'react'
-
-import {
-  api,
-  byGroupThenName,
-  deleteRole,
-  getEffectiveRole,
-  q,
-  queryClient,
-  useApiMutation,
-  usePrefetchedQuery,
-  useUserRows,
-  type IdentityType,
-  type RoleKey,
-} 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 { confirmDelete } from '~/stores/confirm-delete'
-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 { identityTypeLabel, roleColor } from '~/util/access'
-import { groupBy } from '~/util/array'
-import { docLinks } from '~/util/links'
-
-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>
-)
-
-const policyView = q(api.policyView, {})
-const userList = q(api.userList, {})
-const groupList = q(api.groupList, {})
-
-export async function clientLoader() {
-  await Promise.all([
-    queryClient.prefetchQuery(policyView),
-    // used to resolve user names
-    queryClient.prefetchQuery(userList),
-    queryClient.prefetchQuery(groupList),
-  ])
-  return null
-}
-
-export const handle = { crumb: 'Silo Access' }
-
-type UserRow = {
-  id: string
-  identityType: IdentityType
-  name: string
-  siloRole: RoleKey | undefined
-  effectiveRole: RoleKey
-}
-
-const colHelper = createColumnHelper<UserRow>()
-
-export default function SiloAccessPage() {
-  const [addModalOpen, setAddModalOpen] = useState(false)
-  const [editingUserRow, setEditingUserRow] = useState<UserRow | null>(null)
-
-  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 roles = siloRole ? [siloRole] : []
-
-        const { name, identityType } = userAssignments[0]
-
-        const row: UserRow = {
-          id: userId,
-          identityType,
-          name,
-          siloRole,
-          // we know there has to be at least one
-          effectiveRole: getEffectiveRole(roles)!,
-        }
-
-        return row
-      })
-      .sort(byGroupThenName)
-  }, [siloRows])
-
-  const { mutateAsync: updatePolicy } = useApiMutation(api.policyUpdate, {
-    onSuccess: () => queryClient.invalidateEndpoint('policyView'),
-    // 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({
-                // we know policy is there, otherwise there's no row to display
-                body: deleteRole(row.id, siloPolicy),
-              }),
-            label: (
-              <span>
-                the <HL>{row.siloRole}</HL> role for <HL>{row.name}</HL>
-              </span>
-            ),
-          }),
-          disabled: !row.siloRole && "You don't have permission to delete this user",
-        },
-      ]),
-    ],
-    [siloPolicy, updatePolicy]
-  )
-
-  const tableInstance = useReactTable({
-    columns,
-    data: rows,
-    getCoreRowModel: getCoreRowModel(),
-  })
-
-  return (
-    <>
-      <PageHeader>
-        <PageTitle icon={<Access24Icon />}>Silo Access</PageTitle>
-        <DocsPopover
-          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]}
-        />
-      </PageHeader>
-
-      <TableActions>
-        <CreateButton onClick={() => setAddModalOpen(true)}>Add user or group</CreateButton>
-      </TableActions>
-      {siloPolicy && addModalOpen && (
-        <SiloAccessAddUserSideModal
-          onDismiss={() => setAddModalOpen(false)}
-          policy={siloPolicy}
-        />
-      )}
-      {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} />
-      )}
-    </>
-  )
-}
diff --git a/app/pages/project/access/ProjectAccessPage.tsx b/app/pages/project/access/ProjectAccessPage.tsx
index 17cf4d453..ab5abf7d4 100644
--- a/app/pages/project/access/ProjectAccessPage.tsx
+++ b/app/pages/project/access/ProjectAccessPage.tsx
@@ -5,207 +5,34 @@
  *
  * 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, 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 { 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 { docLinks } from '~/util/links'
-import type * as PP from '~/util/path-params'
-
-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>
-)
+import { pb } from '~/util/path-builder'
 
 export async function clientLoader({ params }: LoaderFunctionArgs) {
-  const selector = getProjectSelector(params)
+  const { project } = getProjectSelector(params)
   await Promise.all([
-    queryClient.prefetchQuery(policyView),
-    queryClient.prefetchQuery(projectPolicyView(selector)),
-    // used to resolve user names
-    queryClient.prefetchQuery(userList),
-    queryClient.prefetchQuery(groupList),
+    queryClient.prefetchQuery(q(api.policyView, {})),
+    queryClient.prefetchQuery(q(api.projectPolicyView, { path: { project } })),
+    queryClient.prefetchQuery(q(api.userList, {})),
+    queryClient.prefetchQuery(q(api.groupList, {})),
   ])
   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 },
-                // we know policy is there, otherwise there's no row to display
-                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>
-            ),
-          }),
-          disabled: !row.projectRole && "You don't have permission to delete this user",
-        },
-      ]),
-    ],
-    [projectPolicy, projectSelector.project, updatePolicy]
-  )
-
-  const tableInstance = useReactTable({
-    columns,
-    data: rows,
-    getCoreRowModel: getCoreRowModel(),
-  })
-
   return (
     <>
       <PageHeader>
@@ -218,30 +45,11 @@ export default function ProjectAccessPage() {
         />
       </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.projectAccessAll(projectSelector)}>All</Tab>
+        <Tab to={pb.projectAccessGroups(projectSelector)}>Groups</Tab>
+        <Tab to={pb.projectAccessUsers(projectSelector)}>Users</Tab>
+      </RouteTabs>
     </>
   )
 }
diff --git a/app/pages/silo/access/SiloAccessPage.tsx b/app/pages/silo/access/SiloAccessPage.tsx
new file mode 100644
index 000000000..ed49026c4
--- /dev/null
+++ b/app/pages/silo/access/SiloAccessPage.tsx
@@ -0,0 +1,49 @@
+/*
+ * 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 } from '@oxide/api'
+import { Access16Icon, Access24Icon } from '@oxide/design-system/icons/react'
+
+import { DocsPopover } from '~/components/DocsPopover'
+import { RouteTabs, Tab } from '~/components/RouteTabs'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
+import { docLinks } from '~/util/links'
+import { pb } from '~/util/path-builder'
+
+export async function clientLoader() {
+  await Promise.all([
+    queryClient.prefetchQuery(q(api.policyView, {})),
+    queryClient.prefetchQuery(q(api.userList, {})),
+    queryClient.prefetchQuery(q(api.groupList, {})),
+  ])
+  return null
+}
+
+export const handle = { crumb: 'Silo Access' }
+
+export default function SiloAccessPage() {
+  return (
+    <>
+      <PageHeader>
+        <PageTitle icon={<Access24Icon />}>Silo Access</PageTitle>
+        <DocsPopover
+          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]}
+        />
+      </PageHeader>
+
+      <RouteTabs fullWidth>
+        <Tab to={pb.siloAccessAll()}>All</Tab>
+        <Tab to={pb.siloAccessGroups()}>Groups</Tab>
+        <Tab to={pb.siloAccessUsers()}>Users</Tab>
+      </RouteTabs>
+    </>
+  )
+}
diff --git a/app/routes.tsx b/app/routes.tsx
index 8a16d50b5..bc98e650d 100644
--- a/app/routes.tsx
+++ b/app/routes.tsx
@@ -16,6 +16,8 @@ import {
 
 import { NotFound } from './components/ErrorPage'
 import { PageSkeleton } from './components/PageSkeleton.tsx'
+import { ProjectAccessTab } from './components/ProjectAccessTab'
+import { SiloAccessTab } from './components/SiloAccessTab'
 import { makeCrumb, type Crumb } from './hooks/use-crumbs'
 import { getInstanceSelector, getVpcSelector } from './hooks/use-params'
 import { pb } from './util/path-builder'
@@ -276,7 +278,15 @@ export const routes = createRoutesFromElements(
           />
         </Route>
 
-        <Route path="access" lazy={() => import('./pages/SiloAccessPage').then(convert)} />
+        <Route
+          path="access"
+          lazy={() => import('./pages/silo/access/SiloAccessPage').then(convert)}
+        >
+          <Route index element={<Navigate to="all" replace />} />
+          <Route path="all" element={<SiloAccessTab filter="all" />} />
+          <Route path="users" element={<SiloAccessTab filter="users" />} />
+          <Route path="groups" element={<SiloAccessTab filter="groups" />} />
+        </Route>
       </Route>
 
       {/* PROJECT */}
@@ -528,7 +538,12 @@ export const routes = createRoutesFromElements(
           <Route
             path="access"
             lazy={() => import('./pages/project/access/ProjectAccessPage').then(convert)}
-          />
+          >
+            <Route index element={<Navigate to="all" replace />} />
+            <Route path="all" element={<ProjectAccessTab filter="all" />} />
+            <Route path="users" element={<ProjectAccessTab filter="users" />} />
+            <Route path="groups" element={<ProjectAccessTab filter="groups" />} />
+          </Route>
           <Route
             lazy={() => import('./pages/project/affinity/AffinityPage').then(convert)}
             handle={{ crumb: 'Affinity Groups' }}
diff --git a/app/table/cells/MembersCell.tsx b/app/table/cells/MembersCell.tsx
new file mode 100644
index 000000000..e30b1e88e
--- /dev/null
+++ b/app/table/cells/MembersCell.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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 { SkeletonCell } from '~/table/cells/EmptyCell'
+import { ButtonCell } from '~/table/cells/LinkCell'
+import { ALL_ISH } from '~/util/consts'
+
+type MembersCellProps = {
+  groupId: string
+  onViewMembers: () => void
+}
+
+/**
+ * Displays the member count for a group with lazy loading.
+ * Shows a loading skeleton while fetching, then displays the count
+ * with a "+" suffix if there are more results beyond the limit.
+ * TODO: API update in Omicron PR #9495 will provide total count directly.
+ */
+export const MembersCell = ({ groupId, onViewMembers }: MembersCellProps) => {
+  const { data: users } = useQuery(
+    q(api.userList, { query: { group: groupId, limit: ALL_ISH } })
+  )
+
+  if (!users) return <SkeletonCell />
+
+  const count = users.items.length
+  const hasMore = !!users.nextPage
+  const displayCount = hasMore ? `${count.toLocaleString()}+` : count.toLocaleString()
+
+  return <ButtonCell onClick={onViewMembers}>{displayCount}</ButtonCell>
+}
diff --git a/app/util/__snapshots__/path-builder.spec.ts.snap b/app/util/__snapshots__/path-builder.spec.ts.snap
index 0666f345a..8a053a42f 100644
--- a/app/util/__snapshots__/path-builder.spec.ts.snap
+++ b/app/util/__snapshots__/path-builder.spec.ts.snap
@@ -431,7 +431,49 @@ exports[`breadcrumbs 2`] = `
       "path": "/projects/p/instances",
     },
   ],
-  "projectAccess (/projects/p/access)": [
+  "projectAccess (/projects/p/access/all)": [
+    {
+      "label": "Projects",
+      "path": "/projects",
+    },
+    {
+      "label": "p",
+      "path": "/projects/p/instances",
+    },
+    {
+      "label": "Project Access",
+      "path": "/projects/p/access",
+    },
+  ],
+  "projectAccessAll (/projects/p/access/all)": [
+    {
+      "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",
@@ -555,7 +597,25 @@ exports[`breadcrumbs 2`] = `
       "path": "/system/silos/s/idps",
     },
   ],
-  "siloAccess (/access)": [
+  "siloAccess (/access/all)": [
+    {
+      "label": "Silo Access",
+      "path": "/access",
+    },
+  ],
+  "siloAccessAll (/access/all)": [
+    {
+      "label": "Silo Access",
+      "path": "/access",
+    },
+  ],
+  "siloAccessGroups (/access/groups)": [
+    {
+      "label": "Silo Access",
+      "path": "/access",
+    },
+  ],
+  "siloAccessUsers (/access/users)": [
     {
       "label": "Silo Access",
       "path": "/access",
diff --git a/app/util/access.ts b/app/util/access.ts
index 0e7b374cd..a754be2c0 100644
--- a/app/util/access.ts
+++ b/app/util/access.ts
@@ -10,11 +10,29 @@ import { type BadgeColor } from '@oxide/design-system/ui'
 
 import type { IdentityType, RoleKey } from '~/api'
 
+export type IdentityFilter = 'all' | 'users' | 'groups'
+
+/** Filter rows by identity type based on the filter parameter */
+export function filterByIdentityType<T extends { identityType: IdentityType }>(
+  rows: T[],
+  filter: IdentityFilter
+): T[] {
+  if (filter === 'users') return rows.filter((row) => row.identityType === 'silo_user')
+  if (filter === 'groups') return rows.filter((row) => row.identityType === 'silo_group')
+  return rows
+}
+
 export const identityTypeLabel: Record<IdentityType, string> = {
   silo_group: 'Group',
   silo_user: 'User',
 }
 
+export const identityFilterLabel: Record<IdentityFilter, string> = {
+  all: 'user or group',
+  users: 'user',
+  groups: 'group',
+}
+
 export const roleColor: Record<RoleKey, BadgeColor> = {
   admin: 'default',
   collaborator: 'purple',
diff --git a/app/util/path-builder.spec.ts b/app/util/path-builder.spec.ts
index 35aefaab2..e969e47b3 100644
--- a/app/util/path-builder.spec.ts
+++ b/app/util/path-builder.spec.ts
@@ -70,7 +70,10 @@ test('path builder', () => {
         "ipPoolsNew": "/system/networking/ip-pools-new",
         "profile": "/settings/profile",
         "project": "/projects/p/instances",
-        "projectAccess": "/projects/p/access",
+        "projectAccess": "/projects/p/access/all",
+        "projectAccessAll": "/projects/p/access/all",
+        "projectAccessGroups": "/projects/p/access/groups",
+        "projectAccessUsers": "/projects/p/access/users",
         "projectEdit": "/projects/p/edit",
         "projectImageEdit": "/projects/p/images/im/edit",
         "projectImages": "/projects/p/images",
@@ -80,7 +83,10 @@ 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/all",
+        "siloAccessAll": "/access/all",
+        "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 da7e04c69..949d00e5b 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`,
+  projectAccess: (params: PP.Project) => `${projectBase(params)}/access/all`,
+  projectAccessAll: (params: PP.Project) => `${projectBase(params)}/access/all`,
+  projectAccessUsers: (params: PP.Project) => `${projectBase(params)}/access/users`,
+  projectAccessGroups: (params: PP.Project) => `${projectBase(params)}/access/groups`,
   projectImages: (params: PP.Project) => `${projectBase(params)}/images`,
   projectImagesNew: (params: PP.Project) => `${projectBase(params)}/images-new`,
   projectImageEdit: (params: PP.Image) =>
@@ -105,7 +108,10 @@ export const pb = {
     `${pb.antiAffinityGroup(params)}/edit`,
 
   siloUtilization: () => '/utilization',
-  siloAccess: () => '/access',
+  siloAccess: () => '/access/all',
+  siloAccessAll: () => '/access/all',
+  siloAccessUsers: () => '/access/users',
+  siloAccessGroups: () => '/access/groups',
   siloImages: () => '/images',
   siloImageEdit: (params: PP.SiloImage) => `${pb.siloImages()}/${params.image}/edit`,
 
diff --git a/eslint.config.ts b/eslint.config.ts
index 862803289..be5729b7e 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -156,6 +156,7 @@ export default defineConfig(
             'expectRowVisible',
             'expectOptions',
             'expectRowMenuStaysOpen',
+            'expectCanAddUserAcrossTabs',
           ],
         },
       ],
diff --git a/test/e2e/access-test-helpers.ts b/test/e2e/access-test-helpers.ts
new file mode 100644
index 000000000..2d65a17c3
--- /dev/null
+++ b/test/e2e/access-test-helpers.ts
@@ -0,0 +1,87 @@
+/*
+ * 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 type { Page } from '@playwright/test'
+
+import type { RoleSource } from '~/api'
+
+import { expect, expectNotVisible, expectRowVisible, expectVisible } from './utils'
+
+/**
+ * Shared test helper for verifying user addition and tab navigation
+ * Tests adding a user on the All tab, then verifying they appear correctly
+ * on Users tab but not Groups tab
+ */
+export async function expectCanAddUserAcrossTabs(
+  page: Page,
+  config: {
+    /** Base URL path (e.g., '/access/all' or '/projects/mock-project/access/all') */
+    baseUrl: string
+    /** Role prefix (e.g., 'silo' or 'project') */
+    rolePrefix: RoleSource
+  }
+) {
+  await page.goto(config.baseUrl)
+
+  // Start on the All tab
+  await expectVisible(page, ['role=tab[name="All"][selected]'])
+
+  const allTable = page.locator('table')
+
+  // Add Hans Jonas as viewer
+  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"]')
+  await page.click('role=option[name="Hans Jonas"]')
+  await page.getByRole('radio', { name: /^Viewer / }).click()
+  await page.click('role=button[name="Assign role"]')
+
+  // User shows up in the All tab table
+  await expectRowVisible(allTable, {
+    Name: 'Hans Jonas',
+    Type: 'User',
+    Role: `${config.rolePrefix}.viewer`,
+  })
+
+  // Navigate to Users tab
+  await page.click('role=tab[name="Users"]')
+  await expectVisible(page, ['role=tab[name="Users"][selected]'])
+
+  // Verify the URL changed to /users
+  await expect(page).toHaveURL(/\/access\/users$/)
+
+  const usersTable = page.locator('table')
+
+  // User should still be visible on Users tab
+  await expectRowVisible(usersTable, {
+    Name: 'Hans Jonas',
+    Role: `${config.rolePrefix}.viewer`,
+  })
+
+  // Type column should not be present on Users tab (since all are users)
+  await expectNotVisible(page, ['role=columnheader[name="Type"]'])
+
+  // Navigate to Groups tab
+  await page.click('role=tab[name="Groups"]')
+  await expectVisible(page, ['role=tab[name="Groups"][selected]'])
+
+  // Hans Jonas should NOT be visible on Groups tab
+  await expectNotVisible(page, ['role=cell[name="Hans Jonas"]'])
+
+  // Type column should not be present on Groups tab either
+  await expectNotVisible(page, ['role=columnheader[name="Type"]'])
+
+  // Go back to All tab and verify Hans Jonas is still there
+  await page.click('role=tab[name="All"]')
+  await expectVisible(page, ['role=tab[name="All"][selected]'])
+  await expectRowVisible(allTable, {
+    Name: 'Hans Jonas',
+    Type: 'User',
+    Role: `${config.rolePrefix}.viewer`,
+  })
+}
diff --git a/test/e2e/project-access.e2e.ts b/test/e2e/project-access.e2e.ts
index d4f34d8ce..b16431748 100644
--- a/test/e2e/project-access.e2e.ts
+++ b/test/e2e/project-access.e2e.ts
@@ -7,6 +7,7 @@
  */
 import { user3, user4 } from '@oxide/api-mocks'
 
+import { expectCanAddUserAcrossTabs } from './access-test-helpers'
 import { expect, expectNotVisible, expectRowVisible, expectVisible, test } from './utils'
 
 test('Click through project access page', async ({ page }) => {
@@ -116,3 +117,10 @@ test('Click through project access page', async ({ page }) => {
     Role: 'silo.admin+1',
   })
 })
+
+test('Add project user on All tab and verify on Users tab', async ({ page }) => {
+  await expectCanAddUserAcrossTabs(page, {
+    baseUrl: '/projects/mock-project/access/all',
+    rolePrefix: 'project',
+  })
+})
diff --git a/test/e2e/silo-access.e2e.ts b/test/e2e/silo-access.e2e.ts
index 720ef8ba1..f8f4969c9 100644
--- a/test/e2e/silo-access.e2e.ts
+++ b/test/e2e/silo-access.e2e.ts
@@ -7,6 +7,7 @@
  */
 import { user3, user4 } from '@oxide/api-mocks'
 
+import { expectCanAddUserAcrossTabs } from './access-test-helpers'
 import { expect, expectNotVisible, expectRowVisible, expectVisible, test } from './utils'
 
 test('Click through silo access page', async ({ page }) => {
@@ -80,3 +81,10 @@ test('Click through silo access page', async ({ page }) => {
   await page.getByRole('button', { name: 'Confirm' }).click()
   await expect(user3Row).toBeHidden()
 })
+
+test('Add silo user on All tab and verify on Users tab', async ({ page }) => {
+  await expectCanAddUserAcrossTabs(page, {
+    baseUrl: '/access/all',
+    rolePrefix: 'silo',
+  })
+})