Merge pull request #4934 from Infisical/ENG-4198

improvements: styling and labeling additions to improve scope context
2026-01-06 22:23:53 -05:00 · 2025-11-25 16:11:39 -08:00
parent b674700569 e066d7c4a8
commit c00f692139
44 changed files with 226 additions and 124 deletions
--- a/frontend/public/locales/en/translations.json
+++ b/frontend/public/locales/en/translations.json
@@ -289,7 +289,7 @@
      }
    },
    "project": {
-      "title": "Settings",
+      "title": "Project Settings",
      "description": "These settings only apply to the currently selected Project.",
      "danger-zone": "Danger Zone",
      "delete-project": "Delete Project",
--- a/frontend/src/components/v2/PageHeader/PageHeader.tsx
+++ b/frontend/src/components/v2/PageHeader/PageHeader.tsx
@@ -3,14 +3,7 @@ import { ReactNode } from "@tanstack/react-router";
 import { LucideIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";

-import {
-  Badge,
-  InstanceIcon,
-  OrgIcon,
-  ProjectIcon,
-  SubOrgIcon,
-  TBadgeProps
-} from "@app/components/v3";
+import { InstanceIcon, OrgIcon, ProjectIcon, SubOrgIcon } from "@app/components/v3";
 import { ProjectType } from "@app/hooks/api/projects/types";

 type Props = {
@@ -21,41 +14,40 @@ type Props = {
  scope: "org" | "namespace" | "instance" | ProjectType | null;
 };

-const SCOPE_NAME: Record<NonNullable<Props["scope"]>, { label: string; icon: LucideIcon }> = {
-  org: { label: "Organization", icon: OrgIcon },
-  [ProjectType.SecretManager]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.CertificateManager]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.SSH]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.KMS]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.PAM]: { label: "Project", icon: ProjectIcon },
-  [ProjectType.SecretScanning]: { label: "Project", icon: ProjectIcon },
-  namespace: { label: "Sub-Organization", icon: SubOrgIcon },
-  instance: { label: "Server", icon: InstanceIcon }
-};
-
-const SCOPE_VARIANT: Record<NonNullable<Props["scope"]>, TBadgeProps["variant"]> = {
-  org: "org",
-  [ProjectType.SecretManager]: "project",
-  [ProjectType.CertificateManager]: "project",
-  [ProjectType.SSH]: "project",
-  [ProjectType.KMS]: "project",
-  [ProjectType.PAM]: "project",
-  [ProjectType.SecretScanning]: "project",
-  namespace: "sub-org",
-  instance: "neutral"
+const SCOPE_BADGE: Record<NonNullable<Props["scope"]>, { icon: LucideIcon; className: string }> = {
+  org: { className: "text-org", icon: OrgIcon },
+  [ProjectType.SecretManager]: { className: "text-project", icon: ProjectIcon },
+  [ProjectType.CertificateManager]: { className: "text-project", icon: ProjectIcon },
+  [ProjectType.SSH]: { className: "text-project", icon: ProjectIcon },
+  [ProjectType.KMS]: { className: "text-project", icon: ProjectIcon },
+  [ProjectType.PAM]: { className: "text-project", icon: ProjectIcon },
+  [ProjectType.SecretScanning]: { className: "text-project", icon: ProjectIcon },
+  namespace: { className: "text-sub-org", icon: SubOrgIcon },
+  instance: { className: "text-neutral", icon: InstanceIcon }
 };

 export const PageHeader = ({ title, description, children, className, scope }: Props) => (
  <div className={twMerge("mb-10 w-full", className)}>
    <div className="flex w-full justify-between">
      <div className="mr-4 flex w-full items-center">
-        <h1 className="text-3xl font-medium text-white capitalize">{title}</h1>
-        {scope && (
-          <Badge variant={SCOPE_VARIANT[scope]} className="mt-1 ml-2.5">
-            {createElement(SCOPE_NAME[scope].icon)}
-            {SCOPE_NAME[scope].label}
-          </Badge>
-        )}
+        <h1
+          className={twMerge(
+            "text-3xl font-medium text-white capitalize underline decoration-2 underline-offset-4",
+            scope === "org" && "decoration-org/90",
+            scope === "instance" && "decoration-neutral/90",
+            scope === "namespace" && "decoration-sub-org/90",
+            Object.values(ProjectType).includes((scope as ProjectType) ?? "") &&
+              "decoration-project/90",
+            !scope && "no-underline"
+          )}
+        >
+          {scope &&
+            createElement(SCOPE_BADGE[scope].icon, {
+              size: 26,
+              className: twMerge(SCOPE_BADGE[scope].className, "mr-3 mb-1 inline-block")
+            })}
+          {title}
+        </h1>
      </div>
      <div className="flex items-center gap-2">{children}</div>
    </div>
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -601,7 +601,7 @@ export const Navbar = () => {
                  }}
                >
                  <UserPlusIcon className="inline-block size-3.5" />
-                  <span className="ml-2 hidden md:inline-block">Invite Members</span>
+                  <span className="ml-2 hidden md:inline-block">Invite Users</span>
                </Link>
              ) : null
            }
@@ -705,7 +705,7 @@ export const Navbar = () => {
                  }}
                >
                  <DropdownMenuItem icon={<FontAwesomeIcon icon={faUserPlus} />}>
-                    Invite Members
+                    Invite Users
                  </DropdownMenuItem>
                </Link>
              ) : null
--- a/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
+++ b/frontend/src/pages/admin/AccessManagementPage/AccessManagementPage.tsx
@@ -17,7 +17,7 @@ export const AccessManagementPage = () => {
        <div className="mx-auto mb-6 w-full max-w-8xl">
          <PageHeader
            scope="instance"
-            title="Access Control"
+            title="Server Admin Access Control"
            description="Manage server admins within your Infisical instance."
          />
          <ServerAdminsTable />
--- a/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx
+++ b/frontend/src/pages/admin/ResourceOverviewPage/components/OrganizationsTable.tsx
@@ -350,8 +350,8 @@ const ViewMembersModalContent = ({
            className="my-auto bg-mineshaft-700"
            title={
              members.length
-                ? "No organization members match search..."
-                : "No organization members found"
+                ? "No organization users match search..."
+                : "No organization users found"
            }
            icon={faUsers}
          />
--- a/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
+++ b/frontend/src/pages/cert-manager/IntegrationsListPage/IntegrationsListPage.tsx
@@ -49,7 +49,7 @@ export const IntegrationsListPage = () => {
        <div className="mb-8">
          <PageHeader
            scope={ProjectType.CertificateManager}
-            title="Integrations"
+            title="Project Integrations"
            description="Manage integrations with third-party certificate services."
          />
          <Tabs orientation="vertical" value={currentTab} onValueChange={updateSelectedTab}>
--- a/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/cert-manager/SettingsPage/SettingsPage.tsx
@@ -1,7 +1,10 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { Link } from "@tanstack/react-router";
+import { InfoIcon } from "lucide-react";

 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { useOrganization } from "@app/context";
 import { ProjectType } from "@app/hooks/api/projects/types";
 import { ProjectGeneralTab } from "@app/pages/project/SettingsPage/components/ProjectGeneralTab";

@@ -15,6 +18,7 @@ const tabs = [

 export const SettingsPage = () => {
  const { t } = useTranslation();
+  const { currentOrg } = useOrganization();

  return (
    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
@@ -22,7 +26,17 @@ export const SettingsPage = () => {
        <title>{t("common.head-title", { title: t("settings.project.title") })}</title>
      </Helmet>
      <div className="w-full max-w-8xl">
-        <PageHeader scope={ProjectType.CertificateManager} title={t("settings.project.title")} />
+        <PageHeader scope={ProjectType.CertificateManager} title={t("settings.project.title")}>
+          <Link
+            to="/organizations/$orgId/settings"
+            params={{
+              orgId: currentOrg.id
+            }}
+            className="flex items-center gap-x-1.5 text-xs whitespace-nowrap text-neutral hover:underline"
+          >
+            <InfoIcon size={12} /> Looking for organization settings?
+          </Link>
+        </PageHeader>
        <Tabs orientation="vertical" defaultValue={tabs[0].key}>
          <TabList>
            {tabs.map((tab) => (
--- a/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/kms/OverviewPage/OverviewPage.tsx
@@ -20,7 +20,7 @@ export const OverviewPage = () => {
        <div className="mx-auto mb-6 w-full max-w-8xl">
          <PageHeader
            scope={ProjectType.KMS}
-            title="Overview"
+            title="Project Overview"
            description="Manage keys and perform cryptographic operations."
          />
          <ProjectPermissionCan
--- a/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/kms/SettingsPage/SettingsPage.tsx
@@ -1,7 +1,10 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { Link } from "@tanstack/react-router";
+import { InfoIcon } from "lucide-react";

 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { useOrganization } from "@app/context";
 import { ProjectType } from "@app/hooks/api/projects/types";
 import { ProjectGeneralTab } from "@app/pages/project/SettingsPage/components/ProjectGeneralTab";

@@ -16,6 +19,8 @@ const tabs = [
 export const SettingsPage = () => {
  const { t } = useTranslation();

+  const { currentOrg } = useOrganization();
+
  return (
    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
      <Helmet>
@@ -24,9 +29,19 @@ export const SettingsPage = () => {
      <div className="w-full max-w-8xl">
        <PageHeader
          scope={ProjectType.KMS}
-          title="Settings"
+          title="Project Settings"
          description="Configure general project settings"
-        />
+        >
+          <Link
+            to="/organizations/$orgId/settings"
+            params={{
+              orgId: currentOrg.id
+            }}
+            className="flex items-center gap-x-1.5 text-xs whitespace-nowrap text-neutral hover:underline"
+          >
+            <InfoIcon size={12} /> Looking for organization settings?
+          </Link>
+        </PageHeader>
        <Tabs orientation="vertical" defaultValue={tabs[0].key}>
          <TabList>
            {tabs.map((tab) => (
--- a/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/AccessManagementPage.tsx
@@ -83,7 +83,7 @@ export const AccessManagementPage = () => {
      <div className="mx-auto mb-6 w-full max-w-8xl">
        <PageHeader
          scope={isSubOrganization ? "namespace" : "org"}
-          title="Access Control"
+          title={`${isSubOrganization ? "Sub-Organization" : "Organization"} Access Control`}
          description="Manage fine-grained access for users, groups, roles, and machine identities within your organization resources."
        />
        {!currentOrg.shouldUseNewPrivilegeSystem && (
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsSection.tsx
@@ -51,19 +51,19 @@ export const OrgGroupsSection = () => {
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
        <div className="flex items-center gap-x-2">
-          <p className="text-xl font-medium text-mineshaft-100">Groups</p>
+          <p className="text-xl font-medium text-mineshaft-100">Organization Groups</p>
          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/groups" />
        </div>
        <OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
          {(isAllowed) => (
            <Button
-              colorSchema="secondary"
+              variant="outline_bg"
              type="submit"
              leftIcon={<FontAwesomeIcon icon={faPlus} />}
              onClick={() => handleAddGroupModal()}
              isDisabled={!isAllowed}
            >
-              Create Group
+              Create Organization Group
            </Button>
          )}
        </OrgPermissionCan>
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgGroupsTab/components/OrgGroupsSection/OrgGroupsTable.tsx
@@ -159,7 +159,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search groups..."
+        placeholder="Search organization groups..."
      />
      <TableContainer className="mt-4">
        <Table>
@@ -205,7 +205,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
              </Th>
              <Th>
                <div className="flex items-center">
-                  Role
+                  Organization Role
                  <IconButton
                    variant="plain"
                    className={`ml-2 ${orderBy === GroupsOrderBy.Role ? "" : "opacity-30"}`}
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentitySection.tsx
@@ -99,7 +99,9 @@ export const IdentitySection = withPermission(
        <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
          <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
            <div className="flex flex-1 items-center gap-x-2">
-              <p className="text-xl font-medium text-mineshaft-100">Machine Identities</p>
+              <p className="text-xl font-medium text-mineshaft-100">
+                Organization Machine Identities
+              </p>
              <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/machine-identities" />
            </div>
            <div className="flex items-center">
@@ -129,7 +131,9 @@ export const IdentitySection = withPermission(
                    }}
                    isDisabled={!isAllowed}
                  >
-                    Add Machine Identity
+                    {isSubOrganization
+                      ? "Add Machine Identity to Sub-Organization"
+                      : "Create Organization Machine Identity"}
                  </Button>
                )}
              </OrgPermissionCan>
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgIdentityTab/components/IdentitySection/IdentityTable.tsx
@@ -200,7 +200,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
              </DropdownSubMenuTrigger>
              <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
-                  Filter Machine Identities by Role
+                  Filter Organization Machine Identities by Role
                </DropdownMenuLabel>
                {roles?.map(({ id, slug, name }) => (
                  <DropdownMenuItem
@@ -258,7 +258,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
              </Th>
              <Th>
                <div className="flex items-center">
-                  Role
+                  Organization Role
                  <IconButton
                    variant="plain"
                    className={`ml-2 ${orderBy === OrgIdentityOrderBy.Role ? "" : "opacity-30"}`}
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx
@@ -205,13 +205,13 @@ export const OrgMembersSection = () => {
      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
          <div className="flex items-center gap-x-2">
-            <p className="text-xl font-medium text-mineshaft-100">Users</p>
+            <p className="text-xl font-medium text-mineshaft-100">Organization Users</p>
            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/user-identities" />
          </div>
          <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
            {(isAllowed) => (
              <Button
-                colorSchema="secondary"
+                variant="outline_bg"
                type="submit"
                leftIcon={<UserPlusIcon size={16} />}
                onClick={() =>
@@ -219,7 +219,9 @@ export const OrgMembersSection = () => {
                }
                isDisabled={!isAllowed}
              >
-                {isSubOrganization ? "Add Members" : "Invite Members"}
+                {isSubOrganization
+                  ? "Add Users to Sub-Organization"
+                  : "Invite Users to Organization"}
              </Button>
            )}
          </OrgPermissionCan>
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx
@@ -336,7 +336,7 @@ export const OrgMembersTable = ({
              </DropdownSubMenuTrigger>
              <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
-                  Apply Roles to Filter Users
+                  Filter Organization Users by Role
                </DropdownMenuLabel>
                {roles?.map(({ id, slug, name }) => (
                  <DropdownMenuItem
@@ -365,7 +365,7 @@ export const OrgMembersTable = ({
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          placeholder="Search members..."
+          placeholder="Search organization users..."
        />
      </div>
      <TableContainer className="mt-4">
@@ -434,7 +434,7 @@ export const OrgMembersTable = ({
              </Th>
              <Th className="w-1/3">
                <div className="flex items-center">
-                  Role
+                  Organization Role
                  <IconButton
                    variant="plain"
                    className={`ml-2 ${orderBy === OrgMembersOrderBy.Role ? "" : "opacity-30"}`}
@@ -727,8 +727,8 @@ export const OrgMembersTable = ({
          <EmptyState
            title={
              members.length
-                ? "No organization members match search..."
-                : "No organization members found"
+                ? "No organization users match search..."
+                : "No organization users found"
            }
            icon={members.length ? faSearch : faUsers}
          />
--- a/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
+++ b/frontend/src/pages/organization/AccessManagementPage/components/OrgRoleTabSection/OrgRoleTable.tsx
@@ -199,7 +199,7 @@ export const OrgRoleTable = () => {
        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
          {(isAllowed) => (
            <Button
-              colorSchema="secondary"
+              variant="outline_bg"
              type="submit"
              leftIcon={<FontAwesomeIcon icon={faPlus} />}
              onClick={() => {
@@ -207,7 +207,7 @@ export const OrgRoleTable = () => {
              }}
              isDisabled={!isAllowed}
            >
-              Add Role
+              Add Organization Role
            </Button>
          )}
        </OrgPermissionCan>
@@ -216,7 +216,7 @@ export const OrgRoleTable = () => {
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search roles..."
+        placeholder="Search organization roles..."
        className="flex-1"
        containerClassName="mb-4"
      />
@@ -441,7 +441,7 @@ export const OrgRoleTable = () => {
          <EmptyState
            title={
              roles?.length
-                ? "No roles match search..."
+                ? "No organization roles match search..."
                : "This organization does not have any roles"
            }
            icon={roles?.length ? faSearch : undefined}
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/AppConnectionsPage.tsx
@@ -27,7 +27,7 @@ export const AppConnectionsPage = withPermission(
            <PageHeader
              scope={isSubOrganization ? "namespace" : "org"}
              className="w-full"
-              title="App Connections"
+              title={`${isSubOrganization ? "Sub-Organization" : "Organization"} App Connections`}
              description="Manage organization App Connections"
            />
            <div className="mb-4 flex w-full flex-col rounded-md border border-blue-500/50 bg-blue-500/30 px-4 py-2 text-sm text-blue-200">
--- a/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
+++ b/frontend/src/pages/organization/AuditLogsPage/AuditLogsPage.tsx
@@ -19,7 +19,7 @@ export const AuditLogsPage = () => {
        <div className="w-full max-w-8xl">
          <PageHeader
            scope={isSubOrganization ? "namespace" : "org"}
-            title="Audit Logs"
+            title={`${isSubOrganization ? "Sub-Organization" : "Organization"} Audit Logs`}
            description="Audit logs for security and compliance teams to monitor information access."
          />
          <LogsSection pageView />
--- a/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
@@ -88,7 +88,7 @@ const Page = () => {
            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
          >
            <FontAwesomeIcon icon={faChevronLeft} />
-            Groups
+            Organization Groups
          </Link>
          <PageHeader
            scope={isSubOrganization ? "namespace" : "org"}
--- a/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
@@ -82,7 +82,7 @@ const Page = () => {
            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
          >
            <FontAwesomeIcon icon={faChevronLeft} />
-            Machine Identities
+            Organization Machine Identities
          </Link>
          <PageHeader
            scope={isSubOrganization ? "namespace" : "org"}
--- a/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
+++ b/frontend/src/pages/organization/ProjectsPage/ProjectsPage.tsx
@@ -81,7 +81,7 @@ export const ProjectsPage = () => {
      </Helmet>
      <PageHeader
        scope={isSubOrganization ? "namespace" : "org"}
-        title="Overview"
+        title={`${isSubOrganization ? "Sub-Organization" : "Organization"} Overview`}
        description="Your team's complete security toolkit - organized and ready when you need them."
      />
      {projectListView === ProjectListView.MyProjects ? (
--- a/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/organization/SettingsPage/SettingsPage.tsx
@@ -20,7 +20,7 @@ export const SettingsPage = () => {
          <PageHeader
            scope={isSubOrganization ? "namespace" : "org"}
            description="Configure organization-wide settings"
-            title={t("settings.org.title")}
+            title={isSubOrganization ? "Sub-Organization Settings" : "Organization Settings"}
          />
          <OrgTabGroup />
        </div>
--- a/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
+++ b/frontend/src/pages/organization/UserDetailsByIDPage/UserDetailsByIDPage.tsx
@@ -112,7 +112,7 @@ const Page = withPermission(
              className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
            >
              <FontAwesomeIcon icon={faChevronLeft} />
-              Users
+              Organization Users
            </Link>
            <PageHeader
              scope={isSubOrganization ? "namespace" : "org"}
--- a/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/pam/SettingsPage/SettingsPage.tsx
@@ -1,13 +1,18 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { Link } from "@tanstack/react-router";
+import { InfoIcon } from "lucide-react";

 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
+import { useOrganization } from "@app/context";
 import { ProjectType } from "@app/hooks/api/projects/types";
 import { ProjectGeneralTab } from "@app/pages/project/SettingsPage/components/ProjectGeneralTab";

 export const SettingsPage = () => {
  const { t } = useTranslation();

+  const { currentOrg } = useOrganization();
+
  return (
    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
      <Helmet>
@@ -16,9 +21,19 @@ export const SettingsPage = () => {
      <div className="w-full max-w-8xl">
        <PageHeader
          scope={ProjectType.PAM}
-          title="Settings"
+          title="Project Settings"
          description="Configure your PAM project."
-        />
+        >
+          <Link
+            to="/organizations/$orgId/settings"
+            params={{
+              orgId: currentOrg.id
+            }}
+            className="flex items-center gap-x-1.5 text-xs whitespace-nowrap text-neutral hover:underline"
+          >
+            <InfoIcon size={12} /> Looking for organization settings?
+          </Link>
+        </PageHeader>
        <Tabs orientation="vertical" defaultValue="tab-project-general">
          <TabList>
            <Tab variant="project" value="tab-project-general">
--- a/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
+++ b/frontend/src/pages/project/AccessControlPage/AccessControlPage.tsx
@@ -1,6 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useSearch } from "@tanstack/react-router";
+import { Link, useNavigate, useSearch } from "@tanstack/react-router";
+import { InfoIcon } from "lucide-react";

 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { useOrganization, useProject } from "@app/context";
@@ -43,9 +44,19 @@ const Page = () => {
      <div className="mx-auto mb-6 w-full max-w-8xl">
        <PageHeader
          scope={currentProject.type}
-          title="Access Control"
+          title="Project Access Control"
          description="Manage fine-grained access for users, groups, roles, and machine identities within your project resources."
-        />
+        >
+          <Link
+            to="/organizations/$orgId/access-management"
+            params={{
+              orgId: currentOrg.id
+            }}
+            className="flex items-center gap-x-1.5 text-xs whitespace-nowrap text-neutral hover:underline"
+          >
+            <InfoIcon size={12} /> Looking for organization access control?
+          </Link>
+        </PageHeader>
        <Tabs orientation="vertical" value={selectedTab} onValueChange={updateSelectedTab}>
          <TabList>
            <Tab variant="project" value={ProjectAccessControlTabs.Member}>
--- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
@@ -59,19 +59,19 @@ export const GroupsSection = () => {
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-4 flex items-center justify-between">
        <div className="flex items-center gap-x-2">
-          <p className="text-xl font-medium text-mineshaft-100">User Groups</p>
+          <p className="text-xl font-medium text-mineshaft-100">Project Groups</p>
          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/groups#user-groups" />
        </div>
        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Groups}>
          {(isAllowed) => (
            <Button
-              colorSchema="secondary"
+              variant="outline_bg"
              type="submit"
              leftIcon={<FontAwesomeIcon icon={faPlus} />}
              onClick={() => handleAddGroupModal()}
              isDisabled={!isAllowed}
            >
-              Add Group
+              Add Group to Project
            </Button>
          )}
        </ProjectPermissionCan>
--- a/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx
@@ -122,7 +122,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-        placeholder="Search members..."
+        placeholder="Search project groups..."
      />
      <TableContainer className="mt-4">
        <Table>
@@ -143,7 +143,7 @@ export const GroupTable = ({ handlePopUpOpen }: Props) => {
                  </IconButton>
                </div>
              </Th>
-              <Th>Role</Th>
+              <Th>Project Role</Th>
              <Th>Added on</Th>
              <Th className="w-5" />
            </Tr>
--- a/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/IdentityTab/IdentityTab.tsx
@@ -197,7 +197,7 @@ export const IdentityTab = withProjectPermission(
      <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
        <div className="mb-4 flex items-center justify-between">
          <div className="flex items-center gap-x-2">
-            <p className="text-xl font-medium text-mineshaft-100">Machine Identities</p>
+            <p className="text-xl font-medium text-mineshaft-100">Project Machine Identities</p>
            <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/machine-identities" />
          </div>
          <div className="flex items-center">
@@ -212,7 +212,7 @@ export const IdentityTab = withProjectPermission(
                  onClick={() => handlePopUpOpen("createIdentity")}
                  isDisabled={!isAllowed}
                >
-                  Add Machine Identity
+                  Add Machine Identity to Project
                </Button>
              )}
            </ProjectPermissionCan>
@@ -223,7 +223,7 @@ export const IdentityTab = withProjectPermission(
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          placeholder="Search machine identities by name..."
+          placeholder="Search project machine identities by name..."
        />
        <TableContainer>
          <Table>
@@ -251,7 +251,7 @@ export const IdentityTab = withProjectPermission(
                    </IconButton>
                  </div>
                </Th>
-                <Th className="w-1/3">Role</Th>
+                <Th className="w-1/3">Project Role</Th>
                <Th>Managed by</Th>
                <Th className="w-5">{isFetching ? <Spinner size="xs" /> : null}</Th>
              </Tr>
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersSection.tsx
@@ -49,19 +49,19 @@ export const MembersSection = () => {
    <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
      <div className="mb-4 flex items-center justify-between">
        <div className="flex items-center gap-x-2">
-          <p className="text-xl font-medium text-mineshaft-100">Users</p>
+          <p className="text-xl font-medium text-mineshaft-100">Project Users</p>
          <DocumentationLinkBadge href="https://infisical.com/docs/documentation/platform/identities/user-identities" />
        </div>
        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Member}>
          {(isAllowed) => (
            <Button
-              colorSchema="secondary"
+              variant="outline_bg"
              type="submit"
              leftIcon={<FontAwesomeIcon icon={faPlus} />}
              onClick={() => handlePopUpOpen("addMember")}
              isDisabled={!isAllowed}
            >
-              Add Member
+              Add Users to Project
            </Button>
          )}
        </ProjectPermissionCan>
--- a/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/MembersTab/components/MembersTable.tsx
@@ -208,7 +208,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
              </DropdownSubMenuTrigger>
              <DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
                <DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
-                  Apply Roles to Filter Users
+                  Filter Project Users by Role
                </DropdownMenuLabel>
                {projectRoles?.map(({ id, slug, name }) => (
                  <DropdownMenuItem
@@ -237,7 +237,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-          placeholder="Search members..."
+          placeholder="Search project users..."
        />
      </div>
      <TableContainer className="mt-4">
@@ -282,7 +282,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
                  </IconButton>
                </div>
              </Th>
-              <Th>Role</Th>
+              <Th>Project Role</Th>
              <Th className="w-5" />
            </Tr>
          </THead>
@@ -462,9 +462,7 @@ export const MembersTable = ({ handlePopUpOpen }: Props) => {
        )}
        {!isMembersLoading && !filteredUsers?.length && (
          <EmptyState
-            title={
-              members.length ? "No project members match search..." : "No project members found"
-            }
+            title={members.length ? "No project users match search..." : "No project users found"}
            icon={members.length ? faSearch : faUsers}
          />
        )}
--- a/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
@@ -170,13 +170,13 @@ export const ProjectRoleList = () => {
        <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Role}>
          {(isAllowed) => (
            <Button
-              colorSchema="secondary"
+              variant="outline_bg"
              type="submit"
              leftIcon={<FontAwesomeIcon icon={faPlus} />}
              onClick={() => handlePopUpOpen("role")}
              isDisabled={!isAllowed}
            >
-              Add Role
+              Add Project Role
            </Button>
          )}
        </ProjectPermissionCan>
--- a/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx
+++ b/frontend/src/pages/project/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenSection.tsx
@@ -57,7 +57,7 @@ export const ServiceTokenSection = withProjectPermission(
          >
            {(isAllowed) => (
              <Button
-                colorSchema="secondary"
+                variant="outline_bg"
                leftIcon={<FontAwesomeIcon icon={faPlus} />}
                onClick={() => {
                  handlePopUpOpen("createAPIToken");
--- a/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
+++ b/frontend/src/pages/project/AppConnectionsPage/AppConnectionsPage.tsx
@@ -25,7 +25,7 @@ export const AppConnectionsPage = withProjectPermission(
            <PageHeader
              scope={currentProject.type}
              className="w-full"
-              title="App Connections"
+              title="Project App Connections"
              description="Manage project App Connections"
            />

--- a/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
+++ b/frontend/src/pages/project/AuditLogsPage/AuditLogsPage.tsx
@@ -1,4 +1,6 @@
 import { Helmet } from "react-helmet";
+import { Link } from "@tanstack/react-router";
+import { InfoIcon } from "lucide-react";

 import { PageHeader } from "@app/components/v2";
 import { useProject } from "@app/context";
@@ -17,9 +19,19 @@ export const AuditLogsPage = () => {
        <div className="w-full max-w-8xl">
          <PageHeader
            scope={currentProject.type}
-            title="Audit logs"
+            title="Project Audit logs"
            description="Audit logs for security and compliance teams to monitor information access."
-          />
+          >
+            <Link
+              to="/organizations/$orgId/audit-logs"
+              params={{
+                orgId: currentProject.orgId
+              }}
+              className="flex items-center gap-x-1.5 text-xs whitespace-nowrap text-neutral hover:underline"
+            >
+              <InfoIcon size={12} /> Looking for organization audit logs?
+            </Link>
+          </PageHeader>
          <LogsSection pageView project={currentProject} />
        </div>
      </div>
--- a/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/GroupDetailsByIDPage/GroupDetailsByIDPage.tsx
@@ -57,7 +57,7 @@ const Page = () => {
            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
          >
            <FontAwesomeIcon icon={faChevronLeft} />
-            Groups
+            Project Groups
          </Link>
          <PageHeader
            scope={currentProject.type}
--- a/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
@@ -149,7 +149,7 @@ const Page = () => {
            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
          >
            <FontAwesomeIcon icon={faChevronLeft} />
-            Machine Identities
+            Project Machine Identities
          </Link>
          <PageHeader
            scope={currentProject.type}
--- a/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
+++ b/frontend/src/pages/project/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
@@ -128,7 +128,7 @@ export const Page = () => {
            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
          >
            <FontAwesomeIcon icon={faChevronLeft} />
-            Users
+            Project Users
          </Link>
          <PageHeader
            scope={currentProject.type}
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/RoleDetailsBySlugPage.tsx
@@ -104,7 +104,7 @@ const Page = () => {
            className="mb-4 flex items-center gap-x-2 text-sm text-mineshaft-400"
          >
            <FontAwesomeIcon icon={faChevronLeft} />
-            Roles
+            Project Roles
          </Link>
          <PageHeader
            scope={currentProject.type}
--- a/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
+++ b/frontend/src/pages/secret-manager/IntegrationsListPage/IntegrationsListPage.tsx
@@ -57,7 +57,7 @@ export const IntegrationsListPage = () => {
        <div className="mb-8">
          <PageHeader
            scope={ProjectType.SecretManager}
-            title="Integrations"
+            title="Project Integrations"
            description="Manage integrations with third-party services."
          />
          <Tabs orientation="vertical" value={selectedTab} onValueChange={updateSelectedTab}>
--- a/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
+++ b/frontend/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
@@ -933,12 +933,12 @@ export const OverviewPage = () => {
        <div className="flex w-full items-baseline justify-between">
          <PageHeader
            scope={ProjectType.SecretManager}
-            title="Overview"
+            title="Project Overview"
            description={
              <p className="text-md text-bunker-300">
                Inject your secrets using
                <a
-                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                  className="ml-1 text-mineshaft-200 underline decoration-mineshaft-400/65 underline-offset-3 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
                  href="https://infisical.com/docs/cli/overview"
                  target="_blank"
                  rel="noopener noreferrer"
@@ -947,7 +947,7 @@ export const OverviewPage = () => {
                </a>
                ,
                <a
-                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                  className="ml-1 text-mineshaft-200 underline decoration-mineshaft-400/65 underline-offset-3 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
                  href="https://infisical.com/docs/documentation/getting-started/api"
                  target="_blank"
                  rel="noopener noreferrer"
@@ -956,7 +956,7 @@ export const OverviewPage = () => {
                </a>
                ,
                <a
-                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                  className="ml-1 text-mineshaft-200 underline decoration-mineshaft-400/65 underline-offset-3 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
                  href="https://infisical.com/docs/sdks/overview"
                  target="_blank"
                  rel="noopener noreferrer"
@@ -965,7 +965,7 @@ export const OverviewPage = () => {
                </a>
                , and
                <a
-                  className="ml-1 text-mineshaft-300 underline decoration-primary-800 underline-offset-4 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
+                  className="ml-1 text-mineshaft-200 underline decoration-mineshaft-400/65 underline-offset-3 duration-200 hover:text-mineshaft-100 hover:decoration-primary-600"
                  href="https://infisical.com/docs/documentation/getting-started/introduction"
                  target="_blank"
                  rel="noopener noreferrer"
--- a/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/secret-manager/SettingsPage/SettingsPage.tsx
@@ -1,5 +1,7 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { Link } from "@tanstack/react-router";
+import { InfoIcon } from "lucide-react";

 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
 import { useProject } from "@app/context";
@@ -43,9 +45,19 @@ export const SettingsPage = () => {
      <div className="w-full max-w-8xl">
        <PageHeader
          scope={ProjectType.SecretManager}
-          title="Settings"
+          title="Project Settings"
          description="Configure your secret manager's encryption, environments, webhooks and other configurations."
-        />
+        >
+          <Link
+            to="/organizations/$orgId/settings"
+            params={{
+              orgId: currentProject.orgId
+            }}
+            className="flex items-center gap-x-1.5 text-xs whitespace-nowrap text-neutral hover:underline"
+          >
+            <InfoIcon size={12} /> Looking for organization settings?
+          </Link>
+        </PageHeader>
        <Tabs orientation="vertical" defaultValue={tabs[0].key}>
          <TabList>
            {tabs
--- a/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/secret-scanning/SettingsPage/SettingsPage.tsx
@@ -1,9 +1,11 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { Link } from "@tanstack/react-router";
+import { InfoIcon } from "lucide-react";

 import { ProjectPermissionCan } from "@app/components/permissions";
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub, useOrganization } from "@app/context";
 import { ProjectPermissionSecretScanningConfigActions } from "@app/context/ProjectPermissionContext/types";
 import { ProjectType } from "@app/hooks/api/projects/types";
 import { ProjectGeneralTab } from "@app/pages/project/SettingsPage/components/ProjectGeneralTab";
@@ -12,6 +14,7 @@ import { ProjectScanningConfigTab } from "./components/ProjectScanningConfigTab"

 export const SettingsPage = () => {
  const { t } = useTranslation();
+  const { currentOrg } = useOrganization();

  return (
    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
@@ -21,9 +24,19 @@ export const SettingsPage = () => {
      <div className="w-full max-w-8xl">
        <PageHeader
          scope={ProjectType.SecretScanning}
-          title="Settings"
+          title="Project Settings"
          description="Configure your Secret Scanning product's configurations."
-        />
+        >
+          <Link
+            to="/organizations/$orgId/settings"
+            params={{
+              orgId: currentOrg.id
+            }}
+            className="flex items-center gap-x-1.5 text-xs whitespace-nowrap text-neutral hover:underline"
+          >
+            <InfoIcon size={12} /> Looking for organization settings?
+          </Link>
+        </PageHeader>
        <Tabs orientation="vertical" defaultValue="tab-project-general">
          <TabList>
            <Tab variant="project" value="tab-project-general">
--- a/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
+++ b/frontend/src/pages/ssh/SettingsPage/SettingsPage.tsx
@@ -1,9 +1,11 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
+import { Link } from "@tanstack/react-router";
+import { InfoIcon } from "lucide-react";

 import { ProjectPermissionCan } from "@app/components/permissions";
 import { PageHeader, Tab, TabList, TabPanel, Tabs } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionActions, ProjectPermissionSub, useOrganization } from "@app/context";
 import { ProjectType } from "@app/hooks/api/projects/types";
 import { ProjectGeneralTab } from "@app/pages/project/SettingsPage/components/ProjectGeneralTab";

@@ -12,6 +14,8 @@ import { ProjectSshTab } from "./components/ProjectSshTab";
 export const SettingsPage = () => {
  const { t } = useTranslation();

+  const { currentOrg } = useOrganization();
+
  return (
    <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
      <Helmet>
@@ -20,9 +24,19 @@ export const SettingsPage = () => {
      <div className="w-full max-w-8xl">
        <PageHeader
          scope={ProjectType.SSH}
-          title="Settings"
+          title="Project Settings"
          description="Configure your SSH product's configurations."
-        />
+        >
+          <Link
+            to="/organizations/$orgId/settings"
+            params={{
+              orgId: currentOrg.id
+            }}
+            className="flex items-center gap-x-1.5 text-xs whitespace-nowrap text-neutral hover:underline"
+          >
+            <InfoIcon size={12} /> Looking for organization settings?
+          </Link>
+        </PageHeader>
        <Tabs orientation="vertical" defaultValue="tab-project-general">
          <TabList>
            <Tab variant="project" value="tab-project-general">