diff --git a/frontend/public/locales/en/translations.json b/frontend/public/locales/en/translations.json
index fdfefcf93..de3b99f11 100644
--- a/frontend/public/locales/en/translations.json
+++ b/frontend/public/locales/en/translations.json
@@ -270,7 +270,7 @@
       "description": "This page shows the members of the selected project, and allows you to modify their permissions."
     },
     "org": {
-      "title": "Organization Settings",
+      "title": "Settings",
       "description": "Manage members of your organization. These users could afterwards be formed into projects."
     },
     "personal": {
@@ -290,7 +290,7 @@
       }
     },
     "project": {
-      "title": "Project Settings",
+      "title": "Settings",
       "description": "These settings only apply to the currently selected Project.",
       "danger-zone": "Danger Zone",
       "delete-project": "Delete Project",
diff --git a/frontend/src/components/v2/Badge/Badge.tsx b/frontend/src/components/v2/Badge/Badge.tsx
index f902002c2..51bbdaeaa 100644
--- a/frontend/src/components/v2/Badge/Badge.tsx
+++ b/frontend/src/components/v2/Badge/Badge.tsx
@@ -17,7 +17,14 @@ const badgeVariants = cva(
       variant: {
         primary: "bg-yellow/20 text-yellow",
         danger: "bg-red/20 text-red",
-        success: "bg-green/20 text-green"
+        success: "bg-green/20 text-green",
+        org: "bg-org-v1/20 text-org-v1 [&_svg]:text-org-v1 flex items-center opacity-100 hover:bg-org-v1/10 [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap",
+        namespace:
+          "bg-namespace-v1/20 text-namespace-v1 [&_svg]:text-namespace-v1 flex opacity-100 hover:bg-namespace-v1/10 items-center [&_svg]:size-3.5 gap-x-1 w-min whitespace-nowrap",
+        project:
+          "bg-primary/10 text-primary [&_svg]:text-primary opacity-100 hover:bg-primary/10 flex items-center [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap",
+        instance:
+          "bg-mineshaft-200/20 text-mineshaft-200 [&_svg]:text-mineshaft-200 opacity-100 hover:bg-mineshaft-200/20 flex items-center [&_svg]:size-3 gap-x-1 w-min whitespace-nowrap"
       }
     }
   }
diff --git a/frontend/src/components/v2/Menu/Menu.tsx b/frontend/src/components/v2/Menu/Menu.tsx
index 3a222d0e8..29e659f14 100644
--- a/frontend/src/components/v2/Menu/Menu.tsx
+++ b/frontend/src/components/v2/Menu/Menu.tsx
@@ -33,16 +33,21 @@ export const MenuItem = <T extends ElementType = "button">({
   description,
   // wrapping in forward ref with generic component causes the loss of ts definitions on props
   inputRef,
+  variant,
   ...props
-}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => {
+}: MenuItemProps<T> &
+  ComponentPropsWithRef<T> & { variant?: "project" | "namespace" | "org" }): JSX.Element => {
   return (
     <Item
       type="button"
       role="menuitem"
       className={twMerge(
-        "group relative mt-0.5 flex w-full cursor-pointer items-center rounded-sm px-2 py-2 font-inter text-sm text-bunker-100 transition-all duration-50 hover:bg-mineshaft-700",
+        "group relative mt-0.5 box-border flex w-full cursor-pointer items-center rounded-[2px] border-l-2 border-transparent px-2 py-2 font-inter text-sm text-bunker-100 transition-all duration-50 hover:bg-mineshaft-700",
         isSelected && "bg-mineshaft-600 hover:bg-mineshaft-600",
         isDisabled && "cursor-not-allowed hover:bg-transparent",
+        isSelected && variant === "org" && "border-org-v1",
+        isSelected && variant === "namespace" && "border-namespace-v1",
+        isSelected && variant === "project" && "border-primary",
         className
       )}
       ref={inputRef}
diff --git a/frontend/src/components/v2/PageHeader/PageHeader.tsx b/frontend/src/components/v2/PageHeader/PageHeader.tsx
index f445a3fc0..01e710cd3 100644
--- a/frontend/src/components/v2/PageHeader/PageHeader.tsx
+++ b/frontend/src/components/v2/PageHeader/PageHeader.tsx
@@ -1,18 +1,37 @@
+import { IconDefinition } from "@fortawesome/free-brands-svg-icons";
+import { faCube, faCubes, faGlobe, faServer } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ReactNode } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
+import { Badge } from "@app/components/v2";
+
 type Props = {
   title: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
   className?: string;
+  scope: "org" | "project" | "namespace" | "instance";
 };
 
-export const PageHeader = ({ title, description, children, className }: Props) => (
+const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: IconDefinition }> = {
+  org: { label: "Organization", icon: faGlobe },
+  project: { label: "Project", icon: faCube },
+  namespace: { label: "Namespace", icon: faCubes },
+  instance: { label: "Server", icon: faServer }
+};
+
+export const PageHeader = ({ title, description, children, className, scope }: Props) => (
   <div className={twMerge("mb-4 w-full", className)}>
     <div className="flex w-full justify-between">
-      <div className="w-full">
-        <h1 className="mr-4 text-3xl font-medium text-white capitalize">{title}</h1>
+      <div className="mr-4 flex w-full items-center">
+        <h1 className="text-3xl font-medium text-white capitalize">{title}</h1>
+        {scope && (
+          <Badge variant={scope} className="mt-1 ml-2.5">
+            <FontAwesomeIcon icon={SCOPE_NAME[scope].icon} />
+            {SCOPE_NAME[scope].label}
+          </Badge>
+        )}
       </div>
       <div className="flex items-center gap-2">{children}</div>
     </div>
diff --git a/frontend/src/components/v2/Tabs/Tabs.tsx b/frontend/src/components/v2/Tabs/Tabs.tsx
index 7e8466850..4100fd144 100644
--- a/frontend/src/components/v2/Tabs/Tabs.tsx
+++ b/frontend/src/components/v2/Tabs/Tabs.tsx
@@ -22,10 +22,18 @@ export const TabList = ({ className, children, ...props }: TabListProps) => (
 
 export type TabProps = TabsPrimitive.TabsTriggerProps;
 
-export const Tab = ({ className, children, ...props }: TabProps) => (
+export const Tab = ({
+  className,
+  children,
+  variant = "project",
+  ...props
+}: TabProps & { variant?: "project" | "namespace" | "org" }) => (
   <TabsPrimitive.Trigger
     className={twMerge(
-      "flex h-10 items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:border-primary data-[state=active]:text-white",
+      "flex h-10 items-center justify-center px-3 text-sm font-medium text-mineshaft-400 transition-all select-none first:rounded-tl-md last:rounded-tr-md hover:text-mineshaft-200 data-[state=active]:border-b data-[state=active]:text-white",
+      variant === "project" && "data-[state=active]:border-primary",
+      variant === "namespace" && "data-[state=active]:border-namespace-v1",
+      variant === "org" && "data-[state=active]:border-org-v1",
       className
     )}
     {...props}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b29b5bf54..360894c2f 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -40,6 +40,8 @@
   /*legacy color schema */
   /* Fonts */
   --font-inter: "Inter", sans-serif;
+  --color-org-v1: #30B3FF;
+  --color-namespace-v1: #96ff59;
 
   /* Primary */
   --color-primary-50: #fffff5;
diff --git a/frontend/src/layouts/KmsLayout/KmsLayout.tsx b/frontend/src/layouts/KmsLayout/KmsLayout.tsx
index 71cdc6e8d..4aa1c1406 100644
--- a/frontend/src/layouts/KmsLayout/KmsLayout.tsx
+++ b/frontend/src/layouts/KmsLayout/KmsLayout.tsx
@@ -38,7 +38,7 @@ export const KmsLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faCube} />
@@ -55,7 +55,7 @@ export const KmsLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faLock} />
@@ -74,12 +74,12 @@ export const KmsLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faUsers} />
                           </div>
-                          Access Management
+                          Project Access
                         </div>
                       </MenuItem>
                     )}
@@ -91,7 +91,7 @@ export const KmsLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faBook} />
@@ -108,12 +108,12 @@ export const KmsLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faCog} />
                           </div>
-                          Settings
+                          Project Settings
                         </div>
                       </MenuItem>
                     )}
@@ -125,6 +125,7 @@ export const KmsLayout = () => {
               <Menu>
                 <Link to="/organization/projects">
                   <MenuItem
+                    variant="project"
                     className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                     leftIcon={
                       <div className="w-6">
diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
index a42c9e973..596202bf6 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -4,11 +4,11 @@ import { faCircleQuestion, faUserCircle } from "@fortawesome/free-regular-svg-ic
 import {
   faArrowUpRightFromSquare,
   faBook,
-  faBuilding,
   faCaretDown,
   faCheck,
   faEnvelope,
   faExclamationTriangle,
+  faGlobe,
   faInfo,
   faInfoCircle,
   faServer,
@@ -20,11 +20,13 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQueryClient } from "@tanstack/react-query";
 import { Link, useLocation, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
 
 import { Mfa } from "@app/components/auth/Mfa";
 import { createNotification } from "@app/components/notifications";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import {
+  Badge,
   BreadcrumbContainer,
   Button,
   DropdownMenu,
@@ -199,6 +201,8 @@ export const Navbar = () => {
 
   const isServerAdminPanel = location.pathname.startsWith("/admin");
 
+  const isOrgScope = breadcrumbs?.length === 1; // TODO: scott/akhil is this adequate?
+
   return (
     <div className="z-10 flex min-h-12 items-center border-b border-mineshaft-600 bg-mineshaft-800 px-4">
       <div>
@@ -230,10 +234,13 @@ export const Navbar = () => {
             <DropdownMenu modal={false}>
               <Link to="/organization/projects">
                 <div className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary">
-                  <div>
-                    <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
-                  </div>
-                  <div className="whitespace-nowrap">{currentOrg?.name}</div>
+                  <Badge
+                    variant="org"
+                    className={twMerge("text-sm", !isOrgScope && "bg-transparent opacity-75")}
+                  >
+                    <FontAwesomeIcon icon={faGlobe} />
+                    {currentOrg?.name}
+                  </Badge>
                   <div className="mr-1 rounded-sm border border-mineshaft-500 px-1 text-xs text-bunker-300 no-underline!">
                     {getPlan(subscription)}
                   </div>
diff --git a/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx b/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
index 0f4bed355..51e14721e 100644
--- a/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx
@@ -52,31 +52,31 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                 <MenuGroup title="Overview">
                   <Link to="/organization/projects">
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="org" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faTable} />
                           </div>
-                          Projects
+                          Overview
                         </div>
                       </MenuItem>
                     )}
                   </Link>
                   <Link to="/organization/access-management">
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="org" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faUsers} />
                           </div>
-                          Access Control
+                          Organization Access
                         </div>
                       </MenuItem>
                     )}
                   </Link>
                   <Link to="/organization/billing">
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="org" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faMoneyBill} className="mr-4" />
@@ -88,7 +88,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                   </Link>
                   <Link to="/organization/audit-logs">
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="org" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faBook} className="mr-4" />
@@ -100,7 +100,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                   </Link>
                   <Link to="/organization/settings">
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="org" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faCog} className="mr-4" />
@@ -114,7 +114,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                 <MenuGroup title="Resources">
                   <Link to="/organization/app-connections">
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="org" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faPlug} className="mr-4" />
@@ -126,7 +126,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                   </Link>
                   <Link to="/organization/networking">
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="org" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faNetworkWired} className="mr-4" />
@@ -145,6 +145,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                   !subscription.has_used_trial && (
                     <Tooltip content="Start Free Pro Trial">
                       <MenuItem
+                        variant="org"
                         className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                         leftIcon={
                           <FontAwesomeIcon
@@ -170,6 +171,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                   )}
                 <Link to="/organization/secret-sharing">
                   <MenuItem
+                    variant="org"
                     className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                     leftIcon={
                       <div className="w-6">
@@ -183,6 +185,7 @@ export const OrgSidebar = ({ isHidden }: Props) => {
                 {user.superAdmin && (
                   <Link to="/admin">
                     <MenuItem
+                      variant="org"
                       className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                       leftIcon={
                         <div className="w-6">
diff --git a/frontend/src/layouts/PamLayout/PamLayout.tsx b/frontend/src/layouts/PamLayout/PamLayout.tsx
index 6039050eb..48f6af116 100644
--- a/frontend/src/layouts/PamLayout/PamLayout.tsx
+++ b/frontend/src/layouts/PamLayout/PamLayout.tsx
@@ -59,7 +59,7 @@ export const PamLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faUser} />
@@ -76,7 +76,7 @@ export const PamLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faBoxOpen} />
@@ -93,7 +93,7 @@ export const PamLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faDisplay} />
@@ -112,12 +112,12 @@ export const PamLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faUsers} />
                             </div>
-                            Access Management
+                            Project Access
                           </div>
                         </MenuItem>
                       )}
@@ -129,7 +129,7 @@ export const PamLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faBook} />
@@ -146,12 +146,12 @@ export const PamLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faCog} />
                             </div>
-                            Settings
+                            Project Settings
                           </div>
                         </MenuItem>
                       )}
diff --git a/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx b/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
index cb186f4fa..93fa04ac9 100644
--- a/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
+++ b/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
@@ -54,7 +54,7 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faSitemap} />
@@ -71,7 +71,7 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faFileLines} />
@@ -88,7 +88,7 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faCertificate} />
@@ -105,7 +105,7 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faStamp} />
@@ -122,7 +122,7 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faBell} />
@@ -139,7 +139,7 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faPuzzlePiece} />
@@ -156,7 +156,7 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faPlug} />
@@ -175,12 +175,12 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faUsers} />
                             </div>
-                            Access Management
+                            Project Access
                           </div>
                         </MenuItem>
                       )}
@@ -192,7 +192,7 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faBook} />
@@ -209,12 +209,12 @@ export const PkiManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faCog} />
                             </div>
-                            Settings
+                            Project Settings
                           </div>
                         </MenuItem>
                       )}
diff --git a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
index 1c2c08d23..a35c3ab55 100644
--- a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
@@ -3,10 +3,10 @@ import { faStar } from "@fortawesome/free-regular-svg-icons";
 import {
   faCaretDown,
   faCheck,
+  faCube,
   faMagnifyingGlass,
   faPlus,
-  faStar as faSolidStar,
-  faTable
+  faStar as faSolidStar
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, linkOptions } from "@tanstack/react-router";
@@ -16,6 +16,7 @@ import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { NewProjectModal } from "@app/components/projects";
 import {
+  Badge,
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
@@ -106,14 +107,16 @@ export const ProjectSelect = () => {
             projectId: currentWorkspace.id
           }}
         >
-          <div className="flex cursor-pointer items-center gap-2 text-sm text-white duration-100 hover:text-primary">
-            <div>
-              <FontAwesomeIcon icon={faTable} className="text-xs text-bunker-300" />
-            </div>
+          <div className="relative flex cursor-pointer items-center gap-2 text-sm text-white duration-100 hover:text-primary">
             <Tooltip content={currentWorkspace.name} className="max-w-96 break-words">
-              <div className="max-w-44 overflow-hidden text-ellipsis whitespace-nowrap">
+              <Badge
+                variant="project"
+                className="max-w-44 overflow-hidden text-sm text-ellipsis whitespace-nowrap"
+              >
+                <FontAwesomeIcon icon={faCube} />
+
                 {currentWorkspace?.name}
-              </div>
+              </Badge>
             </Tooltip>
           </div>
         </Link>
diff --git a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
index a99dff2a7..e986d87c3 100644
--- a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
+++ b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
@@ -82,6 +82,7 @@ export const SecretManagerLayout = () => {
                     >
                       {({ isActive }) => (
                         <MenuItem
+                          variant="project"
                           isSelected={
                             isActive ||
                             location.pathname.startsWith(
@@ -105,7 +106,7 @@ export const SecretManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faPuzzlePiece} />
@@ -123,7 +124,7 @@ export const SecretManagerLayout = () => {
                         }}
                       >
                         {({ isActive }) => (
-                          <MenuItem isSelected={isActive}>
+                          <MenuItem variant="project" isSelected={isActive}>
                             <div className="mx-1 flex gap-2">
                               <div className="w-6">
                                 <FontAwesomeIcon icon={faArrowsSpin} />
@@ -141,7 +142,7 @@ export const SecretManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faCheckToSlot} />
@@ -166,7 +167,7 @@ export const SecretManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faPlug} />
@@ -185,12 +186,12 @@ export const SecretManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faUsers} />
                             </div>
-                            Access Management
+                            Project Access
                           </div>
                         </MenuItem>
                       )}
@@ -202,7 +203,7 @@ export const SecretManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faBook} />
@@ -219,12 +220,12 @@ export const SecretManagerLayout = () => {
                       }}
                     >
                       {({ isActive }) => (
-                        <MenuItem isSelected={isActive}>
+                        <MenuItem variant="project" isSelected={isActive}>
                           <div className="mx-1 flex gap-2">
                             <div className="w-6">
                               <FontAwesomeIcon icon={faCog} />
                             </div>
-                            Settings
+                            Project Settings
                           </div>
                         </MenuItem>
                       )}
@@ -236,6 +237,7 @@ export const SecretManagerLayout = () => {
                 <Menu>
                   <Link to="/organization/projects">
                     <MenuItem
+                      variant="project"
                       className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                       leftIcon={
                         <div className="w-6">
diff --git a/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx b/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
index fb86cfe48..b4c79786b 100644
--- a/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
+++ b/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
@@ -69,7 +69,7 @@ export const SecretScanningLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faDatabase} />
@@ -86,7 +86,7 @@ export const SecretScanningLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex w-full gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faMagnifyingGlass} />
@@ -108,7 +108,7 @@ export const SecretScanningLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faPlug} />
@@ -127,12 +127,12 @@ export const SecretScanningLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faUsers} />
                           </div>
-                          Access Management
+                          Project Access
                         </div>
                       </MenuItem>
                     )}
@@ -144,7 +144,7 @@ export const SecretScanningLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faBook} />
@@ -166,7 +166,7 @@ export const SecretScanningLayout = () => {
                           <div className="w-6">
                             <FontAwesomeIcon icon={faCog} />
                           </div>
-                          Settings
+                          Project Settings
                         </div>
                       </MenuItem>
                     )}
@@ -178,6 +178,7 @@ export const SecretScanningLayout = () => {
               <Menu>
                 <Link to="/organization/projects">
                   <MenuItem
+                    variant="project"
                     className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                     leftIcon={
                       <div className="w-6">
diff --git a/frontend/src/layouts/SshLayout/SshLayout.tsx b/frontend/src/layouts/SshLayout/SshLayout.tsx
index d6f318f3a..0d68a7548 100644
--- a/frontend/src/layouts/SshLayout/SshLayout.tsx
+++ b/frontend/src/layouts/SshLayout/SshLayout.tsx
@@ -51,7 +51,7 @@ export const SshLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faServer} />
@@ -74,7 +74,7 @@ export const SshLayout = () => {
                           }}
                         >
                           {({ isActive }) => (
-                            <MenuItem isSelected={isActive}>
+                            <MenuItem variant="project" isSelected={isActive}>
                               <div className="mx-1 flex gap-2">
                                 <div className="w-6">
                                   <FontAwesomeIcon icon={faStamp} />
@@ -97,12 +97,12 @@ export const SshLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faUsers} />
                           </div>
-                          Access Management
+                          Project Access
                         </div>
                       </MenuItem>
                     )}
@@ -114,7 +114,7 @@ export const SshLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faBook} />
@@ -131,12 +131,12 @@ export const SshLayout = () => {
                     }}
                   >
                     {({ isActive }) => (
-                      <MenuItem isSelected={isActive}>
+                      <MenuItem variant="project" isSelected={isActive}>
                         <div className="mx-1 flex gap-2">
                           <div className="w-6">
                             <FontAwesomeIcon icon={faCog} />
                           </div>
-                          Settings
+                          Project Settings
                         </div>
                       </MenuItem>
                     )}
@@ -148,6 +148,7 @@ export const SshLayout = () => {
               <Menu>
                 <Link to="/organization/projects">
                   <MenuItem
+                    variant="project"
                     className="relative flex items-center gap-2 overflow-hidden text-sm text-mineshaft-400 hover:text-mineshaft-300"
                     leftIcon={
                       <div className="w-6">
diff --git a/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx b/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
index 8128a53e0..0bc494ae2 100644
--- a/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
+++ b/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
@@ -16,6 +16,7 @@ export const AccessManagementPage = () => {
       <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
+            scope="instance"
             title="Access Control"
             description="Manage server admins within your Infisical instance."
           />
diff --git a/frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx b/frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx
index f803d3f5c..f1c88f4cf 100644
--- a/frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx
+++ b/frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx
@@ -16,6 +16,7 @@ export const AuthenticationPage = () => {
       <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
+            scope="instance"
             title="Authentication"
             description="Manage authentication settings for your Infisical instance."
           />
diff --git a/frontend/src/pages/admin/CachingPage/CachingPage.tsx b/frontend/src/pages/admin/CachingPage/CachingPage.tsx
index db8089813..96592d284 100644
--- a/frontend/src/pages/admin/CachingPage/CachingPage.tsx
+++ b/frontend/src/pages/admin/CachingPage/CachingPage.tsx
@@ -15,7 +15,11 @@ export const CachingPage = () => {
       </Helmet>
       <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="Caching" description="Manage caching for your Infisical instance." />
+          <PageHeader
+            scope="instance"
+            title="Caching"
+            description="Manage caching for your Infisical instance."
+          />
           <CachingPageForm />
         </div>
       </div>
diff --git a/frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx b/frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx
index 96af9a712..45b40c621 100644
--- a/frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx
+++ b/frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx
@@ -16,6 +16,7 @@ export const EncryptionPage = () => {
       <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
+            scope="instance"
             title="Encryption"
             description="Manage encryption settings for your Infisical instance."
           />
diff --git a/frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx b/frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx
index 000dd1f0d..1c0409c00 100644
--- a/frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx
+++ b/frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx
@@ -16,6 +16,7 @@ export const EnvironmentPage = () => {
       <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
+            scope="instance"
             title="Environment Variables"
             description="Manage the environment variables for your Infisical instance."
           />
diff --git a/frontend/src/pages/admin/GeneralPage/GeneralPage.tsx b/frontend/src/pages/admin/GeneralPage/GeneralPage.tsx
index e5a76e93c..1025bf093 100644
--- a/frontend/src/pages/admin/GeneralPage/GeneralPage.tsx
+++ b/frontend/src/pages/admin/GeneralPage/GeneralPage.tsx
@@ -18,6 +18,7 @@ export const GeneralPage = () => {
       <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
+            scope="instance"
             title="General"
             description="Manage general settings for your Infisical instance."
           />
diff --git a/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx b/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
index e5edd375c..d62842482 100644
--- a/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
+++ b/frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx
@@ -16,6 +16,7 @@ export const IntegrationsPage = () => {
       <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
+            scope="instance"
             title="Integrations"
             description="Manage integrations for your Infisical instance."
           />
diff --git a/frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx b/frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx
index e9096d39a..5c700fc9d 100644
--- a/frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx
+++ b/frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx
@@ -16,6 +16,7 @@ export const ResourceOverviewPage = () => {
       <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
+            scope="instance"
             title="Resource Overview"
             description="Manage resources within your Infisical instance."
           />
diff --git a/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx b/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
index 74e9d5e7e..7b5b2c3d5 100644
--- a/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
+++ b/frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
@@ -153,7 +153,7 @@ const UserPanelTable = ({
               icon={adminsOnly && <FontAwesomeIcon icon={faCheckCircle} />}
               iconPos="right"
             >
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-x-2">
                 <FontAwesomeIcon icon={faUserShield} className="text-yellow-700" />
                 <span>Server Admins</span>
               </div>
diff --git a/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx b/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
index 97d50b9bf..9921ea306 100644
--- a/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
+++ b/frontend/src/pages/cert-manager/AlertingPage/AlertingPage.tsx
@@ -16,6 +16,7 @@ export const AlertingPage = () => {
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Alerting"
           description="Configure alerts for expiring certificates and CAs to maintain security and compliance."
         />
diff --git a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
index 00c92aa11..8bfdcacca 100644
--- a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
@@ -87,7 +87,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader scope="project" title={data.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
diff --git a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
index a2bff12ed..7e2c9fd70 100644
--- a/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
+++ b/frontend/src/pages/cert-manager/CertificateAuthoritiesPage/CertificateAuthoritiesPage.tsx
@@ -17,6 +17,7 @@ export const CertificateAuthoritiesPage = () => {
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Certificate Authorities"
           description="Manage certificate authorities for issuing and signing certificates"
         />
diff --git a/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx b/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
index f4258a4d5..56b0fb72d 100644
--- a/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
@@ -33,6 +33,7 @@ export const CertificatesPage = () => {
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Certificates"
           description="View and track issued certificates, monitor expiration dates, and manage certificate lifecycles."
         />
diff --git a/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx b/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
index 10851d0e1..6545636f0 100644
--- a/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
+++ b/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
@@ -45,6 +45,7 @@ export const IntegrationsListPage = () => {
       <div className="relative container mx-auto max-w-7xl pb-12 text-white">
         <div className="mb-8">
           <PageHeader
+            scope="project"
             title="Integrations"
             description="Manage integrations with third-party certificate services."
           />
diff --git a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
index 5ca305743..79835a96d 100644
--- a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
@@ -73,7 +73,7 @@ export const PkiCollectionPage = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader scope="project" title={data.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
diff --git a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
index 682ed4253..2a7fdf56d 100644
--- a/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiSubscriberDetailsByIDPage/PkiSubscriberDetailsByIDPage.tsx
@@ -78,7 +78,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader scope="project" title={data.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
diff --git a/frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx b/frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
index c95e9490e..bdb525b59 100644
--- a/frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiSubscribersPage/PkiSubscribersPage.tsx
@@ -16,6 +16,7 @@ export const PkiSubscribersPage = () => {
         <div className="container mx-auto flex flex-col justify-between text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="project"
               title="Subscribers"
               description="Manage subscribers that request and receive certificates, including user devices, servers, and services."
             />
diff --git a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx
index fe8f98aea..409b0415f 100644
--- a/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiTemplateListPage/PkiTemplateListPage.tsx
@@ -106,6 +106,7 @@ export const PkiTemplateListPage = () => {
         <div className="container mx-auto flex flex-col justify-between text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="project"
               title="Certificate Templates"
               description="Manage certificate template to request and issue dynamic certificates following a strict format."
             />
diff --git a/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx b/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
index 22c1a6961..261b06df9 100644
--- a/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
@@ -21,7 +21,7 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
       <div className="w-full max-w-7xl">
-        <PageHeader title={t("settings.project.title")} />
+        <PageHeader scope="project" title={t("settings.project.title")} />
         <Tabs defaultValue={tabs[0].key}>
           <TabList>
             {tabs.map((tab) => (
diff --git a/frontend/src/pages/kms/KmipPage/KmipPage.tsx b/frontend/src/pages/kms/KmipPage/KmipPage.tsx
index 9c337bba3..b2ef8a5f0 100644
--- a/frontend/src/pages/kms/KmipPage/KmipPage.tsx
+++ b/frontend/src/pages/kms/KmipPage/KmipPage.tsx
@@ -18,6 +18,7 @@ export const KmipPage = () => {
       <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
+            scope="project"
             title="KMIP"
             description="Integrate with Infisical KMS via Key Management Interoperability Protocol."
           />
diff --git a/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx b/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
index d7b4b9fec..71f0534e9 100644
--- a/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
@@ -18,7 +18,8 @@ export const OverviewPage = () => {
       <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="Overview Page"
+            scope="project"
+            title="Overview"
             description="Manage keys and perform cryptographic operations."
           />
           <ProjectPermissionCan
diff --git a/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx b/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
index cdc0582dc..d1032d1cc 100644
--- a/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
@@ -21,7 +21,7 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
       <div className="w-full max-w-7xl">
-        <PageHeader title="Settings" />
+        <PageHeader scope="project" title="Settings" />
         <Tabs defaultValue={tabs[0].key}>
           <TabList>
             {tabs.map((tab) => (
diff --git a/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx b/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
index 74908e948..4ac727332 100644
--- a/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
@@ -82,7 +82,8 @@ export const AccessManagementPage = () => {
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
-          title="Organization Access Control"
+          scope="org"
+          title="Access Control"
           description="Manage fine-grained access for users, groups, roles, and identities within your organization resources."
         />
         {!currentOrg.shouldUseNewPrivilegeSystem && (
@@ -115,7 +116,7 @@ export const AccessManagementPage = () => {
             {tabSections
               .filter((el) => !el.isHidden)
               .map((el) => (
-                <Tab value={el.key} key={`org-access-tab-${el.key}`}>
+                <Tab variant="org" value={el.key} key={`org-access-tab-${el.key}`}>
                   {el.label}
                 </Tab>
               ))}
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
index acb559847..b44fad6ea 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
@@ -22,6 +22,7 @@ export const AppConnectionsPage = withPermission(
         <div className="flex w-full justify-center bg-bunker-800 text-white">
           <div className="w-full max-w-7xl">
             <PageHeader
+              scope="org"
               className="w-full"
               title="App Connections"
               description="Manage organization App Connections"
diff --git a/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx b/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
index 11628ce98..62ae29a1d 100644
--- a/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
@@ -16,7 +16,8 @@ export const AuditLogsPage = () => {
       <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl">
           <PageHeader
-            title="Audit logs"
+            scope="org"
+            title="Audit Logs"
             description="Audit logs for security and compliance teams to monitor information access."
           />
           <LogsSection pageView />
diff --git a/frontend/src/pages/organization/BillingPage/BillingPage.tsx b/frontend/src/pages/organization/BillingPage/BillingPage.tsx
index e49314f13..3fb473f2c 100644
--- a/frontend/src/pages/organization/BillingPage/BillingPage.tsx
+++ b/frontend/src/pages/organization/BillingPage/BillingPage.tsx
@@ -18,8 +18,9 @@ export const BillingPage = () => {
         <meta property="og:image" content="/images/message.png" />
       </Helmet>
       <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl px-6">
+        <div className="w-full max-w-7xl">
           <PageHeader
+            scope="org"
             title={t("billing.title")}
             description="View your billing plan, next billing cycle."
           />
diff --git a/frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx b/frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
index 64d80d332..7cd567b23 100644
--- a/frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
+++ b/frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx
@@ -25,7 +25,9 @@ export const BillingTabGroup = withPermission(
       <Tabs defaultValue={tabs[0].key}>
         <TabList>
           {tabsFiltered.map((tab) => (
-            <Tab value={tab.key}>{tab.name}</Tab>
+            <Tab variant="org" value={tab.key}>
+              {tab.name}
+            </Tab>
           ))}
         </TabList>
         <TabPanel value={tabs[0].key}>
diff --git a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
index da7643c50..f0bd24900 100644
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
@@ -83,7 +83,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.group.name}>
+          <PageHeader scope="org" title={data.group.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
diff --git a/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx b/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
index 446e54885..adf6dfce8 100644
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
@@ -75,7 +75,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.identity.name} />
+          <PageHeader scope="org" title={data.identity.name} />
           <div className="flex">
             <div className="mr-4 w-96">
               <IdentityDetailsSection identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
diff --git a/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx b/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx
index 660e4b26d..e7f3937d5 100644
--- a/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx
@@ -14,6 +14,7 @@ export const NetworkingPage = () => {
       <div className="flex w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl">
           <PageHeader
+            scope="org"
             title="Networking"
             description="Manage gateways and relays to securely access private network resources from Infisical"
           />
diff --git a/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx b/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx
index c59d64e1b..956a4d1ed 100644
--- a/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx
+++ b/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx
@@ -22,7 +22,7 @@ export const NetworkingTabGroup = () => {
     <Tabs value={selectedTab} onValueChange={setSelectedTab}>
       <TabList>
         {tabs.map((tab) => (
-          <Tab value={tab.key} key={tab.key}>
+          <Tab variant="org" value={tab.key} key={tab.key}>
             {tab.name}
           </Tab>
         ))}
diff --git a/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx b/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
index 2e4b43cbe..92654c1e7 100644
--- a/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
@@ -65,7 +65,8 @@ export const ProjectsPage = () => {
       </Helmet>
       <div className="mb-4 flex flex-col items-start justify-start">
         <PageHeader
-          title="Projects"
+          scope="org"
+          title="Overview"
           description="Your team's complete security toolkit - organized and ready when you need them."
         />
       </div>
diff --git a/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx b/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
index ac67f0d54..8b25247be 100644
--- a/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/RoleByIDPage.tsx
@@ -81,6 +81,7 @@ export const Page = () => {
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="org"
             title={
               <div className="flex flex-col">
                 <div>
diff --git a/frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx b/frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx
index a026b86f3..ec3885f5b 100644
--- a/frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx
+++ b/frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx
@@ -22,6 +22,7 @@ export const SecretSharingPage = () => {
       <div className="h-full">
         <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
           <PageHeader
+            scope="org"
             title="Secret Sharing"
             description="Share secrets securely using a shareable link"
           >
diff --git a/frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx b/frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx
index ae1aa3772..6ee73a03d 100644
--- a/frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx
+++ b/frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx
@@ -21,7 +21,7 @@ export const SecretSharingSettingsPage = withPermission(
         </Helmet>
         <div className="flex w-full justify-center bg-bunker-800 text-white">
           <div className="w-full max-w-7xl">
-            <PageHeader title="Secret Share Settings" />
+            <PageHeader scope="org" title="Secret Share Settings" />
             <SecretSharingSettingsTabGroup />
           </div>
         </div>
diff --git a/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx b/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
index 263672313..52fc99f53 100644
--- a/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
@@ -15,7 +15,7 @@ export const SettingsPage = () => {
       </Helmet>
       <div className="flex w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl">
-          <PageHeader title={t("settings.org.title")} />
+          <PageHeader scope="org" title={t("settings.org.title")} />
           <OrgTabGroup />
         </div>
       </div>
diff --git a/frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx b/frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
index 42a8e5839..ad867238b 100644
--- a/frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
+++ b/frontend/src/pages/organization/SettingsPage/components/OrgTabGroup/OrgTabGroup.tsx
@@ -58,7 +58,7 @@ export const OrgTabGroup = () => {
     <Tabs value={selectedTab} onValueChange={setSelectedTab}>
       <TabList>
         {tabs.map((tab) => (
-          <Tab value={tab.key} key={tab.key}>
+          <Tab variant="org" value={tab.key} key={tab.key}>
             {tab.name}
           </Tab>
         ))}
diff --git a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
index 03a720b98..3153c5fd5 100644
--- a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
@@ -119,6 +119,7 @@ const Page = withPermission(
         {membership && (
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="org"
               title={
                 membership.user.firstName || membership.user.lastName
                   ? `${membership.user.firstName} ${membership.user.lastName ?? ""}`.trim()
diff --git a/frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx b/frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx
index 179d267c4..da8132193 100644
--- a/frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx
+++ b/frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx
@@ -23,7 +23,11 @@ export const PamAccountsPage = () => {
         <div className="h-full bg-bunker-800">
           <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="Accounts" description="View, access, and manage accounts." />
+              <PageHeader
+                scope="project"
+                title="Accounts"
+                description="View, access, and manage accounts."
+              />
               <PamAccountsSection />
             </div>
           </div>
diff --git a/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx b/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
index e8238d8a9..13e9028e6 100644
--- a/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
+++ b/frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx
@@ -24,6 +24,7 @@ export const PamResourcesPage = () => {
           <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
+                scope="project"
                 title="Resources"
                 description="Manage resources such as servers, databases, and more."
               />
diff --git a/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx b/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
index b82c6b6e7..af5b85fc6 100644
--- a/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
+++ b/frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx
@@ -23,6 +23,7 @@ const Page = () => {
       {session && (
         <div className="mx-auto mb-6 flex w-full max-w-7xl flex-col">
           <PageHeader
+            scope="project"
             title={`${session.accountName} Session`}
             description={`View details for this ${session.accountName} session.`}
           />
diff --git a/frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx b/frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx
index 03ca60a3b..526507564 100644
--- a/frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx
+++ b/frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx
@@ -24,6 +24,7 @@ export const PamSessionPage = () => {
           <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
+                scope="project"
                 title="Sessions"
                 description="Filter and search through account sessions."
               />
diff --git a/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx b/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
index 81a0a1d07..b8b23cebd 100644
--- a/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
@@ -13,7 +13,7 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
       <div className="w-full max-w-7xl">
-        <PageHeader title="Settings" description="Configure your PAM project." />
+        <PageHeader scope="project" title="Settings" description="Configure your PAM project." />
         <Tabs defaultValue="tab-project-general">
           <TabList>
             <Tab value="tab-project-general">General</Tab>
diff --git a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
index 9da8770d2..c010fcc39 100644
--- a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
+++ b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
@@ -40,6 +40,7 @@ const Page = () => {
     <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
+          scope="project"
           title="Access Control"
           description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
         />
diff --git a/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx b/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
index 84fb69b83..78665e624 100644
--- a/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
+++ b/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
@@ -23,6 +23,7 @@ export const AppConnectionsPage = withProjectPermission(
         <div className="flex w-full justify-center bg-bunker-800 text-white">
           <div className="w-full max-w-7xl">
             <PageHeader
+              scope="project"
               className="w-full"
               title="App Connections"
               description="Manage project App Connections"
diff --git a/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx b/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
index 1e9b1ad54..37155da70 100644
--- a/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
+++ b/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
@@ -16,6 +16,7 @@ export const AuditLogsPage = () => {
       <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl">
           <PageHeader
+            scope="project"
             title="Audit logs"
             description="Audit logs for security and compliance teams to monitor information access."
           />
diff --git a/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx b/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
index d6bda7ea1..409d78633 100644
--- a/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
@@ -34,7 +34,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {groupMembership ? (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={groupMembership.group.name} />
+          <PageHeader scope="project" title={groupMembership.group.name} />
           <div className="flex">
             <div className="mr-4 w-96">
               <GroupDetailsSection groupMembership={groupMembership} />
diff --git a/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx b/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
index 993320e56..061d537b1 100644
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
@@ -117,6 +117,7 @@ const Page = () => {
       {identityMembershipDetails ? (
         <>
           <PageHeader
+            scope="project"
             title={identityMembershipDetails?.identity?.name}
             description={`Identity joined on ${identityMembershipDetails?.createdAt && formatRelative(new Date(identityMembershipDetails?.createdAt || ""), new Date())}`}
           >
diff --git a/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx b/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
index 23b8299da..717226cfc 100644
--- a/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
@@ -119,6 +119,7 @@ export const Page = () => {
       {membershipDetails ? (
         <>
           <PageHeader
+            scope="project"
             title={
               membershipDetails.user.firstName || membershipDetails.user.lastName
                 ? `${membershipDetails.user.firstName} ${membershipDetails.user.lastName}`
diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
index d8c95907d..3345f2b25 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
@@ -90,6 +90,7 @@ const Page = () => {
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="project"
             title={
               <div className="flex flex-col">
                 <div>
diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
index 714695890..60f634289 100644
--- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
+++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
@@ -260,6 +260,7 @@ export const CommitDetailsTab = ({
         Commit History
       </Button>
       <PageHeader
+        scope="project"
         title={`${parsedCommitDetails.changes?.message}` || "No message"}
         description={
           <>
diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx
index 89124e3b9..a3a25b1cc 100644
--- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx
+++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx
@@ -307,6 +307,7 @@ export const RollbackPreviewTab = (): JSX.Element => {
           <div className="h-full w-full">
             <div>
               <PageHeader
+                scope="project"
                 title={`Restore folder at commit ${selectedCommitId.substring(0, 8)}`}
                 description={`Will return all changes in this folder to how they appeared at the point of commit ${selectedCommitId.substring(0, 8)}. Any modifications made after this commit will be undone.`}
               />
diff --git a/frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx b/frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx
index 2dba8ad55..e456bbdf3 100644
--- a/frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx
+++ b/frontend/src/pages/secret-manager/CommitsPage/CommitsPage.tsx
@@ -49,6 +49,7 @@ export const CommitsPage = () => {
     <div className="mx-auto flex h-full w-full max-w-7xl justify-center bg-bunker-800 py-4 text-white">
       <div className="w-full max-w-[75vw]">
         <PageHeader
+          scope="project"
           title="Commits"
           description="Track, inspect, and restore your secrets and folders with confidence. View the complete history of changes made to your environment, examine specific modifications at each commit point, and preview the exact impact before rolling back to previous states."
         />
diff --git a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
index 98dc087ea..0eaa7dfac 100644
--- a/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx
@@ -94,6 +94,7 @@ export const IntegrationDetailsByIDPage = () => {
         {integration ? (
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="project"
               title={`${integrationSlugNameMapping[integration.integration]} Integration`}
             >
               <DropdownMenu>
diff --git a/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx b/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
index 647af2039..4e2a0a703 100644
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
@@ -48,6 +48,7 @@ export const IntegrationsListPage = () => {
       <div className="relative container mx-auto max-w-7xl pb-12 text-white">
         <div className="mb-8">
           <PageHeader
+            scope="project"
             title="Integrations"
             description="Manage integrations with third-party services."
           />
diff --git a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
index 860f161e9..022b33f88 100644
--- a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
@@ -914,6 +914,7 @@ export const OverviewPage = () => {
       <div className="relative mx-auto max-w-7xl text-mineshaft-50 dark:scheme-dark">
         <div className="flex w-full items-baseline justify-between">
           <PageHeader
+            scope="project"
             title="Secrets Overview"
             description={
               <p className="text-md text-bunker-300">
diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx
index 77106a57c..6813aac07 100644
--- a/frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx
+++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx
@@ -40,6 +40,7 @@ export const SecretApprovalsPage = () => {
       </Helmet>
       <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
         <PageHeader
+          scope="project"
           title="Approval Workflows"
           description="Create approval policies for any modifications to secrets in sensitive environments and folders."
         />
diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
index 2760e8626..da31fcf09 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
@@ -762,6 +762,7 @@ const Page = () => {
   return (
     <div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:scheme-dark">
       <PageHeader
+        scope="project"
         title="Secrets Management"
         description={
           <p className="text-md text-bunker-300">
diff --git a/frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx b/frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
index 0b9263803..f4b474b9e 100644
--- a/frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
+++ b/frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
@@ -147,6 +147,7 @@ const Page = () => {
   return (
     <div className="container mx-auto w-full max-w-7xl bg-bunker-800 text-white">
       <PageHeader
+        scope="project"
         title="Secret Rotation"
         description="Stop manually rotating secrets and automate credential rotation."
       >
diff --git a/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx b/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
index ad037b125..a97775013 100644
--- a/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
@@ -42,6 +42,7 @@ export const SettingsPage = () => {
       </Helmet>
       <div className="w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Settings"
           description="Configure your secret manager's encryption, environments, webhooks and other configurations."
         />
diff --git a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx
index d681c34af..71ffd8286 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx
@@ -26,6 +26,7 @@ export const SecretScanningDataSourcesPage = () => {
           <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
+                scope="project"
                 title="Data Sources"
                 description="Manage your Secret Scanning data sources."
               />
diff --git a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx
index 1eddf5eee..320d29428 100644
--- a/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx
+++ b/frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx
@@ -23,7 +23,11 @@ export const SecretScanningFindingsPage = () => {
         <div className="h-full bg-bunker-800">
           <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="Findings" description="View Secret Leaks across your project." />
+              <PageHeader
+                scope="project"
+                title="Findings"
+                description="View Secret Leaks across your project."
+              />
               <SecretScanningFindingsSection />
             </div>
           </div>
diff --git a/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx b/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
index 07161c360..84a885cff 100644
--- a/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
@@ -19,6 +19,7 @@ export const SettingsPage = () => {
       </Helmet>
       <div className="w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Settings"
           description="Configure your Secret Scanning product's configurations."
         />
diff --git a/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx b/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
index 841bb119f..e820e1488 100644
--- a/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
@@ -17,7 +17,11 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
       <div className="w-full max-w-7xl">
-        <PageHeader title="Settings" description="Configure your SSH product's configurations." />
+        <PageHeader
+          scope="project"
+          title="Settings"
+          description="Configure your SSH product's configurations."
+        />
         <Tabs defaultValue="tab-project-general">
           <TabList>
             <Tab value="tab-project-general">General</Tab>
diff --git a/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx b/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
index 06567b121..4f8325594 100644
--- a/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
+++ b/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
@@ -70,7 +70,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.friendlyName}>
+          <PageHeader scope="project" title={data.friendlyName}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
diff --git a/frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx b/frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx
index 669e26404..1156de3f0 100644
--- a/frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx
+++ b/frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx
@@ -16,6 +16,7 @@ export const SshCasPage = () => {
         <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
+              scope="project"
               title="SSH Certificate Authorities"
               description="Manage the SSH certificate authorities used to sign user and host certificates, including custom and default CAs."
             />
diff --git a/frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx b/frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx
index 617f480a3..0078bd4b2 100644
--- a/frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx
+++ b/frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx
@@ -16,6 +16,7 @@ export const SshCertsPage = () => {
         <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
+              scope="project"
               title="SSH Certificates"
               description="View and audit all issued SSH certificates, including validity and associated access metadata."
             />
diff --git a/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx b/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx
index 1605286a8..8cbca6848 100644
--- a/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx
@@ -71,7 +71,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader scope="project" title={data.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
diff --git a/frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx b/frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx
index c6efa9670..7c83eff1d 100644
--- a/frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx
+++ b/frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx
@@ -16,6 +16,7 @@ export const SshHostsPage = () => {
         <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
+              scope="project"
               title="Hosts"
               description="Manage your SSH hosts, configure access policies, and define login behavior for secure connections."
             />