Merge branch 'main' of https://github.com/Infisical/infisical into feat/laravel-forge-app-conn-and-secret-sync

frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx

@@ -16,6 +16,7 @@ export const AccessManagementPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="instance"
             title="Access Control"
             description="Manage server admins within your Infisical instance."
           />

frontend/src/pages/admin/AuthenticationPage/AuthenticationPage.tsx

@@ -16,6 +16,7 @@ export const AuthenticationPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="instance"
             title="Authentication"
             description="Manage authentication settings for your Infisical instance."
           />

frontend/src/pages/admin/CachingPage/CachingPage.tsx

@@ -15,7 +15,11 @@ export const CachingPage = () => {
       </Helmet>
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title="Caching" description="Manage caching for your Infisical instance." />
+          <PageHeader
+            scope="instance"
+            title="Caching"
+            description="Manage caching for your Infisical instance."
+          />
           <CachingPageForm />
         </div>
       </div>

frontend/src/pages/admin/EncryptionPage/EncryptionPage.tsx

@@ -16,6 +16,7 @@ export const EncryptionPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="instance"
             title="Encryption"
             description="Manage encryption settings for your Infisical instance."
           />

frontend/src/pages/admin/EnvironmentPage/EnvironmentPage.tsx

@@ -16,6 +16,7 @@ export const EnvironmentPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="instance"
             title="Environment Variables"
             description="Manage the environment variables for your Infisical instance."
           />

frontend/src/pages/admin/GeneralPage/GeneralPage.tsx

@@ -18,6 +18,7 @@ export const GeneralPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="instance"
             title="General"
             description="Manage general settings for your Infisical instance."
           />

frontend/src/pages/admin/IntegrationsPage/IntegrationsPage.tsx

@@ -16,6 +16,7 @@ export const IntegrationsPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="instance"
             title="Integrations"
             description="Manage integrations for your Infisical instance."
           />

frontend/src/pages/admin/ResourceOverviewPage/ResourceOverviewPage.tsx

@@ -16,6 +16,7 @@ export const ResourceOverviewPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="instance"
             title="Resource Overview"
             description="Manage resources within your Infisical instance."
           />

frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx

@@ -153,7 +153,7 @@ const UserPanelTable = ({
               icon={adminsOnly && <FontAwesomeIcon icon={faCheckCircle} />}
               iconPos="right"
             >
-              <div className="flex items-center gap-2">
+              <div className="flex items-center gap-x-2">
                 <FontAwesomeIcon icon={faUserShield} className="text-yellow-700" />
                 <span>Server Admins</span>
               </div>

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

@@ -16,6 +16,7 @@ export const AlertingPage = () => {
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Alerting"
           description="Configure alerts for expiring certificates and CAs to maintain security and compliance."
         />

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

@@ -87,7 +87,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader scope="project" title={data.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">

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

@@ -17,6 +17,7 @@ export const CertificateAuthoritiesPage = () => {
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Certificate Authorities"
           description="Manage certificate authorities for issuing and signing certificates"
         />

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

@@ -33,6 +33,7 @@ export const CertificatesPage = () => {
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Certificates"
           description="View and track issued certificates, monitor expiration dates, and manage certificate lifecycles."
         />

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

@@ -45,6 +45,7 @@ export const IntegrationsListPage = () => {
       <div className="relative container mx-auto max-w-7xl pb-12 text-white">
         <div className="mb-8">
           <PageHeader
+            scope="project"
             title="Integrations"
             description="Manage integrations with third-party certificate services."
           />

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

@@ -73,7 +73,7 @@ export const PkiCollectionPage = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader scope="project" title={data.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">

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

@@ -78,7 +78,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader scope="project" title={data.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">

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

@@ -16,6 +16,7 @@ export const PkiSubscribersPage = () => {
         <div className="container mx-auto flex flex-col justify-between text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="project"
               title="Subscribers"
               description="Manage subscribers that request and receive certificates, including user devices, servers, and services."
             />

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

@@ -106,6 +106,7 @@ export const PkiTemplateListPage = () => {
         <div className="container mx-auto flex flex-col justify-between text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="project"
               title="Certificate Templates"
               description="Manage certificate template to request and issue dynamic certificates following a strict format."
             />

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

@@ -21,7 +21,7 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
       <div className="w-full max-w-7xl">
-        <PageHeader title={t("settings.project.title")} />
+        <PageHeader scope="project" title={t("settings.project.title")} />
         <Tabs defaultValue={tabs[0].key}>
           <TabList>
             {tabs.map((tab) => (

frontend/src/pages/kms/KmipPage/KmipPage.tsx

@@ -18,6 +18,7 @@ export const KmipPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="project"
             title="KMIP"
             description="Integrate with Infisical KMS via Key Management Interoperability Protocol."
           />

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

@@ -18,7 +18,8 @@ export const OverviewPage = () => {
       <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
-            title="Overview Page"
+            scope="project"
+            title="Overview"
             description="Manage keys and perform cryptographic operations."
           />
           <ProjectPermissionCan

frontend/src/pages/kms/SettingsPage/SettingsPage.tsx

@@ -21,7 +21,7 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
       <div className="w-full max-w-7xl">
-        <PageHeader title="Settings" />
+        <PageHeader scope="project" title="Settings" />
         <Tabs defaultValue={tabs[0].key}>
           <TabList>
             {tabs.map((tab) => (

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

@@ -82,7 +82,8 @@ export const AccessManagementPage = () => {
       </Helmet>
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
-          title="Organization Access Control"
+          scope="org"
+          title="Access Control"
           description="Manage fine-grained access for users, groups, roles, and identities within your organization resources."
         />
         {!currentOrg.shouldUseNewPrivilegeSystem && (
@@ -115,7 +116,7 @@ export const AccessManagementPage = () => {
             {tabSections
               .filter((el) => !el.isHidden)
               .map((el) => (
-                <Tab value={el.key} key={`org-access-tab-${el.key}`}>
+                <Tab variant="org" value={el.key} key={`org-access-tab-${el.key}`}>
                   {el.label}
                 </Tab>
               ))}

frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx

@@ -22,6 +22,7 @@ export const AppConnectionsPage = withPermission(
         <div className="flex w-full justify-center bg-bunker-800 text-white">
           <div className="w-full max-w-7xl">
             <PageHeader
+              scope="org"
               className="w-full"
               title="App Connections"
               description="Manage organization App Connections"

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

@@ -16,7 +16,8 @@ export const AuditLogsPage = () => {
       <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl">
           <PageHeader
-            title="Audit logs"
+            scope="org"
+            title="Audit Logs"
             description="Audit logs for security and compliance teams to monitor information access."
           />
           <LogsSection pageView />

frontend/src/pages/organization/BillingPage/BillingPage.tsx

@@ -18,8 +18,9 @@ export const BillingPage = () => {
         <meta property="og:image" content="/images/message.png" />
       </Helmet>
       <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
-        <div className="w-full max-w-7xl px-6">
+        <div className="w-full max-w-7xl">
           <PageHeader
+            scope="org"
             title={t("billing.title")}
             description="View your billing plan, next billing cycle."
           />

frontend/src/pages/organization/BillingPage/components/BillingTabGroup/BillingTabGroup.tsx

@@ -25,7 +25,9 @@ export const BillingTabGroup = withPermission(
       <Tabs defaultValue={tabs[0].key}>
         <TabList>
           {tabsFiltered.map((tab) => (
-            <Tab value={tab.key}>{tab.name}</Tab>
+            <Tab variant="org" value={tab.key}>
+              {tab.name}
+            </Tab>
           ))}
         </TabList>
         <TabPanel value={tabs[0].key}>

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

@@ -83,7 +83,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.group.name}>
+          <PageHeader scope="org" title={data.group.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">

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

@@ -75,7 +75,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.identity.name} />
+          <PageHeader scope="org" title={data.identity.name} />
           <div className="flex">
             <div className="mr-4 w-96">
               <IdentityDetailsSection identityId={identityId} handlePopUpOpen={handlePopUpOpen} />

frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx

@@ -14,6 +14,7 @@ export const NetworkingPage = () => {
       <div className="flex w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl">
           <PageHeader
+            scope="org"
             title="Networking"
             description="Manage gateways and relays to securely access private network resources from Infisical"
           />

frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx

@@ -22,7 +22,7 @@ export const NetworkingTabGroup = () => {
     <Tabs value={selectedTab} onValueChange={setSelectedTab}>
       <TabList>
         {tabs.map((tab) => (
-          <Tab value={tab.key} key={tab.key}>
+          <Tab variant="org" value={tab.key} key={tab.key}>
             {tab.name}
           </Tab>
         ))}

frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx

@@ -65,7 +65,8 @@ export const ProjectsPage = () => {
       </Helmet>
       <div className="mb-4 flex flex-col items-start justify-start">
         <PageHeader
-          title="Projects"
+          scope="org"
+          title="Overview"
           description="Your team's complete security toolkit - organized and ready when you need them."
         />
       </div>

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

@@ -81,6 +81,7 @@ export const Page = () => {
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="org"
             title={
               <div className="flex flex-col">
                 <div>

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

@@ -22,6 +22,7 @@ export const SecretSharingPage = () => {
       <div className="h-full">
         <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
           <PageHeader
+            scope="org"
             title="Secret Sharing"
             description="Share secrets securely using a shareable link"
           >

frontend/src/pages/organization/SecretSharingSettingsPage/SecretSharingSettingsPage.tsx

@@ -21,7 +21,7 @@ export const SecretSharingSettingsPage = withPermission(
         </Helmet>
         <div className="flex w-full justify-center bg-bunker-800 text-white">
           <div className="w-full max-w-7xl">
-            <PageHeader title="Secret Share Settings" />
+            <PageHeader scope="org" title="Secret Share Settings" />
             <SecretSharingSettingsTabGroup />
           </div>
         </div>

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

@@ -15,7 +15,7 @@ export const SettingsPage = () => {
       </Helmet>
       <div className="flex w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl">
-          <PageHeader title={t("settings.org.title")} />
+          <PageHeader scope="org" title={t("settings.org.title")} />
           <OrgTabGroup />
         </div>
       </div>

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

@@ -58,7 +58,7 @@ export const OrgTabGroup = () => {
     <Tabs value={selectedTab} onValueChange={setSelectedTab}>
       <TabList>
         {tabs.map((tab) => (
-          <Tab value={tab.key} key={tab.key}>
+          <Tab variant="org" value={tab.key} key={tab.key}>
             {tab.name}
           </Tab>
         ))}

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

@@ -119,6 +119,7 @@ const Page = withPermission(
         {membership && (
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="org"
               title={
                 membership.user.firstName || membership.user.lastName
                   ? `${membership.user.firstName} ${membership.user.lastName ?? ""}`.trim()

frontend/src/pages/pam/PamAccountsPage/PamAccountsPage.tsx

@@ -23,7 +23,11 @@ export const PamAccountsPage = () => {
         <div className="h-full bg-bunker-800">
           <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
-              <PageHeader title="Accounts" description="View, access, and manage accounts." />
+              <PageHeader
+                scope="project"
+                title="Accounts"
+                description="View, access, and manage accounts."
+              />
               <PamAccountsSection />
             </div>
           </div>

frontend/src/pages/pam/PamResourcesPage/PamResourcesPage.tsx

@@ -24,6 +24,7 @@ export const PamResourcesPage = () => {
           <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
               <PageHeader
+                scope="project"
                 title="Resources"
                 description="Manage resources such as servers, databases, and more."
               />

frontend/src/pages/pam/PamSessionsByIDPage/PamSessionByIDPage.tsx

@@ -23,6 +23,7 @@ const Page = () => {
       {session && (
         <div className="mx-auto mb-6 flex w-full max-w-7xl flex-col">
           <PageHeader
+            scope="project"
             title={`${session.accountName} Session`}
             description={`View details for this ${session.accountName} session.`}
           />

frontend/src/pages/pam/PamSessionsPage/PamSessionsPage.tsx

@@ -24,6 +24,7 @@ export const PamSessionPage = () => {
           <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
               <PageHeader
+                scope="project"
                 title="Sessions"
                 description="Filter and search through account sessions."
               />

frontend/src/pages/pam/SettingsPage/SettingsPage.tsx

@@ -13,7 +13,7 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
       <div className="w-full max-w-7xl">
-        <PageHeader title="Settings" description="Configure your PAM project." />
+        <PageHeader scope="project" title="Settings" description="Configure your PAM project." />
         <Tabs defaultValue="tab-project-general">
           <TabList>
             <Tab value="tab-project-general">General</Tab>

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

@@ -40,6 +40,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       <div className="mx-auto mb-6 w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Access Control"
           description="Manage fine-grained access for users, groups, roles, and identities within your project resources."
         />

frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx

@@ -23,6 +23,7 @@ export const AppConnectionsPage = withProjectPermission(
         <div className="flex w-full justify-center bg-bunker-800 text-white">
           <div className="w-full max-w-7xl">
             <PageHeader
+              scope="project"
               className="w-full"
               title="App Connections"
               description="Manage project App Connections"

frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx

@@ -16,6 +16,7 @@ export const AuditLogsPage = () => {
       <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
         <div className="w-full max-w-7xl">
           <PageHeader
+            scope="project"
             title="Audit logs"
             description="Audit logs for security and compliance teams to monitor information access."
           />

frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx

@@ -34,7 +34,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {groupMembership ? (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={groupMembership.group.name} />
+          <PageHeader scope="project" title={groupMembership.group.name} />
           <div className="flex">
             <div className="mr-4 w-96">
               <GroupDetailsSection groupMembership={groupMembership} />

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

@@ -117,6 +117,7 @@ const Page = () => {
       {identityMembershipDetails ? (
         <>
           <PageHeader
+            scope="project"
             title={identityMembershipDetails?.identity?.name}
             description={`Identity joined on ${identityMembershipDetails?.createdAt && formatRelative(new Date(identityMembershipDetails?.createdAt || ""), new Date())}`}
           >

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

@@ -119,6 +119,7 @@ export const Page = () => {
       {membershipDetails ? (
         <>
           <PageHeader
+            scope="project"
             title={
               membershipDetails.user.firstName || membershipDetails.user.lastName
                 ? `${membershipDetails.user.firstName} ${membershipDetails.user.lastName}`

frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx

@@ -90,6 +90,7 @@ const Page = () => {
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
           <PageHeader
+            scope="project"
             title={
               <div className="flex flex-col">
                 <div>

frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx

@@ -260,6 +260,7 @@ export const CommitDetailsTab = ({
         Commit History
       </Button>
       <PageHeader
+        scope="project"
         title={`${parsedCommitDetails.changes?.message}` || "No message"}
         description={
           <>

frontend/src/pages/secret-manager/CommitDetailsPage/components/RollbackPreviewTab/RollbackPreviewTab.tsx

@@ -307,6 +307,7 @@ export const RollbackPreviewTab = (): JSX.Element => {
           <div className="h-full w-full">
             <div>
               <PageHeader
+                scope="project"
                 title={`Restore folder at commit ${selectedCommitId.substring(0, 8)}`}
                 description={`Will return all changes in this folder to how they appeared at the point of commit ${selectedCommitId.substring(0, 8)}. Any modifications made after this commit will be undone.`}
               />

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

@@ -49,6 +49,7 @@ export const CommitsPage = () => {
     <div className="mx-auto flex h-full w-full max-w-7xl justify-center bg-bunker-800 py-4 text-white">
       <div className="w-full max-w-[75vw]">
         <PageHeader
+          scope="project"
           title="Commits"
           description="Track, inspect, and restore your secrets and folders with confidence. View the complete history of changes made to your environment, examine specific modifications at each commit point, and preview the exact impact before rolling back to previous states."
         />

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

@@ -94,6 +94,7 @@ export const IntegrationDetailsByIDPage = () => {
         {integration ? (
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="project"
               title={`${integrationSlugNameMapping[integration.integration]} Integration`}
             >
               <DropdownMenu>

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

@@ -48,6 +48,7 @@ export const IntegrationsListPage = () => {
       <div className="relative container mx-auto max-w-7xl pb-12 text-white">
         <div className="mb-8">
           <PageHeader
+            scope="project"
             title="Integrations"
             description="Manage integrations with third-party services."
           />

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

@@ -914,6 +914,7 @@ export const OverviewPage = () => {
       <div className="relative mx-auto max-w-7xl text-mineshaft-50 dark:scheme-dark">
         <div className="flex w-full items-baseline justify-between">
           <PageHeader
+            scope="project"
             title="Secrets Overview"
             description={
               <p className="text-md text-bunker-300">

frontend/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -82,6 +82,7 @@ type Props = {
       isImported: boolean;
     }[];
   }[];
+  isSecretPresent?: boolean;
 };
 
 export const SecretEditRow = ({
@@ -101,7 +102,8 @@ export const SecretEditRow = ({
   isRotatedSecret,
   importedBy,
   importedSecret,
-  isEmpty
+  isEmpty,
+  isSecretPresent
 }: Props) => {
   const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
     "editSecret"
@@ -113,20 +115,21 @@ export const SecretEditRow = ({
 
   const [isFieldFocused, setIsFieldFocused] = useToggle();
 
-  const fetchSecretValueParams = importedSecret
-    ? {
-        environment: importedSecret.environment,
-        secretPath: importedSecret.secretPath,
-        secretKey: importedSecret.secret?.key ?? "",
-        projectId: currentProject.id
-      }
-    : {
-        environment,
-        secretPath,
-        secretKey: secretName,
-        projectId: currentProject.id,
-        isOverride
-      };
+  const fetchSecretValueParams =
+    importedSecret && !isSecretPresent
+      ? {
+          environment: importedSecret.environment,
+          secretPath: importedSecret.secretPath,
+          secretKey: importedSecret.secret?.key ?? "",
+          projectId: currentProject.id
+        }
+      : {
+          environment,
+          secretPath,
+          secretKey: secretName,
+          projectId: currentProject.id,
+          isOverride
+        };
 
   // scott: only fetch value if secret exists, has non-empty value and user has permission
   const canFetchValue = Boolean(importedSecret ?? secretId) && !isEmpty && !secretValueHidden;

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

@@ -284,6 +284,7 @@ export const SecretOverviewTableRow = ({
                               environment={slug}
                               isRotatedSecret={secret?.isRotatedSecret}
                               importedBy={importedBy}
+                              isSecretPresent={Boolean(secret)}
                             />
                           </td>
                         </tr>

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

@@ -40,6 +40,7 @@ export const SecretApprovalsPage = () => {
       </Helmet>
       <div className="container mx-auto h-full w-full max-w-7xl bg-bunker-800 text-white">
         <PageHeader
+          scope="project"
           title="Approval Workflows"
           description="Create approval policies for any modifications to secrets in sensitive environments and folders."
         />

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

@@ -762,6 +762,7 @@ const Page = () => {
   return (
     <div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:scheme-dark">
       <PageHeader
+        scope="project"
         title="Secrets Management"
         description={
           <p className="text-md text-bunker-300">

frontend/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretItem.tsx

@@ -79,7 +79,7 @@ type Props = {
   isSelected?: boolean;
   onToggleSecretSelect: (secret: SecretV3RawSanitized) => void;
   tags: WsTag[];
-  onCreateTag: () => void;
+  onCreateTag: (secret?: SecretV3RawSanitized) => void;
   environment: string;
   secretPath: string;
   onShareSecret: (sec: SecretV3RawSanitized) => void;
@@ -731,7 +731,7 @@ export const SecretItem = memo(
                               className="h-3 w-3"
                             />
                           }
-                          onClick={onCreateTag}
+                          onClick={() => onCreateTag(secret)}
                         >
                           Create a tag
                         </Button>
@@ -924,7 +924,7 @@ export const SecretItem = memo(
                               className="h-3 w-3"
                             />
                           }
-                          onClick={onCreateTag}
+                          onClick={() => onCreateTag(secret)}
                         >
                           Create a tag
                         </Button>

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

@@ -465,6 +465,22 @@ export const SecretListView = ({
     [environment, secretPath, isProtectedBranch, isBatchMode, projectId, addPendingChange]
   );
 
+  // Function to append newly created tag to the current secret
+  const append = useCallback(
+    (newTag: WsTag) => {
+      const currentSecret = popUp.createTag.data as SecretV3RawSanitized;
+      if (!currentSecret) return;
+
+      const updatedTags = [...(currentSecret.tags || []), { id: newTag.id, slug: newTag.slug }];
+
+      handleSaveSecret(currentSecret, {
+        ...currentSecret,
+        tags: updatedTags
+      });
+    },
+    [popUp.createTag.data, handleSaveSecret]
+  );
+
   const handleSecretDelete = useCallback(async () => {
     const {
       key,
@@ -552,7 +568,13 @@ export const SecretListView = ({
   ]);
 
   // for optimization on minimise re-rendering of secret items
-  const onCreateTag = useCallback(() => handlePopUpOpen("createTag"), []);
+  const onCreateTag = useCallback((secret?: SecretV3RawSanitized) => {
+    if (secret) {
+      handlePopUpOpen("createTag", secret);
+    } else {
+      handlePopUpOpen("createTag");
+    }
+  }, []);
   const onDeleteSecret = useCallback(
     (sec: SecretV3RawSanitized) => handlePopUpOpen("deleteSecret", sec),
     []
@@ -640,6 +662,8 @@ export const SecretListView = ({
       <CreateTagModal
         isOpen={popUp.createTag.isOpen}
         onToggle={(isOpen) => handlePopUpToggle("createTag", isOpen)}
+        append={append}
+        currentSecret={popUp.createTag.data}
       />
       <AddShareSecretModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} />
     </>

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

@@ -147,6 +147,7 @@ const Page = () => {
   return (
     <div className="container mx-auto w-full max-w-7xl bg-bunker-800 text-white">
       <PageHeader
+        scope="project"
         title="Secret Rotation"
         description="Stop manually rotating secrets and automate credential rotation."
       >

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

@@ -42,6 +42,7 @@ export const SettingsPage = () => {
       </Helmet>
       <div className="w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Settings"
           description="Configure your secret manager's encryption, environments, webhooks and other configurations."
         />

frontend/src/pages/secret-scanning/SecretScanningDataSourcesPage/SecretScanningDataSourcesPage.tsx

@@ -26,6 +26,7 @@ export const SecretScanningDataSourcesPage = () => {
           <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
               <PageHeader
+                scope="project"
                 title="Data Sources"
                 description="Manage your Secret Scanning data sources."
               />

frontend/src/pages/secret-scanning/SecretScanningFindingsPage/SecretScanningFindingsPage.tsx

@@ -23,7 +23,11 @@ export const SecretScanningFindingsPage = () => {
         <div className="h-full bg-bunker-800">
           <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
             <div className="mx-auto mb-6 w-full max-w-7xl">
-              <PageHeader title="Findings" description="View Secret Leaks across your project." />
+              <PageHeader
+                scope="project"
+                title="Findings"
+                description="View Secret Leaks across your project."
+              />
               <SecretScanningFindingsSection />
             </div>
           </div>

frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx

@@ -19,6 +19,7 @@ export const SettingsPage = () => {
       </Helmet>
       <div className="w-full max-w-7xl">
         <PageHeader
+          scope="project"
           title="Settings"
           description="Configure your Secret Scanning product's configurations."
         />

frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx

@@ -17,7 +17,11 @@ export const SettingsPage = () => {
         <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
       </Helmet>
       <div className="w-full max-w-7xl">
-        <PageHeader title="Settings" description="Configure your SSH product's configurations." />
+        <PageHeader
+          scope="project"
+          title="Settings"
+          description="Configure your SSH product's configurations."
+        />
         <Tabs defaultValue="tab-project-general">
           <TabList>
             <Tab value="tab-project-general">General</Tab>

frontend/src/pages/ssh/SshCaByIDPage/SshCaByIDPage.tsx

@@ -70,7 +70,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.friendlyName}>
+          <PageHeader scope="project" title={data.friendlyName}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">

frontend/src/pages/ssh/SshCasPage/SshCasPage.tsx

@@ -16,6 +16,7 @@ export const SshCasPage = () => {
         <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="project"
               title="SSH Certificate Authorities"
               description="Manage the SSH certificate authorities used to sign user and host certificates, including custom and default CAs."
             />

frontend/src/pages/ssh/SshCertsPage/SshCertsPage.tsx

@@ -16,6 +16,7 @@ export const SshCertsPage = () => {
         <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="project"
               title="SSH Certificates"
               description="View and audit all issued SSH certificates, including validity and associated access metadata."
             />

frontend/src/pages/ssh/SshHostGroupDetailsByIDPage/SshHostGroupDetailsByIDPage.tsx

@@ -71,7 +71,7 @@ const Page = () => {
     <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
       {data && (
         <div className="mx-auto mb-6 w-full max-w-7xl">
-          <PageHeader title={data.name}>
+          <PageHeader scope="project" title={data.name}>
             <DropdownMenu>
               <DropdownMenuTrigger asChild className="rounded-lg">
                 <div className="hover:text-primary-400 data-[state=open]:text-primary-400">

frontend/src/pages/ssh/SshHostsPage/SshHostsPage.tsx

@@ -16,6 +16,7 @@ export const SshHostsPage = () => {
         <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
           <div className="mx-auto mb-6 w-full max-w-7xl">
             <PageHeader
+              scope="project"
               title="Hosts"
               description="Manage your SSH hosts, configure access policies, and define login behavior for secure connections."
             />