diff --git a/public/app/core/components/RolePicker/TeamRolePicker.tsx b/public/app/core/components/RolePicker/TeamRolePicker.tsx
index b6937eab261..c04b76180ac 100644
--- a/public/app/core/components/RolePicker/TeamRolePicker.tsx
+++ b/public/app/core/components/RolePicker/TeamRolePicker.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react';
 import { useAsync } from 'react-use';
-import { Role } from 'app/types';
+import { contextSrv } from 'app/core/core';
+import { AccessControlAction, Role } from 'app/types';
 import { RolePicker } from './RolePicker';
 import { fetchRoleOptions, fetchTeamRoles, updateTeamRoles } from './api';
 
@@ -18,8 +19,12 @@ export const TeamRolePicker: FC<Props> = ({ teamId, orgId, getRoleOptions, disab
 
   const { loading } = useAsync(async () => {
     try {
-      let options = await (getRoleOptions ? getRoleOptions() : fetchRoleOptions(orgId));
-      setRoleOptions(options.filter((option) => !option.name?.startsWith('managed:')));
+      if (contextSrv.hasPermission(AccessControlAction.ActionRolesList)) {
+        let options = await (getRoleOptions ? getRoleOptions() : fetchRoleOptions(orgId));
+        setRoleOptions(options.filter((option) => !option.name?.startsWith('managed:')));
+      } else {
+        setRoleOptions([]);
+      }
 
       const teamRoles = await fetchTeamRoles(teamId, orgId);
       setAppliedRoles(teamRoles);
diff --git a/public/app/core/components/RolePicker/UserRolePicker.tsx b/public/app/core/components/RolePicker/UserRolePicker.tsx
index eaf04ddd484..a597638ca5e 100644
--- a/public/app/core/components/RolePicker/UserRolePicker.tsx
+++ b/public/app/core/components/RolePicker/UserRolePicker.tsx
@@ -1,6 +1,7 @@
 import React, { FC, useState } from 'react';
 import { useAsync } from 'react-use';
-import { Role, OrgRole } from 'app/types';
+import { contextSrv } from 'app/core/core';
+import { Role, OrgRole, AccessControlAction } from 'app/types';
 import { RolePicker } from './RolePicker';
 import { fetchBuiltinRoles, fetchRoleOptions, fetchUserRoles, updateUserRoles } from './api';
 
@@ -31,14 +32,26 @@ export const UserRolePicker: FC<Props> = ({
 
   const { loading } = useAsync(async () => {
     try {
-      let options = await (getRoleOptions ? getRoleOptions() : fetchRoleOptions(orgId));
-      setRoleOptions(options.filter((option) => !option.name?.startsWith('managed:')));
+      if (contextSrv.hasPermission(AccessControlAction.ActionRolesList)) {
+        let options = await (getRoleOptions ? getRoleOptions() : fetchRoleOptions(orgId));
+        setRoleOptions(options.filter((option) => !option.name?.startsWith('managed:')));
+      } else {
+        setRoleOptions([]);
+      }
 
-      const builtInRoles = await (getBuiltinRoles ? getBuiltinRoles() : fetchBuiltinRoles(orgId));
-      setBuiltinRoles(builtInRoles);
+      if (contextSrv.hasPermission(AccessControlAction.ActionBuiltinRolesList)) {
+        const builtInRoles = await (getBuiltinRoles ? getBuiltinRoles() : fetchBuiltinRoles(orgId));
+        setBuiltinRoles(builtInRoles);
+      } else {
+        setBuiltinRoles({});
+      }
 
-      const userRoles = await fetchUserRoles(userId, orgId);
-      setAppliedRoles(userRoles);
+      if (contextSrv.hasPermission(AccessControlAction.ActionUserRolesList)) {
+        const userRoles = await fetchUserRoles(userId, orgId);
+        setAppliedRoles(userRoles);
+      } else {
+        setAppliedRoles([]);
+      }
     } catch (e) {
       // TODO handle error
       console.error('Error loading options');
diff --git a/public/app/features/users/UsersTable.tsx b/public/app/features/users/UsersTable.tsx
index bde73cf9325..427a32ef53a 100644
--- a/public/app/features/users/UsersTable.tsx
+++ b/public/app/features/users/UsersTable.tsx
@@ -23,10 +23,19 @@ const UsersTable: FC<Props> = (props) => {
   useEffect(() => {
     async function fetchOptions() {
       try {
-        let options = await fetchRoleOptions(orgId);
-        setRoleOptions(options);
-        const builtInRoles = await fetchBuiltinRoles(orgId);
-        setBuiltinRoles(builtInRoles);
+        if (contextSrv.hasPermission(AccessControlAction.ActionRolesList)) {
+          let options = await fetchRoleOptions(orgId);
+          setRoleOptions(options);
+        } else {
+          setRoleOptions([]);
+        }
+
+        if (contextSrv.hasPermission(AccessControlAction.ActionBuiltinRolesList)) {
+          const builtInRoles = await fetchBuiltinRoles(orgId);
+          setBuiltinRoles(builtInRoles);
+        } else {
+          setBuiltinRoles({});
+        }
       } catch (e) {
         console.error('Error loading options');
       }
diff --git a/public/app/types/accessControl.ts b/public/app/types/accessControl.ts
index 4aead88c760..11c84d7ad97 100644
--- a/public/app/types/accessControl.ts
+++ b/public/app/types/accessControl.ts
@@ -50,6 +50,10 @@ export enum AccessControlAction {
   ActionServerStatsRead = 'server.stats:read',
 
   ActionTeamsCreate = 'teams:create',
+
+  ActionRolesList = 'roles:list',
+  ActionBuiltinRolesList = 'roles.builtin:list',
+  ActionUserRolesList = 'users.roles:list',
 }
 
 export interface Role {