diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePage.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
index b9adbb44feb26..43ae73598059e 100644
--- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
+++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CreateEditRolePage.tsx
@@ -8,6 +8,7 @@ import type { CustomRoleRequest } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
+import { RequirePermission } from "contexts/auth/RequirePermission";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import type { FC } from "react";
 import { Helmet } from "react-helmet-async";
@@ -45,7 +46,12 @@ export const CreateEditRolePage: FC = () => {
 	}
 
 	return (
-		<>
+		<RequirePermission
+			isFeatureVisible={
+				organizationPermissions.assignOrgRoles ||
+				organizationPermissions.createOrgRoles
+			}
+		>
 			<Helmet>
 				<title>
 					{pageTitle(
@@ -83,7 +89,7 @@ export const CreateEditRolePage: FC = () => {
 				organizationName={organizationName}
 				canAssignOrgRole={organizationPermissions.assignOrgRoles}
 			/>
-		</>
+		</RequirePermission>
 	);
 };
 
diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx
index 362448368d1a6..4eee74c6a599d 100644
--- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx
+++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/CustomRolesPage.tsx
@@ -6,6 +6,7 @@ import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
+import { RequirePermission } from "contexts/auth/RequirePermission";
 import { useFeatureVisibility } from "modules/dashboard/useFeatureVisibility";
 import { useOrganizationSettings } from "modules/management/OrganizationSettingsLayout";
 import { type FC, useEffect, useState } from "react";
@@ -53,7 +54,12 @@ export const CustomRolesPage: FC = () => {
 	}
 
 	return (
-		<>
+		<RequirePermission
+			isFeatureVisible={
+				organizationPermissions.assignOrgRoles ||
+				organizationPermissions.createOrgRoles
+			}
+		>
 			<Helmet>
 				<title>{pageTitle("Custom Roles")}</title>
 			</Helmet>
@@ -100,7 +106,7 @@ export const CustomRolesPage: FC = () => {
 					}
 				}}
 			/>
-		</>
+		</RequirePermission>
 	);
 };