diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/access_control/RolesAndResourceAccessControls.tsx b/frontend/src/layout/navigation-3000/sidepanel/panels/access_control/RolesAndResourceAccessControls.tsx
index cc198a16c0fbd..a9bee42df068a 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/access_control/RolesAndResourceAccessControls.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/access_control/RolesAndResourceAccessControls.tsx
@@ -152,7 +152,7 @@ export function RolesAndResourceAccessControls({ noAccessControls }: RolesAndRes
 
 function RoleDetails({ roleId }: { roleId: string }): JSX.Element | null {
     const { user } = useValues(userLogic)
-    const { sortedMembers, roles } = useValues(roleBasedAccessControlLogic)
+    const { sortedMembers, roles, canEditRoleBasedAccessControls } = useValues(roleBasedAccessControlLogic)
     const { addMembersToRole, removeMemberFromRole, setEditingRoleId } = useActions(roleBasedAccessControlLogic)
     const [membersToAdd, setMembersToAdd] = useState<string[]>([])
 
@@ -185,6 +185,7 @@ function RoleDetails({ roleId }: { roleId: string }): JSX.Element | null {
                             value={membersToAdd}
                             onChange={(newValues: string[]) => setMembersToAdd(newValues)}
                             mode="multiple"
+                            disabled={!canEditRoleBasedAccessControls}
                             options={usersLemonSelectOptions(
                                 membersNotInRole.map((member) => member.user),
                                 'uuid'
@@ -195,13 +196,23 @@ function RoleDetails({ roleId }: { roleId: string }): JSX.Element | null {
                     <LemonButton
                         type="primary"
                         onClick={onSubmit}
-                        disabledReason={!onSubmit ? 'Please select members to add' : undefined}
+                        disabledReason={
+                            !canEditRoleBasedAccessControls
+                                ? 'You cannot edit this'
+                                : !onSubmit
+                                ? 'Please select members to add'
+                                : undefined
+                        }
                     >
                         Add members
                     </LemonButton>
                 </div>
                 <div className="flex items-center gap-2">
-                    <LemonButton type="secondary" onClick={() => setEditingRoleId(role.id)}>
+                    <LemonButton
+                        type="secondary"
+                        onClick={() => setEditingRoleId(role.id)}
+                        disabledReason={!canEditRoleBasedAccessControls ? 'You cannot edit this' : undefined}
+                    >
                         Edit role
                     </LemonButton>
                 </div>
@@ -241,6 +252,9 @@ function RoleDetails({ roleId }: { roleId: string }): JSX.Element | null {
                                         status="danger"
                                         size="small"
                                         type="tertiary"
+                                        disabledReason={
+                                            !canEditRoleBasedAccessControls ? 'You cannot edit this' : undefined
+                                        }
                                         onClick={() => removeMemberFromRole(role, member.id)}
                                     >
                                         Remove
@@ -249,15 +263,6 @@ function RoleDetails({ roleId }: { roleId: string }): JSX.Element | null {
                             )
                         },
                     },
-                    /* {isAdminOrOwner && deleteMember && (
-                                            <LemonButton
-                                                icon={<IconTrash />}
-                                                onClick={() => deleteMember(member.id)}
-                                                tooltip="Remove user from role"
-                                                type="tertiary"
-                                                size="small"
-                                            />
-                                        )} */
                 ]}
                 dataSource={role.members}
             />
@@ -289,6 +294,7 @@ function RoleModal(): JSX.Element {
         <Form logic={roleBasedAccessControlLogic} formKey="editingRole" enableFormOnSubmit>
             <LemonModal
                 isOpen={!!editingRoleId}
+                onClose={() => setEditingRoleId(null)}
                 title={!isEditing ? 'Create role' : `Edit role`}
                 footer={
                     <>
diff --git a/frontend/src/layout/navigation-3000/sidepanel/panels/access_control/roleBasedAccessControlLogic.ts b/frontend/src/layout/navigation-3000/sidepanel/panels/access_control/roleBasedAccessControlLogic.ts
index 68f87cc59657f..87d885844bfb1 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/panels/access_control/roleBasedAccessControlLogic.ts
+++ b/frontend/src/layout/navigation-3000/sidepanel/panels/access_control/roleBasedAccessControlLogic.ts
@@ -77,6 +77,7 @@ export const roleBasedAccessControlLogic = kea<roleBasedAccessControlLogicType>(
                 },
             },
         ],
+
         roles: [
             null as RoleType[] | null,
             {
@@ -180,6 +181,7 @@ export const roleBasedAccessControlLogic = kea<roleBasedAccessControlLogicType>(
                 return roleBasedAccessControls?.default_access_level ?? null
             },
         ],
+
         defaultResourceAccessControls: [
             (s) => [s.roleBasedAccessControls],
             (roleBasedAccessControls): RoleWithResourceAccessControls => {
@@ -199,6 +201,7 @@ export const roleBasedAccessControlLogic = kea<roleBasedAccessControlLogicType>(
                 return { accessControlByResource }
             },
         ],
+
         rolesWithResourceAccessControls: [
             (s) => [s.roles, s.roleBasedAccessControls, s.defaultResourceAccessControls],
             (roles, roleBasedAccessControls, defaultResourceAccessControls): RoleWithResourceAccessControls[] => {
@@ -234,6 +237,13 @@ export const roleBasedAccessControlLogic = kea<roleBasedAccessControlLogicType>(
                 return ['feature_flag', 'dashboard', 'insight', 'notebook']
             },
         ],
+
+        canEditRoleBasedAccessControls: [
+            (s) => [s.roleBasedAccessControls],
+            (roleBasedAccessControls): boolean | null => {
+                return roleBasedAccessControls?.user_can_edit_access_levels ?? null
+            },
+        ],
     }),
     afterMount(({ actions, values }) => {
         if (values.hasAvailableFeature(AvailableFeature.ROLE_BASED_ACCESS)) {