diff --git a/public/app/features/admin/Users/OrgUsersTable.tsx b/public/app/features/admin/Users/OrgUsersTable.tsx
index 56550e1ea79..98fc52462ac 100644
--- a/public/app/features/admin/Users/OrgUsersTable.tsx
+++ b/public/app/features/admin/Users/OrgUsersTable.tsx
@@ -19,7 +19,7 @@ import {
   Tooltip,
 } from '@grafana/ui';
 import { UserRolePicker } from 'app/core/components/RolePicker/UserRolePicker';
-import { fetchRoleOptions } from 'app/core/components/RolePicker/api';
+import { fetchRoleOptions, updateUserRoles } from 'app/core/components/RolePicker/api';
 import { TagBadge } from 'app/core/components/TagFilter/TagBadge';
 import { contextSrv } from 'app/core/core';
 import { AccessControlAction, OrgUser, Role } from 'app/types';
@@ -48,12 +48,14 @@ export interface Props {
   page: number;
   totalPages: number;
   rolesLoading?: boolean;
+  onUserRolesChange?: () => void;
 }
 
 export const OrgUsersTable = ({
   users,
   orgId,
   onRoleChange,
+  onUserRolesChange,
   onRemoveUser,
   fetchData,
   changePage,
@@ -118,10 +120,19 @@ export const OrgUsersTable = ({
         header: 'Role',
         cell: ({ cell: { value }, row: { original } }: Cell<'role'>) => {
           const basicRoleDisabled = getBasicRoleDisabled(original);
+          const onUserRolesUpdate = async (newRoles: Role[], userId: number, orgId: number | undefined) => {
+            await updateUserRoles(newRoles, userId, orgId);
+            if (onUserRolesChange) {
+              onUserRolesChange();
+            }
+          };
+
           return contextSrv.licensedAccessControlEnabled() ? (
             <UserRolePicker
               userId={original.userId}
-              roles={original.roles || []}
+              roles={original.roles}
+              apply={true}
+              onApplyRoles={onUserRolesUpdate}
               isLoading={rolesLoading}
               orgId={orgId}
               roleOptions={roleOptions}
@@ -207,7 +218,7 @@ export const OrgUsersTable = ({
         },
       },
     ],
-    [rolesLoading, orgId, roleOptions, onRoleChange]
+    [rolesLoading, orgId, roleOptions, onUserRolesChange, onRoleChange]
   );
 
   return (
diff --git a/public/app/features/users/UsersListPage.tsx b/public/app/features/users/UsersListPage.tsx
index 452901a89bb..e1992a7f46a 100644
--- a/public/app/features/users/UsersListPage.tsx
+++ b/public/app/features/users/UsersListPage.tsx
@@ -81,6 +81,10 @@ export const UsersListPageUnconnected = ({
     setShowInvites(!showInvites);
   };
 
+  const onUserRolesChange = () => {
+    loadUsers();
+  };
+
   const renderTable = () => {
     if (showInvites) {
       return <InviteesTable invitees={invitees} />;
@@ -92,6 +96,7 @@ export const UsersListPageUnconnected = ({
           rolesLoading={rolesLoading}
           onRoleChange={onRoleChange}
           onRemoveUser={onRemoveUser}
+          onUserRolesChange={onUserRolesChange}
           fetchData={changeSort}
           changePage={changePage}
           page={page}