diff --git a/web/packages/shared/components/ToolTip/HoverTooltip.tsx b/web/packages/shared/components/ToolTip/HoverTooltip.tsx
index 2195dce9ee313..e242070ba809f 100644
--- a/web/packages/shared/components/ToolTip/HoverTooltip.tsx
+++ b/web/packages/shared/components/ToolTip/HoverTooltip.tsx
@@ -28,7 +28,7 @@ type OriginProps = {
 
 export const HoverTooltip: React.FC<
   PropsWithChildren<{
-    tipContent: string | undefined;
+    tipContent?: React.ReactNode;
     showOnlyOnOverflow?: boolean;
     className?: string;
     anchorOrigin?: OriginProps;
diff --git a/web/packages/teleport/src/Users/UserList/UserList.tsx b/web/packages/teleport/src/Users/UserList/UserList.tsx
index 53861cd969245..6a626f119500b 100644
--- a/web/packages/teleport/src/Users/UserList/UserList.tsx
+++ b/web/packages/teleport/src/Users/UserList/UserList.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 import { Cell, LabelCell } from 'design/DataTable';
 import { MenuButton, MenuItem } from 'shared/components/MenuAction';
 
-import { User, UserOrigin } from 'teleport/services/user';
+import { Access, User, UserOrigin } from 'teleport/services/user';
 import { ClientSearcheableTableWithQueryParamSupport } from 'teleport/components/ClientSearcheableTableWithQueryParamSupport';
 
 export default function UserList({
@@ -29,6 +29,7 @@ export default function UserList({
   onEdit,
   onDelete,
   onReset,
+  usersAcl,
 }: Props) {
   return (
     <ClientSearcheableTableWithQueryParamSupport
@@ -72,6 +73,7 @@ export default function UserList({
           altKey: 'options-btn',
           render: user => (
             <ActionCell
+              acl={usersAcl}
               user={user}
               onEdit={onEdit}
               onReset={onReset}
@@ -118,12 +120,21 @@ const ActionCell = ({
   onEdit,
   onReset,
   onDelete,
+  acl,
 }: {
   user: User;
   onEdit: (user: User) => void;
   onReset: (user: User) => void;
   onDelete: (user: User) => void;
+  acl: Access;
 }) => {
+  const canEdit = acl.edit;
+  const canDelete = acl.remove;
+
+  if (!(canEdit || canDelete)) {
+    return <Cell align="right" />;
+  }
+
   if (user.isBot || !user.isLocal) {
     return <Cell align="right" />;
   }
@@ -131,11 +142,15 @@ const ActionCell = ({
   return (
     <Cell align="right">
       <MenuButton>
-        <MenuItem onClick={() => onEdit(user)}>Edit...</MenuItem>
-        <MenuItem onClick={() => onReset(user)}>
-          Reset Authentication...
-        </MenuItem>
-        <MenuItem onClick={() => onDelete(user)}>Delete...</MenuItem>
+        {canEdit && <MenuItem onClick={() => onEdit(user)}>Edit...</MenuItem>}
+        {canEdit && (
+          <MenuItem onClick={() => onReset(user)}>
+            Reset Authentication...
+          </MenuItem>
+        )}
+        {canDelete && (
+          <MenuItem onClick={() => onDelete(user)}>Delete...</MenuItem>
+        )}
       </MenuButton>
     </Cell>
   );
@@ -147,4 +162,7 @@ type Props = {
   onEdit(user: User): void;
   onDelete(user: User): void;
   onReset(user: User): void;
+  // determines if the viewer is able to edit/delete users. This is used
+  // to conditionally render the edit/delete buttons in the ActionCell
+  usersAcl: Access;
 };
diff --git a/web/packages/teleport/src/Users/Users.story.tsx b/web/packages/teleport/src/Users/Users.story.tsx
index fc905715582c2..eaccc82097e9a 100644
--- a/web/packages/teleport/src/Users/Users.story.tsx
+++ b/web/packages/teleport/src/Users/Users.story.tsx
@@ -149,4 +149,12 @@ const sample = {
   EmailPasswordReset: null,
   showMauInfo: false,
   onDismissUsersMauNotice: () => null,
+  canEditUsers: true,
+  usersAcl: {
+    read: true,
+    edit: false,
+    remove: true,
+    list: true,
+    create: true,
+  },
 };
diff --git a/web/packages/teleport/src/Users/Users.test.tsx b/web/packages/teleport/src/Users/Users.test.tsx
index 77ff4c39a91b9..c2916695e22f2 100644
--- a/web/packages/teleport/src/Users/Users.test.tsx
+++ b/web/packages/teleport/src/Users/Users.test.tsx
@@ -18,14 +18,23 @@
 
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-import { render, screen, userEvent } from 'design/utils/testing';
+import { render, screen, userEvent, fireEvent } from 'design/utils/testing';
 
 import { ContextProvider } from 'teleport';
 import { createTeleportContext } from 'teleport/mocks/contexts';
+import { Access } from 'teleport/services/user';
 
 import { Users } from './Users';
 import { State } from './useUsers';
 
+const defaultAcl: Access = {
+  read: true,
+  edit: true,
+  remove: true,
+  list: true,
+  create: true,
+};
+
 describe('invite collaborators integration', () => {
   const ctx = createTeleportContext();
 
@@ -59,6 +68,7 @@ describe('invite collaborators integration', () => {
       EmailPasswordReset: null,
       showMauInfo: false,
       onDismissUsersMauNotice: () => null,
+      usersAcl: defaultAcl,
     };
   });
 
@@ -142,6 +152,7 @@ test('Users not equal to MAU Notice', async () => {
     EmailPasswordReset: null,
     showMauInfo: true,
     onDismissUsersMauNotice: jest.fn(),
+    usersAcl: defaultAcl,
   };
 
   const { rerender } = render(
@@ -205,6 +216,7 @@ describe('email password reset integration', () => {
       EmailPasswordReset: null,
       showMauInfo: false,
       onDismissUsersMauNotice: () => null,
+      usersAcl: defaultAcl,
     };
   });
 
@@ -245,3 +257,158 @@ describe('email password reset integration', () => {
     expect(screen.getByTestId('new-reset-ui')).toBeInTheDocument();
   });
 });
+
+describe('permission handling', () => {
+  const ctx = createTeleportContext();
+
+  let props: State;
+  beforeEach(() => {
+    props = {
+      attempt: {
+        message: 'success',
+        isSuccess: true,
+        isProcessing: false,
+        isFailed: false,
+      },
+      users: [
+        {
+          name: 'tester',
+          roles: [],
+          isLocal: true,
+        },
+      ],
+      fetchRoles: () => Promise.resolve([]),
+      operation: {
+        type: 'reset',
+        user: { name: 'alice@example.com', roles: ['foo'] },
+      },
+
+      onStartCreate: () => undefined,
+      onStartDelete: () => undefined,
+      onStartEdit: () => undefined,
+      onStartReset: () => undefined,
+      onStartInviteCollaborators: () => undefined,
+      onClose: () => undefined,
+      onDelete: () => undefined,
+      onCreate: () => undefined,
+      onUpdate: () => undefined,
+      onReset: () => undefined,
+      onInviteCollaboratorsClose: () => undefined,
+      InviteCollaborators: null,
+      inviteCollaboratorsOpen: false,
+      onEmailPasswordResetClose: () => undefined,
+      EmailPasswordReset: null,
+      showMauInfo: false,
+      onDismissUsersMauNotice: () => null,
+      usersAcl: defaultAcl,
+    };
+  });
+
+  test('displays a disabled Create Users button if lacking permissions', async () => {
+    const testProps = {
+      ...props,
+      usersAcl: {
+        ...defaultAcl,
+        edit: false,
+      },
+    };
+    render(
+      <MemoryRouter>
+        <ContextProvider ctx={ctx}>
+          <Users {...testProps} />
+        </ContextProvider>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByTestId('create_new_users_button')).toBeDisabled();
+  });
+
+  test('edit and reset options not available in the menu', async () => {
+    const testProps = {
+      ...props,
+      usersAcl: {
+        ...defaultAcl,
+        edit: false,
+      },
+    };
+    render(
+      <MemoryRouter>
+        <ContextProvider ctx={ctx}>
+          <Users {...testProps} />
+        </ContextProvider>
+      </MemoryRouter>
+    );
+
+    const optionsButton = screen.getByRole('button', { name: /options/i });
+    fireEvent.click(optionsButton);
+    const menuItems = screen.queryAllByRole('menuitem');
+    expect(menuItems).toHaveLength(1);
+    expect(menuItems.some(item => item.textContent.includes('Delete'))).toBe(
+      true
+    );
+  });
+
+  test('all options are available in the menu', async () => {
+    const testProps = {
+      ...props,
+      usersAcl: {
+        read: true,
+        list: true,
+        edit: true,
+        create: true,
+        remove: true,
+      },
+    };
+    render(
+      <MemoryRouter>
+        <ContextProvider ctx={ctx}>
+          <Users {...testProps} />
+        </ContextProvider>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('tester')).toBeInTheDocument();
+    const optionsButton = screen.getByRole('button', { name: /options/i });
+    fireEvent.click(optionsButton);
+    const menuItems = screen.queryAllByRole('menuitem');
+    expect(menuItems).toHaveLength(3);
+    expect(menuItems.some(item => item.textContent.includes('Delete'))).toBe(
+      true
+    );
+    expect(
+      menuItems.some(item => item.textContent.includes('Reset Auth'))
+    ).toBe(true);
+    expect(menuItems.some(item => item.textContent.includes('Edit'))).toBe(
+      true
+    );
+  });
+
+  test('delete is not available in menu', async () => {
+    const testProps = {
+      ...props,
+      usersAcl: {
+        read: true,
+        list: true,
+        edit: true,
+        create: true,
+        remove: false,
+      },
+    };
+    render(
+      <MemoryRouter>
+        <ContextProvider ctx={ctx}>
+          <Users {...testProps} />
+        </ContextProvider>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText('tester')).toBeInTheDocument();
+    const optionsButton = screen.getByRole('button', { name: /options/i });
+    fireEvent.click(optionsButton);
+    const menuItems = screen.queryAllByRole('menuitem');
+    expect(menuItems).toHaveLength(2);
+    expect(
+      menuItems.every(item => item.textContent.includes('Delete'))
+    ).not.toBe(true);
+  });
+});
diff --git a/web/packages/teleport/src/Users/Users.tsx b/web/packages/teleport/src/Users/Users.tsx
index c03a61418824e..0421af98483e5 100644
--- a/web/packages/teleport/src/Users/Users.tsx
+++ b/web/packages/teleport/src/Users/Users.tsx
@@ -17,8 +17,18 @@
  */
 
 import React from 'react';
-import { Indicator, Box, Alert, ButtonPrimary, Link, ButtonIcon } from 'design';
+import {
+  Indicator,
+  Box,
+  Text,
+  Alert,
+  ButtonPrimary,
+  Link,
+  Flex,
+  ButtonIcon,
+} from 'design';
 import { Cross } from 'design/Icon';
+import { HoverTooltip } from 'shared/components/ToolTip';
 
 import {
   FeatureBox,
@@ -47,6 +57,7 @@ export function Users(props: State) {
     onStartDelete,
     onStartEdit,
     onStartReset,
+    usersAcl,
     showMauInfo,
     onDismissUsersMauNotice,
     onClose,
@@ -61,16 +72,64 @@ export function Users(props: State) {
     EmailPasswordReset,
     onEmailPasswordResetClose,
   } = props;
+
+  const requiredPermissions = Object.entries(usersAcl)
+    .map(([key, value]) => {
+      if (key === 'edit') {
+        return { value, label: 'update' };
+      }
+      if (key === 'create') {
+        return { value, label: 'create' };
+      }
+    })
+    .filter(Boolean);
+
+  const isMissingPermissions = requiredPermissions.some(v => !v.value);
+
   return (
     <FeatureBox>
-      <FeatureHeader>
+      <FeatureHeader justifyContent="space-between">
         <FeatureHeaderTitle>Users</FeatureHeaderTitle>
         {attempt.isSuccess && (
           <>
             {!InviteCollaborators && (
-              <ButtonPrimary ml="auto" width="240px" onClick={onStartCreate}>
-                Create New User
-              </ButtonPrimary>
+              <HoverTooltip
+                tipContent={
+                  !isMissingPermissions ? (
+                    ''
+                  ) : (
+                    <Box>
+                      {/* TODO (avatus): extract this into a new "missing permissions" component. This will
+                          require us to change the internals of HoverTooltip to allow more arbitrary styling of the popover.
+                      */}
+                      <Text mb={1}>
+                        You do not have all of the required permissions.
+                      </Text>
+                      <Box mb={1}>
+                        <Text bold>You are missing permissions:</Text>
+                        <Flex gap={2}>
+                          {requiredPermissions
+                            .filter(perm => !perm.value)
+                            .map(perm => (
+                              <Text
+                                key={perm.label}
+                              >{`users.${perm.label}`}</Text>
+                            ))}
+                        </Flex>
+                      </Box>
+                    </Box>
+                  )
+                }
+              >
+                <ButtonPrimary
+                  disabled={isMissingPermissions}
+                  ml="auto"
+                  width="240px"
+                  onClick={onStartCreate}
+                >
+                  Create New User
+                </ButtonPrimary>
+              </HoverTooltip>
             )}
             {InviteCollaborators && (
               <ButtonPrimary
@@ -120,6 +179,7 @@ export function Users(props: State) {
       {attempt.isFailed && <Alert kind="danger" children={attempt.message} />}
       {attempt.isSuccess && (
         <UserList
+          usersAcl={usersAcl}
           users={users}
           onEdit={onStartEdit}
           onDelete={onStartDelete}
diff --git a/web/packages/teleport/src/Users/useUsers.ts b/web/packages/teleport/src/Users/useUsers.ts
index 4d4fff1ef4b0b..3197a226a9001 100644
--- a/web/packages/teleport/src/Users/useUsers.ts
+++ b/web/packages/teleport/src/Users/useUsers.ts
@@ -32,13 +32,6 @@ export default function useUsers({
   const ctx = useTeleport();
   const [attempt, attemptActions] = useAttempt({ isProcessing: true });
   const [users, setUsers] = useState([] as User[]);
-  // if the cluster has billing enabled, and usageBasedBilling, and they haven't acknowledged
-  // the info yet
-  const [showMauInfo, setShowMauInfo] = useState(
-    ctx.getFeatureFlags().billing &&
-      cfg.isUsageBasedBilling &&
-      !storageService.getUsersMauAcknowledged()
-  );
   const [operation, setOperation] = useState({
     type: 'none',
   } as Operation);
@@ -130,17 +123,26 @@ export default function useUsers({
 
   function onDismissUsersMauNotice() {
     storageService.setUsersMAUAcknowledged();
-    setShowMauInfo(false);
   }
 
   useEffect(() => {
     attemptActions.do(() => ctx.userService.fetchUsers().then(setUsers));
   }, []);
 
+  // if the cluster has billing enabled, and usageBasedBilling, and they haven't acknowledged
+  // the info yet
+  const showMauInfo =
+    ctx.getFeatureFlags().billing &&
+    cfg.isUsageBasedBilling &&
+    !storageService.getUsersMauAcknowledged();
+
+  const usersAcl = ctx.storeUser.getUserAccess();
+
   return {
     attempt,
     users,
     fetchRoles,
+    usersAcl,
     operation,
     onStartCreate,
     onStartDelete,