wip

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",

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"
       }
     }
   }

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}

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">
+      <div className="mr-4 flex w-full items-center">
-        <h1 className="mr-4 text-3xl font-medium text-white capitalize">{title}</h1>
+        <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>

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}

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;

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">

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>
+                  <Badge
-                    <FontAwesomeIcon icon={faBuilding} className="text-xs text-bunker-300" />
+                    variant="org"
-                  </div>
+                    className={twMerge("text-sm", !isOrgScope && "bg-transparent opacity-75")}
-                  <div className="whitespace-nowrap">{currentOrg?.name}</div>
+                  >
+                    <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>

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">

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>
                       )}

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>
                       )}

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,
+  faStar as faSolidStar
-  faTable
 } 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 className="relative 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>
             <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>

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">

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">

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">

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."
           />

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."
           />

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>

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."
           />

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."
           />

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."
           />

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."
           />

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."
           />

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>

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."
         />

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">

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"
         />

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."
         />

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."
           />

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">

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">

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."
             />

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."
             />

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) => (

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."
           />

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

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) => (

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>
               ))}

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"

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 />

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."
           />

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}>

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">

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} />

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"
           />

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>
         ))}

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>

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>

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"
           >

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>

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>

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>
         ))}

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()

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>

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."
               />

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.`}
           />

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."
               />

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>

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."
         />

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"

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."
           />

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} />

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())}`}
           >

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}`

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>

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={
           <>

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.`}
               />

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."
         />

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>

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."
           />

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">

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."
         />

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">

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."
       >

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."
         />

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."
               />

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>

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."
         />

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>

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">

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."
             />

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."
             />

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">

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."
             />