From 49f5bf2aef367cd735573d86de50a10a31f91e14 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 25 Nov 2025 14:01:33 -0800
Subject: [PATCH 1/3] improvement: refactor and update nav bar styling

---
 frontend/src/components/v2/Tabs/Tabs.tsx      |   4 +-
 frontend/src/helpers/appConnections.ts        |   2 +-
 .../hooks/api/appConnections/types/index.ts   |   2 +-
 frontend/src/layouts/KmsLayout/KmsLayout.tsx  |   4 +-
 .../components/NavBar/Navbar.tsx              | 117 ++++++++----------
 .../components/OrgNavBar/OrgNavBar.tsx        |   6 +-
 frontend/src/layouts/PamLayout/PamLayout.tsx  |   4 +-
 .../PkiManagerLayout/PkiManagerLayout.tsx     |   4 +-
 .../ProjectSelect/ProjectSelect.tsx           |  22 ++--
 .../SecretManagerLayout.tsx                   |   4 +-
 .../SecretScanningLayout.tsx                  |   4 +-
 frontend/src/layouts/SshLayout/SshLayout.tsx  |   4 +-
 .../DNSMadeEasyConnectionForm.tsx             |   4 +-
 13 files changed, 87 insertions(+), 94 deletions(-)

diff --git a/frontend/src/components/v2/Tabs/Tabs.tsx b/frontend/src/components/v2/Tabs/Tabs.tsx
index ebe8eb2ed..47b3d08cd 100644
--- a/frontend/src/components/v2/Tabs/Tabs.tsx
+++ b/frontend/src/components/v2/Tabs/Tabs.tsx
@@ -47,8 +47,8 @@ export const Tab = ({
 }) => (
   <TabsPrimitive.Trigger
     className={twMerge(
-      "flex h-10 cursor-pointer items-center justify-center border-transparent",
-      "px-3 text-sm font-medium whitespace-nowrap text-mineshaft-400 transition-all select-none",
+      "flex h-11 cursor-pointer items-center justify-center border-transparent",
+      "px-3 text-sm font-medium whitespace-nowrap text-mineshaft-300/75 transition-all select-none",
       "data-[orientation=vertical]:xl:h-5 data-[orientation=vertical]:xl:border-b-0 data-[orientation=vertical]:xl:border-l",
       "border-b hover:text-mineshaft-200",
       "data-[state=active]:border-mineshaft-400 data-[state=active]:text-white",
diff --git a/frontend/src/helpers/appConnections.ts b/frontend/src/helpers/appConnections.ts
index 20e959c42..7f02bd64e 100644
--- a/frontend/src/helpers/appConnections.ts
+++ b/frontend/src/helpers/appConnections.ts
@@ -49,6 +49,7 @@ import { BitbucketConnectionMethod } from "@app/hooks/api/appConnections/types/b
 import { ChecklyConnectionMethod } from "@app/hooks/api/appConnections/types/checkly-connection";
 import { ChefConnectionMethod } from "@app/hooks/api/appConnections/types/chef-connection";
 import { DigitalOceanConnectionMethod } from "@app/hooks/api/appConnections/types/digital-ocean";
+import { DNSMadeEasyConnectionMethod } from "@app/hooks/api/appConnections/types/dns-made-easy-connection";
 import { HerokuConnectionMethod } from "@app/hooks/api/appConnections/types/heroku-connection";
 import { LaravelForgeConnectionMethod } from "@app/hooks/api/appConnections/types/laravel-forge-connection";
 import { NetlifyConnectionMethod } from "@app/hooks/api/appConnections/types/netlify-connection";
@@ -57,7 +58,6 @@ import { OCIConnectionMethod } from "@app/hooks/api/appConnections/types/oci-con
 import { RailwayConnectionMethod } from "@app/hooks/api/appConnections/types/railway-connection";
 import { RenderConnectionMethod } from "@app/hooks/api/appConnections/types/render-connection";
 import { SupabaseConnectionMethod } from "@app/hooks/api/appConnections/types/supabase-connection";
-import { DNSMadeEasyConnectionMethod } from "@app/hooks/api/appConnections/types/dns-made-easy-connection";
 
 export const APP_CONNECTION_MAP: Record<
   AppConnection,
diff --git a/frontend/src/hooks/api/appConnections/types/index.ts b/frontend/src/hooks/api/appConnections/types/index.ts
index dcefd549c..a272b48cd 100644
--- a/frontend/src/hooks/api/appConnections/types/index.ts
+++ b/frontend/src/hooks/api/appConnections/types/index.ts
@@ -57,8 +57,8 @@ export * from "./camunda-connection";
 export * from "./checkly-connection";
 export * from "./chef-connection";
 export * from "./cloudflare-connection";
-export * from "./dns-made-easy-connection";
 export * from "./databricks-connection";
+export * from "./dns-made-easy-connection";
 export * from "./flyio-connection";
 export * from "./gcp-connection";
 export * from "./github-connection";
diff --git a/frontend/src/layouts/KmsLayout/KmsLayout.tsx b/frontend/src/layouts/KmsLayout/KmsLayout.tsx
index 9a5dc5aee..8ffe0da44 100644
--- a/frontend/src/layouts/KmsLayout/KmsLayout.tsx
+++ b/frontend/src/layouts/KmsLayout/KmsLayout.tsx
@@ -14,8 +14,8 @@ export const KmsLayout = () => {
   const location = useLocation();
 
   return (
-    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
-      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden bg-mineshaft-900">
+      <div className="border-y border-t-project/10 border-b-project/5 bg-gradient-to-b from-project/[0.075] to-project/[0.025] px-4 pt-0.5">
         <motion.div
           key="menu-project-items"
           initial={{ x: -150 }}
diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
index a3875ba49..e28111efc 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -22,7 +22,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Link, useLocation, useNavigate, useRouter, useRouterState } from "@tanstack/react-router";
+import { Link, useLocation, useNavigate, useRouter } from "@tanstack/react-router";
 import { UserPlusIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
@@ -31,7 +31,6 @@ import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
 import SecurityClient from "@app/components/utilities/SecurityClient";
 import {
-  BreadcrumbContainer,
   Button,
   DropdownMenu,
   DropdownMenuContent,
@@ -43,7 +42,6 @@ import {
   IconButton,
   Modal,
   ModalContent,
-  TBreadcrumbFormat,
   Tooltip
 } from "@app/components/v2";
 import { Badge, InstanceIcon, OrgIcon, SubOrgIcon } from "@app/components/v3";
@@ -69,6 +67,7 @@ import { MfaMethod } from "@app/hooks/api/auth/types";
 import { getAuthToken } from "@app/hooks/api/reactQuery";
 import { Organization, SubscriptionPlan } from "@app/hooks/api/types";
 import { AuthMethod } from "@app/hooks/api/users/types";
+import { ProjectSelect } from "@app/layouts/ProjectLayout/components/ProjectSelect";
 import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";
 
 import { ServerAdminsPanel } from "../ServerAdminsPanel/ServerAdminsPanel";
@@ -183,9 +182,6 @@ export const Navbar = () => {
     }
   }, [subscription, isBillingPage, isModalIntrusive]);
 
-  const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
-  const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
-
   const handleOrgChange = async (orgId: string) => {
     queryClient.removeQueries({ queryKey: authKeys.getAuthToken });
     queryClient.removeQueries({ queryKey: projectKeys.getAllUserProjects() });
@@ -249,7 +245,9 @@ export const Navbar = () => {
 
   const isServerAdminPanel = location.pathname.startsWith("/admin");
 
-  const isProjectScope = location.pathname.startsWith(`/organizations/${currentOrg.id}/projects`);
+  const isProjectScope =
+    location.pathname.startsWith(`/organizations/${currentOrg.id}/projects`) &&
+    location.pathname !== `/organizations/${currentOrg.id}/projects`;
 
   const handleOrgNav = async (org: Organization) => {
     if (currentOrg?.id === org.id) return;
@@ -279,64 +277,59 @@ export const Navbar = () => {
   };
 
   return (
-    <div className="z-10 flex min-h-12 items-center bg-mineshaft-900 px-4 pt-1">
-      <div className="mr-auto flex items-center overflow-hidden">
+    <div className="z-10 flex min-h-12 items-center bg-mineshaft-900 px-4">
+      <div className="mr-auto flex h-full min-w-34 items-center">
         <div className="shrink-0">
           <Link to="/organizations/$orgId/projects" params={{ orgId: currentOrg.id }}>
             <img alt="infisical logo" src="/images/logotransparent.png" className="h-4" />
           </Link>
         </div>
-        <p className="pr-3 pl-1 text-lg text-mineshaft-400/70">/</p>
+        <p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</p>
         {isServerAdminPanel ? (
-          <>
-            <Link
-              to="/admin"
-              className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary"
-            >
-              <InstanceIcon className="size-3.5 text-xs text-bunker-300" />
-              <div className="whitespace-nowrap">Server Console</div>
-            </Link>
-            <p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</p>
-            {breadcrumbs ? (
-              // scott: remove /admin as we show server console above
-              <BreadcrumbContainer breadcrumbs={breadcrumbs.slice(1) as TBreadcrumbFormat[]} />
-            ) : null}
-          </>
+          <Link
+            to="/admin"
+            className="group flex cursor-pointer items-center gap-2 text-sm text-white transition-all duration-100 hover:text-primary"
+          >
+            <InstanceIcon className="size-3.5 text-xs text-bunker-300" />
+            <div className="whitespace-nowrap">Server Console</div>
+          </Link>
         ) : (
           <>
-            <div className="flex min-w-12 items-center overflow-hidden">
+            <div
+              className={twMerge(
+                "relative flex min-w-16 items-center self-end rounded-t-md border-x border-t pt-1.5 pr-2 pb-2.5 pl-3",
+                !isProjectScope && !isSubOrganization
+                  ? "border-org/15 bg-gradient-to-b from-org/10 to-org/[0.075]"
+                  : "border-transparent"
+              )}
+            >
+              {/* scott: the below is used to hide the top border from the org nav bar */}
+              {!isProjectScope && !isSubOrganization && (
+                <div className="absolute -bottom-px left-0 h-px w-full bg-mineshaft-900">
+                  <div className="h-full bg-org/[0.075]" />
+                </div>
+              )}
               <DropdownMenu modal={false} open={isOrgSelectOpen} onOpenChange={setIsOrgSelectOpen}>
-                <div className="group flex cursor-pointer items-center gap-2 overflow-hidden text-sm text-white transition-all duration-100 hover:text-primary">
-                  <Badge
-                    asChild
-                    variant="org"
-                    isTruncatable
-                    // TODO(scott): either add badge size/style variant or create designated component for namespace/org nav bar
-                    className={twMerge(
-                      "gap-x-1.5 text-sm",
-                      (isProjectScope || isSubOrganization) &&
-                        "bg-transparent text-mineshaft-200 hover:!bg-transparent hover:underline [&>svg]:!text-org"
-                    )}
+                <div className="group mr-1 flex min-w-0 cursor-pointer items-center gap-2 overflow-hidden text-sm text-white transition-all duration-100">
+                  <button
+                    className="flex cursor-pointer items-center gap-x-2 truncate whitespace-nowrap"
+                    type="button"
+                    onClick={async () => {
+                      navigate({
+                        to: "/organizations/$orgId/projects",
+                        params: { orgId: currentOrg.id }
+                      });
+                      if (isSubOrganization) {
+                        await router.invalidate({ sync: true }).catch(() => null);
+                      }
+                    }}
                   >
-                    <button
-                      type="button"
-                      onClick={async () => {
-                        navigate({
-                          to: "/organizations/$orgId/projects",
-                          params: { orgId: currentOrg.id }
-                        });
-                        if (isSubOrganization) {
-                          await router.invalidate({ sync: true }).catch(() => null);
-                        }
-                      }}
-                    >
-                      <OrgIcon className="size-[12px]" />
-                      <span>{currentOrg?.name}</span>
-                    </button>
+                    <OrgIcon className={twMerge("size-[14px] shrink-0 text-org")} />
+                    <span className="truncate">{currentOrg?.name}</span>
+                  </button>
+                  <Badge variant="org" className="hidden md:inline-flex">
+                    Organization
                   </Badge>
-                  <div className="mr-1 hidden rounded-sm border border-mineshaft-500 px-1 text-xs text-bunker-300 no-underline! md:inline-block">
-                    {getPlan(subscription)}
-                  </div>
                   {subscription.cardDeclined && (
                     <Tooltip
                       content={`Your payment could not be processed${subscription.cardDeclinedReason ? `: ${subscription.cardDeclinedReason}` : ""}. Please update your payment method to continue enjoying premium features.`}
@@ -543,19 +536,15 @@ export const Navbar = () => {
             )}
             {isProjectScope && (
               <>
-                <p className="pr-3 pl-1 text-lg text-mineshaft-400/70">/</p>
-                {breadcrumbs ? (
-                  <BreadcrumbContainer
-                    className="min-w-[15rem] flex-1"
-                    breadcrumbs={[breadcrumbs[0]] as TBreadcrumbFormat[]}
-                  />
-                ) : null}
+                <p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</p>
+                <ProjectSelect />
               </>
             )}
           </>
         )}
       </div>
-      {subscription && subscription.slug === "starter" && !subscription.has_used_trial && (
+
+      {subscription && subscription.slug === "starter" && !subscription.has_used_trial ? (
         <Tooltip content="Start Free Pro Trial">
           <Button
             variant="plain"
@@ -576,6 +565,10 @@ export const Navbar = () => {
             Free Pro Trial
           </Button>
         </Tooltip>
+      ) : (
+        <div className="mt-0.5 mr-3 hidden rounded-sm border border-mineshaft-400 px-1 text-xs text-mineshaft-100 no-underline! opacity-50 md:inline-block">
+          {getPlan(subscription)}
+        </div>
       )}
       {/* eslint-disable-next-line no-nested-ternary */}
       {!location.pathname.startsWith("/admin") ? (
diff --git a/frontend/src/layouts/OrganizationLayout/components/OrgNavBar/OrgNavBar.tsx b/frontend/src/layouts/OrganizationLayout/components/OrgNavBar/OrgNavBar.tsx
index 24f4acafe..e56c02cee 100644
--- a/frontend/src/layouts/OrganizationLayout/components/OrgNavBar/OrgNavBar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/OrgNavBar/OrgNavBar.tsx
@@ -19,9 +19,9 @@ export const OrgNavBar = ({ isHidden }: Props) => {
   const variant = isRootOrganization ? "org" : "namespace";
 
   return (
-    <>
+    <div className="bg-mineshaft-900">
       {!isHidden && (
-        <div className="dark flex w-full flex-col overflow-x-hidden border-b border-mineshaft-600 bg-mineshaft-900 px-4">
+        <div className="dark flex w-full flex-col overflow-x-hidden border-y border-t-org/15 border-b-org/5 bg-gradient-to-b from-org/[0.075] to-org/[0.025] px-4 pt-0.5">
           <motion.div
             key="menu-org-items"
             initial={{ x: -150 }}
@@ -114,6 +114,6 @@ export const OrgNavBar = ({ isHidden }: Props) => {
         isOpen={popUp?.createOrg?.isOpen}
         onClose={() => handlePopUpToggle("createOrg", false)}
       />
-    </>
+    </div>
   );
 };
diff --git a/frontend/src/layouts/PamLayout/PamLayout.tsx b/frontend/src/layouts/PamLayout/PamLayout.tsx
index f04357a88..365d3c3eb 100644
--- a/frontend/src/layouts/PamLayout/PamLayout.tsx
+++ b/frontend/src/layouts/PamLayout/PamLayout.tsx
@@ -29,8 +29,8 @@ export const PamLayout = () => {
 
   return (
     <>
-      <div className="dark flex h-full w-full flex-col overflow-x-hidden">
-        <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+      <div className="dark flex h-full w-full flex-col overflow-x-hidden bg-mineshaft-900">
+        <div className="border-y border-t-project/10 border-b-project/5 bg-gradient-to-b from-project/[0.075] to-project/[0.025] px-4 pt-0.5">
           <motion.div
             key="menu-project-items"
             initial={{ x: -150 }}
diff --git a/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx b/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
index 208922720..f3f283a35 100644
--- a/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
+++ b/frontend/src/layouts/PkiManagerLayout/PkiManagerLayout.tsx
@@ -29,8 +29,8 @@ export const PkiManagerLayout = () => {
 
   const location = useLocation();
   return (
-    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
-      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden bg-mineshaft-900">
+      <div className="border-y border-t-project/10 border-b-project/5 bg-gradient-to-b from-project/[0.075] to-project/[0.025] px-4 pt-0.5">
         <motion.div
           key="menu-project-items"
           initial={{ x: -150 }}
diff --git a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
index 12df6684a..609610264 100644
--- a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
@@ -92,7 +92,11 @@ export const ProjectSelect = () => {
   }, [projects, projectFavorites, currentWorkspace]);
 
   return (
-    <div className="mr-2 flex items-center gap-1 overflow-hidden">
+    <div className="relative mr-2 flex min-w-16 items-center gap-1 self-end rounded-t-md border-x border-t border-project/10 bg-gradient-to-b from-project/10 to-project/[0.075] pt-1.5 pr-1 pb-2.5 pl-3">
+      {/* scott: the below is used to hide the top border from the org nav bar */}
+      <div className="absolute -bottom-px left-0 h-px w-full bg-mineshaft-900">
+        <div className="h-full bg-project/[0.075]" />
+      </div>
       <DropdownMenu modal={false}>
         <Link
           to={getProjectHomePage(currentWorkspace.type, currentWorkspace.environments)}
@@ -100,16 +104,12 @@ export const ProjectSelect = () => {
             projectId: currentWorkspace.id,
             orgId: currentWorkspace.orgId
           }}
-          className="group flex cursor-pointer items-center gap-x-1.5 overflow-hidden hover:text-white"
+          className="group flex cursor-pointer items-center gap-x-2 overflow-hidden pt-0.5 text-sm text-white"
         >
-          <p className="inline-block truncate text-mineshaft-200 group-hover:underline">
-            {currentWorkspace?.name}
-          </p>
-          <Badge variant="project">
-            <ProjectIcon />
-            <span className="hidden sm:inline-block">
-              {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
-            </span>
+          <ProjectIcon className="size-[14px] shrink-0 text-project" />
+          <span className="truncate">{currentWorkspace?.name}</span>
+          <Badge variant="project" className="hidden md:inline-flex">
+            {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
           </Badge>
         </Link>
         <DropdownMenuTrigger asChild>
@@ -118,7 +118,7 @@ export const ProjectSelect = () => {
               variant="plain"
               colorSchema="secondary"
               ariaLabel="switch-project"
-              className="px-2 py-1"
+              className="top-px px-2 py-1"
             >
               <FontAwesomeIcon icon={faCaretDown} className="text-xs text-bunker-300" />
             </IconButton>
diff --git a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
index 162260959..0a8d3adbc 100644
--- a/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
+++ b/frontend/src/layouts/SecretManagerLayout/SecretManagerLayout.tsx
@@ -39,8 +39,8 @@ export const SecretManagerLayout = () => {
     (secretApprovalReqCount?.open || 0) + (accessApprovalRequestCount?.pendingCount || 0);
 
   return (
-    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
-      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden bg-mineshaft-900">
+      <div className="border-y border-t-project/10 border-b-project/5 bg-gradient-to-b from-project/[0.075] to-project/[0.025] px-4 pt-0.5">
         <motion.div
           key="menu-project-items"
           initial={{ x: -150 }}
diff --git a/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx b/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
index 69acc6891..860365f25 100644
--- a/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
+++ b/frontend/src/layouts/SecretScanningLayout/SecretScanningLayout.tsx
@@ -38,8 +38,8 @@ export const SecretScanningLayout = () => {
   );
 
   return (
-    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
-      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden bg-mineshaft-900">
+      <div className="border-y border-t-project/10 border-b-project/5 bg-gradient-to-b from-project/[0.075] to-project/[0.025] px-4 pt-0.5">
         <motion.div
           key="menu-project-items"
           initial={{ x: -150 }}
diff --git a/frontend/src/layouts/SshLayout/SshLayout.tsx b/frontend/src/layouts/SshLayout/SshLayout.tsx
index 4f3ac8b8e..1c4c38771 100644
--- a/frontend/src/layouts/SshLayout/SshLayout.tsx
+++ b/frontend/src/layouts/SshLayout/SshLayout.tsx
@@ -20,8 +20,8 @@ export const SshLayout = () => {
   const location = useLocation();
 
   return (
-    <div className="dark flex h-full w-full flex-col overflow-x-hidden">
-      <div className="border-b border-mineshaft-600 bg-mineshaft-900">
+    <div className="dark flex h-full w-full flex-col overflow-x-hidden bg-mineshaft-900">
+      <div className="border-y border-t-project/10 border-b-project/5 bg-gradient-to-b from-project/[0.075] to-project/[0.025] px-4 pt-0.5">
         <motion.div
           key="menu-project-items"
           initial={{ x: -150 }}
diff --git a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DNSMadeEasyConnectionForm.tsx b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DNSMadeEasyConnectionForm.tsx
index 0d7d7403a..9d3c23743 100644
--- a/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DNSMadeEasyConnectionForm.tsx
+++ b/frontend/src/pages/organization/AppConnections/AppConnectionsPage/components/AppConnectionForm/DNSMadeEasyConnectionForm.tsx
@@ -1,5 +1,5 @@
-import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 
 import {
@@ -14,8 +14,8 @@ import {
 import { APP_CONNECTION_MAP, getAppConnectionMethodDetails } from "@app/helpers/appConnections";
 import { TDNSMadeEasyConnection } from "@app/hooks/api/appConnections";
 import { AppConnection } from "@app/hooks/api/appConnections/enums";
-
 import { DNSMadeEasyConnectionMethod } from "@app/hooks/api/appConnections/types/dns-made-easy-connection";
+
 import {
   genericAppConnectionFieldsSchema,
   GenericAppConnectionsFields

From f9fffad9aee9b62bceb19d55ffcf39a822e8e73a Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 25 Nov 2025 16:25:59 -0800
Subject: [PATCH 2/3] style: adjust nav bar badge breakpoints

---
 .../src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx | 2 +-
 .../ProjectLayout/components/ProjectSelect/ProjectSelect.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
index e28111efc..e55bdfc09 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -327,7 +327,7 @@ export const Navbar = () => {
                     <OrgIcon className={twMerge("size-[14px] shrink-0 text-org")} />
                     <span className="truncate">{currentOrg?.name}</span>
                   </button>
-                  <Badge variant="org" className="hidden md:inline-flex">
+                  <Badge variant="org" className="hidden lg:inline-flex">
                     Organization
                   </Badge>
                   {subscription.cardDeclined && (
diff --git a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
index 609610264..45325d22d 100644
--- a/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/layouts/ProjectLayout/components/ProjectSelect/ProjectSelect.tsx
@@ -108,7 +108,7 @@ export const ProjectSelect = () => {
         >
           <ProjectIcon className="size-[14px] shrink-0 text-project" />
           <span className="truncate">{currentWorkspace?.name}</span>
-          <Badge variant="project" className="hidden md:inline-flex">
+          <Badge variant="project" className="hidden lg:inline-flex">
             {currentWorkspace.type ? PROJECT_TYPE_NAME[currentWorkspace.type] : "Project"}
           </Badge>
         </Link>

From b607545c2f9d0cbc03946859eaedfdfa1fcceda0 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Tue, 25 Nov 2025 17:48:08 -0800
Subject: [PATCH 3/3] style: switch to chevrons and move org badge inside
 button

---
 .../components/NavBar/Navbar.tsx                   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
index e55bdfc09..e4b475551 100644
--- a/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
+++ b/frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx
@@ -23,7 +23,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Link, useLocation, useNavigate, useRouter } from "@tanstack/react-router";
-import { UserPlusIcon } from "lucide-react";
+import { ChevronRight, UserPlusIcon } from "lucide-react";
 import { twMerge } from "tailwind-merge";
 
 import { Mfa } from "@app/components/auth/Mfa";
@@ -279,12 +279,12 @@ export const Navbar = () => {
   return (
     <div className="z-10 flex min-h-12 items-center bg-mineshaft-900 px-4">
       <div className="mr-auto flex h-full min-w-34 items-center">
-        <div className="shrink-0">
+        <div className="mt-0.5 shrink-0">
           <Link to="/organizations/$orgId/projects" params={{ orgId: currentOrg.id }}>
             <img alt="infisical logo" src="/images/logotransparent.png" className="h-4" />
           </Link>
         </div>
-        <p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</p>
+        <ChevronRight size={18} className="mx-3 mt-[3px] text-mineshaft-400/70" />
         {isServerAdminPanel ? (
           <Link
             to="/admin"
@@ -326,10 +326,10 @@ export const Navbar = () => {
                   >
                     <OrgIcon className={twMerge("size-[14px] shrink-0 text-org")} />
                     <span className="truncate">{currentOrg?.name}</span>
+                    <Badge variant="org" className="hidden lg:inline-flex">
+                      Organization
+                    </Badge>
                   </button>
-                  <Badge variant="org" className="hidden lg:inline-flex">
-                    Organization
-                  </Badge>
                   {subscription.cardDeclined && (
                     <Tooltip
                       content={`Your payment could not be processed${subscription.cardDeclinedReason ? `: ${subscription.cardDeclinedReason}` : ""}. Please update your payment method to continue enjoying premium features.`}
@@ -536,7 +536,7 @@ export const Navbar = () => {
             )}
             {isProjectScope && (
               <>
-                <p className="pr-3 pl-3 text-lg text-mineshaft-400/70">/</p>
+                <ChevronRight size={18} className="mx-3 mt-[3px] text-mineshaft-400/70" />
                 <ProjectSelect />
               </>
             )}