feat: completed all nav restructing and breadcrumbs cleanup

frontend/src/pages/cert-manager/CertAuthDetailsByIDPage/CertAuthDetailsByIDPage.tsx

@@ -1,6 +1,4 @@
 import { Helmet } from "react-helmet";
-import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useNavigate, useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
@@ -91,7 +89,7 @@ const Page = () => {
                   </Tooltip>
                 </div>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="emd" className="p-1">
+              <DropdownMenuContent align="end" className="p-1">
                 <ProjectPermissionCan
                   I={ProjectPermissionActions.Delete}
                   a={ProjectPermissionSub.CertificateAuthorities}

frontend/src/pages/kms/OverviewPage/OverviewPage.tsx

@@ -2,10 +2,10 @@ 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";
-import { PageHeader } from "@app/components/v2";
 
 export const OverviewPage = () => {
   const { t } = useTranslation();

frontend/src/pages/organization/AccessManagementPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -23,7 +25,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/" })
       },
       {

frontend/src/pages/organization/AdminPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,7 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/organization/secret-manager/overview" })
       },
       {

frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx

@@ -1,8 +1,9 @@
 import { Helmet } from "react-helmet";
 
-import { LogsSection } from "./components";
 import { PageHeader } from "@app/components/v2";
 
+import { LogsSection } from "./components";
+
 export const AuditLogsPage = () => {
   return (
     <div className="h-full bg-bunker-800">

frontend/src/pages/organization/AuditLogsPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,7 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/organization/secret-manager/overview" })
       },
       {

frontend/src/pages/organization/CertManagerOverviewPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,8 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "products",
-        link: linkOptions({ disabled: true, to: "/" })
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
       },
       {
         label: "Cert Management",

frontend/src/pages/organization/GroupDetailsByIDPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,7 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/organization/secret-manager/overview" })
       },
       {

frontend/src/pages/organization/IdentityDetailsByIDPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,7 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/organization/secret-manager/overview" })
       },
       {

frontend/src/pages/organization/KmsOverviewPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,8 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "products",
-        link: linkOptions({ disabled: true, to: "/" })
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
       },
       {
         label: "KMS",

frontend/src/pages/organization/RoleByIDPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,7 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/organization/secret-manager/overview" })
       },
       {

frontend/src/pages/organization/SecretManagerOverviewPage/SecretManagerOverviewPage.tsx

@@ -366,7 +366,7 @@ 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" />

frontend/src/pages/organization/SecretManagerOverviewPage/route.tsx

@@ -1,4 +1,6 @@
-import { createFileRoute, linkOptions } from "@tanstack/react-router";
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { createFileRoute } from "@tanstack/react-router";
 
 import { SecretManagerOverviewPage } from "./SecretManagerOverviewPage";
 
@@ -9,12 +11,11 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "products",
-        link: linkOptions({ disabled: true, to: "/" })
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
       },
       {
-        label: "Secret Management",
-        link: linkOptions({ to: "/organization/secret-manager/overview" })
+        label: "Secret Management"
       }
     ]
   })

frontend/src/pages/organization/SecretScanningPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -25,11 +27,12 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/" })
       },
       {
-        label: "secret scanning"
+        label: "Secret Scanning"
       }
     ]
   })

frontend/src/pages/organization/SecretSharingPage/SecretSharingPage.tsx

@@ -3,9 +3,10 @@ import { useTranslation } from "react-i18next";
 import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { ShareSecretSection } from "./components";
 import { PageHeader } from "@app/components/v2";
 
+import { ShareSecretSection } from "./components";
+
 export const SecretSharingPage = () => {
   const { t } = useTranslation();
 

frontend/src/pages/organization/SecretSharingPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,7 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/" })
       },
       {

frontend/src/pages/organization/SettingsPage/SettingsPage.tsx

@@ -1,9 +1,10 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
 
-import { OrgTabGroup } from "./components";
 import { PageHeader } from "@app/components/v2";
 
+import { OrgTabGroup } from "./components";
+
 export const SettingsPage = () => {
   const { t } = useTranslation();
 

frontend/src/pages/organization/SettingsPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -19,7 +21,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/" })
       },
       {

frontend/src/pages/organization/SshOverviewPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,8 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "products",
-        link: linkOptions({ disabled: true, to: "/" })
+        label: "Products",
+        icon: () => <FontAwesomeIcon icon={faHome} />
       },
       {
         label: "SSH",

frontend/src/pages/organization/UserDetailsByIDPage/route.tsx

@@ -1,3 +1,5 @@
+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";
@@ -9,7 +11,8 @@ export const Route = createFileRoute(
   context: () => ({
     breadcrumbs: [
       {
-        label: "home",
+        label: "Home",
+        icon: () => <FontAwesomeIcon icon={faHome} />,
         link: linkOptions({ to: "/organization/secret-manager/overview" })
       },
       {

frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx

@@ -4,7 +4,6 @@ import { useNavigate, useSearch } from "@tanstack/react-router";
 
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
-import { getProjectTitle } from "@app/helpers/project";
 import { withProjectPermission } from "@app/hoc";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 import { ProjectAccessControlTabs } from "@app/types/project";

frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx

@@ -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, formatRelative } from "date-fns";
+import { formatRelative } from "date-fns";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 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,

frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx

@@ -79,7 +79,7 @@ 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="container mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 text-white">
       {membershipDetails ? (
         <>
           <PageHeader

frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx

@@ -163,7 +163,7 @@ const Page = () => {
     );
 
   return (
-    <div className="container relative mx-auto max-w-7xl pb-12 text-white">
+    <div className="container relative mx-auto max-w-7xl text-white">
       <div className="relative">
         {view === IntegrationView.List ? (
           <motion.div

frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.utils.tsx

@@ -87,7 +87,7 @@ export const redirectForProviderAuth = (
           },
           search: {
             clientId: integrationOption.clientId,
-            state,
+            state
           }
         });
         break;

frontend/src/pages/secret-manager/IntegrationsListPage/components/CloudIntegrationSection/CloudIntegrationSection.tsx

@@ -80,7 +80,7 @@ export const CloudIntegrationSection = ({
           <NoEnvironmentsBanner projectId={currentWorkspace.id} />
         )}
       </div>
-      <div className="m-4 mt-7 flex flex-col items-start justify-between px-2 text-xl">
+      <div className="flex flex-col items-start justify-between py-4 text-xl">
         {onViewActiveIntegrations && (
           <Button
             variant="link"
@@ -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}`} />

frontend/src/pages/secret-manager/IntegrationsListPage/components/FrameworkIntegrationSection/FrameworkIntegrationSection.tsx

@@ -12,11 +12,11 @@ export const FrameworkIntegrationSection = () => {
 
   return (
     <>
-      <div className="mx-4 mb-4 mt-12 flex flex-col items-start justify-between px-2 text-xl">
+      <div className="mb-4 mt-12 flex flex-col items-start justify-between px-2 text-xl">
         <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}`}

frontend/src/pages/secret-manager/IntegrationsListPage/components/InfrastructureIntegrationSection/InfrastructureIntegrationSection.tsx

@@ -5,13 +5,13 @@ export const InfrastructureIntegrationSection = () => {
 
   return (
     <>
-      <div className="mx-4 mb-4 mt-12 flex flex-col items-start justify-between px-2 text-xl">
+      <div className="mb-4 mt-12 flex flex-col items-start justify-between px-2 text-xl">
         <h1 className="text-3xl font-semibold">Infrastructure Integrations</h1>
         <p className="text-base text-gray-400">
           Click on of the integration to read the documentation.
         </p>
       </div>
-      <div className="mx-6 grid grid-cols-2 gap-4 lg:grid-cols-3 2xl:grid-cols-4">
+      <div className="mx-2 grid grid-cols-2 gap-4 lg:grid-cols-3 2xl:grid-cols-4">
         {sortedIntegrations.map((integration) => (
           <a
             key={`framework-integration-${integration.slug}`}

frontend/src/pages/secret-manager/IntegrationsListPage/route.tsx

@@ -5,5 +5,15 @@ import { IntegrationsListPage } from "./IntegrationsListPage";
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/"
 )({
-  component: IntegrationsListPage
+  component: IntegrationsListPage,
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx

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

frontend/src/pages/secret-manager/SecretApprovalsPage/SecretApprovalsPage.tsx

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

frontend/src/pages/secret-manager/SecretApprovalsPage/route.tsx

@@ -12,5 +12,15 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/approval"
 )({
   component: SecretApprovalsPage,
-  validateSearch: zodValidator(SecretApprovalPageQueryParams)
+  validateSearch: zodValidator(SecretApprovalPageQueryParams),
+  beforeLoad: ({ context }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Approvals"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx

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

frontend/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/ActionBar.tsx

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

frontend/src/pages/secret-manager/SecretDashboardPage/route.tsx

@@ -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,7 +12,6 @@ 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"
 )({
@@ -17,5 +19,39 @@ export const Route = createFileRoute(
   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}
+            />
+          )
+        }))
+      ]
+    };
   }
 });

frontend/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx

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

frontend/src/pages/secret-manager/SecretRotationPage/route.tsx

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

frontend/src/pages/secret-manager/integrations/AzureKeyVaultAuthorizePage/AzureKeyVaultAuthorizePage.tsx

@@ -1,13 +1,12 @@
+import { Helmet } from "react-helmet";
 import { Controller, useForm } from "react-hook-form";
-
 import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useSearch } from "@tanstack/react-router";
 import z from "zod";
 
 import { Button, Card, CardTitle, FormControl, Input } from "@app/components/v2";
-import { Helmet } from "react-helmet";
-import { useSearch } from "@tanstack/react-router";
 import { ROUTE_PATHS } from "@app/const/routes";
 
 const schema = z.object({
@@ -18,7 +17,7 @@ type FormData = z.infer<typeof schema>;
 
 export function AzureKeyVaultAuthorizePage() {
   const { state, clientId } = useSearch({
-    from: ROUTE_PATHS.SecretManager.Integratons.AzureKeyVaultAuthorizePage.id,
+    from: ROUTE_PATHS.SecretManager.Integratons.AzureKeyVaultAuthorizePage.id
   });
 
   const { control, handleSubmit } = useForm<FormData>({
@@ -38,7 +37,7 @@ export function AzureKeyVaultAuthorizePage() {
   return (
     <div className="flex h-full w-full items-center justify-center">
       <Helmet>
-          <title>Authorize Azure Key Vault Integration</title>
+        <title>Authorize Azure Key Vault Integration</title>
         <link rel="icon" href="/infisical.ico" />
       </Helmet>
       <Card className="mb-12 max-w-lg rounded-md border border-mineshaft-600">
@@ -56,12 +55,12 @@ export function AzureKeyVaultAuthorizePage() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              <div className="ml-2 mb-1 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
+              <div className="mb-1 ml-2 inline-block cursor-default rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
                 <FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
                 Docs
                 <FontAwesomeIcon
                   icon={faArrowUpRightFromSquare}
-                  className="ml-1.5 mb-[0.07rem] text-xxs"
+                  className="mb-[0.07rem] ml-1.5 text-xxs"
                 />
               </div>
             </a>

frontend/src/pages/secret-manager/integrations/AzureKeyVaultAuthorizePage/route.tsx

@@ -1,12 +1,11 @@
 import { createFileRoute } from "@tanstack/react-router";
-import z from 'zod'
+import z from "zod";
 
 import { AzureKeyVaultAuthorizePage } from "./AzureKeyVaultAuthorizePage";
 
-
 const PageQueryParamsSchema = z.object({
   state: z.string(),
-  clientId: z.string().optional(),
+  clientId: z.string().optional()
 });
 
 export const Route = createFileRoute(

frontend/src/pages/secret-manager/integrations/CircleCIConfigurePage/CircleCIConfigurePage.tsx

@@ -187,7 +187,7 @@ export const CircleCIConfigurePage = () => {
           name="secretPath"
           render={({ field, fieldState: { error } }) => (
             <FormControl label="Secrets Path" errorText={error?.message} isError={Boolean(error)}>
-              <SecretPathInput {...field} environment={selectedEnvironment.slug}/>
+              <SecretPathInput {...field} environment={selectedEnvironment.slug} />
             </FormControl>
           )}
         />

frontend/src/pages/secret-manager/layout.tsx

@@ -1,3 +1,5 @@
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { workspaceKeys } from "@app/hooks/api";
@@ -23,9 +25,11 @@ export const Route = createFileRoute(
     });
 
     return {
+      project,
       breadcrumbs: [
         {
           label: "Secret Managers",
+          icon: () => <FontAwesomeIcon icon={faHome} />,
           link: linkOptions({ to: "/organization/secret-manager/overview" })
         },
         {