chore: resolve merge conflicts

2026-10-15 11:38:55 +00:00 · 2025-01-21 21:30:18 -08:00
parent 99ca9e04f8 6cdc71b9b1
commit a89e6b6e58
248 changed files with 6864 additions and 4051 deletions
@@ -80,7 +80,7 @@ export const LoginPage = () => {
          />
        </div>
      </Link>
-      <div className="pb-28">{renderView()}</div>;
+      <div className="pb-28">{renderView()}</div>
    </div>
  );
 };
@@ -59,7 +59,7 @@ export const LoginSsoPage = () => {
          />
        </div>
      </Link>
-      <div>{renderView()}</div>;
+      <div>{renderView()}</div>
    </div>
  );
 };
@@ -85,8 +85,7 @@ export const SelectOrganizationPage = () => {
          }
        }

-        window.open(url);
-        window.close();
+        window.location.href = url;
        return;
      }

@@ -89,7 +89,7 @@ export const SignupSsoPage = () => {
          alt="Infisical Logo"
        />
      </div>
-      <div>{renderView()}</div>;
+      <div>{renderView()}</div>
    </div>
  );
 };
@@ -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";
@@ -80,34 +79,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="end" className="p-1">
                <ProjectPermissionCan
                  I={ProjectPermissionActions.Delete}
                  a={ProjectPermissionSub.CertificateAuthorities}
@@ -133,7 +115,7 @@ const Page = () => {
                </ProjectPermissionCan>
              </DropdownMenuContent>
            </DropdownMenu>
-          </div>
+          </PageHeader>
          <div className="flex">
            <div className="mr-4 w-96">
              <CaDetailsSection caId={caId} handlePopUpOpen={handlePopUpOpen} />
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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
+            }
+          })
+        }
+      ]
+    };
+  }
 });
@@ -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>
@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { CertificatesPage } from "./CertificatesPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/overview"
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/overview"
 )({
  component: CertificatesPage
 });
@@ -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
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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
+            }
+          })
+        }
+      ]
+    };
+  }
 });
@@ -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) => (
@@ -3,7 +3,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { SettingsPage } from "./SettingsPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/settings"
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout/settings"
 )({
-  component: SettingsPage
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
 });
@@ -1,4 +1,4 @@
-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";
@@ -6,11 +6,11 @@ import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
 import { ProjectLayout } from "@app/layouts/ProjectLayout";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout"
+  "/_authenticate/_inject-org-details/_org-layout/cert-manager/$projectId/_cert-manager-layout"
 )({
  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)
    });
@@ -21,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 }
+          })
+        }
+      ]
+    };
  }
 });
@@ -2,6 +2,7 @@ import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

 import { ProjectPermissionCan } from "@app/components/permissions";
+import { PageHeader } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";

 import { CmekTable } from "./components";
@@ -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
@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { OverviewPage } from "./OverviewPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout/overview"
+  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/overview"
 )({
  component: OverviewPage
 });
@@ -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) => (
@@ -3,7 +3,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { SettingsPage } from "./SettingsPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout/settings"
+  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout/settings"
 )({
-  component: SettingsPage
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
 });
@@ -1,4 +1,4 @@
-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";
@@ -6,11 +6,11 @@ import { fetchWorkspaceById } from "@app/hooks/api/workspace/queries";
 import { ProjectLayout } from "@app/layouts/ProjectLayout";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout"
+  "/_authenticate/_inject-org-details/_org-layout/kms/$projectId/_kms-layout"
 )({
  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)
    });
@@ -21,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 }
+          })
+        }
+      ]
+    };
  }
 });
@@ -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 { ROUTE_PATHS } from "@app/const/routes";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
 import { OrgAccessControlTabSections } from "@app/types/org";
@@ -59,8 +59,11 @@ export const AccessManagementPage = () => {
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
      </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">Organization Access Control</p>
+      <div className="mx-auto mb-6 w-full max-w-7xl">
+        <PageHeader
+          title="Organization Access Control"
+          description="Manage fine-grained access for users, groups, roles, and identities within your organization resources."
+        />
        <Tabs value={selectedTab} onValueChange={updateSelectedTab}>
          <TabList>
            {tabSections
@@ -44,13 +44,13 @@ import {
 } from "@app/context";
 import { usePagination, useResetPageHelper } from "@app/hooks";
 import {
-  useAddUsersToOrg,
  useFetchServerStatus,
  useGetOrgRoles,
  useGetOrgUsers,
  useUpdateOrgMembership
 } from "@app/hooks/api";
 import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { useResendOrgMemberInvitation } from "@app/hooks/api/users/mutation";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 type Props = {
@@ -83,7 +83,7 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
  const { data: serverDetails } = useFetchServerStatus();
  const { data: members = [], isPending: isMembersLoading } = useGetOrgUsers(orgId);

-  const { mutateAsync: addUsersMutateAsync } = useAddUsersToOrg();
+  const { mutateAsync: resendOrgMemberInvitation } = useResendOrgMemberInvitation();
  const { mutateAsync: updateOrgMembership } = useUpdateOrgMembership();

  const onRoleChange = async (membershipId: string, role: string) => {
@@ -119,26 +119,25 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
    }
  };

-  const onResendInvite = async (email: string) => {
+  const onResendInvite = async (membershipId: string) => {
    try {
-      const { data } = await addUsersMutateAsync({
-        organizationId: orgId,
-        inviteeEmails: [email],
-        organizationRoleSlug: "member"
+      const signupToken = await resendOrgMemberInvitation({
+        membershipId
      });

-      setCompleteInviteLinks(data?.completeInviteLinks || null);
-
-      if (!data.completeInviteLinks) {
-        createNotification({
-          text: `Successfully resent invite to ${email}`,
-          type: "success"
-        });
+      if (signupToken) {
+        setCompleteInviteLinks([signupToken]);
+        return;
      }
+
+      createNotification({
+        text: "Successfully resent org invitation",
+        type: "success"
+      });
    } catch (err) {
      console.error(err);
      createNotification({
-        text: `Failed to resend invite to ${email}`,
+        text: "Failed to resend org invitation",
        type: "error"
      });
    }
@@ -370,7 +369,10 @@ export const OrgMembersTable = ({ handlePopUpOpen, setCompleteInviteLinks }: Pro
                                      className="w-48"
                                      colorSchema="primary"
                                      variant="outline_bg"
-                                      onClick={() => onResendInvite(email)}
+                                      onClick={(e) => {
+                                        onResendInvite(orgMembershipId);
+                                        e.stopPropagation();
+                                      }}
                                    >
                                      Resend invite
                                    </Button>
@@ -1,4 +1,6 @@
-import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

@@ -12,12 +14,24 @@ const AccessControlPageQuerySchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/access-management"
+  "/_authenticate/_inject-org-details/_org-layout/organization/access-management"
 )({
  component: AccessManagementPage,
  validateSearch: zodValidator(AccessControlPageQuerySchema),
  search: {
    // strip default values
    middlewares: [stripSearchParams({ action: "" })]
-  }
+  },
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/" })
+      },
+      {
+        label: "access control"
+      }
+    ]
+  })
 });
@@ -2,7 +2,7 @@ import { useState } from "react";
 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 { OrgAdminProjects } from "./components/OrgAdminProjects";

@@ -17,13 +17,13 @@ export const AdminPage = () => {
    <>
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 py-6 text-white">
-        <div className="w-full max-w-6xl px-6">
-          <div className="mb-4">
-            <p className="text-3xl font-semibold text-gray-200">Organization Admin Console</p>
-          </div>
+      <div className="flex w-full justify-center bg-bunker-800 text-white">
+        <div className="w-full max-w-7xl">
+          <PageHeader
+            title="Organization Admin Console"
+            description="View and manage resources across your organization."
+          />
          <Tabs value={activeTab} onValueChange={(el) => setActiveTab(el as TabSections)}>
            <TabList>
              <Tab value={TabSections.Projects}>Projects</Tab>
@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { AdminPage } from "./AdminPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/admin"
+  "/_authenticate/_inject-org-details/_org-layout/organization/admin"
 )({
-  component: AdminPage
+  component: AdminPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Admin Console"
+      }
+    ]
+  })
 });
@@ -11,7 +11,7 @@ const GitHubOAuthCallbackPageQueryParamsSchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/app-connections/github/oauth/callback"
+  "/_authenticate/_inject-org-details/_org-layout/organization/app-connections/github/oauth/callback"
 )({
  component: GitHubOAuthCallbackPage,
  validateSearch: zodValidator(GitHubOAuthCallbackPageQueryParamsSchema),
@@ -1,5 +1,7 @@
 import { Helmet } from "react-helmet";

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

 export const AuditLogsPage = () => {
@@ -11,11 +13,11 @@ export const AuditLogsPage = () => {
        <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="bg-bunker-800 py-6">
-            <p className="text-3xl font-semibold text-gray-200">Audit Logs</p>
-            <div />
-          </div>
+        <div className="w-full max-w-7xl">
+          <PageHeader
+            title="Audit logs"
+            description="Audit logs for security and compliance teams to monitor information access."
+          />
          <LogsSection filterClassName="static py-2" showFilters isOrgAuditLogs showActorColumn />
        </div>
      </div>
@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { AuditLogsPage } from "./AuditLogsPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/audit-logs"
+  "/_authenticate/_inject-org-details/_org-layout/organization/audit-logs"
 )({
-  component: AuditLogsPage
+  component: AuditLogsPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Audit Logs"
+      }
+    ]
+  })
 });
@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { BillingPage } from "./BillingPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/billing"
+  "/_authenticate/_inject-org-details/_org-layout/organization/billing"
 )({
  component: BillingPage
 });
@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { CertManagerOverviewPage } from "./CertManagerOverviewPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/cert-manager/overview"
+  "/_authenticate/_inject-org-details/_org-layout/organization/cert-manager/overview"
 )({
-  component: CertManagerOverviewPage
+  component: CertManagerOverviewPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "Cert Management",
+        link: linkOptions({ to: "/organization/cert-manager/overview" })
+      }
+    ]
+  })
 });
@@ -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";

@@ -15,6 +13,7 @@ import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
+  PageHeader,
  Spinner,
  Tooltip
 } from "@app/components/v2";
@@ -83,34 +82,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: "/organization/access-management" as const,
-                search: {
-                  selectedTab: TabSections.Groups
-                }
-              });
-            }}
-            className="mb-4"
-          >
-            Groups
-          </Button>
-          <div className="mb-4 flex items-center justify-between">
-            <p className="text-3xl font-semibold text-white">{data.group.name}</p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title={data.group.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">
                <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Groups}>
                  {(isAllowed) => (
                    <DropdownMenuItem
@@ -153,7 +135,7 @@ const Page = () => {
                </OrgPermissionCan>
              </DropdownMenuContent>
            </DropdownMenu>
-          </div>
+          </PageHeader>
          <div className="flex">
            <div className="mr-4 w-96">
              <GroupDetailsSection groupId={groupId} handlePopUpOpen={handlePopUpOpen} />
@@ -1,9 +1,27 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { GroupDetailsByIDPage } from "./GroupDetailsByIDPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/groups/$groupId"
+  "/_authenticate/_inject-org-details/_org-layout/organization/groups/$groupId"
 )({
-  component: GroupDetailsByIDPage
+  component: GroupDetailsByIDPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Access Control",
+        link: linkOptions({ to: "/organization/access-management" })
+      },
+      {
+        label: "groups"
+      }
+    ]
+  })
 });
@@ -1,8 +1,6 @@
 import { useState } from "react";
 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";

@@ -16,6 +14,7 @@ import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
+  PageHeader,
  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
@@ -165,30 +164,13 @@ 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: "/organization/access-management",
-                search: {
-                  selectedTab: OrgAccessControlTabSections.Identities
-                }
-              });
-            }}
-            className="mb-4"
-          >
-            Identities
-          </Button>
-          <div className="mb-4 flex items-center justify-between">
-            <p className="text-3xl font-semibold text-white">{data.identity.name}</p>
+        <div className="mx-auto mb-6 w-full max-w-7xl">
+          <PageHeader title={data.identity.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>
@@ -257,7 +239,7 @@ const Page = () => {
                </OrgPermissionCan>
              </DropdownMenuContent>
            </DropdownMenu>
-          </div>
+          </PageHeader>
          <div className="flex">
            <div className="mr-4 w-96">
              <IdentityDetailsSection identityId={identityId} handlePopUpOpen={handlePopUpOpen} />
@@ -1,9 +1,27 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/identities/$identityId"
+  "/_authenticate/_inject-org-details/_org-layout/organization/identities/$identityId"
 )({
-  component: IdentityDetailsByIDPage
+  component: IdentityDetailsByIDPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Access Control",
+        link: linkOptions({ to: "/organization/access-management" })
+      },
+      {
+        label: "identities"
+      }
+    ]
+  })
 });
@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { KmsOverviewPage } from "./KmsOverviewPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/kms/overview"
+  "/_authenticate/_inject-org-details/_org-layout/organization/kms/overview"
 )({
-  component: KmsOverviewPage
+  component: KmsOverviewPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "KMS",
+        link: linkOptions({ to: "/organization/kms/overview" })
+      }
+    ]
+  })
 });
@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { NoOrgPage } from "./NoOrgPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/none"
+  "/_authenticate/_inject-org-details/_org-layout/organization/none"
 )({
  component: NoOrgPage
 });
@@ -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";
@@ -78,31 +77,14 @@ export 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: "/organization/access-management" as const,
-                search: {
-                  selectedTab: OrgAccessControlTabSections.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>
@@ -144,7 +126,7 @@ export const Page = () => {
                </DropdownMenuContent>
              </DropdownMenu>
            )}
-          </div>
+          </PageHeader>
          <div className="flex">
            <div className="mr-4 w-96">
              <RoleDetailsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} />
@@ -1,9 +1,27 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { RoleByIDPage } from "./RoleByIDPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/roles/$roleId"
+  "/_authenticate/_inject-org-details/_org-layout/organization/roles/$roleId"
 )({
-  component: RoleByIDPage
+  component: RoleByIDPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Access Control",
+        link: linkOptions({ to: "/organization/access-management" })
+      },
+      {
+        label: "Roles"
+      }
+    ]
+  })
 });
@@ -22,7 +22,15 @@ import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import { NewProjectModal } from "@app/components/projects";
-import { Button, IconButton, Input, Pagination, Skeleton, Tooltip } from "@app/components/v2";
+import {
+  Button,
+  IconButton,
+  Input,
+  PageHeader,
+  Pagination,
+  Skeleton,
+  Tooltip
+} from "@app/components/v2";
 import {
  OrgPermissionActions,
  OrgPermissionSubjects,
@@ -50,13 +58,6 @@ enum ProjectOrderBy {
  Name = "name"
 }

-const formatTitle = (type: ProjectType) => {
-  if (type === ProjectType.SecretManager) return "Secret Management";
-  if (type === ProjectType.CertificateManager) return "Cert Management";
-  if (type === ProjectType.KMS) return "Key Management";
-  return "SSH";
-};
-
 const formatDescription = (type: ProjectType) => {
  if (type === ProjectType.SecretManager)
    return "Securely store, manage, and rotate various application secrets, such as database credentials, API keys, etc.";
@@ -365,13 +366,13 @@ export const ProductOverviewPage = ({ type }: Props) => {
  }

  return (
-    <div className="mx-auto flex max-w-7xl flex-col justify-start bg-bunker-800 md:h-screen">
+    <div className="mx-auto flex max-w-7xl flex-col justify-start bg-bunker-800">
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.members.title") })}</title>
        <link rel="icon" href="/infisical.ico" />
      </Helmet>
      {!serverDetails?.redisConfigured && (
-        <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0 text-3xl">
+        <div className="mb-4 flex flex-col items-start justify-start text-3xl">
          <p className="mb-4 mr-4 font-semibold text-white">Announcements</p>
          <div className="flex w-full items-center rounded-md border border-blue-400/70 bg-blue-900/70 p-2 text-base text-mineshaft-100">
            <FontAwesomeIcon
@@ -393,14 +394,9 @@ export const ProductOverviewPage = ({ type }: Props) => {
          </div>
        </div>
      )}
-      <div className="mb-4 flex flex-col items-start justify-start px-6 py-6 pb-0">
-        <div className="flex w-full justify-between">
-          <p className="mr-4 text-3xl font-semibold text-white">{formatTitle(type)}</p>
-        </div>
-        <div>
-          <p className="mr-4 mt-2 text-gray-400">{formatDescription(type)}</p>
-        </div>
-        <div className="mt-6 flex w-full flex-row">
+      <div className="mb-4 flex flex-col items-start justify-start">
+        <PageHeader title="Projects" description={formatDescription(type)} />
+        <div className="flex w-full flex-row">
          <Input
            className="h-[2.3rem] bg-mineshaft-800 text-sm placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
            placeholder="Search by project name..."
@@ -1,9 +1,22 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute } from "@tanstack/react-router";

 import { SecretManagerOverviewPage } from "./SecretManagerOverviewPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/secret-manager/overview"
+  "/_authenticate/_inject-org-details/_org-layout/organization/secret-manager/overview"
 )({
-  component: SecretManagerOverviewPage
+  component: SecretManagerOverviewPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "Secret Management"
+      }
+    ]
+  })
 });
@@ -5,7 +5,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useSearch } from "@tanstack/react-router";

 import { OrgPermissionCan } from "@app/components/permissions";
-import { Button, NoticeBanner, Pagination } from "@app/components/v2";
+import { Button, NoticeBanner, PageHeader, Pagination } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
 import {
  OrgPermissionActions,
@@ -111,11 +111,11 @@ export const SecretScanningPage = withPermission(
          <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="mt-6 text-3xl font-semibold text-gray-200">Secret Scanning</div>
-            <div className="mb-6 text-lg text-mineshaft-300">
-              Automatically monitor your GitHub activity and prevent secret leaks
-            </div>
+          <div className="w-full max-w-7xl">
+            <PageHeader
+              title="Secret Scanning"
+              description="Automatically monitor your GitHub activity and prevent secret leaks"
+            />
            {config.isSecretScanningDisabled && (
              <NoticeBanner title="Secret scanning is in maintenance" className="mb-4">
                We are working on improving the performance of secret scanning due to increased
@@ -1,4 +1,6 @@
-import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

@@ -10,10 +12,10 @@ const SecretScanningQueryParams = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/secret-scanning"
+  "/_authenticate/_inject-org-details/_org-layout/organization/secret-scanning"
 )({
-  component: SecretScanningPage,
  validateSearch: zodValidator(SecretScanningQueryParams),
+  component: SecretScanningPage,
  search: {
    middlewares: [
      stripSearchParams({
@@ -21,5 +23,17 @@ export const Route = createFileRoute(
        state: ""
      })
    ]
-  }
+  },
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/" })
+      },
+      {
+        label: "Secret Scanning"
+      }
+    ]
+  })
 });
@@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

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

 export const SecretSharingPage = () => {
@@ -18,28 +20,25 @@ export const SecretSharingPage = () => {
        <meta name="og:description" content={String(t("approval.og-description"))} />
      </Helmet>
      <div className="h-full">
-        <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 px-6 text-white">
-          <div className="flex items-center justify-between py-6">
-            <div className="flex w-full flex-col">
-              <h2 className="text-3xl font-semibold text-gray-200">Secret Sharing</h2>
-              <p className="text-bunker-300">Share secrets securely using a shareable link</p>
-            </div>
-            <div className="flex w-max justify-center">
-              <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href="https://infisical.com/docs/documentation/platform/secret-sharing"
-              >
-                <div className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
-                  Documentation{" "}
-                  <FontAwesomeIcon
-                    icon={faArrowUpRightFromSquare}
-                    className="mb-[0.06rem] ml-1 text-xs"
-                  />
-                </div>
-              </a>
-            </div>
-          </div>
+        <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
+          <PageHeader
+            title="Secret Sharing"
+            description="Share secrets securely using a shareable link"
+          >
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://infisical.com/docs/documentation/platform/secret-sharing"
+            >
+              <div className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+                Documentation{" "}
+                <FontAwesomeIcon
+                  icon={faArrowUpRightFromSquare}
+                  className="mb-[0.06rem] ml-1 text-xs"
+                />
+              </div>
+            </a>
+          </PageHeader>
          <ShareSecretSection />
        </div>
      </div>
@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { SecretSharingPage } from "./SecretSharingPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/secret-sharing"
+  "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing"
 )({
-  component: SecretSharingPage
+  component: SecretSharingPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/" })
+      },
+      {
+        label: "secret sharing"
+      }
+    ]
+  })
 });
@@ -1,6 +1,8 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";

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

 export const SettingsPage = () => {
@@ -11,11 +13,9 @@ export const SettingsPage = () => {
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
      </Helmet>
-      <div className="flex w-full justify-center bg-bunker-800 py-6 text-white">
-        <div className="w-full max-w-7xl px-6">
-          <div className="mb-4">
-            <p className="text-3xl font-semibold text-gray-200">{t("settings.org.title")}</p>
-          </div>
+      <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")} />
          <OrgTabGroup />
        </div>
      </div>
@@ -103,7 +103,7 @@ export const AuditLogStreamForm = ({ id = "", onClose }: Props) => {
      console.log(err);
      createNotification({
        type: "error",
-        text: "Failed to create stream"
+        text: (err as Error)?.message ?? "Failed to create stream"
      });
    }
  };
@@ -103,7 +103,13 @@ export const OrgNameChangeSection = (): JSX.Element => {
          name="name"
        />
      </div>
-      <div className="py-4">
+      <div>
+        <h2 className="text-md mb-2 text-mineshaft-100">Organization ID</h2>
+        <FormControl className="max-w-md">
+          <Input isDisabled value={currentOrg.id} />
+        </FormControl>
+      </div>
+      <div>
        <h2 className="text-md mb-2 text-mineshaft-100">Organization Slug</h2>
        <Controller
          defaultValue=""
@@ -1,4 +1,6 @@
-import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

@@ -9,11 +11,23 @@ const SettingsPageQueryParams = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/settings"
+  "/_authenticate/_inject-org-details/_org-layout/organization/settings"
 )({
  component: SettingsPage,
  validateSearch: zodValidator(SettingsPageQueryParams),
  search: {
    middlewares: [stripSearchParams({ selectedTab: "" })]
-  }
+  },
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/" })
+      },
+      {
+        label: "Settings"
+      }
+    ]
+  })
 });
@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { SshOverviewPage } from "./SshOverviewPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/ssh/overview"
+  "/_authenticate/_inject-org-details/_org-layout/organization/ssh/overview"
 )({
-  component: SshOverviewPage
+  component: SshOverviewPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
+      },
+      {
+        label: "SSH",
+        link: linkOptions({ to: "/organization/ssh/overview" })
+      }
+    ]
+  })
 });
@@ -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";

@@ -15,6 +13,7 @@ import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
+  PageHeader,
  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
@@ -118,143 +117,132 @@ const Page = withPermission(
    return (
      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
        {membership && (
-          <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: "/organization/access-management" as const,
-                  search: {
-                    selectedTab: OrgAccessControlTabSections.Member
-                  }
-                });
-              }}
-              className="mb-4"
-            >
-              Users
-            </Button>
-            <div className="mb-4 flex items-center justify-between">
-              <p className="text-3xl font-semibold text-white">
-                {membership.user.firstName || membership.user.lastName
+          <div className="mx-auto mb-6 w-full max-w-7xl">
+            <PageHeader
+              title={
+                membership.user.firstName || membership.user.lastName
                  ? `${membership.user.firstName} ${membership.user.lastName ?? ""}`.trim()
-                  : "-"}
-              </p>
-              {userId !== membership.user.id && (
-                <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} />
-                      </Tooltip>
-                    </div>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="start" className="p-1">
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Edit}
-                      a={OrgPermissionSubjects.Identity}
-                    >
-                      {(isAllowed) => (
-                        <DropdownMenuItem
-                          className={twMerge(
-                            !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
-                          )}
-                          onClick={() =>
-                            handlePopUpOpen("orgMembership", {
-                              membershipId: membership.id,
-                              role: membership.role,
-                              roleId: membership.roleId
-                            })
-                          }
-                          disabled={!isAllowed}
-                        >
-                          Edit User
-                        </DropdownMenuItem>
-                      )}
-                    </OrgPermissionCan>
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Delete}
-                      a={OrgPermissionSubjects.Member}
-                    >
-                      {(isAllowed) => (
-                        <DropdownMenuItem
-                          className={
-                            membership.isActive
-                              ? twMerge(
-                                  isAllowed
-                                    ? "hover:!bg-red-500 hover:!text-white"
-                                    : "pointer-events-none cursor-not-allowed opacity-50"
-                                )
-                              : ""
-                          }
-                          onClick={async () => {
-                            if (currentOrg?.scimEnabled) {
-                              createNotification({
-                                text: "You cannot manage users from Infisical when SCIM is enabled for your organization",
-                                type: "error"
-                              });
-                              return;
+                  : "-"
+              }
+            >
+              <div>
+                {userId !== membership.user.id && (
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild className="rounded-lg">
+                      <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                        <Tooltip content="More options">
+                          <Button variant="outline_bg" size="sm">
+                            More
+                          </Button>
+                        </Tooltip>
+                      </div>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end" className="p-1">
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Edit}
+                        a={OrgPermissionSubjects.Identity}
+                      >
+                        {(isAllowed) => (
+                          <DropdownMenuItem
+                            className={twMerge(
+                              !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                            )}
+                            onClick={() =>
+                              handlePopUpOpen("orgMembership", {
+                                membershipId: membership.id,
+                                role: membership.role,
+                                roleId: membership.roleId
+                              })
                            }
-
-                            if (!membership.isActive) {
-                              // activate user
-                              await updateOrgMembership({
-                                organizationId: orgId,
-                                membershipId,
-                                isActive: true
-                              });
-
-                              return;
+                            disabled={!isAllowed}
+                          >
+                            Edit User
+                          </DropdownMenuItem>
+                        )}
+                      </OrgPermissionCan>
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Delete}
+                        a={OrgPermissionSubjects.Member}
+                      >
+                        {(isAllowed) => (
+                          <DropdownMenuItem
+                            className={
+                              membership.isActive
+                                ? twMerge(
+                                    isAllowed
+                                      ? "hover:!bg-red-500 hover:!text-white"
+                                      : "pointer-events-none cursor-not-allowed opacity-50"
+                                  )
+                                : ""
                            }
+                            onClick={async () => {
+                              if (currentOrg?.scimEnabled) {
+                                createNotification({
+                                  text: "You cannot manage users from Infisical when SCIM is enabled for your organization",
+                                  type: "error"
+                                });
+                                return;
+                              }

-                            // deactivate user
-                            handlePopUpOpen("deactivateMember", {
-                              orgMembershipId: membershipId,
-                              username: membership.user.username
-                            });
-                          }}
-                          disabled={!isAllowed}
-                        >
-                          {`${membership.isActive ? "Deactivate" : "Activate"} User`}
-                        </DropdownMenuItem>
-                      )}
-                    </OrgPermissionCan>
-                    <OrgPermissionCan
-                      I={OrgPermissionActions.Delete}
-                      a={OrgPermissionSubjects.Member}
-                    >
-                      {(isAllowed) => (
-                        <DropdownMenuItem
-                          className={twMerge(
-                            isAllowed
-                              ? "hover:!bg-red-500 hover:!text-white"
-                              : "pointer-events-none cursor-not-allowed opacity-50"
-                          )}
-                          onClick={() => {
-                            if (currentOrg?.scimEnabled) {
-                              createNotification({
-                                text: "You cannot manage users from Infisical when SCIM is enabled for your organization",
-                                type: "error"
+                              if (!membership.isActive) {
+                                // activate user
+                                await updateOrgMembership({
+                                  organizationId: orgId,
+                                  membershipId,
+                                  isActive: true
+                                });
+
+                                return;
+                              }
+
+                              // deactivate user
+                              handlePopUpOpen("deactivateMember", {
+                                orgMembershipId: membershipId,
+                                username: membership.user.username
                              });
-                              return;
-                            }
+                            }}
+                            disabled={!isAllowed}
+                          >
+                            {`${membership.isActive ? "Deactivate" : "Activate"} User`}
+                          </DropdownMenuItem>
+                        )}
+                      </OrgPermissionCan>
+                      <OrgPermissionCan
+                        I={OrgPermissionActions.Delete}
+                        a={OrgPermissionSubjects.Member}
+                      >
+                        {(isAllowed) => (
+                          <DropdownMenuItem
+                            className={twMerge(
+                              isAllowed
+                                ? "hover:!bg-red-500 hover:!text-white"
+                                : "pointer-events-none cursor-not-allowed opacity-50"
+                            )}
+                            onClick={() => {
+                              if (currentOrg?.scimEnabled) {
+                                createNotification({
+                                  text: "You cannot manage users from Infisical when SCIM is enabled for your organization",
+                                  type: "error"
+                                });
+                                return;
+                              }

-                            handlePopUpOpen("removeMember", {
-                              orgMembershipId: membershipId,
-                              username: membership.user.username
-                            });
-                          }}
-                          disabled={!isAllowed}
-                        >
-                          Remove User
-                        </DropdownMenuItem>
-                      )}
-                    </OrgPermissionCan>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-            </div>
+                              handlePopUpOpen("removeMember", {
+                                orgMembershipId: membershipId,
+                                username: membership.user.username
+                              });
+                            }}
+                            disabled={!isAllowed}
+                          >
+                            Remove User
+                          </DropdownMenuItem>
+                        )}
+                      </OrgPermissionCan>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                )}
+              </div>
+            </PageHeader>
            <div className="flex">
              <div className="mr-4 w-96">
                <UserDetailsSection membershipId={membershipId} handlePopUpOpen={handlePopUpOpen} />
@@ -18,13 +18,9 @@ import {
  useUser
 } from "@app/context";
 import { useTimedReset } from "@app/hooks";
-import {
-  useAddUsersToOrg,
-  useFetchServerStatus,
-  useGetOrgMembership,
-  useGetOrgRoles
-} from "@app/hooks/api";
+import { useFetchServerStatus, useGetOrgMembership, useGetOrgRoles } from "@app/hooks/api";
 import { OrgUser } from "@app/hooks/api/types";
+import { useResendOrgMemberInvitation } from "@app/hooks/api/users/mutation";
 import { UsePopUpState } from "@app/hooks/usePopUp";

 type Props = {
@@ -45,28 +41,27 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
  const { data: roles } = useGetOrgRoles(orgId);
  const { data: serverDetails } = useFetchServerStatus();
  const { data: membership } = useGetOrgMembership(orgId, membershipId);
-  const { mutateAsync: inviteUsers, isPending } = useAddUsersToOrg();

-  const onResendInvite = async (email: string) => {
+  const { mutateAsync: resendOrgMemberInvitation, isPending } = useResendOrgMemberInvitation();
+
+  const onResendInvite = async () => {
    try {
-      const { data } = await inviteUsers({
-        organizationId: orgId,
-        inviteeEmails: [email],
-        organizationRoleSlug: "member"
+      const signupToken = await resendOrgMemberInvitation({
+        membershipId
      });

-      //   setCompleteInviteLink(data?.completeInviteLink || "");
-
-      if (!data.completeInviteLinks) {
-        createNotification({
-          text: `Successfully resent invite to ${email}`,
-          type: "success"
-        });
+      if (signupToken) {
+        return;
      }
+
+      createNotification({
+        text: "Successfully resent org invitation",
+        type: "success"
+      });
    } catch (err) {
      console.error(err);
      createNotification({
-        text: `Failed to resend invite to ${email}`,
+        text: "Failed to resend org invitation",
        type: "error"
      });
    }
@@ -210,9 +205,7 @@ export const UserDetailsSection = ({ membershipId, handlePopUpOpen }: Props) =>
                    colorSchema="primary"
                    type="submit"
                    isLoading={isPending}
-                    onClick={() => {
-                      onResendInvite(membership.user.email as string);
-                    }}
+                    onClick={onResendInvite}
                  >
                    Resend Invite
                  </Button>
@@ -1,9 +1,27 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { UserDetailsByIDPage } from "./UserDetailsByIDPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/organization/_layout/members/$membershipId"
+  "/_authenticate/_inject-org-details/_org-layout/organization/members/$membershipId"
 )({
-  component: UserDetailsByIDPage
+  component: UserDetailsByIDPage,
+  context: () => ({
+    breadcrumbs: [
+      {
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
+        link: linkOptions({ to: "/organization/secret-manager/overview" })
+      },
+      {
+        label: "Access Control",
+        link: linkOptions({ to: "/organization/access-management" })
+      },
+      {
+        label: "Users"
+      }
+    ]
+  })
 });
@@ -2,6 +2,6 @@ import { createFileRoute } from "@tanstack/react-router";

 import { OrganizationLayout } from "@app/layouts/OrganizationLayout";

-export const Route = createFileRoute("/_authenticate/_inject-org-details/organization/_layout")({
+export const Route = createFileRoute("/_authenticate/_inject-org-details/_org-layout")({
  component: OrganizationLayout
 });
@@ -2,9 +2,8 @@ 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";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { ProjectAccessControlTabs } from "@app/types/project";
@@ -38,11 +37,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>
@@ -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";

@@ -11,8 +11,24 @@ const AccessControlPageQuerySchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/cert-manager/$projectId/_cert-manager-layout/access-management"
+  "/_authenticate/_inject-org-details/_org-layout/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
+            }
+          })
+        }
+      ]
+    };
+  }
 });
@@ -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";

@@ -11,8 +11,24 @@ const AccessControlPageQuerySchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/kms/$projectId/_kms-layout/access-management"
+  "/_authenticate/_inject-org-details/_org-layout/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
+            }
+          })
+        }
+      ]
+    };
+  }
 });
@@ -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";

@@ -11,8 +11,24 @@ const AccessControlPageQuerySchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/access-management"
+  "/_authenticate/_inject-org-details/_org-layout/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
+            }
+          })
+        }
+      ]
+    };
+  }
 });
@@ -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";

@@ -11,8 +11,24 @@ const AccessControlPageQuerySchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/ssh/$projectId/_ssh-layout/access-management"
+  "/_authenticate/_inject-org-details/_org-layout/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
+            }
+          })
+        }
+      ]
+    };
+  }
 });
@@ -1,16 +1,13 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 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 { 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";
 import {
  useDeleteIdentityFromWorkspace,
@@ -82,78 +79,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}
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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";

@@ -82,77 +79,37 @@ 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>
+    <div className="container mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 text-white">
      {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}
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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} />
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -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"
+  "/_authenticate/_inject-org-details/_org-layout/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"
+        }
+      ]
+    };
+  }
 });
@@ -3,7 +3,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { IPAllowListPage } from "./IPAllowlistPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/allowlist"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/allowlist"
 )({
  component: () => IPAllowListPage
 });
@@ -1,8 +1,8 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faChevronLeft, faEllipsis, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useNavigate, useParams } from "@tanstack/react-router";
+import { useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";

 import { OrgPermissionCan } from "@app/components/permissions";
@@ -13,6 +13,7 @@ import {
  DropdownMenuItem,
  DropdownMenuTrigger,
  EmptyState,
+  PageHeader,
  Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
@@ -28,7 +29,6 @@ import { integrationSlugNameMapping } from "./IntegrationsDetailsByIDPage.utils"

 export const IntegrationDetailsByIDPage = () => {
  const { t } = useTranslation();
-  const navigate = useNavigate();
  const integrationId = useParams({
    from: ROUTE_PATHS.SecretManager.IntegrationDetailsByIDPage.id,
    select: (el) => el.integrationId
@@ -50,38 +50,21 @@ export const IntegrationDetailsByIDPage = () => {
        <meta property="og:title" content="Manage your .env files in seconds" />
        <meta name="og:description" content={t("integrations.description") as string} />
      </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 text-white">
        {integration ? (
-          <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: "/secret-manager/$projectId/integrations",
-                  params: {
-                    projectId
-                  }
-                });
-              }}
-              className="mb-4"
+          <div className="mx-auto mb-6 w-full max-w-7xl">
+            <PageHeader
+              title={`${integrationSlugNameMapping[integration.integration]} Integration`}
            >
-              Integrations
-            </Button>
-            <div className="mb-4 flex items-center justify-between">
-              <p className="text-3xl font-semibold text-white">
-                {integrationSlugNameMapping[integration.integration]} Integration
-              </p>
              <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">
                  <DropdownMenuItem
                    onClick={async () => {
                      await syncIntegration({
@@ -119,13 +102,13 @@ export const IntegrationDetailsByIDPage = () => {
                  </OrgPermissionCan>
                </DropdownMenuContent>
              </DropdownMenu>
-            </div>
-            <div className="flex justify-center">
+            </PageHeader>
+            <div className="flex">
              <div className="mr-4 w-96">
                <IntegrationDetailsSection integration={integration} />
                <IntegrationConnectionSection integration={integration} />
              </div>
-              <div className="space-y-4">
+              <div className="flex-grow space-y-4">
                <IntegrationSettingsSection integration={integration} />
                <IntegrationAuditLogsSection integration={integration} />
              </div>
@@ -1,9 +1,26 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { IntegrationDetailsByIDPage } from "./IntegrationsDetailsByIDPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/$integrationId"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/$integrationId"
 )({
-  component: IntegrationDetailsByIDPage
+  component: IntegrationDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/integrations",
+            params
+          })
+        },
+        {
+          label: "Details"
+        }
+      ]
+    };
+  }
 });
@@ -104,7 +104,7 @@ export const CloudIntegrationSection = ({
          />
        </div>
      </div>
-      <div className="mx-6 grid grid-cols-3 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7">
+      <div className="mx-2 grid grid-cols-3 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7">
        {isLoading &&
          Array.from({ length: 12 }).map((_, index) => (
            <Skeleton className="h-32" key={`cloud-integration-skeleton-${index + 1}`} />
@@ -16,7 +16,7 @@ export const FrameworkIntegrationTab = () => {
        <h1 className="text-3xl font-semibold">{t("integrations.framework-integrations")}</h1>
        <p className="text-base text-gray-400">{t("integrations.click-to-setup")}</p>
      </div>
-      <div className="mx-6 mt-4 grid grid-cols-3 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7">
+      <div className="mx-2 mt-4 grid grid-cols-3 gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-7">
        {sortedFrameworks.map((framework) => (
          <a
            key={`framework-integration-${framework.slug}`}
@@ -0,0 +1,136 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Button, Checkbox, DeleteActionModal, PageHeader } from "@app/components/v2";
+import { usePopUp, useToggle } from "@app/hooks";
+import { TCloudIntegration, TIntegration } from "@app/hooks/api/types";
+
+import { IntegrationsTable } from "./components";
+
+type Props = {
+  environments: Array<{ name: string; slug: string; id: string }>;
+  integrations?: TIntegration[];
+  cloudIntegrations?: TCloudIntegration[];
+  isLoading?: boolean;
+  onIntegrationDelete: (
+    integrationId: string,
+    shouldDeleteIntegrationSecrets: boolean,
+    cb: () => void
+  ) => Promise<void>;
+  workspaceId: string;
+  onAddIntegration: () => void;
+};
+
+export const IntegrationsSection = ({
+  integrations = [],
+  environments = [],
+  isLoading,
+  onIntegrationDelete,
+  workspaceId,
+  onAddIntegration,
+  cloudIntegrations = []
+}: Props) => {
+  const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+    "deleteConfirmation",
+    "deleteSecretsConfirmation"
+  ] as const);
+
+  const [shouldDeleteSecrets, setShouldDeleteSecrets] = useToggle(false);
+
+  return (
+    <div className="mb-8">
+      <PageHeader
+        title="Integrations"
+        description="Manage integrations with third-party services."
+      />
+      <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+        <div className="mb-4 flex items-center justify-between">
+          <p className="text-xl font-semibold text-mineshaft-100">Active Integrations</p>
+          <Button
+            colorSchema="primary"
+            type="submit"
+            leftIcon={<FontAwesomeIcon icon={faPlus} />}
+            onClick={onAddIntegration}
+          >
+            Add Integration
+          </Button>
+        </div>
+        <IntegrationsTable
+          cloudIntegrations={cloudIntegrations}
+          integrations={integrations}
+          isLoading={isLoading}
+          workspaceId={workspaceId}
+          environments={environments}
+          onDeleteIntegration={(integration) => {
+            setShouldDeleteSecrets.off();
+            handlePopUpOpen("deleteConfirmation", integration);
+          }}
+        />
+      </div>
+      <DeleteActionModal
+        isOpen={popUp.deleteConfirmation.isOpen}
+        title={`Are you sure want to remove ${
+          (popUp?.deleteConfirmation.data as TIntegration)?.integration || " "
+        } integration for ${
+          (popUp?.deleteConfirmation.data as TIntegration)?.app || "this project"
+        }?`}
+        onChange={(isOpen) => handlePopUpToggle("deleteConfirmation", isOpen)}
+        deleteKey={
+          ((popUp?.deleteConfirmation?.data as TIntegration)?.integration ===
+            "azure-app-configuration" &&
+            (popUp?.deleteConfirmation?.data as TIntegration)?.app
+              ?.split("//")[1]
+              ?.split(".")[0]) ||
+          (popUp?.deleteConfirmation?.data as TIntegration)?.app ||
+          (popUp?.deleteConfirmation?.data as TIntegration)?.owner ||
+          (popUp?.deleteConfirmation?.data as TIntegration)?.path ||
+          (popUp?.deleteConfirmation?.data as TIntegration)?.integration ||
+          ""
+        }
+        onDeleteApproved={async () => {
+          if (shouldDeleteSecrets) {
+            handlePopUpOpen("deleteSecretsConfirmation");
+            return;
+          }
+
+          await onIntegrationDelete(
+            (popUp?.deleteConfirmation.data as TIntegration).id,
+            false,
+            () => handlePopUpClose("deleteConfirmation")
+          );
+        }}
+      >
+        {(popUp?.deleteConfirmation?.data as TIntegration)?.integration === "github" && (
+          <div className="mt-4">
+            <Checkbox
+              id="delete-integration-secrets"
+              checkIndicatorBg="text-white"
+              onCheckedChange={() => setShouldDeleteSecrets.toggle()}
+            >
+              Delete previously synced secrets from the destination
+            </Checkbox>
+          </div>
+        )}
+      </DeleteActionModal>
+      <DeleteActionModal
+        isOpen={popUp.deleteSecretsConfirmation.isOpen}
+        title={`Are you sure you also want to delete secrets on ${
+          (popUp?.deleteConfirmation.data as TIntegration)?.integration
+        }?`}
+        subTitle="By confirming, you acknowledge that all secrets managed by this integration will be removed from the destination. This action is irreversible."
+        onChange={(isOpen) => handlePopUpToggle("deleteSecretsConfirmation", isOpen)}
+        deleteKey="confirm"
+        onDeleteApproved={async () => {
+          await onIntegrationDelete(
+            (popUp?.deleteConfirmation.data as TIntegration).id,
+            true,
+            () => {
+              handlePopUpClose("deleteSecretsConfirmation");
+              handlePopUpClose("deleteConfirmation");
+            }
+          );
+        }}
+      />
+    </div>
+  );
+};
@@ -13,8 +13,18 @@ const IntegrationsListPageQuerySchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/"
 )({
  component: IntegrationsListPage,
-  validateSearch: zodValidator(IntegrationsListPageQuerySchema)
+  validateSearch: zodValidator(IntegrationsListPageQuerySchema),
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations"
+        }
+      ]
+    };
+  }
 });
@@ -19,7 +19,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Link, useNavigate, useRouter, useSearch } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";

-import NavHeader from "@app/components/navigation/NavHeader";
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
@@ -34,6 +33,7 @@ import {
  IconButton,
  Modal,
  ModalContent,
+  PageHeader,
  Pagination,
  Table,
  TableContainer,
@@ -661,22 +661,17 @@ export const OverviewPage = () => {
    );

  return (
-    <div className="h-full">
+    <div className="">
      <Helmet>
        <title>{t("common.head-title", { title: t("dashboard.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
        <meta property="og:title" content={String(t("dashboard.og-title"))} />
        <meta name="og:description" content={String(t("dashboard.og-description"))} />
      </Helmet>
-      <div className="container mx-auto px-6 text-mineshaft-50 dark:[color-scheme:dark]">
-        <div className="relative right-5 ml-4">
-          <NavHeader pageName={t("dashboard.title")} isProjectRelated />
-        </div>
-        <div className="space-y-8">
-          <div className="flex w-full items-baseline justify-between">
-            <div className="mt-6">
-              <p className="text-3xl font-semibold text-bunker-100">Secrets Overview</p>
+      <div className="mx-auto max-w-7xl text-mineshaft-50 dark:[color-scheme:dark]">
+        <div className="flex w-full items-baseline justify-between">
+          <PageHeader
+            title="Secrets Overview"
+            description={
              <p className="text-md text-bunker-300">
                Inject your secrets using
                <a
@@ -714,32 +709,33 @@ export const OverviewPage = () => {
                >
                  more
                </a>
-                .
+                . Click the Explore button to view the secret details section.
              </p>
-            </div>
-          </div>
-          <div className="flex items-center justify-between">
-            <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
-            <div className="flex flex-row items-center justify-center space-x-2">
-              {userAvailableEnvs.length > 0 && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <IconButton
-                      ariaLabel="Environments"
-                      variant="plain"
-                      size="sm"
-                      className={twMerge(
-                        "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
-                        isTableFiltered && "border-primary/50 text-primary"
-                      )}
-                    >
-                      <Tooltip content="Choose visible environments" className="mb-2">
-                        <FontAwesomeIcon icon={faList} />
-                      </Tooltip>
-                    </IconButton>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    {/* <DropdownMenuItem className="px-1.5" asChild>
+            }
+          />
+        </div>
+        <div className="mt-4 flex items-center justify-between">
+          <FolderBreadCrumbs secretPath={secretPath} onResetSearch={handleResetSearch} />
+          <div className="flex flex-row items-center justify-center space-x-2">
+            {userAvailableEnvs.length > 0 && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <IconButton
+                    ariaLabel="Environments"
+                    variant="plain"
+                    size="sm"
+                    className={twMerge(
+                      "flex h-10 w-11 items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
+                      isTableFiltered && "border-primary/50 text-primary"
+                    )}
+                  >
+                    <Tooltip content="Choose visible environments" className="mb-2">
+                      <FontAwesomeIcon icon={faList} />
+                    </Tooltip>
+                  </IconButton>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  {/* <DropdownMenuItem className="px-1.5" asChild>
                    <Button
                      size="xs"
                      className="w-full"
@@ -751,129 +747,126 @@ export const OverviewPage = () => {
                      Create an environment
                    </Button>
                  </DropdownMenuItem> */}
-                    <DropdownMenuLabel>Filter project resources</DropdownMenuLabel>
-                    <DropdownMenuItem
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleToggleRowType(RowType.Folder);
-                      }}
-                      icon={filter[RowType.Folder] && <FontAwesomeIcon icon={faCheckCircle} />}
-                      iconPos="right"
-                    >
-                      <div className="flex items-center gap-2">
-                        <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
-                        <span>Folders</span>
-                      </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleToggleRowType(RowType.DynamicSecret);
-                      }}
-                      icon={
-                        filter[RowType.DynamicSecret] && <FontAwesomeIcon icon={faCheckCircle} />
-                      }
-                      iconPos="right"
-                    >
-                      <div className="flex items-center gap-2">
-                        <FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" />
-                        <span>Dynamic Secrets</span>
-                      </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={(e) => {
-                        e.preventDefault();
-                        handleToggleRowType(RowType.Secret);
-                      }}
-                      icon={filter[RowType.Secret] && <FontAwesomeIcon icon={faCheckCircle} />}
-                      iconPos="right"
-                    >
-                      <div className="flex items-center gap-2">
-                        <FontAwesomeIcon icon={faKey} className="text-bunker-300" />
-                        <span>Secrets</span>
-                      </div>
-                    </DropdownMenuItem>
-                    <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
-                    {userAvailableEnvs.map((availableEnv) => {
-                      const { id: envId, name } = availableEnv;
+                  <DropdownMenuLabel>Filter project resources</DropdownMenuLabel>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleToggleRowType(RowType.Folder);
+                    }}
+                    icon={filter[RowType.Folder] && <FontAwesomeIcon icon={faCheckCircle} />}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
+                      <span>Folders</span>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleToggleRowType(RowType.DynamicSecret);
+                    }}
+                    icon={filter[RowType.DynamicSecret] && <FontAwesomeIcon icon={faCheckCircle} />}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" />
+                      <span>Dynamic Secrets</span>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.preventDefault();
+                      handleToggleRowType(RowType.Secret);
+                    }}
+                    icon={filter[RowType.Secret] && <FontAwesomeIcon icon={faCheckCircle} />}
+                    iconPos="right"
+                  >
+                    <div className="flex items-center gap-2">
+                      <FontAwesomeIcon icon={faKey} className="text-bunker-300" />
+                      <span>Secrets</span>
+                    </div>
+                  </DropdownMenuItem>
+                  <DropdownMenuLabel>Choose visible environments</DropdownMenuLabel>
+                  {userAvailableEnvs.map((availableEnv) => {
+                    const { id: envId, name } = availableEnv;

-                      const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
-                      return (
-                        <DropdownMenuItem
-                          onClick={(e) => {
-                            e.preventDefault();
-                            handleEnvSelect(envId);
-                          }}
-                          key={envId}
-                          disabled={visibleEnvs?.length === 1}
-                          icon={isEnvSelected && <FontAwesomeIcon icon={faCheckCircle} />}
-                          iconPos="right"
-                        >
-                          <div className="flex items-center">{name}</div>
-                        </DropdownMenuItem>
-                      );
-                    })}
+                    const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
+                    return (
+                      <DropdownMenuItem
+                        onClick={(e) => {
+                          e.preventDefault();
+                          handleEnvSelect(envId);
+                        }}
+                        key={envId}
+                        disabled={visibleEnvs?.length === 1}
+                        icon={isEnvSelected && <FontAwesomeIcon icon={faCheckCircle} />}
+                        iconPos="right"
+                      >
+                        <div className="flex items-center">{name}</div>
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+            <SecretSearchInput
+              value={searchFilter}
+              tags={tags}
+              onChange={setSearchFilter}
+              environments={userAvailableEnvs}
+              projectId={currentWorkspace?.id}
+            />
+            {userAvailableEnvs.length > 0 && (
+              <div>
+                <Button
+                  variant="outline_bg"
+                  leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                  onClick={() => handlePopUpOpen("addSecretsInAllEnvs")}
+                  className="h-10 rounded-r-none"
+                >
+                  Add Secret
+                </Button>
+                <DropdownMenu
+                  open={popUp.misc.isOpen}
+                  onOpenChange={(isOpen) => handlePopUpToggle("misc", isOpen)}
+                >
+                  <DropdownMenuTrigger asChild>
+                    <IconButton
+                      ariaLabel="add-folder-or-import"
+                      variant="outline_bg"
+                      className="rounded-l-none bg-mineshaft-600 p-3"
+                    >
+                      <FontAwesomeIcon icon={faAngleDown} />
+                    </IconButton>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <div className="flex flex-col space-y-1 p-1.5">
+                      <ProjectPermissionCan
+                        I={ProjectPermissionActions.Create}
+                        a={ProjectPermissionSub.SecretFolders}
+                      >
+                        {(isAllowed) => (
+                          <Button
+                            leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
+                            onClick={() => {
+                              handlePopUpOpen("addFolder");
+                              handlePopUpClose("misc");
+                            }}
+                            isDisabled={!isAllowed}
+                            variant="outline_bg"
+                            className="h-10"
+                            isFullWidth
+                          >
+                            Add Folder
+                          </Button>
+                        )}
+                      </ProjectPermissionCan>
+                    </div>
                  </DropdownMenuContent>
                </DropdownMenu>
-              )}
-              <SecretSearchInput
-                value={searchFilter}
-                tags={tags}
-                onChange={setSearchFilter}
-                environments={userAvailableEnvs}
-                projectId={currentWorkspace?.id}
-              />
-              {userAvailableEnvs.length > 0 && (
-                <div>
-                  <Button
-                    variant="outline_bg"
-                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
-                    onClick={() => handlePopUpOpen("addSecretsInAllEnvs")}
-                    className="h-10 rounded-r-none"
-                  >
-                    Add Secret
-                  </Button>
-                  <DropdownMenu
-                    open={popUp.misc.isOpen}
-                    onOpenChange={(isOpen) => handlePopUpToggle("misc", isOpen)}
-                  >
-                    <DropdownMenuTrigger asChild>
-                      <IconButton
-                        ariaLabel="add-folder-or-import"
-                        variant="outline_bg"
-                        className="rounded-l-none bg-mineshaft-600 p-3"
-                      >
-                        <FontAwesomeIcon icon={faAngleDown} />
-                      </IconButton>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent align="end">
-                      <div className="flex flex-col space-y-1 p-1.5">
-                        <ProjectPermissionCan
-                          I={ProjectPermissionActions.Create}
-                          a={ProjectPermissionSub.SecretFolders}
-                        >
-                          {(isAllowed) => (
-                            <Button
-                              leftIcon={<FontAwesomeIcon icon={faFolderPlus} />}
-                              onClick={() => {
-                                handlePopUpOpen("addFolder");
-                                handlePopUpClose("misc");
-                              }}
-                              isDisabled={!isAllowed}
-                              variant="outline_bg"
-                              className="h-10"
-                              isFullWidth
-                            >
-                              Add Folder
-                            </Button>
-                          )}
-                        </ProjectPermissionCan>
-                      </div>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </div>
-              )}
-            </div>
+              </div>
+            )}
          </div>
        </div>
        <SelectionPanel
@@ -169,8 +169,8 @@ export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {

    if (!secretKey || isWholeKeyHighlighted) {
      e.preventDefault();
-
-      setValue("key", key);
+      const keyStr = currentWorkspace.autoCapitalization ? key.toUpperCase() : key;
+      setValue("key", keyStr);
      if (value) {
        setValue("value", value);
      }
@@ -153,8 +153,8 @@ export const SecretOverviewTableRow = ({
              className="ml-2 p-2"
              style={{
                marginLeft: scrollOffset,
-                width: "calc(100vw - 300px)", // 300px accounts for sidebar and margin
-                maxWidth: "calc(1536px - 50px)" // tw container max width minus padding for uw displays
+                width: "calc(100vw - 350px)", // 350px accounts for sidebar and margin
+                maxWidth: "1270px" // largest width of table on ultra wide
              }}
            >
              <SecretRenameRow
@@ -10,7 +10,7 @@ const SecretOverviewPageQuerySchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/overview"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/overview"
 )({
  component: OverviewPage,
  validateSearch: zodValidator(SecretOverviewPageQuerySchema),
@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { Badge } from "@app/components/v2/Badge";
 import { useWorkspace } from "@app/context";
 import { useGetAccessRequestsCount, useGetSecretApprovalRequestCount } from "@app/hooks/api";
@@ -35,39 +35,32 @@ export const SecretApprovalsPage = () => {
      : TabSection.SecretApprovalRequests;

  return (
-    <div className="h-full">
+    <div>
      <Helmet>
        <title>{t("common.head-title", { title: t("approval.title") })}</title>
-        <link rel="icon" href="/infisical.ico" />
-        <meta property="og:image" content="/images/message.png" />
        <meta property="og:title" content={String(t("approval.og-title"))} />
        <meta name="og:description" content={String(t("approval.og-description"))} />
      </Helmet>
-      <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 px-6 text-white">
-        <div className="flex items-center justify-between py-6">
-          <div className="flex w-full flex-col">
-            <h2 className="text-3xl font-semibold text-gray-200">Approval Workflows</h2>
-            <p className="text-bunker-300">
-              Create approval policies for any modifications to secrets in sensitive environments
-              and folders.
-            </p>
-          </div>
-          <div className="flex w-max justify-center">
-            <a
-              href="https://infisical.com/docs/documentation/platform/pr-workflows"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
-                Documentation
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="mb-[0.06rem] ml-1 text-xs"
-                />
-              </span>
-            </a>
-          </div>
-        </div>
+      <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
+        <PageHeader
+          title="Approval Workflows"
+          description="Create approval policies for any modifications to secrets in sensitive environments and folders.
+"
+        >
+          <a
+            href="https://infisical.com/docs/documentation/platform/pr-workflows"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+              Documentation
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="mb-[0.06rem] ml-1 text-xs"
+              />
+            </span>
+          </a>
+        </PageHeader>
        <Tabs defaultValue={defaultTab}>
          <TabList>
            <Tab value={TabSection.SecretApprovalRequests}>
@@ -9,8 +9,18 @@ const SecretApprovalPageQueryParams = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/approval"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/approval"
 )({
  component: SecretApprovalsPage,
-  validateSearch: zodValidator(SecretApprovalPageQueryParams)
+  validateSearch: zodValidator(SecretApprovalPageQueryParams),
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Approvals"
+        }
+      ]
+    };
+  }
 });
@@ -7,7 +7,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";

-import NavHeader from "@app/components/navigation/NavHeader";
 import { createNotification } from "@app/components/notifications";
 import { PermissionDeniedBanner } from "@app/components/permissions";
 import {
@@ -67,7 +66,6 @@ const LOADER_TEXT = [
 ];

 const Page = () => {
-  const { t } = useTranslation();
  const { currentWorkspace } = useWorkspace();
  const navigate = useNavigate({
    from: ROUTE_PATHS.SecretManager.SecretDashboardPage.path
@@ -264,18 +262,6 @@ const Page = () => {
      state === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
    );

-  const handleEnvChange = (slug: string) => {
-    navigate({
-      params: {
-        envSlug: slug
-      },
-      search: (state) => {
-        const newState = { ...state, secretPath: undefined };
-        return newState;
-      }
-    });
-  };
-
  const handleTagToggle = useCallback(
    (tagSlug: string) =>
      setFilter((state) => {
@@ -396,21 +382,8 @@ const Page = () => {
    setDebouncedSearchFilter("");
  };
  return (
-    <div className="container mx-auto flex flex-col px-6 text-mineshaft-50 dark:[color-scheme:dark]">
+    <div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:[color-scheme:dark]">
      <SecretV2MigrationSection />
-      <div className="relative -top-2 right-6 mb-2 ml-6">
-        <NavHeader
-          pageName={t("dashboard.title")}
-          currentEnv={environment}
-          userAvailableEnvs={currentWorkspace?.environments}
-          isFolderMode
-          secretPath={secretPath}
-          isProjectRelated
-          onEnvChange={handleEnvChange}
-          isProtectedBranch={isProtectedBranch}
-          protectionPolicyName={boardPolicy?.name}
-        />
-      </div>
      {!isRollbackMode ? (
        <>
          <ActionBar
@@ -428,6 +401,7 @@ const Page = () => {
            isSnapshotCountLoading={isSnapshotCountLoading}
            onToggleRowType={handleToggleRowType}
            onClickRollbackMode={() => handlePopUpToggle("snapshots", true)}
+            protectedBranchPolicyName={boardPolicy?.name}
          />
          <div className="thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md rounded-b-none bg-mineshaft-800 text-left text-sm text-bunker-300">
            <div className="flex flex-col" id="dashboard">
@@ -15,6 +15,7 @@ import {
  faFolder,
  faFolderPlus,
  faKey,
+  faLock,
  faMinusSquare,
  faPlus,
  faTrash
@@ -80,6 +81,7 @@ type Props = {
  isVisible?: boolean;
  snapshotCount: number;
  isSnapshotCountLoading?: boolean;
+  protectedBranchPolicyName?: string;
  onSearchChange: (term: string) => void;
  onToggleTagFilter: (tagId: string) => void;
  onVisibilityToggle: () => void;
@@ -101,7 +103,8 @@ export const ActionBar = ({
  onToggleTagFilter,
  onVisibilityToggle,
  onClickRollbackMode,
-  onToggleRowType
+  onToggleRowType,
+  protectedBranchPolicyName
 }: Props) => {
  const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
    "addFolder",
@@ -112,9 +115,9 @@ export const ActionBar = ({
    "misc",
    "upgradePlan"
  ] as const);
+  const isProtectedBranch = Boolean(protectedBranchPolicyName);
  const { subscription } = useSubscription();
  const { openPopUp } = usePopUpAction();
-
  const { mutateAsync: createFolder } = useCreateFolder();
  const { mutateAsync: deleteBatchSecretV3 } = useDeleteSecretBatch();
  const { mutateAsync: moveSecrets } = useMoveSecrets();
@@ -387,6 +390,15 @@ export const ActionBar = ({
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
+        <div>
+          {isProtectedBranch && (
+            <Tooltip content={`Protected by policy ${protectedBranchPolicyName}`}>
+              <IconButton variant="outline_bg" ariaLabel="protected">
+                <FontAwesomeIcon icon={faLock} className="text-primary" />
+              </IconButton>
+            </Tooltip>
+          )}
+        </div>
        <div className="flex-grow" />
        <div>
          <IconButton variant="outline_bg" ariaLabel="Download" onClick={handleSecretDownload}>
@@ -125,8 +125,8 @@ export const CreateSecretForm = ({

    if (!secretKey || isWholeKeyHighlighted) {
      e.preventDefault();
-
-      setValue("key", key);
+      const keyStr = autoCapitalize ? key.toUpperCase() : key;
+      setValue("key", keyStr);
      if (value) {
        setValue("value", value);
      }
@@ -1,7 +1,10 @@
-import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
+import { createFileRoute, linkOptions, stripSearchParams } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";

+import { SecretDashboardPathBreadcrumb } from "@app/components/navigation/SecretDashboardPathBreadcrumb";
+import { BreadcrumbTypes } from "@app/components/v2";
+
 import { SecretDashboardPage } from "./SecretDashboardPage";

 const SecretDashboardPageQueryParamsSchema = z.object({
@@ -9,13 +12,46 @@ const SecretDashboardPageQueryParamsSchema = z.object({
  search: z.string().catch(""),
  tags: z.string().catch("")
 });
-
 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secrets/$envSlug"
 )({
  component: SecretDashboardPage,
  validateSearch: zodValidator(SecretDashboardPageQueryParamsSchema),
  search: {
    middlewares: [stripSearchParams({ secretPath: "/", search: "", tags: "" })]
+  },
+  beforeLoad: ({ context, params, search }) => {
+    const secretPathSegments = search.secretPath.split("/").filter(Boolean);
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          type: BreadcrumbTypes.Dropdown,
+          label: context.project.environments.find((el) => el.slug === params.envSlug)?.name || "",
+          dropdownTitle: "Environments",
+          links: context.project.environments.map((el) => ({
+            label: el.name,
+            link: linkOptions({
+              to: "/secret-manager/$projectId/secrets/$envSlug",
+              params: {
+                projectId: params.projectId,
+                envSlug: el.slug
+              }
+            })
+          }))
+        },
+        ...secretPathSegments.map((_, index) => ({
+          type: BreadcrumbTypes.Component,
+          component: () => (
+            <SecretDashboardPathBreadcrumb
+              secretPathSegments={secretPathSegments}
+              selectedPathSegmentIndex={index}
+              environmentSlug={params.envSlug}
+              projectId={params.projectId}
+            />
+          )
+        }))
+      ]
+    };
  }
 });
@@ -20,6 +20,7 @@ import {
  DeleteActionModal,
  EmptyState,
  IconButton,
+  PageHeader,
  Skeleton,
  Spinner,
  Table,
@@ -137,30 +138,25 @@ const Page = () => {
  };

  return (
-    <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 px-6 text-white">
-      <div className="flex items-center justify-between py-6">
-        <div className="flex w-full flex-col">
-          <h2 className="text-3xl font-semibold text-gray-200">Secret Rotation</h2>
-          <p className="text-bunker-300">
-            Stop manually rotating secrets and automate credential rotation.
-          </p>
-        </div>
-        <div className="flex w-max justify-center">
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://infisical.com/docs/documentation/platform/secret-rotation/overview"
-          >
-            <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
-              Documentation
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="mb-[0.06rem] ml-1 text-xs"
-              />
-            </span>
-          </a>
-        </div>
-      </div>
+    <div className="container mx-auto w-full max-w-7xl bg-bunker-800 text-white">
+      <PageHeader
+        title="Secret Rotation"
+        description="Stop manually rotating secrets and automate credential rotation."
+      >
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://infisical.com/docs/documentation/platform/secret-rotation/overview"
+        >
+          <span className="flex w-max cursor-pointer items-center rounded-md border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 text-mineshaft-200 duration-200 hover:border-primary/40 hover:bg-primary/10 hover:text-white">
+            Documentation
+            <FontAwesomeIcon
+              icon={faArrowUpRightFromSquare}
+              className="mb-[0.06rem] ml-1 text-xs"
+            />
+          </span>
+        </a>
+      </PageHeader>
      <div className="mb-6">
        <div className="mb-2 mt-6 text-xl font-semibold text-gray-200">Rotated Secrets</div>
        <div className="flex flex-col space-y-2">
@@ -374,7 +370,7 @@ export const SecretRotationPage = () => {
  const { t } = useTranslation();

  return (
-    <div className="h-full bg-bunker-800">
+    <div className="bg-bunker-800">
      <Helmet>
        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
        <link rel="icon" href="/infisical.ico" />
@@ -3,7 +3,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { SecretRotationPage } from "./SecretRotationPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/secret-rotation"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/secret-rotation"
 )({
-  component: SecretRotationPage
+  component: SecretRotationPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Secret Rotation"
+        }
+      ]
+    };
+  }
 });
@@ -1,9 +1,26 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { SecretSyncDetailsByIDPage } from "./SecretSyncDetailsByIDPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/secret-syncs/$destination/$syncId"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/secret-syncs/$destination/$syncId"
 )({
-  component: SecretSyncDetailsByIDPage
+  component: SecretSyncDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/integrations",
+            params
+          })
+        },
+        {
+          label: "Secret Sync"
+        }
+      ]
+    };
+  }
 });
@@ -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
@@ -37,7 +37,7 @@ export const AutoCapitalizationSection = () => {

  return (
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-      <p className="mb-3 text-xl font-semibold">{t("settings.project.auto-capitalization")}</p>
+      <p className="mb-3 text-xl font-semibold">{t("settings.project.enforce-capitalization")}</p>
      <ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Settings}>
        {(isAllowed) => (
          <div className="w-max">
@@ -50,7 +50,7 @@ export const AutoCapitalizationSection = () => {
                handleToggleCapitalizationToggle(state as boolean);
              }}
            >
-              {t("settings.project.auto-capitalization-description")}
+              {t("settings.project.enforce-capitalization-description")}
            </Checkbox>
          </div>
        )}
@@ -3,7 +3,17 @@ import { createFileRoute } from "@tanstack/react-router";
 import { SettingsPage } from "./SettingsPage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/settings"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/settings"
 )({
-  component: SettingsPage
+  component: SettingsPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Settings"
+        }
+      ]
+    };
+  }
 });
@@ -1,9 +1,26 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { AWSParameterStoreAuthorizeIntegrationPage } from "./AwsParameterStoreAuthorizePage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/aws-parameter-store/authorize"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-parameter-store/authorize"
 )({
-  component: AWSParameterStoreAuthorizeIntegrationPage
+  component: AWSParameterStoreAuthorizeIntegrationPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/integrations",
+            params
+          })
+        },
+        {
+          label: "AWS Parameter Store"
+        }
+      ]
+    };
+  }
 });
@@ -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";

@@ -9,8 +9,25 @@ const AwsParameterStoreConfigurePageQueryParamsSchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/aws-parameter-store/create"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-parameter-store/create"
 )({
  component: AWSParameterStoreConfigurePage,
-  validateSearch: zodValidator(AwsParameterStoreConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(AwsParameterStoreConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/integrations",
+            params
+          })
+        },
+        {
+          label: "AWS Parameter Store"
+        }
+      ]
+    };
+  }
 });
@@ -1,9 +1,26 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";

 import { AWSSecretManagerAuthorizePage } from "./AwsSecretManagerAuthorizePage";

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/aws-secret-manager/authorize"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-secret-manager/authorize"
 )({
-  component: AWSSecretManagerAuthorizePage
+  component: AWSSecretManagerAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/integrations",
+            params
+          })
+        },
+        {
+          label: "AWS Secret Manager"
+        }
+      ]
+    };
+  }
 });
@@ -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";

@@ -9,8 +9,25 @@ const AwsSecretManagerConfigurePageQueryParamsSchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/aws-secret-manager/create"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/aws-secret-manager/create"
 )({
  component: AwsSecretManagerConfigurePage,
-  validateSearch: zodValidator(AwsSecretManagerConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(AwsSecretManagerConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/integrations",
+            params
+          })
+        },
+        {
+          label: "AWS Secret Manager"
+        }
+      ]
+    };
+  }
 });
@@ -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";

@@ -9,8 +9,25 @@ const AzureAppConfigurationPageQueryParamsSchema = z.object({
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/create"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/create"
 )({
  component: AzureAppConfigurationConfigurePage,
-  validateSearch: zodValidator(AzureAppConfigurationPageQueryParamsSchema)
+  validateSearch: zodValidator(AzureAppConfigurationPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/integrations",
+            params
+          })
+        },
+        {
+          label: "Azure App Configuration"
+        }
+      ]
+    };
+  }
 });
@@ -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";

@@ -10,8 +10,25 @@ export const AzureAppConfigurationOauthCallbackPageQueryParamsSchema = z.object(
 });

 export const Route = createFileRoute(
-  "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback"
+  "/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback"
 )({
  component: AzureAppConfigurationOauthCallbackPage,
-  validateSearch: zodValidator(AzureAppConfigurationOauthCallbackPageQueryParamsSchema)
+  validateSearch: zodValidator(AzureAppConfigurationOauthCallbackPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({
+            to: "/secret-manager/$projectId/integrations",
+            params
+          })
+        },
+        {
+          label: "Azure App Configuration"
+        }
+      ]
+    };
+  }
 });
--- a/Show More
+++ b/Show More