Give the shell one header, a skip link, and a cookie-aware first paint.

Breakpoint clones were still in the tab order, marketing always painted Log in, and at 430px the logo overlay covered Use cases and Learn.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/asset/Logo/Logo.tsx

@@ -95,7 +95,7 @@ const Logo = memo<LogoProps>(
     const wordmarkVisibilityClass =
       size === "topNavFolderTop" || size === "topNavHeader"
         ? wordmark
-          ? "hidden sm:block"
+          ? "hidden md:block"
           : "hidden"
         : wordmark
           ? ""

app/components/navigation/MarketingNavigation.tsx

@@ -1,27 +0,0 @@
-"use client";
-
-import { memo } from "react";
-import { usePathname } from "next/navigation";
-import { isChromelessNavigationPath } from "../../../lib/navigationChromelessPath";
-import TopWithPathname from "./Top/TopWithPathname";
-
-/**
- * Marketing-only navigation. Skips the server-side `getNavAuthSignedIn()` call
- * so marketing pages can render statically (no `force-dynamic`); `TopWithPathname`
- * fetches `/api/auth/session` on mount and updates the header from "Log in" to
- * "Profile" when the user is signed in. Brief mismatch is acceptable here —
- * `(app)` / `(admin)` keep the server-rendered nav.
- */
-const MarketingNavigation = memo(() => {
-  const pathname = usePathname();
-
-  if (isChromelessNavigationPath(pathname)) {
-    return null;
-  }
-
-  return <TopWithPathname initialSignedIn={false} />;
-});
-
-MarketingNavigation.displayName = "MarketingNavigation";
-
-export default MarketingNavigation;

app/components/navigation/SkipToContent.tsx

@@ -0,0 +1,14 @@
+import header from "../../../messages/en/components/header.json";
+import { MAIN_CONTENT_ID } from "../../../lib/mainContent";
+
+/**
+ * First focusable control in the shell. Revealed on focus so keyboard users
+ * can bypass the header and land on the group `<main>`.
+ */
+export default function SkipToContent() {
+  return (
+    <a href={`#${MAIN_CONTENT_ID}`} className="skip-to-content text-medium-label">
+      {header.skipToContent}
+    </a>
+  );
+}

app/components/navigation/Top/Top.container.tsx

@@ -15,18 +15,7 @@ import Avatar from "../../asset/Avatar";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
 import { prepareFreshCreateFlowEntrySync } from "../../../(app)/create/utils/prepareFreshCreateFlowEntry";
 import { TopView } from "./Top.view";
-import type { TopProps, NavSize } from "./Top.types";
-
-type MenuClusterSize = "X Small" | "Small" | "Medium" | "Large" | "X Large";
-
-/** Map responsive `NavSize` breakpoints to Figma menu item sizes (shared by nav links + login). */
-const NAV_SIZE_TO_MENU_ITEM_SIZE: Record<NavSize, MenuClusterSize> = {
-  xsmall: "X Small",
-  homeMd: "Medium",
-  large: "Large",
-  homeXlarge: "X Large",
-  xlarge: "X Large",
-};
+import type { TopProps } from "./Top.types";
 
 export const avatarImageSources = [
   getAssetPath(ASSETS.AVATAR_3),
@@ -40,6 +29,16 @@ export const avatarImages = avatarImageSources.map((src, index) => ({
   alt: `Avatar ${3 - index}`,
 }));
 
+/** Padding/type that tracks lg/xl Menu sizes without cloning the items per breakpoint. */
+const NAV_ITEM_RESPONSIVE_CLASS =
+  "lg:px-[var(--spacing-scale-016)] lg:py-[var(--spacing-scale-016)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
+
+const FOLDER_NAV_ITEM_RESPONSIVE_CLASS =
+  "md:px-[var(--spacing-scale-008)] md:py-[var(--spacing-scale-008)] md:h-[32px] md:text-x-small-label lg:px-[var(--spacing-scale-016)] lg:py-[var(--spacing-scale-016)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
+
+const CREATE_RULE_RESPONSIVE_CLASS =
+  "lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
+
 const TopContainer = memo<TopProps>(
   ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
     const pathname = usePathname();
@@ -61,7 +60,6 @@ const TopContainer = memo<TopProps>(
       router.push("/create/informational");
     }, [loggedIn, router]);
 
-    // Schema markup for site navigation
     const schemaData = {
       "@context": "https://schema.org",
       "@type": "WebSite",
@@ -77,32 +75,32 @@ const TopContainer = memo<TopProps>(
       },
     };
 
-    // Logo size based on folderTop prop
     const logoSize = folderTop ? "topNavFolderTop" : "topNavHeader";
 
-    // Navigation items with translations
     const navigationItems = [
       { href: "/use-cases", text: t("navigation.useCases"), extraPadding: true },
       { href: "/learn", text: t("navigation.learn") },
       { href: "/about", text: t("navigation.about") },
     ];
 
-    const renderNavigationItems = (size: NavSize) => {
+    const renderNavigationItems = () => {
       const mode = folderTop ? "inverse" : "default";
+      const sizeClass = folderTop
+        ? FOLDER_NAV_ITEM_RESPONSIVE_CLASS
+        : NAV_ITEM_RESPONSIVE_CLASS;
 
-      return navigationItems.map((item, index) => {
-        const itemSize = NAV_SIZE_TO_MENU_ITEM_SIZE[size];
-
+      return navigationItems.map((item) => {
         const isUseCases = item.extraPadding === true;
 
         return (
           <MenuItem
-            key={index}
+            key={item.href}
             href={item.href}
-            size={itemSize}
+            size="X Small"
             mode={mode}
             state={pathname === item.href ? "selected" : "default"}
             reducedPadding={isUseCases}
+            className={sizeClass}
             ariaLabel={t("ariaLabels.navigateToPage").replace(
               "{text}",
               item.text,
@@ -114,34 +112,7 @@ const TopContainer = memo<TopProps>(
       });
     };
 
-    const renderAvatarGroup = (
-      containerSize: "small" | "medium" | "large" | "xlarge",
-      avatarSize: "small" | "medium" | "large" | "xlarge",
-    ) => {
-      return (
-        <AvatarContainer size={containerSize}>
-          {avatarImageSources.map((src, index) => (
-            <Avatar
-              key={index}
-              src={src}
-              alt={tTopNav(`avatarAlts.${3 - index}`)}
-              size={avatarSize}
-            />
-          ))}
-        </AvatarContainer>
-      );
-    };
-
-    const renderLoginButton = (size: NavSize) => {
-      const itemSize = NAV_SIZE_TO_MENU_ITEM_SIZE[size];
-
-      // Determine mode based on folderTop and breakpoint size
-      // folderTop: inverse mode (black text) for smallest breakpoints (xsmall/home)
-      // folderTop: default mode (yellow text) for 640px+ breakpoints (homeMd/large/homeXlarge/xlarge)
-      // false folderTop: always default mode (yellow text on dark background)
-      const isSmallBreakpoint = size === "xsmall";
-      const mode = folderTop && isSmallBreakpoint ? "inverse" : "default";
-
+    const renderLoginButton = () => {
       const label = loggedIn ? t("buttons.profile") : t("buttons.logIn");
       const ariaLabel = loggedIn
         ? t("ariaLabels.goToProfile")
@@ -154,9 +125,10 @@ const TopContainer = memo<TopProps>(
         return (
           <MenuItem
             href="/profile"
-            size={itemSize}
-            mode={mode}
+            size="X Small"
+            mode="default"
             state={navSelected ? "selected" : "default"}
+            className={NAV_ITEM_RESPONSIVE_CLASS}
             ariaLabel={ariaLabel}
           >
             {label}
@@ -174,9 +146,10 @@ const TopContainer = memo<TopProps>(
             })
           }
           href="/login"
-          size={itemSize}
-          mode={mode}
+          size="X Small"
+          mode="default"
           state={navSelected ? "selected" : "default"}
+          className={NAV_ITEM_RESPONSIVE_CLASS}
           ariaLabel={ariaLabel}
         >
           {label}
@@ -184,20 +157,30 @@ const TopContainer = memo<TopProps>(
       );
     };
 
-    const renderCreateRuleButton = (
-      buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
-      containerSize: "small" | "medium" | "large" | "xlarge",
-      avatarSize: "small" | "medium" | "large" | "xlarge",
-    ) => {
+    const renderCreateRuleButton = () => {
       return (
         <Button
-          size={buttonSize}
+          size="xsmall"
           buttonType="filled"
           palette="inverse"
           onClick={handleCreateRuleClick}
           ariaLabel={t("ariaLabels.createNewRule")}
+          className={CREATE_RULE_RESPONSIVE_CLASS}
         >
-          {renderAvatarGroup(containerSize, avatarSize)}
+          <AvatarContainer
+            size="small"
+            className="lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
+          >
+            {avatarImageSources.map((src, index) => (
+              <Avatar
+                key={src}
+                src={src}
+                alt={tTopNav(`avatarAlts.${3 - index}`)}
+                size="small"
+                className="lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
+              />
+            ))}
+          </AvatarContainer>
           <span>{t("buttons.createRule")}</span>
         </Button>
       );

app/components/navigation/Top/Top.types.ts

@@ -9,14 +9,6 @@ export interface TopProps {
   logIn?: boolean;
 }
 
-/** Breakpoint slot passed from {@link Top.view} into nav render helpers. */
-export type NavSize =
-  | "xsmall"
-  | "homeMd"
-  | "large"
-  | "homeXlarge"
-  | "xlarge";
-
 export interface TopViewProps {
   folderTop: boolean;
   loggedIn: boolean;
@@ -35,11 +27,7 @@ export interface TopViewProps {
     };
   };
   logoSize: "topNavFolderTop" | "topNavHeader";
-  renderNavigationItems: (_size: NavSize) => React.ReactNode;
-  renderLoginButton: (_size: NavSize) => React.ReactNode;
-  renderCreateRuleButton: (
-    _buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
-    _containerSize: "small" | "medium" | "large" | "xlarge",
-    _avatarSize: "small" | "medium" | "large" | "xlarge",
-  ) => React.ReactNode;
+  renderNavigationItems: () => React.ReactNode;
+  renderLoginButton: () => React.ReactNode;
+  renderCreateRuleButton: () => React.ReactNode;
 }

app/components/navigation/Top/Top.view.tsx

@@ -22,7 +22,12 @@ function TopView({
 }: TopViewProps) {
   const t = useTranslation(folderTop ? "homeHeader" : "header");
 
-  // Render folderTop variant (HomeHeader style)
+  const loginControl = logIn ? (
+    <Menu size="X Small" className="lg:gap-[var(--spacing-scale-012)]">
+      {renderLoginButton()}
+    </Menu>
+  ) : null;
+
   if (folderTop) {
     return (
       <>
@@ -32,116 +37,62 @@ function TopView({
           dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
         />
         <header
-          className="w-full bg-transparent overflow-hidden"
+          className="w-full overflow-hidden bg-transparent"
           role="banner"
           aria-label={t("ariaLabels.homePageNavigationHeader")}
         >
           <nav
-            className="relative flex items-center justify-between mx-auto h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] pl-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
+            className="relative mx-auto flex h-[50px] items-end justify-between gap-[var(--spacing-scale-008)] pl-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:h-[62px] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:h-[68px] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:h-[68px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-056)] lg:pt-[var(--spacing-scale-016)] xl:h-[88px] xl:pl-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-056)] xl:pt-[var(--spacing-scale-024)]"
             role="navigation"
             aria-label={t("ariaLabels.mainNavigation")}
           >
-            {/* Header Tab - Yellow tab container with decorative Union images */}
-            <div className="HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-inverse-brand-primary)] rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] sm:rounded-t-[var(--radius-measures-radius-xlarge)] md:rounded-t-[var(--radius-measures-radius-xlarge)] lg:rounded-t-[var(--radius-measures-radius-xlarge)] xl:rounded-t-[var(--radius-measures-radius-xlarge)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-048)] h-[var(--spacing-scale-040)] sm:pl-[var(--spacing-scale-012)] sm:h-[52px] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:h-[52px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:h-[64px] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] flex-1 min-w-0 min-w-[197px] sm:min-w-0 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)] flex items-center self-end">
-              {/* Logo - Consistent left positioning within HeaderTab */}
-              <Logo
-                size={logoSize}
-                wordmark
-                palette={folderTop ? "inverse" : "default"}
-              />
+            <div className="HeaderTab header-breakpoint-transition relative flex h-[var(--spacing-scale-040)] min-w-0 flex-1 items-center self-end rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] bg-[var(--color-surface-inverse-brand-primary)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] sm:mr-[var(--spacing-scale-008)] sm:h-[52px] sm:rounded-t-[var(--radius-measures-radius-xlarge)] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:rounded-t-[var(--radius-measures-radius-xlarge)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:h-[52px] lg:rounded-t-[var(--radius-measures-radius-xlarge)] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:h-[64px] xl:rounded-t-[var(--radius-measures-radius-xlarge)] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)]">
+              <div className="shrink-0">
+                <Logo
+                  size={logoSize}
+                  wordmark
+                  palette={folderTop ? "inverse" : "default"}
+                />
+              </div>
 
-              {/* XSmall menu — positioned next to logo */}
-              <div className="block sm:hidden -me-[2px]">
-                <Menu size="X Small">
-                  {renderNavigationItems("xsmall")}
-                  {logIn && renderLoginButton("xsmall")}
+              <div className="ml-auto shrink-0" data-top="nav">
+                <Menu
+                  size="X Small"
+                  className="md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-012)]"
+                >
+                  {renderNavigationItems()}
                 </Menu>
               </div>
 
-              {/* Decorative Union images for tab appearance */}
               {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG, not content */}
               <img
                 src={getAssetPath(ASSETS.UNION_XSM)}
                 alt=""
                 role="presentation"
-                className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
+                className="absolute -bottom-[3px] -right-[52px] -z-10 h-[24px] w-[61px] sm:hidden sm:h-[31.5px] sm:w-[61px]"
               />
               {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
               <img
                 src={getAssetPath(ASSETS.UNION_SM_MD_LG)}
                 alt=""
                 role="presentation"
-                className="absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
+                className="absolute -bottom-[3.7px] -right-[53px] -z-10 hidden h-[24px] w-[61px] sm:block sm:h-[31.5px] sm:w-[61px] xl:hidden"
               />
               {/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
               <img
                 src={getAssetPath(ASSETS.UNION_XLG)}
                 alt=""
                 role="presentation"
-                className="absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10"
+                className="absolute -bottom-[6px] -right-[94px] -z-10 hidden h-[53px] w-[105px] xl:block"
               />
             </div>
 
-            {/* Navigation Links - Centered in header for SM and up */}
-            <div className="absolute left-1/2 transform -translate-x-1/2 hidden sm:block">
-              {/* 430-639px (sm: breakpoint): Menu X Small */}
-              <div className="hidden sm:block md:hidden">
-                <Menu size="X Small">
-                  {renderNavigationItems("xsmall")}
-                  {logIn && renderLoginButton("xsmall")}
-                </Menu>
-              </div>
-
-              {/* 640-1023px (md: breakpoint): Menu Small */}
-              <div className="hidden md:block lg:hidden">
-                <Menu size="Small">
-                  {renderNavigationItems("homeMd")}
-                </Menu>
-              </div>
-
-              {/* 1024-1440px (lg: breakpoint): Menu Large */}
-              <div className="hidden lg:block xl:hidden">
-                <Menu size="Large">{renderNavigationItems("large")}</Menu>
-              </div>
-
-              {/* 1440px+ (xl: breakpoint): Menu X Large */}
-              <div className="hidden xl:block">
-                <Menu size="X Large">
-                  {renderNavigationItems("homeXlarge")}
-                </Menu>
-              </div>
-            </div>
-
-            {/* Authentication Elements - Consistent right alignment outside HeaderTab */}
-            <div className="flex items-center">
-              {/* XSmall and Small breakpoints - create rule button outside HeaderTab */}
-              <div className="block md:hidden">
-                {renderCreateRuleButton("xsmall", "small", "small")}
-              </div>
-
-              {/* Medium breakpoint - login outside HeaderTab, create rule outside */}
-              <div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
-                <div className="flex items-center gap-[var(--spacing-scale-010)]">
-                  {logIn && renderLoginButton("homeMd")}
-                  {renderCreateRuleButton("small", "medium", "medium")}
-                </div>
-              </div>
-
-              {/* Large breakpoint */}
-              <div className="hidden lg:flex xl:hidden items-center">
-                <div className="flex items-center gap-[var(--spacing-scale-004)]">
-                  {logIn && renderLoginButton("large")}
-                  {renderCreateRuleButton("large", "large", "large")}
-                </div>
-              </div>
-
-              {/* XLarge breakpoint */}
-              <div className="hidden xl:flex items-center">
-                <div className="flex items-center gap-[var(--spacing-scale-004)]">
-                  {logIn && renderLoginButton("homeXlarge")}
-                  {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
-                </div>
-              </div>
+            <div
+              className="flex shrink-0 items-center gap-[var(--spacing-scale-004)] self-center md:gap-[var(--spacing-scale-010)]"
+              data-top="auth"
+            >
+              {loginControl}
+              {renderCreateRuleButton()}
             </div>
           </nav>
         </header>
@@ -151,11 +102,10 @@ function TopView({
 
   /**
    * Standard marketing / app top nav.
-   * Figma: "Navigation / Top" (Community-Rule-System, node 22078-808559) — horizontal
-   * padding, logo ~200px left, menu cluster centered in the bar (`left-1/2` + translate),
-   * log in + create rule on the right. Breakpoints and Menu sizes unchanged from prior map.
+   * Figma: "Navigation / Top" (Community-Rule-System, node 22078-808559).
+   * Three columns so the logo cannot paint over the nav cluster (no absolute
+   * overlay, no reserved 200px hit box below `lg`).
    */
-  // Render standard variant (Header style)
   return (
     <>
       <script
@@ -168,19 +118,11 @@ function TopView({
         aria-label={t("ariaLabels.mainNavigationHeader")}
       >
         <nav
-            className="relative flex w-full items-center
-            px-[var(--spacing-scale-016)]
-            py-[var(--spacing-scale-008)]
-            sm:px-[var(--spacing-measures-spacing-016)]
-            lg:px-[var(--spacing-measures-spacing-64,64px)]
-            lg:py-[var(--spacing-scale-016)]"
-            role="navigation"
-            aria-label={t("ariaLabels.mainNavigation")}
+          className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] sm:px-[var(--spacing-measures-spacing-016)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-scale-016)]"
+          role="navigation"
+          aria-label={t("ariaLabels.mainNavigation")}
         >
-          <div
-            className="relative z-20 min-w-0 shrink-0 sm:w-[200px] sm:max-w-[200px] sm:shrink-0"
-            data-top="logo"
-          >
+          <div className="min-w-0 shrink-0 lg:w-[200px] lg:max-w-[200px]" data-top="logo">
             <Logo
               size={logoSize}
               wordmark
@@ -188,100 +130,24 @@ function TopView({
             />
           </div>
 
-          {/* XSmall: nav + login in flow (flex-1) — same as before */}
           <div
-            className="flex min-w-0 flex-1 items-center justify-end sm:hidden"
-            data-top="nav-xs-flow"
+            className="flex min-w-0 items-center justify-end md:justify-center"
+            data-top="nav"
           >
-            <div className="block" data-testid="nav-xs">
-              <Menu size="X Small">
-                {renderNavigationItems("xsmall")}
-                {logIn && renderLoginButton("xsmall")}
-              </Menu>
-            </div>
+            <Menu
+              size="X Small"
+              className="min-w-0 lg:gap-[var(--spacing-scale-012)]"
+            >
+              {renderNavigationItems()}
+            </Menu>
           </div>
 
-          {/* sm+ — Figma: nav cluster centered in bar (not between logo and actions) */}
           <div
-            className="pointer-events-none hidden sm:absolute sm:left-1/2 sm:top-1/2 sm:z-10 sm:flex sm:-translate-x-1/2 sm:-translate-y-1/2 sm:items-center sm:justify-center"
-            data-top="nav-center"
+            className="flex shrink-0 items-center gap-[var(--spacing-scale-004)] md:gap-[var(--spacing-measures-spacing-010)] lg:gap-[var(--spacing-measures-spacing-004)]"
+            data-top="auth"
           >
-            <div
-              className="pointer-events-auto hidden sm:flex md:hidden"
-              data-testid="nav-sm"
-            >
-              <Menu size="X Small">
-                {renderNavigationItems("xsmall")}
-                {logIn && renderLoginButton("xsmall")}
-              </Menu>
-            </div>
-            <div
-              className="pointer-events-auto hidden md:flex lg:hidden"
-              data-testid="nav-md"
-            >
-              <Menu size="X Small">
-                {renderNavigationItems("xsmall")}
-              </Menu>
-            </div>
-            <div
-              className="pointer-events-auto hidden lg:flex xl:hidden"
-              data-testid="nav-lg"
-            >
-              <Menu size="Large">{renderNavigationItems("large")}</Menu>
-            </div>
-            <div
-              className="pointer-events-auto hidden xl:flex"
-              data-testid="nav-xl"
-            >
-              <Menu size="X Large">
-                {renderNavigationItems("xlarge")}
-              </Menu>
-            </div>
-          </div>
-
-          {/* Authentication Elements - Consistent right alignment across all breakpoints */}
-          <div className="relative z-20 ml-auto flex shrink-0 items-center">
-            {/* XSmall breakpoint - Only Create Rule button */}
-            <div className="block sm:hidden shrink-0" data-testid="auth-xs">
-              {renderCreateRuleButton("xsmall", "small", "small")}
-            </div>
-
-            {/* Small breakpoint - Only Create Rule button */}
-            <div className="hidden sm:block md:hidden" data-testid="auth-sm">
-              <div className="flex items-center gap-[var(--spacing-scale-004)]">
-                {renderCreateRuleButton("xsmall", "small", "small")}
-              </div>
-            </div>
-
-            {/* Medium breakpoint */}
-            <div className="hidden md:block lg:hidden" data-testid="auth-md">
-              <div className="flex items-center gap-[var(--spacing-measures-spacing-010)]">
-                <Menu size="Small">
-                  {logIn && renderLoginButton("xsmall")}
-                </Menu>
-                {renderCreateRuleButton("xsmall", "medium", "medium")}
-              </div>
-            </div>
-
-            {/* Large breakpoint */}
-            <div className="hidden lg:block xl:hidden" data-testid="auth-lg">
-              <div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
-                <Menu size="Large">
-                  {logIn && renderLoginButton("large")}
-                </Menu>
-                {renderCreateRuleButton("large", "xlarge", "xlarge")}
-              </div>
-            </div>
-
-            {/* XLarge breakpoint */}
-            <div className="hidden xl:block" data-testid="auth-xl">
-              <div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
-                <Menu size="X Large">
-                  {logIn && renderLoginButton("xlarge")}
-                </Menu>
-                {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
-              </div>
-            </div>
+            {loginControl}
+            {renderCreateRuleButton()}
           </div>
         </nav>
       </header>

app/components/navigation/Top/index.tsx

@@ -1,3 +1,3 @@
 export { default } from "./Top.container";
-export type { TopProps, NavSize } from "./Top.types";
+export type { TopProps } from "./Top.types";
 export { avatarImages } from "./Top.container";