diff --git a/frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx b/frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx
index b4cd3d230..d093cf49e 100644
--- a/frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/UpgradePrivilegeSystemModal/UpgradePrivilegeSystemModal.tsx
@@ -64,7 +64,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <ModalContent title="Privilege Management System Upgrade">
+      <ModalContent title="Privilege Management System Upgrade" className="max-w-2xl">
         <div className="mb-4">
           <h4 className="mb-2 text-lg font-semibold">
             Introducing Permission-Based Privilege Management
diff --git a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
index 219de8305..d01d45c2d 100644
--- a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
+++ b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
@@ -3,8 +3,7 @@ import { useTranslation } from "react-i18next";
 import { useNavigate, useSearch } from "@tanstack/react-router";
 
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { withProjectPermission } from "@app/hoc";
+import { useWorkspace } from "@app/context";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { ProjectAccessControlTabs } from "@app/types/project";
 
@@ -16,73 +15,67 @@ import {
   ServiceTokenTab
 } from "./components";
 
-const Page = withProjectPermission(
-  () => {
-    const navigate = useNavigate();
-    const { currentWorkspace } = useWorkspace();
-    const selectedTab = useSearch({
-      strict: false,
-      select: (el) => el.selectedTab
+const Page = () => {
+  const navigate = useNavigate();
+  const { currentWorkspace } = useWorkspace();
+  const selectedTab = useSearch({
+    strict: false,
+    select: (el) => el.selectedTab
+  });
+
+  const updateSelectedTab = (tab: string) => {
+    navigate({
+      to: `/${currentWorkspace.type}/$projectId/access-management` as const,
+      search: (prev) => ({ ...prev, selectedTab: tab }),
+      params: {
+        projectId: currentWorkspace.id
+      }
     });
+  };
 
-    const updateSelectedTab = (tab: string) => {
-      navigate({
-        to: `/${currentWorkspace.type}/$projectId/access-management` as const,
-        search: (prev) => ({ ...prev, selectedTab: tab }),
-        params: {
-          projectId: currentWorkspace.id
-        }
-      });
-    };
-
-    return (
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-        <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader
-            title="Access Control"
-            description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
-          />
-          <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
-            <TabList>
-              <Tab value={ProjectAccessControlTabs.Member}>Users</Tab>
-              <Tab value={ProjectAccessControlTabs.Groups}>Groups</Tab>
-              <Tab value={ProjectAccessControlTabs.Identities}>
-                <div className="flex items-center">
-                  <p>Machine Identities</p>
-                </div>
-              </Tab>
-              {currentWorkspace?.type === ProjectType.SecretManager && (
-                <Tab value={ProjectAccessControlTabs.ServiceTokens}>Service Tokens</Tab>
-              )}
-              <Tab value={ProjectAccessControlTabs.Roles}>Project Roles</Tab>
-            </TabList>
-            <TabPanel value={ProjectAccessControlTabs.Member}>
-              <MembersTab />
-            </TabPanel>
-            <TabPanel value={ProjectAccessControlTabs.Groups}>
-              <GroupsTab />
-            </TabPanel>
-            <TabPanel value={ProjectAccessControlTabs.Identities}>
-              <IdentityTab />
-            </TabPanel>
+  return (
+    <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="mx-auto mb-6 w-full max-w-7xl">
+        <PageHeader
+          title="Access Control"
+          description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
+        />
+        <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
+          <TabList>
+            <Tab value={ProjectAccessControlTabs.Member}>Users</Tab>
+            <Tab value={ProjectAccessControlTabs.Groups}>Groups</Tab>
+            <Tab value={ProjectAccessControlTabs.Identities}>
+              <div className="flex items-center">
+                <p>Machine Identities</p>
+              </div>
+            </Tab>
             {currentWorkspace?.type === ProjectType.SecretManager && (
-              <TabPanel value={ProjectAccessControlTabs.ServiceTokens}>
-                <ServiceTokenTab />
-              </TabPanel>
+              <Tab value={ProjectAccessControlTabs.ServiceTokens}>Service Tokens</Tab>
             )}
-            <TabPanel value={ProjectAccessControlTabs.Roles}>
-              <ProjectRoleListTab />
+            <Tab value={ProjectAccessControlTabs.Roles}>Project Roles</Tab>
+          </TabList>
+          <TabPanel value={ProjectAccessControlTabs.Member}>
+            <MembersTab />
+          </TabPanel>
+          <TabPanel value={ProjectAccessControlTabs.Groups}>
+            <GroupsTab />
+          </TabPanel>
+          <TabPanel value={ProjectAccessControlTabs.Identities}>
+            <IdentityTab />
+          </TabPanel>
+          {currentWorkspace?.type === ProjectType.SecretManager && (
+            <TabPanel value={ProjectAccessControlTabs.ServiceTokens}>
+              <ServiceTokenTab />
             </TabPanel>
-          </Tabs>
-        </div>
+          )}
+          <TabPanel value={ProjectAccessControlTabs.Roles}>
+            <ProjectRoleListTab />
+          </TabPanel>
+        </Tabs>
       </div>
-    );
-  },
-  {
-    action: ProjectPermissionActions.Read,
-    subject: ProjectPermissionSub.Member
-  }
-);
+    </div>
+  );
+};
 
 export const AccessControlPage = () => {
   const { t } = useTranslation();
diff --git a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/GroupsTab.tsx b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/GroupsTab.tsx
index e3f040375..4f155a552 100644
--- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/GroupsTab.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/GroupsTab.tsx
@@ -1,17 +1,26 @@
 import { motion } from "framer-motion";
 
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+
 import { GroupsSection } from "./components";
 
-export const GroupsTab = () => {
-  return (
-    <motion.div
-      key="panel-groups"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <GroupsSection />
-    </motion.div>
-  );
-};
+export const GroupsTab = withProjectPermission(
+  () => {
+    return (
+      <motion.div
+        key="panel-groups"
+        transition={{ duration: 0.15 }}
+        initial={{ opacity: 0, translateX: 30 }}
+        animate={{ opacity: 1, translateX: 0 }}
+        exit={{ opacity: 0, translateX: 30 }}
+      >
+        <GroupsSection />
+      </motion.div>
+    );
+  },
+  {
+    action: ProjectPermissionActions.Read,
+    subject: ProjectPermissionSub.Groups
+  }
+);
diff --git a/frontend/src/pages/project/AccessControlPage/components/MembersTab/MembersTab.tsx b/frontend/src/pages/project/AccessControlPage/components/MembersTab/MembersTab.tsx
index 6b5660c83..77a5ba827 100644
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/MembersTab.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/MembersTab.tsx
@@ -1,17 +1,26 @@
 import { motion } from "framer-motion";
 
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+
 import { MembersSection } from "./components";
 
-export const MembersTab = () => {
-  return (
-    <motion.div
-      key="panel-project-members"
-      transition={{ duration: 0.15 }}
-      initial={{ opacity: 0, translateX: 30 }}
-      animate={{ opacity: 1, translateX: 0 }}
-      exit={{ opacity: 0, translateX: 30 }}
-    >
-      <MembersSection />
-    </motion.div>
-  );
-};
+export const MembersTab = withProjectPermission(
+  () => {
+    return (
+      <motion.div
+        key="panel-project-members"
+        transition={{ duration: 0.15 }}
+        initial={{ opacity: 0, translateX: 30 }}
+        animate={{ opacity: 1, translateX: 0 }}
+        exit={{ opacity: 0, translateX: 30 }}
+      >
+        <MembersSection />
+      </motion.div>
+    );
+  },
+  {
+    action: ProjectPermissionActions.Read,
+    subject: ProjectPermissionSub.Member
+  }
+);