diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
index 7dd713129e41..171a41106881 100644
--- a/frontend/common/types/requests.ts
+++ b/frontend/common/types/requests.ts
@@ -824,7 +824,7 @@ export type Req = {
     userId: number
   }
   getUserPermissions: {
-    id?: number
+    id?: number | string
     userId: number | undefined
     level: PermissionLevel
   }
diff --git a/frontend/web/components/EditPermissions.tsx b/frontend/web/components/EditPermissions.tsx
index cf99407bd9ad..9d76a0408b96 100644
--- a/frontend/web/components/EditPermissions.tsx
+++ b/frontend/web/components/EditPermissions.tsx
@@ -25,7 +25,6 @@ import UserGroupList from './UserGroupList'
 import { PermissionLevel, Req, PermissionRoleType } from 'common/types/requests'
 import { useGetAvailablePermissionsQuery } from 'common/services/useAvailablePermissions'
 import ConfigProvider from 'common/providers/ConfigProvider'
-import Icon from './icons/Icon'
 import {
   useCreateRolePermissionsMutation,
   useGetRoleEnvironmentPermissionsQuery,
@@ -66,6 +65,12 @@ import Utils from 'common/utils/utils'
 import RemoveViewPermissionModal from './RemoveViewPermissionModal'
 import { useHistory } from 'react-router-dom'
 import getUserDisplayName from 'common/utils/getUserDisplayName'
+import Permissions from './inspect-permissions/Permissions'
+import UserAction from './UserAction'
+import {
+  decorateUsersForSort,
+  userTableSorting,
+} from './users-permissions/sortUsers'
 
 import Project from 'common/project'
 
@@ -1013,6 +1018,21 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
   } = props
 
   const [tab, setTab] = useState()
+  const hasRbac = !!Utils.getPlansPermission('RBAC')
+  const inspectUserPermissions = (user: User) => {
+    openModal(
+      getUserDisplayName(user),
+      <div className='p-4'>
+        <Permissions
+          level={level}
+          levelId={id}
+          userId={user.id}
+          projectId={level === 'environment' ? Number(parentId) : Number(id)}
+        />
+      </div>,
+      'p-0 side-modal',
+    )
+  }
   const editUserPermissions = (user: User) => {
     openModal(
       `Edit ${Format.camelCase(level)} Permissions`,
@@ -1086,125 +1106,143 @@ const EditPermissions: FC<EditPermissionsType> = (props) => {
       >
         <TabItem tabLabel='Users'>
           <OrganisationProvider>
-            {({ isLoading, users }) => (
-              <div className='mt-4'>
-                {isLoading && !users?.length && (
-                  <div className='centered-container'>
-                    <Loader />
-                  </div>
-                )}
-                {!!users?.length && (
-                  <div>
-                    <FormGroup className='panel no-pad pl-2 pr-2 panel--nested'>
-                      <div className={tabClassName}>
-                        <PanelSearch
-                          id='org-members-list'
-                          title='Users'
-                          className='panel--transparent'
-                          items={users}
-                          itemHeight={64}
-                          header={
-                            <Row className='table-header'>
-                              <Flex className='table-column px-3'>User</Flex>
-                              <Flex className='table-column'>Role</Flex>
-                              <div
-                                style={{ width: '80px' }}
-                                className='table-column text-center'
-                              >
-                                Action
-                              </div>
-                            </Row>
-                          }
-                          renderRow={(user) => {
-                            const { email, first_name, id, last_name, role } =
-                              user
-                            const onClick = () => {
-                              if (role !== 'ADMIN') {
-                                editUserPermissions(user)
-                              }
-                            }
-                            const matchingPermissions = permissions?.find(
-                              (v) => v.user.id === id,
-                            )
-
-                            return (
-                              <Row
-                                onClick={onClick}
-                                space
-                                className={`list-item${
-                                  role === 'ADMIN' ? '' : ' clickable'
-                                }`}
-                                key={id}
-                              >
-                                <Flex className='table-column px-3'>
-                                  <div className='mb-1 font-weight-medium'>
-                                    {`${first_name} ${last_name}`}{' '}
-                                    {String(id) ===
-                                      String(AccountStore.getUserId()) &&
-                                      '(You)'}
-                                  </div>
-                                  <div className='list-item-subtitle'>
-                                    {email}
-                                  </div>
-                                </Flex>
-                                {role === 'ADMIN' ? (
-                                  <Flex className='table-column fs-small lh-sm'>
-                                    <Tooltip
-                                      title={'Organisation Administrator'}
-                                    >
-                                      {
-                                        'Organisation administrators have all permissions enabled.<br/>To change the role of this user, visit Organisation Settings.'
-                                      }
-                                    </Tooltip>
-                                  </Flex>
-                                ) : (
-                                  <Flex
-                                    onClick={onClick}
-                                    className='table-column fs-small lh-sm'
-                                  >
-                                    {matchingPermissions &&
-                                    matchingPermissions.admin
-                                      ? `${Format.camelCase(
-                                          level,
-                                        )} Administrator`
-                                      : 'Regular User'}
-                                  </Flex>
-                                )}
+            {({ isLoading, users }) => {
+              const permissionsByUserId = new Map(
+                permissions?.map((p) => [p.user.id, p]),
+              )
+              const sortableUsers = decorateUsersForSort(users, (user) => {
+                if (user.role === 'ADMIN') return 'Organisation Administrator'
+                if (permissionsByUserId.get(user.id)?.admin) {
+                  return `${Format.camelCase(level)} Administrator`
+                }
+                return 'Regular User'
+              })
+              return (
+                <div className='mt-4'>
+                  {isLoading && !users?.length && (
+                    <div className='centered-container'>
+                      <Loader />
+                    </div>
+                  )}
+                  {!!users?.length && (
+                    <div>
+                      <FormGroup className='panel no-pad pl-2 pr-2 panel--nested'>
+                        <div className={tabClassName}>
+                          <PanelSearch
+                            id='org-members-list'
+                            title='Users'
+                            className='panel--transparent'
+                            items={sortableUsers}
+                            itemHeight={64}
+                            sorting={userTableSorting}
+                            header={
+                              <Row className='table-header'>
+                                <Flex className='table-column px-3'>User</Flex>
+                                <Flex className='table-column'>Role</Flex>
                                 <div
                                   style={{ width: '80px' }}
-                                  className='text-center'
+                                  className='table-column text-center'
                                 >
-                                  {role !== 'ADMIN' && (
-                                    <Icon
-                                      name='setting'
-                                      width={20}
-                                      fill='#656D7B'
-                                    />
-                                  )}
+                                  Action
                                 </div>
                               </Row>
-                            )
-                          }}
-                          renderNoResults={
-                            <div>You have no users in this organisation.</div>
-                          }
-                          filterRow={(item: User, search: string) => {
-                            const strToSearch = `${item.first_name} ${item.last_name} ${item.email}`
-                            return (
-                              strToSearch
-                                .toLowerCase()
-                                .indexOf(search.toLowerCase()) !== -1
-                            )
-                          }}
-                        />
-                      </div>
-
-                      <div id='select-portal' />
-                    </FormGroup>
-                  </div>
-                )}
-              </div>
-            )}
+                            }
+                            renderRow={(user) => {
+                              const { email, first_name, id, last_name, role } =
+                                user
+                              const onClick = () => {
+                                if (role !== 'ADMIN') {
+                                  editUserPermissions(user)
+                                }
+                              }
+                              const matchingPermissions = permissions?.find(
+                                (v) => v.user.id === id,
+                              )
+
+                              return (
+                                <Row
+                                  onClick={onClick}
+                                  space
+                                  className={`list-item${
+                                    role === 'ADMIN' ? '' : ' clickable'
+                                  }`}
+                                  key={id}
+                                >
+                                  <Flex className='table-column px-3'>
+                                    <div className='mb-1 font-weight-medium'>
+                                      {`${first_name} ${last_name}`}{' '}
+                                      {String(id) ===
+                                        String(AccountStore.getUserId()) &&
+                                        '(You)'}
+                                    </div>
+                                    <div className='list-item-subtitle'>
+                                      {email}
+                                    </div>
+                                  </Flex>
+                                  {role === 'ADMIN' ? (
+                                    <Flex className='table-column fs-small lh-sm'>
+                                      <Tooltip
+                                        title={'Organisation Administrator'}
+                                      >
+                                        {
+                                          'Organisation administrators have all permissions enabled.<br/>To change the role of this user, visit Organisation Settings.'
+                                        }
+                                      </Tooltip>
+                                    </Flex>
+                                  ) : (
+                                    <Flex
+                                      onClick={onClick}
+                                      className='table-column fs-small lh-sm'
+                                    >
+                                      {matchingPermissions &&
+                                      matchingPermissions.admin
+                                        ? `${Format.camelCase(
+                                            level,
+                                          )} Administrator`
+                                        : 'Regular User'}
+                                    </Flex>
+                                  )}
+                                  <div
+                                    style={{ width: '80px' }}
+                                    className='table-column d-flex justify-content-end'
+                                  >
+                                    {role !== 'ADMIN' && (
+                                      <UserAction
+                                        canEdit
+                                        canRemove={false}
+                                        canInspectPermissions={hasRbac}
+                                        onEdit={() => editUserPermissions(user)}
+                                        onRemove={() => {}}
+                                        onInspectPermissions={() =>
+                                          inspectUserPermissions(user)
+                                        }
+                                      />
+                                    )}
+                                  </div>
+                                </Row>
+                              )
+                            }}
+                            renderNoResults={
+                              <div>You have no users in this organisation.</div>
+                            }
+                            filterRow={(item: User, search: string) => {
+                              const strToSearch = `${item.first_name} ${item.last_name} ${item.email}`
+                              return (
+                                strToSearch
+                                  .toLowerCase()
+                                  .indexOf(search.toLowerCase()) !== -1
+                              )
+                            }}
+                          />
+                        </div>
+
+                        <div id='select-portal' />
+                      </FormGroup>
+                    </div>
+                  )}
+                </div>
+              )
+            }}
           </OrganisationProvider>
         </TabItem>
         <TabItem tabLabel='Groups'>
diff --git a/frontend/web/components/PanelSearch.tsx b/frontend/web/components/PanelSearch.tsx
index bb3d4d90c308..d435b684cfd4 100644
--- a/frontend/web/components/PanelSearch.tsx
+++ b/frontend/web/components/PanelSearch.tsx
@@ -23,7 +23,7 @@ import Panel from './base/grid/Panel'
 import Utils from 'common/utils/utils'
 import { SortOrder } from 'common/types/requests'
 
-type SortOption = {
+export type SortOption = {
   value: string
   order: SortOrder
   default?: boolean
diff --git a/frontend/web/components/UserAction.tsx b/frontend/web/components/UserAction.tsx
index f365d908eb2e..2459e4c8dfe3 100644
--- a/frontend/web/components/UserAction.tsx
+++ b/frontend/web/components/UserAction.tsx
@@ -142,7 +142,7 @@ const UserAction: FC<UserActionProps> = ({
     [close, onRemove, onEdit, onInspectPermissions],
   )
 
-  if (!canEdit && !!canRemove) {
+  if (!canEdit && !!canRemove && !canInspectPermissions) {
     return (
       <Button onClick={onRemove} size='small' className='btn-with-icon'>
         <Icon name='trash-2' width={16} fill='#656D7B' />
@@ -150,7 +150,7 @@ const UserAction: FC<UserActionProps> = ({
     )
   }
 
-  if (!!canEdit && !canRemove) {
+  if (!!canEdit && !canRemove && !canInspectPermissions) {
     return (
       <Button
         onClick={() => handleActionClick('edit')}
@@ -162,7 +162,7 @@ const UserAction: FC<UserActionProps> = ({
     )
   }
 
-  if (!canEdit && !canRemove) {
+  if (!canEdit && !canRemove && !canInspectPermissions) {
     return null
   }
 
diff --git a/frontend/web/components/inspect-permissions/Permissions.tsx b/frontend/web/components/inspect-permissions/Permissions.tsx
index 8ba9c1a0b168..488b35ad2f31 100644
--- a/frontend/web/components/inspect-permissions/Permissions.tsx
+++ b/frontend/web/components/inspect-permissions/Permissions.tsx
@@ -18,7 +18,7 @@ const Permissions = ({
   userId,
 }: {
   level: PermissionLevel
-  levelId: number
+  levelId: number | string
   userId?: number
   projectId?: number
   className?: string
diff --git a/frontend/web/components/users-permissions/OrganisationUsersTable/OrganisationUsersTable.tsx b/frontend/web/components/users-permissions/OrganisationUsersTable/OrganisationUsersTable.tsx
index e4668220b5a9..ef7237de94b0 100644
--- a/frontend/web/components/users-permissions/OrganisationUsersTable/OrganisationUsersTable.tsx
+++ b/frontend/web/components/users-permissions/OrganisationUsersTable/OrganisationUsersTable.tsx
@@ -1,5 +1,10 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import AppActions from 'common/dispatcher/app-actions'
+import Constants from 'common/constants'
+import {
+  decorateUsersForSort,
+  userTableSorting,
+} from 'components/users-permissions/sortUsers'
 import Tabs from 'components/navigation/TabMenu/Tabs'
 import TabItem from 'components/navigation/TabMenu/TabItem'
 import { Organisation, User } from 'common/types/responses'
@@ -87,14 +92,25 @@ const OrganisationUsersTable: React.FC<OrganisationUsersTableProps> = ({
     })
   }
 
+  const sortableUsers = useMemo(
+    () =>
+      decorateUsersForSort(
+        users,
+        (user) =>
+          Constants.roles[user.role as keyof typeof Constants.roles] || '',
+      ),
+    [users],
+  )
+
   return (
     <PanelSearch
       id='org-members-list'
       title='Members'
       className='no-pad'
       header={<OrganisationUsersTableHeader widths={widths} />}
-      items={users}
+      items={sortableUsers}
       itemHeight={65}
+      sorting={userTableSorting}
       renderRow={(user) => {
         const { email, first_name, id, last_name } = user
 
diff --git a/frontend/web/components/users-permissions/sortUsers.ts b/frontend/web/components/users-permissions/sortUsers.ts
new file mode 100644
index 000000000000..f26d0913fac4
--- /dev/null
+++ b/frontend/web/components/users-permissions/sortUsers.ts
@@ -0,0 +1,26 @@
+import { SortOrder } from 'common/types/requests'
+import { User } from 'common/types/responses'
+import { SortOption } from 'components/PanelSearch'
+
+export type SortableUser<T extends User> = T & {
+  sortName: string
+  sortRole: string
+}
+
+// Shared sort options for the user permissions tables. `sortName` and
+// `sortRole` are computed by decorateUsersForSort so we can sort on a composite
+// name and a derived role label rather than the raw fields.
+export const userTableSorting: SortOption[] = [
+  { default: true, label: 'Name', order: SortOrder.ASC, value: 'sortName' },
+  { label: 'Role', order: SortOrder.ASC, value: 'sortRole' },
+]
+
+export const decorateUsersForSort = <T extends User>(
+  users: T[] | undefined,
+  getRoleLabel: (user: T) => string,
+): SortableUser<T>[] =>
+  (users || []).map((user) => ({
+    ...user,
+    sortName: `${user.first_name} ${user.last_name}`.trim().toLowerCase(),
+    sortRole: getRoleLabel(user),
+  }))