feat: finished breadcrumbs for all project types except secret manager

2026-09-22 13:39:35 +00:00 · 2025-01-16 07:35:04 +05:30
parent 1b1fe2a700
commit 9df8cf60ef
43 changed files with 657 additions and 422 deletions
--- a/frontend/src/layouts/ProjectLayout/ProjectLayout.tsx
+++ b/frontend/src/layouts/ProjectLayout/ProjectLayout.tsx
@@ -1,47 +1,34 @@
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { faMobile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useQueryClient } from "@tanstack/react-query";
-import { Link, Outlet, useNavigate, useRouter } from "@tanstack/react-router";
+import { Link, Outlet, useRouterState } from "@tanstack/react-router";

-import { Mfa } from "@app/components/auth/Mfa";
-import SecurityClient from "@app/components/utilities/SecurityClient";
-import { Menu, MenuGroup, MenuItem } from "@app/components/v2";
-import { useUser, useWorkspace } from "@app/context";
-import { useToggle } from "@app/hooks";
 import {
-  useGetAccessRequestsCount,
-  useGetSecretApprovalRequestCount,
-  useSelectOrganization,
-  workspaceKeys
-} from "@app/hooks/api";
-import { authKeys } from "@app/hooks/api/auth/queries";
-import { MfaMethod } from "@app/hooks/api/auth/types";
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Menu,
+  MenuGroup,
+  MenuItem
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useGetAccessRequestsCount, useGetSecretApprovalRequestCount } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/workspace/types";
-import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";

 import { InsecureConnectionBanner } from "../OrganizationLayout/components/InsecureConnectionBanner";
 import { ProjectSelect } from "./components/ProjectSelect";
-import { SidebarHeader } from "./components/SidebarHeader";

 // This is a generic layout shared by all types of projects.
 // If the product layout differs significantly, create a new layout as needed.
 export const ProjectLayout = () => {
  const { currentWorkspace } = useWorkspace();
-  const navigate = useNavigate();
-
-  const [shouldShowMfa, toggleShowMfa] = useToggle(false);
-  const [requiredMfaMethod, setRequiredMfaMethod] = useState(MfaMethod.EMAIL);
-  const [mfaSuccessCallback, setMfaSuccessCallback] = useState<() => void>(() => {});
-
-  const { user } = useUser();
-
-  const { mutateAsync: selectOrganization } = useSelectOrganization();
+  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
+  const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;

  const { t } = useTranslation();
-  const router = useRouter();
-  const queryClient = useQueryClient();
  const workspaceId = currentWorkspace?.id || "";
  const projectSlug = currentWorkspace?.slug || "";

@@ -62,40 +49,6 @@ export const ProjectLayout = () => {
  const pendingRequestsCount =
    (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);

-  const handleOrgChange = async (orgId: string) => {
-    queryClient.removeQueries({ queryKey: authKeys.getAuthToken });
-    queryClient.removeQueries({ queryKey: workspaceKeys.getAllUserWorkspace() });
-
-    const { token, isMfaEnabled, mfaMethod } = await selectOrganization({
-      organizationId: orgId
-    });
-
-    if (isMfaEnabled) {
-      SecurityClient.setMfaToken(token);
-      if (mfaMethod) {
-        setRequiredMfaMethod(mfaMethod);
-      }
-      toggleShowMfa.on();
-      setMfaSuccessCallback(() => () => handleOrgChange(orgId));
-      return;
-    }
-    await router.invalidate();
-    await navigateUserToOrg(navigate, orgId);
-  };
-
-  if (shouldShowMfa) {
-    return (
-      <div className="flex max-h-screen min-h-screen flex-col items-center justify-center gap-2 overflow-y-auto bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700">
-        <Mfa
-          email={user.email as string}
-          method={requiredMfaMethod}
-          successCallback={mfaSuccessCallback}
-          closeMfa={() => toggleShowMfa.off()}
-        />
-      </div>
-    );
-  }
-
  return (
    <>
      <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
@@ -247,6 +200,33 @@ export const ProjectLayout = () => {
            </nav>
          </aside>
          <main className="flex-1 overflow-y-auto overflow-x-hidden bg-bunker-800 dark:[color-scheme:dark]">
+            {breadcrumbs && (
+              <div className="mx-auto max-w-7xl py-4 capitalize text-white">
+                <Breadcrumb>
+                  <BreadcrumbList>
+                    {breadcrumbs.map((el, index) => {
+                      const isNotLastCrumb = index + 1 !== breadcrumbs.length;
+                      return (
+                        <>
+                          {el.link && isNotLastCrumb && !("disabled" in el.link) ? (
+                            <Link {...el.link}>
+                              <BreadcrumbItem>
+                                <BreadcrumbLink>{el.label}</BreadcrumbLink>
+                              </BreadcrumbItem>
+                            </Link>
+                          ) : (
+                            <BreadcrumbItem>
+                              <BreadcrumbPage>{el.label}</BreadcrumbPage>
+                            </BreadcrumbItem>
+                          )}
+                          {isNotLastCrumb && <BreadcrumbSeparator />}
+                        </>
+                      );
+                    })}
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
+            )}
            <Outlet />
          </main>
        </div>
--- a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx
@@ -13,6 +13,7 @@ import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
+  PageHeader,
  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
@@ -80,34 +81,17 @@ const Page = () => {
  return (
    <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 px-6 py-6">
-          <Button
-            variant="link"
-            type="submit"
-            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            onClick={() =>
-              navigate({
-                to: `/${ProjectType.CertificateManager}/$projectId/overview` as const,
-                params: {
-                  projectId
-                }
-              })
-            }
-            className="mb-4"
-          >
-            Certificate Authorities
-          </Button>
-          <div className="mb-4 flex items-center justify-between">
-            <p className="text-3xl font-semibold text-white">{data.friendlyName}</p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title={data.friendlyName}>
            <DropdownMenu>
              <DropdownMenuTrigger asChild className="rounded-lg">
                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
                  <Tooltip content="More options">
-                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                    <Button variant="outline_bg">More</Button>
                  </Tooltip>
                </div>
              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="p-1">
+              <DropdownMenuContent align="emd" className="p-1">
                <ProjectPermissionCan
                  I={ProjectPermissionActions.Delete}
                  a={ProjectPermissionSub.CertificateAuthorities}
@@ -133,7 +117,7 @@ const Page = () => {
                </ProjectPermissionCan>
              </DropdownMenuContent>
            </DropdownMenu>
-          </div>
+          </PageHeader>
          <div className="flex">
            <div className="mr-4 w-96">
              <CaDetailsSection caId={caId} handlePopUpOpen={handlePopUpOpen} />
--- a/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/route.tsx
+++ b/frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/route.tsx
@@ -1,9 +1,25 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { CertAuthDetailsByIDPage } from "./CertAuthDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/ca/$caId"
 )({
-  component: CertAuthDetailsByIDPage
+  component: CertAuthDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Certificate Authorities",
+          link: linkOptions({
+            to: "/cert-manager/$projectId/overview",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
+++ b/frontend/src/pages/cert-manager/CertificatesPage/CertificatesPage.tsx
@@ -2,7 +2,7 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";

 import { CaTab, CertificatesTab, PkiAlertsTab } from "./components";
@@ -19,11 +19,9 @@ export const CertificatesPage = () => {
    <div className="container mx-auto flex h-full flex-col justify-between bg-bunker-800 text-white">
      <Helmet>
        <title>{t("common.head-title", { title: "Certificates" })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
      </Helmet>
-      <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
-        <p className="mb-4 mr-4 text-3xl font-semibold text-white">Internal PKI</p>
+      <div className="mx-auto mb-6 w-full max-w-7xl">
+        <PageHeader title="Overview" />
        <Tabs defaultValue={TabSections.Certificates}>
          <TabList>
            <Tab value={TabSections.Certificates}>Certificates</Tab>
--- a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
+++ b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/PkiCollectionDetailsByIDPage.tsx
@@ -1,7 +1,5 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";

@@ -14,6 +12,7 @@ import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
+  PageHeader,
  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
@@ -74,34 +73,17 @@ export const PkiCollectionPage = () => {
  return (
    <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 px-6 py-6">
-          <Button
-            variant="link"
-            type="submit"
-            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            onClick={() => {
-              navigate({
-                to: `/${ProjectType.CertificateManager}/$projectId/overview` as const,
-                params: {
-                  projectId
-                }
-              });
-            }}
-            className="mb-4"
-          >
-            Certificate Collections
-          </Button>
-          <div className="mb-4 flex items-center justify-between">
-            <p className="text-3xl font-semibold text-white">{data.name}</p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title={data.name}>
            <DropdownMenu>
              <DropdownMenuTrigger asChild className="rounded-lg">
                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
                  <Tooltip content="More options">
-                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                    <Button variant="outline_bg">More</Button>
                  </Tooltip>
                </div>
              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="p-1">
+              <DropdownMenuContent align="end" className="p-1">
                <ProjectPermissionCan
                  I={ProjectPermissionActions.Edit}
                  a={ProjectPermissionSub.PkiCollections}
@@ -147,7 +129,7 @@ export const PkiCollectionPage = () => {
                </ProjectPermissionCan>
              </DropdownMenuContent>
            </DropdownMenu>
-          </div>
+          </PageHeader>
          <div className="flex">
            <div className="mr-4 w-96">
              <PkiCollectionDetailsSection
--- a/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/routes.tsx
+++ b/frontend/src/pages/cert-manager/PkiCollectionDetailsByIDPage/routes.tsx
@@ -1,9 +1,25 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { PkiCollectionDetailsByIDPage } from "./PkiCollectionDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/pki-collections/$collectionId"
 )({
-  component: PkiCollectionDetailsByIDPage
+  component: PkiCollectionDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Certificate Collections",
+          link: linkOptions({
+            to: "/cert-manager/$projectId/overview",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
@@ -1,7 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";

 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";

@@ -14,12 +14,9 @@ export const SettingsPage = () => {
    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
      </Helmet>
-      <div className="w-full max-w-7xl px-6">
-        <div className="my-6">
-          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
-        </div>
+      <div className="w-full max-w-7xl">
+        <PageHeader title={t("settings.project.title")} />
        <Tabs defaultValue={tabs[0].key}>
          <TabList>
            {tabs.map((tab) => (
--- a/frontend/src/pages/cert-manager/SettingsPage/route.tsx
+++ b/frontend/src/pages/cert-manager/SettingsPage/route.tsx
@@ -5,5 +5,15 @@ import { SettingsPage } from "./SettingsPage";
 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/settings"
 )({
-  component: SettingsPage
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/cert-manager/layout.tsx
+++ b/frontend/src/pages/cert-manager/layout.tsx
@@ -1,21 +1,16 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { workspaceKeys } from "@app/hooks/api";
 import { fetchUserProjectPermissions, roleQueryKeys } from "@app/hooks/api/roles/queries";
 import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
 import { ProjectLayout } from "@app/layouts/ProjectLayout";
-import { OrganizationLayout } from "@app/layouts/OrganizationLayout";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout"
 )({
-  component: () => (
-    <OrganizationLayout>
-      <ProjectLayout />
-    </OrganizationLayout>
-  ),
+  component: ProjectLayout,
  beforeLoad: async ({ params, context }) => {
-    await context.queryClient.ensureQueryData({
+    const project = await context.queryClient.ensureQueryData({
      queryKey: workspaceKeys.getWorkspaceById(params.projectId),
      queryFn: () => fetchWorkspaceById(params.projectId)
    });
@@ -26,5 +21,21 @@ export const Route = createFileRoute(
      }),
      queryFn: () => fetchUserProjectPermissions({ workspaceId: params.projectId })
    });
+
+    return {
+      breadcrumbs: [
+        {
+          label: "Cert Managers",
+          link: linkOptions({ to: "/organization/cert-manager/overview" })
+        },
+        {
+          label: project.name,
+          link: linkOptions({
+            to: "/cert-manager/$projectId/overview",
+            params: { projectId: project.id }
+          })
+        }
+      ]
+    };
  }
 });
--- a/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
@@ -5,6 +5,7 @@ import { ProjectPermissionCan } from "@app/components/permissions";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";

 import { CmekTable } from "./components";
+import { PageHeader } from "@app/components/v2";

 export const OverviewPage = () => {
  const { t } = useTranslation();
@@ -13,15 +14,13 @@ export const OverviewPage = () => {
    <div className="h-full bg-bunker-800">
      <Helmet>
        <title>{t("common.head-title", { title: "KMS" })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
      </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 px-6 py-6">
-          <p className="mr-4 text-3xl font-semibold text-white">Key Management System</p>
-          <p className="text-md mb-4 text-bunker-300">
-            Manage keys and perform cryptographic operations.
-          </p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="OverviewPage"
+            description="Manage keys and perform cryptographic operations."
+          />
          <ProjectPermissionCan
            passThrough={false}
            renderGuardBanner
--- a/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
@@ -1,7 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";

 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";

@@ -14,12 +14,9 @@ export const SettingsPage = () => {
    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
      </Helmet>
-      <div className="w-full max-w-7xl px-6">
-        <div className="my-6">
-          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
-        </div>
+      <div className="w-full max-w-7xl">
+        <PageHeader title={t("settings.project.title")} />
        <Tabs defaultValue={tabs[0].key}>
          <TabList>
            {tabs.map((tab) => (
--- a/frontend/src/pages/kms/SettingsPage/route.tsx
+++ b/frontend/src/pages/kms/SettingsPage/route.tsx
@@ -5,5 +5,15 @@ import { SettingsPage } from "./SettingsPage";
 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout/settings"
 )({
-  component: SettingsPage
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/kms/layout.tsx
+++ b/frontend/src/pages/kms/layout.tsx
@@ -1,21 +1,16 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { workspaceKeys } from "@app/hooks/api";
 import { fetchUserProjectPermissions, roleQueryKeys } from "@app/hooks/api/roles/queries";
 import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
-import { OrganizationLayout } from "@app/layouts/OrganizationLayout";
 import { ProjectLayout } from "@app/layouts/ProjectLayout";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout"
 )({
-  component: () => (
-    <OrganizationLayout>
-      <ProjectLayout />
-    </OrganizationLayout>
-  ),
+  component: ProjectLayout,
  beforeLoad: async ({ params, context }) => {
-    await context.queryClient.ensureQueryData({
+    const project = await context.queryClient.ensureQueryData({
      queryKey: workspaceKeys.getWorkspaceById(params.projectId),
      queryFn: () => fetchWorkspaceById(params.projectId)
    });
@@ -26,5 +21,21 @@ export const Route = createFileRoute(
      }),
      queryFn: () => fetchUserProjectPermissions({ workspaceId: params.projectId })
    });
+
+    return {
+      breadcrumbs: [
+        {
+          label: "KMS",
+          link: linkOptions({ to: "/organization/kms/overview" })
+        },
+        {
+          label: project.name,
+          link: linkOptions({
+            to: "/kms/$projectId/overview",
+            params: { projectId: project.id }
+          })
+        }
+      ]
+    };
  }
 });
--- a/frontend/src/pages/organization/RoleByIDPage/route.tsx
+++ b/frontend/src/pages/organization/RoleByIDPage/route.tsx
@@ -17,7 +17,7 @@ export const Route = createFileRoute(
        link: linkOptions({ to: "/organization/access-management" })
      },
      {
-        label: "RBAC"
+        label: "Roles"
      }
    ]
  })
--- a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
+++ b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
@@ -2,7 +2,7 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useSearch } from "@tanstack/react-router";

-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { getProjectTitle } from "@app/helpers/project";
 import { withProjectPermission } from "@app/hoc";
@@ -38,11 +38,11 @@ const Page = withProjectPermission(

    return (
      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
-        <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
-          <p className="mb-4 mr-4 text-3xl font-semibold text-white">
-            {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access
-            Control
-          </p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader
+            title="Access Control"
+            description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
+          />
          <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
            <TabList>
              <Tab value={ProjectAccessControlTabs.Member}>Users</Tab>
--- a/frontend/src/pages/project/AccessControlPage/route-cert-manager.tsx
+++ b/frontend/src/pages/project/AccessControlPage/route-cert-manager.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

@@ -14,5 +14,21 @@ export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/access-management"
 )({
  component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema)
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/cert-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/AccessControlPage/route-kms.tsx
+++ b/frontend/src/pages/project/AccessControlPage/route-kms.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

@@ -14,5 +14,21 @@ export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout/access-management"
 )({
  component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema)
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/kms/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/AccessControlPage/route-secret-manager.tsx
+++ b/frontend/src/pages/project/AccessControlPage/route-secret-manager.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

@@ -14,5 +14,21 @@ export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/access-management"
 )({
  component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema)
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/AccessControlPage/route-ssh.tsx
+++ b/frontend/src/pages/project/AccessControlPage/route-ssh.tsx
@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

@@ -14,5 +14,21 @@ export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/ssh/$projectId/_ssh-layout/access-management"
 )({
  component: AccessControlPage,
-  validateSearch: zodValidator(AccessControlPageQuerySchema)
+  validateSearch: zodValidator(AccessControlPageQuerySchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/ssh/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
@@ -4,11 +4,11 @@ import { subject } from "@casl/ability";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
-import { format } from "date-fns";
+import { format, formatRelative } from "date-fns";

 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal, EmptyState, Spinner } from "@app/components/v2";
+import { Button, DeleteActionModal, EmptyState, PageHeader, Spinner } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
 import { getProjectTitle } from "@app/helpers/project";
 import { usePopUp } from "@app/hooks";
@@ -82,78 +82,37 @@ const Page = () => {
  }

  return (
-    <div className="container mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 p-6 text-white">
-      <div className="mb-4">
-        <Button
-          variant="link"
-          type="submit"
-          leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-          onClick={() => {
-            navigate({
-              to: `/${currentWorkspace.type}/$projectId/access-management` as const,
-              params: {
-                projectId: workspaceId
-              },
-              search: {
-                selectedTab: "identities"
-              }
-            });
-          }}
-          className="mb-4"
-        >
-          {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access
-          Control
-        </Button>
-      </div>
+    <div className="container mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 text-white">
      {identityMembershipDetails ? (
        <>
-          <div className="mb-4">
-            <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-              <div className="mb-4 flex items-center justify-between">
-                <h3 className="text-xl font-semibold text-mineshaft-100">
-                  Project Identity Access
-                </h3>
-                <div>
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Delete}
-                    a={subject(ProjectPermissionSub.Identity, {
-                      identityId: identityMembershipDetails?.identity?.id
-                    })}
-                    renderTooltip
-                    allowedLabel="Remove from project"
+          <PageHeader
+            title={identityMembershipDetails?.identity?.name}
+            description={`Identity joined on ${identityMembershipDetails?.createdAt && formatRelative(new Date(identityMembershipDetails?.createdAt || ""), new Date())}`}
+          >
+            <div>
+              <ProjectPermissionCan
+                I={ProjectPermissionActions.Delete}
+                a={subject(ProjectPermissionSub.Identity, {
+                  identityId: identityMembershipDetails?.identity?.id
+                })}
+                renderTooltip
+                allowedLabel="Remove from project"
+              >
+                {(isAllowed) => (
+                  <Button
+                    colorSchema="danger"
+                    variant="outline_bg"
+                    size="xs"
+                    isDisabled={!isAllowed}
+                    isLoading={isDeletingIdentity}
+                    onClick={() => handlePopUpOpen("deleteIdentity")}
                  >
-                    {(isAllowed) => (
-                      <Button
-                        colorSchema="danger"
-                        variant="outline_bg"
-                        size="xs"
-                        isDisabled={!isAllowed}
-                        isLoading={isDeletingIdentity}
-                        onClick={() => handlePopUpOpen("deleteIdentity")}
-                      >
-                        Remove Identity
-                      </Button>
-                    )}
-                  </ProjectPermissionCan>
-                </div>
-              </div>
-              <div className="flex gap-12">
-                <div>
-                  <span className="text-xs font-semibold text-gray-400">Name</span>
-                  {identityMembershipDetails && (
-                    <p className="text-lg capitalize">
-                      {identityMembershipDetails?.identity?.name}
-                    </p>
-                  )}
-                </div>
-              </div>
-              <div className="mt-4 text-sm text-gray-400">
-                Joined on{" "}
-                {identityMembershipDetails?.createdAt &&
-                  format(new Date(identityMembershipDetails?.createdAt || ""), "yyyy-MM-dd")}
-              </div>
+                    Remove Identity
+                  </Button>
+                )}
+              </ProjectPermissionCan>
            </div>
-          </div>
+          </PageHeader>
          <IdentityRoleDetailsSection
            identityMembershipDetails={identityMembershipDetails}
            isMembershipDetailsLoading={isMembershipDetailsLoading}
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/route-cert-manager.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/route-cert-manager.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/identities/$identityId"
 )({
-  component: IdentityDetailsByIDPage
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/cert-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Identities"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/route-kms.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/route-kms.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout/identities/$identityId"
 )({
-  component: IdentityDetailsByIDPage
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/kms/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Identities"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/route-secret-manager.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/route-secret-manager.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/identities/$identityId"
 )({
-  component: IdentityDetailsByIDPage
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Identities"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/route-ssh.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/route-ssh.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/ssh/$projectId/_ssh-layout/identities/$identityId"
 )({
-  component: IdentityDetailsByIDPage
+  component: IdentityDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/ssh/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Identities"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
@@ -1,21 +1,18 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
-import { format } from "date-fns";
+import { formatRelative } from "date-fns";

 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Button, DeleteActionModal, EmptyState, Spinner } from "@app/components/v2";
+import { Button, DeleteActionModal, EmptyState, PageHeader, Spinner } from "@app/components/v2";
 import {
  ProjectPermissionActions,
  ProjectPermissionSub,
  useOrganization,
  useWorkspace
 } from "@app/context";
-import { getProjectTitle } from "@app/helpers/project";
 import { usePopUp } from "@app/hooks";
 import { useDeleteUserFromWorkspace, useGetWorkspaceUserDetails } from "@app/hooks/api";

@@ -83,76 +80,36 @@ export const Page = () => {

  return (
    <div className="container mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 p-6 text-white">
-      <div className="mb-4">
-        <Button
-          variant="link"
-          type="submit"
-          leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-          onClick={() => {
-            navigate({
-              to: `/${currentWorkspace.type}/$projectId/access-management` as const,
-              params: {
-                projectId: currentWorkspace.id
-              }
-            });
-          }}
-          className="mb-4"
-        >
-          {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access
-          Control
-        </Button>
-      </div>
      {membershipDetails ? (
        <>
-          <div className="mb-4">
-            <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-              <div className="mb-4 flex items-center justify-between">
-                <h3 className="text-xl font-semibold text-mineshaft-100">Project User Access</h3>
-                <div>
-                  <ProjectPermissionCan
-                    I={ProjectPermissionActions.Delete}
-                    a={ProjectPermissionSub.Member}
-                    renderTooltip
-                    allowedLabel="Remove from project"
-                  >
-                    {(isAllowed) => (
-                      <Button
-                        colorSchema="danger"
-                        variant="outline_bg"
-                        size="xs"
-                        isDisabled={!isAllowed}
-                        isLoading={isRemovingUserFromWorkspace}
-                        onClick={() => handlePopUpOpen("removeMember")}
-                      >
-                        Remove User
-                      </Button>
-                    )}
-                  </ProjectPermissionCan>
-                </div>
-              </div>
-              <div className="flex gap-12">
-                <div>
-                  <span className="text-xs font-semibold text-gray-400">Name</span>
-                  {membershipDetails && (
-                    <p className="text-lg capitalize">
-                      {membershipDetails.user.firstName || membershipDetails.user.lastName
-                        ? `${membershipDetails.user.firstName} ${membershipDetails.user.lastName}`
-                        : "-"}
-                    </p>
-                  )}
-                </div>
-                <div>
-                  <span className="text-xs font-semibold text-gray-400">Email</span>
-                  {membershipDetails && <p className="text-lg">{membershipDetails?.user?.email}</p>}
-                </div>
-              </div>
-              <div className="mt-4 text-sm text-gray-400">
-                Joined on{" "}
-                {membershipDetails?.createdAt &&
-                  format(new Date(membershipDetails?.createdAt || ""), "yyyy-MM-dd")}
-              </div>
-            </div>
-          </div>
+          <PageHeader
+            title={
+              membershipDetails.user.firstName || membershipDetails.user.lastName
+                ? `${membershipDetails.user.firstName} ${membershipDetails.user.lastName}`
+                : "-"
+            }
+            description={`User joined on ${membershipDetails?.createdAt && formatRelative(new Date(membershipDetails?.createdAt || ""), new Date())}`}
+          >
+            <ProjectPermissionCan
+              I={ProjectPermissionActions.Delete}
+              a={ProjectPermissionSub.Member}
+              renderTooltip
+              allowedLabel="Remove from project"
+            >
+              {(isAllowed) => (
+                <Button
+                  colorSchema="danger"
+                  variant="outline_bg"
+                  size="xs"
+                  isDisabled={!isAllowed}
+                  isLoading={isRemovingUserFromWorkspace}
+                  onClick={() => handlePopUpOpen("removeMember")}
+                >
+                  Remove User
+                </Button>
+              )}
+            </ProjectPermissionCan>
+          </PageHeader>
          <MemberRoleDetailsSection
            membershipDetails={membershipDetails}
            isMembershipDetailsLoading={isMembershipDetailsLoading}
--- a/frontend/src/pages/project/MemberDetailsByIDPage/route-cert-manager.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/route-cert-manager.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { MemberDetailsByIDPage } from "./MemberDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/members/$membershipId"
 )({
-  component: MemberDetailsByIDPage
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/cert-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Users"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/MemberDetailsByIDPage/route-kms.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/route-kms.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { MemberDetailsByIDPage } from "./MemberDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout/members/$membershipId"
 )({
-  component: MemberDetailsByIDPage
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/kms/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Users"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/MemberDetailsByIDPage/route-secret-manager.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/route-secret-manager.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { MemberDetailsByIDPage } from "./MemberDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/members/$membershipId"
 )({
-  component: MemberDetailsByIDPage
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Users"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/MemberDetailsByIDPage/route-ssh.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/route-ssh.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { MemberDetailsByIDPage } from "./MemberDetailsByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/ssh/$projectId/_ssh-layout/members/$membershipId"
 )({
-  component: MemberDetailsByIDPage
+  component: MemberDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/ssh/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Users"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
@@ -1,7 +1,5 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";

@@ -14,6 +12,7 @@ import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
+  PageHeader,
  Tooltip
 } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
@@ -83,38 +82,18 @@ const Page = () => {
  return (
    <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 px-6 py-6">
-          <Button
-            variant="link"
-            type="submit"
-            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            onClick={() =>
-              navigate({
-                to: `/${currentWorkspace?.type}/$projectId/access-management` as const,
-                params: {
-                  projectId
-                },
-                search: {
-                  selectedTab: ProjectAccessControlTabs.Roles
-                }
-              })
-            }
-            className="mb-4"
-          >
-            Roles
-          </Button>
-          <div className="mb-4 flex items-center justify-between">
-            <p className="text-3xl font-semibold text-white">{data.name}</p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title={data.name}>
            {isCustomRole && (
              <DropdownMenu>
                <DropdownMenuTrigger asChild className="rounded-lg">
                  <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
                    <Tooltip content="More options">
-                      <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                      <Button variant="outline_bg">More</Button>
                    </Tooltip>
                  </div>
                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="p-1">
+                <DropdownMenuContent align="end" className="p-1">
                  <ProjectPermissionCan
                    I={ProjectPermissionActions.Edit}
                    a={ProjectPermissionSub.Role}
@@ -156,7 +135,7 @@ const Page = () => {
                </DropdownMenuContent>
              </DropdownMenu>
            )}
-          </div>
+          </PageHeader>
          <div className="flex">
            <div className="mr-4 w-96">
              <RoleDetailsSection roleSlug={roleSlug} handlePopUpOpen={handlePopUpOpen} />
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/route-cert-manager.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/route-cert-manager.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { RoleDetailsBySlugPage } from "./RoleDetailsBySlugPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/roles/$roleSlug"
 )({
-  component: RoleDetailsBySlugPage
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/cert-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Roles"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/route-kms.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/route-kms.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { RoleDetailsBySlugPage } from "./RoleDetailsBySlugPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout/roles/$roleSlug"
 )({
-  component: RoleDetailsBySlugPage
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/kms/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Roles"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/route-secret-manager.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/route-secret-manager.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { RoleDetailsBySlugPage } from "./RoleDetailsBySlugPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/roles/$roleSlug"
 )({
-  component: RoleDetailsBySlugPage
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Roles"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/route-ssh.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/route-ssh.tsx
@@ -1,9 +1,28 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { RoleDetailsBySlugPage } from "./RoleDetailsBySlugPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/ssh/$projectId/_ssh-layout/roles/$roleSlug"
 )({
-  component: RoleDetailsBySlugPage
+  component: RoleDetailsBySlugPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Access Control",
+          link: linkOptions({
+            to: "/ssh/$projectId/access-management",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        },
+        {
+          label: "Roles"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
@@ -1,7 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";

@@ -42,12 +42,9 @@ export const SettingsPage = () => {
    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
      </Helmet>
-      <div className="w-full max-w-7xl px-6">
-        <div className="my-6">
-          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
-        </div>
+      <div className="w-full max-w-7xl">
+        <PageHeader title={t("settings.project.title")} />
        <Tabs defaultValue={tabs[0].key}>
          <TabList>
            {tabs
--- a/frontend/src/pages/secret-manager/SettingsPage/route.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/route.tsx
@@ -5,5 +5,15 @@ import { SettingsPage } from "./SettingsPage";
 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/settings"
 )({
-  component: SettingsPage
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/secret-manager/layout.tsx
+++ b/frontend/src/pages/secret-manager/layout.tsx
@@ -1,21 +1,16 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { workspaceKeys } from "@app/hooks/api";
 import { fetchUserProjectPermissions, roleQueryKeys } from "@app/hooks/api/roles/queries";
 import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
 import { ProjectLayout } from "@app/layouts/ProjectLayout";
-import { OrganizationLayout } from "@app/layouts/OrganizationLayout";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout"
 )({
-  component: () => (
-    <OrganizationLayout>
-      <ProjectLayout />
-    </OrganizationLayout>
-  ),
+  component: ProjectLayout,
  beforeLoad: async ({ params, context }) => {
-    await context.queryClient.ensureQueryData({
+    const project = await context.queryClient.ensureQueryData({
      queryKey: workspaceKeys.getWorkspaceById(params.projectId),
      queryFn: () => fetchWorkspaceById(params.projectId)
    });
@@ -26,5 +21,21 @@ export const Route = createFileRoute(
      }),
      queryFn: () => fetchUserProjectPermissions({ workspaceId: params.projectId })
    });
+
+    return {
+      breadcrumbs: [
+        {
+          label: "Secret Managers",
+          link: linkOptions({ to: "/organization/secret-manager/overview" })
+        },
+        {
+          label: project.name,
+          link: linkOptions({
+            to: "/secret-manager/$projectId/overview",
+            params: { projectId: project.id }
+          })
+        }
+      ]
+    };
  }
 });
--- a/frontend/src/pages/ssh/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/ssh/OverviewPage/OverviewPage.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { motion } from "framer-motion";

 import { ProjectPermissionCan } from "@app/components/permissions";
-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";

 import { SshCaSection, SshCertificatesSection } from "./components";
@@ -19,12 +19,14 @@ export const OverviewPage = () => {
    <>
      <Helmet>
        <title>{t("common.head-title", { title: "Certificates" })}</title>
-        <meta property="og:image" content="/images/message.png" />
      </Helmet>
      <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 px-6 py-6">
-            <p className="mb-4 mr-4 text-3xl font-semibold text-white">SSH</p>
+          <div className="mx-auto mb-6 w-full max-w-7xl">
+            <PageHeader
+              title="Overview"
+              description="Infisical SSH lets you issue SSH credentials to clients to provide short-lived, secure SSH access to infrastructure."
+            />
            <Tabs defaultValue={TabSections.SshCertificates}>
              <TabList>
                <Tab value={TabSections.SshCertificates}>SSH Certificates</Tab>
--- a/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
@@ -1,7 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";

 import { ProjectGeneralTab } from "./components/ProjectGeneralTab";

@@ -15,10 +15,8 @@ export const SettingsPage = () => {
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
      </Helmet>
-      <div className="w-full max-w-7xl px-6">
-        <div className="my-6">
-          <p className="text-3xl font-semibold text-gray-200">{t("settings.project.title")}</p>
-        </div>
+      <div className="w-full max-w-7xl">
+        <PageHeader title={t("settings.project.title")} />
        <Tabs defaultValue={tabs[0].key}>
          <TabList>
            {tabs.map((tab) => (
--- a/frontend/src/pages/ssh/SettingsPage/route.tsx
+++ b/frontend/src/pages/ssh/SettingsPage/route.tsx
@@ -5,5 +5,15 @@ import { SettingsPage } from "./SettingsPage";
 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/ssh/$projectId/_ssh-layout/settings"
 )({
-  component: SettingsPage
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
+++ b/frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx
@@ -1,6 +1,4 @@
 import { Helmet } from "react-helmet";
-import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";

@@ -13,6 +11,7 @@ import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
+  PageHeader,
  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
@@ -71,34 +70,17 @@ const Page = () => {
  return (
    <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 px-6 py-6">
-          <Button
-            variant="link"
-            type="submit"
-            leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-            onClick={() =>
-              navigate({
-                to: `/${ProjectType.SSH}/$projectId/overview`,
-                params: {
-                  projectId
-                }
-              })
-            }
-            className="mb-4"
-          >
-            SSH Certificate Authorities
-          </Button>
-          <div className="mb-4 flex items-center justify-between">
-            <p className="text-3xl font-semibold text-white">{data.friendlyName}</p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title={data.friendlyName}>
            <DropdownMenu>
              <DropdownMenuTrigger asChild className="rounded-lg">
                <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
                  <Tooltip content="More options">
-                    <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                    <Button variant="outline_bg">More</Button>
                  </Tooltip>
                </div>
              </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="p-1">
+              <DropdownMenuContent align="end" className="p-1">
                <ProjectPermissionCan
                  I={ProjectPermissionActions.Delete}
                  a={ProjectPermissionSub.SshCertificateAuthorities}
@@ -123,7 +105,7 @@ const Page = () => {
                </ProjectPermissionCan>
              </DropdownMenuContent>
            </DropdownMenu>
-          </div>
+          </PageHeader>
          <div className="flex">
            <div className="mr-4 w-96">
              <SshCaDetailsSection caId={caId} handlePopUpOpen={handlePopUpOpen} />
--- a/frontend/src/pages/ssh/SshCaByIDPage/route.tsx
+++ b/frontend/src/pages/ssh/SshCaByIDPage/route.tsx
@@ -1,9 +1,25 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { SshCaByIDPage } from "./SshCaByIDPage";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/ssh/$projectId/_ssh-layout/ca/$caId"
 )({
-  component: SshCaByIDPage
+  component: SshCaByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "SSH Certificate Authorities",
+          link: linkOptions({
+            to: "/ssh/$projectId/overview",
+            params: {
+              projectId: params.projectId
+            }
+          })
+        }
+      ]
+    };
+  }
 });
--- a/frontend/src/pages/ssh/layout.tsx
+++ b/frontend/src/pages/ssh/layout.tsx
@@ -1,21 +1,16 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { workspaceKeys } from "@app/hooks/api";
 import { fetchUserProjectPermissions, roleQueryKeys } from "@app/hooks/api/roles/queries";
 import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
 import { ProjectLayout } from "@app/layouts/ProjectLayout";
-import { OrganizationLayout } from "@app/layouts/OrganizationLayout";

 export const Route = createFileRoute(
  "/_authenticate/_inject-org-details/ssh/$projectId/_ssh-layout"
 )({
-  component: () => (
-    <OrganizationLayout>
-      <ProjectLayout />
-    </OrganizationLayout>
-  ),
+  component: ProjectLayout,
  beforeLoad: async ({ params, context }) => {
-    await context.queryClient.ensureQueryData({
+    const project = await context.queryClient.ensureQueryData({
      queryKey: workspaceKeys.getWorkspaceById(params.projectId),
      queryFn: () => fetchWorkspaceById(params.projectId)
    });
@@ -26,5 +21,21 @@ export const Route = createFileRoute(
      }),
      queryFn: () => fetchUserProjectPermissions({ workspaceId: params.projectId })
    });
+
+    return {
+      breadcrumbs: [
+        {
+          label: "SSH",
+          link: linkOptions({ to: "/organization/ssh/overview" })
+        },
+        {
+          label: project.name,
+          link: linkOptions({
+            to: "/ssh/$projectId/overview",
+            params: { projectId: project.id }
+          })
+        }
+      ]
+    };
  }
 });