diff --git a/.cursor/rules/routes.mdc b/.cursor/rules/routes.mdc
index 009f3ea..e441551 100644
--- a/.cursor/rules/routes.mdc
+++ b/.cursor/rules/routes.mdc
@@ -14,10 +14,10 @@ the file tree without affecting URLs.
 
 | Group | URL surface | Audience | Chrome |
 |---|---|---|---|
-| `app/(marketing)/` | `/`, `/learn`, `/blog`, `/templates`, future public pages | Public, indexable | `Top` (via root) + marketing `<Footer />` |
-| `app/(app)/` | `/create/*`, `/login`, `/profile`, future signed-in surfaces | Authenticated product | `Top` (via root) — no footer except **`/profile`** (see `profile/layout.tsx`) |
-| `app/(admin)/` | `/monitor`, future ops dashboards | Operators | `Top` (via root) — no footer |
-| `app/(dev)/` | `/components-preview`, future dev previews | Local dev (NODE_ENV gated) | `Top` (via root) — no footer |
+| `app/(marketing)/` | `/`, `/learn`, `/blog`, `/templates`, future public pages | Public, indexable | `SkipToContent` + `ConditionalNavigation` + marketing `<Footer />` |
+| `app/(app)/` | `/create/*`, `/login`, `/profile`, future signed-in surfaces | Authenticated product | `SkipToContent` + `ConditionalNavigation` — no footer except **`/profile`** (see `profile/layout.tsx`) |
+| `app/(admin)/` | `/monitor`, future ops dashboards | Operators | `SkipToContent` + `ConditionalNavigation` — no footer |
+| `app/(dev)/` | `/components-preview`, future dev previews | Local dev (NODE_ENV gated) | `Top` omitted — no footer |
 | `app/(marketing-case-study)/` | `/use-cases/[slug]/rule` | Public case-study demos | Chromeless (no global `Top`; see `navigationChromelessPath.ts`) |
 | `app/api/` | API routes | n/a | n/a |
 
@@ -28,14 +28,16 @@ the folder next to `(marketing)/`.
 ## Layout responsibilities
 
 - **`app/layout.tsx`** — `<html>`, `<body>`, providers (`MessagesProvider`,
-  `AuthModalProvider`), fonts, and `ConditionalNavigation`. Renders
+  `AuthModalProvider` are per group), fonts. Renders
   `{children}` directly inside the flex column. **Does not** render
-  `<main>` — each group layout owns that.
-- **`app/(marketing)/layout.tsx`** — wraps with `<main className="flex-1">`
-  and appends the public `<Footer />`.
-- **`app/(app)/layout.tsx`** / **`(admin)/layout.tsx`** / **`(dev)/layout.tsx`** —
-  wrap with `<main className="flex-1">`. No footer by default; **`app/(app)/profile/layout.tsx`**
+  `<main>` or the header — each group layout owns that.
+- **`app/(marketing)/layout.tsx`** — skip-to-content, `ConditionalNavigation`
+  (SSR session), `<main id="main-content">`, public `<Footer />`.
+- **`app/(app)/layout.tsx`** / **`(admin)/layout.tsx`** —
+  skip-to-content, `ConditionalNavigation`, `<main id="main-content">`.
+  No footer by default; **`app/(app)/profile/layout.tsx`**
   appends the marketing `<Footer />` for `/profile` only.
+- **`app/(dev)/layout.tsx`** — `<main id="main-content">` only.
 - **Nested layouts** (e.g. `(app)/create/layout.tsx`) compose feature-specific
   chrome inside the group's `<main>` — never render `<html>`, `<body>`,
   `<main>`, or providers.
diff --git a/app/(admin)/layout.tsx b/app/(admin)/layout.tsx
index d6bf65f..bac82f4 100644
--- a/app/(admin)/layout.tsx
+++ b/app/(admin)/layout.tsx
@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import { Suspense, type ReactNode } from "react";
 import ConditionalNavigation from "../components/navigation/ConditionalNavigation";
+import SkipToContent from "../components/navigation/SkipToContent";
 import { MessagesProvider } from "../contexts/MessagesContext";
 import { AuthModalProvider } from "../contexts/AuthModalContext";
 import messages from "../../messages/en/index";
+import { MAIN_CONTENT_ID } from "../../lib/mainContent";
 import { NO_INDEX_ROBOTS } from "../../lib/siteMetadata";
 
 export const metadata: Metadata = {
@@ -20,10 +22,17 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
   return (
     <MessagesProvider messages={messages}>
       <AuthModalProvider>
+        <SkipToContent />
         <Suspense fallback={null}>
           <ConditionalNavigation />
         </Suspense>
-        <main className="flex-1">{children}</main>
+        <main
+          id={MAIN_CONTENT_ID}
+          tabIndex={-1}
+          className="flex-1 outline-none"
+        >
+          {children}
+        </main>
       </AuthModalProvider>
     </MessagesProvider>
   );
diff --git a/app/(app)/layout.tsx b/app/(app)/layout.tsx
index 07a30f5..56d66c1 100644
--- a/app/(app)/layout.tsx
+++ b/app/(app)/layout.tsx
@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import { Suspense, type ReactNode } from "react";
 import ConditionalNavigation from "../components/navigation/ConditionalNavigation";
+import SkipToContent from "../components/navigation/SkipToContent";
 import { MessagesProvider } from "../contexts/MessagesContext";
 import { AuthModalProvider } from "../contexts/AuthModalContext";
 import messages from "../../messages/en/index";
+import { MAIN_CONTENT_ID } from "../../lib/mainContent";
 import { NO_INDEX_ROBOTS } from "../../lib/siteMetadata";
 
 export const metadata: Metadata = {
@@ -27,10 +29,17 @@ export default function AppLayout({ children }: { children: ReactNode }) {
   return (
     <MessagesProvider messages={messages}>
       <AuthModalProvider>
+        <SkipToContent />
         <Suspense fallback={null}>
           <ConditionalNavigation />
         </Suspense>
-        <main className="flex-1">{children}</main>
+        <main
+          id={MAIN_CONTENT_ID}
+          tabIndex={-1}
+          className="flex-1 outline-none"
+        >
+          {children}
+        </main>
       </AuthModalProvider>
     </MessagesProvider>
   );
diff --git a/app/(dev)/layout.tsx b/app/(dev)/layout.tsx
index 4319258..7383768 100644
--- a/app/(dev)/layout.tsx
+++ b/app/(dev)/layout.tsx
@@ -4,6 +4,7 @@ import { notFound } from "next/navigation";
 import { MessagesProvider } from "../contexts/MessagesContext";
 import { AuthModalProvider } from "../contexts/AuthModalContext";
 import messages from "../../messages/en/index";
+import { MAIN_CONTENT_ID } from "../../lib/mainContent";
 import { NO_INDEX_ROBOTS } from "../../lib/siteMetadata";
 
 export const metadata: Metadata = {
@@ -18,7 +19,13 @@ export default function DevLayout({ children }: { children: ReactNode }) {
   return (
     <MessagesProvider messages={messages}>
       <AuthModalProvider>
-        <main className="flex-1">{children}</main>
+        <main
+          id={MAIN_CONTENT_ID}
+          tabIndex={-1}
+          className="flex-1 outline-none"
+        >
+          {children}
+        </main>
       </AuthModalProvider>
     </MessagesProvider>
   );
diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
index 48b387c..f18d61a 100644
--- a/app/(marketing)/layout.tsx
+++ b/app/(marketing)/layout.tsx
@@ -1,8 +1,10 @@
 import dynamic from "next/dynamic";
 import { Suspense, type ReactNode } from "react";
-import MarketingNavigation from "../components/navigation/MarketingNavigation";
+import ConditionalNavigation from "../components/navigation/ConditionalNavigation";
+import SkipToContent from "../components/navigation/SkipToContent";
 import { MessagesProvider } from "../contexts/MessagesContext";
 import { AuthModalProvider } from "../contexts/AuthModalContext";
+import { MAIN_CONTENT_ID } from "../../lib/mainContent";
 import marketingMessages from "../../messages/en/marketing";
 
 // Site footer is part of the public marketing chrome only — not rendered for
@@ -20,14 +22,21 @@ export default function MarketingLayout({ children }: { children: ReactNode }) {
     <MessagesProvider messages={marketingMessages}>
       <AuthModalProvider>
         {/*
-         * MarketingNavigation reads `usePathname()` to decide chromeless paths
-         * (uncached data under `cacheComponents`). Suspense lets the static
-         * shell prerender; the nav streams in with the correct visibility.
+         * Same session-aware shell as `(app)` / `(admin)`: `ConditionalNavigation`
+         * reads the cookie behind Suspense so the static page shell can prerender
+         * while the header streams signed-in vs signed-out correctly.
          */}
+        <SkipToContent />
         <Suspense fallback={null}>
-          <MarketingNavigation />
+          <ConditionalNavigation />
         </Suspense>
-        <main className="flex-1">{children}</main>
+        <main
+          id={MAIN_CONTENT_ID}
+          tabIndex={-1}
+          className="flex-1 outline-none"
+        >
+          {children}
+        </main>
         <Footer />
       </AuthModalProvider>
     </MessagesProvider>
diff --git a/app/(marketing-case-study)/layout.tsx b/app/(marketing-case-study)/layout.tsx
index 3b43e9a..4195d02 100644
--- a/app/(marketing-case-study)/layout.tsx
+++ b/app/(marketing-case-study)/layout.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { MessagesProvider } from "../contexts/MessagesContext";
 import { AuthModalProvider } from "../contexts/AuthModalContext";
+import { MAIN_CONTENT_ID } from "../../lib/mainContent";
 import marketingMessages from "../../messages/en/marketing";
 
 /** Full-viewport case-study surfaces (completed rule demos) — no marketing footer. */
@@ -12,7 +13,11 @@ export default function MarketingCaseStudyLayout({
   return (
     <MessagesProvider messages={marketingMessages}>
       <AuthModalProvider>
-        <main className="flex h-dvh min-h-0 flex-col overflow-hidden">
+        <main
+          id={MAIN_CONTENT_ID}
+          tabIndex={-1}
+          className="flex h-dvh min-h-0 flex-col overflow-hidden outline-none"
+        >
           {children}
         </main>
       </AuthModalProvider>
diff --git a/app/components/asset/Logo/Logo.tsx b/app/components/asset/Logo/Logo.tsx
index 6e2d539..37ddd26 100644
--- a/app/components/asset/Logo/Logo.tsx
+++ b/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
           ? ""
diff --git a/app/components/navigation/MarketingNavigation.tsx b/app/components/navigation/MarketingNavigation.tsx
deleted file mode 100644
index 5ccb3a4..0000000
--- a/app/components/navigation/MarketingNavigation.tsx
+++ /dev/null
@@ -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;
diff --git a/app/components/navigation/SkipToContent.tsx b/app/components/navigation/SkipToContent.tsx
new file mode 100644
index 0000000..081e251
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/components/navigation/Top/Top.container.tsx b/app/components/navigation/Top/Top.container.tsx
index ed14a7f..b9aa8f3 100644
--- a/app/components/navigation/Top/Top.container.tsx
+++ b/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>
       );
diff --git a/app/components/navigation/Top/Top.types.ts b/app/components/navigation/Top/Top.types.ts
index dffc63a..f22a8a6 100644
--- a/app/components/navigation/Top/Top.types.ts
+++ b/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;
 }
diff --git a/app/components/navigation/Top/Top.view.tsx b/app/components/navigation/Top/Top.view.tsx
index 1a65179..ee07e2f 100644
--- a/app/components/navigation/Top/Top.view.tsx
+++ b/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>
diff --git a/app/components/navigation/Top/index.tsx b/app/components/navigation/Top/index.tsx
index bedab18..b017818 100644
--- a/app/components/navigation/Top/index.tsx
+++ b/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";
diff --git a/app/globals.css b/app/globals.css
index 681b93c..dd4ad34 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -58,3 +58,26 @@ body {
   background-color: black;
   min-height: 100vh;
 }
+
+/* Skip link: parked above the viewport until focused. */
+.skip-to-content {
+  position: absolute;
+  left: var(--spacing-scale-016);
+  top: var(--spacing-scale-016);
+  z-index: 100;
+  padding: var(--spacing-scale-012) var(--spacing-scale-016);
+  border-radius: var(--radius-measures-radius-full);
+  background-color: var(--color-surface-inverse-primary);
+  color: var(--color-content-inverse-primary);
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  box-shadow:
+    0 0 0 2px var(--color-border-default-primary),
+    0 0 0 4px var(--color-border-invert-primary);
+  transform: translateY(-200%);
+}
+.skip-to-content:focus,
+.skip-to-content:focus-visible {
+  transform: translateY(0);
+}
diff --git a/app/layout.tsx b/app/layout.tsx
index e0eaa9e..a4f5705 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -6,10 +6,9 @@ import { ASSETS, getAssetPath } from "../lib/assetUtils";
 import { PRODUCTION_SITE_ORIGIN } from "../lib/siteMetadata";
 import "./globals.css";
 
-// `force-dynamic` is now scoped to `(app)/layout.tsx` and `(admin)/layout.tsx`
-// (the only groups that read the session via `ConditionalNavigation`). Marketing
-// renders a client-side `MarketingNavigation` so its HTML can be statically
-// optimized — TTFB drops to CDN speed for guests.
+// Session chrome (`ConditionalNavigation`) lives in `(marketing)`, `(app)`, and
+// `(admin)` layouts, behind `<Suspense>`, so the static shell can prerender while
+// the header streams with the request cookie.
 //
 // MessagesProvider + AuthModalProvider are mounted per route group (Phase 4b):
 // `(marketing)` gets a trimmed slice without `create.*` (~41 KB gzipped saved
diff --git a/docs/figma-component-registry.md b/docs/figma-component-registry.md
index 267cbee..ce80cfc 100644
--- a/docs/figma-component-registry.md
+++ b/docs/figma-component-registry.md
@@ -107,7 +107,7 @@ Inventory aligns with [**CR-104**](https://linear.app/community-rule/issue/CR-10
 | **Link** matrix | **`Link/`** | Next.js **`Link`** wrapper + Figma “Link, CTA” styling; used in nav and content (e.g. **`Rule`**). |
 | Create-flow top chrome (often **Utility** in Figma) | **`CreateFlowTopNav/`** | Wizard header; **`CreateFlowLayoutClient`**. |
 | Create-flow bottom chrome (often **Utility** in Figma) | **`CreateFlowFooter/`** | Wizard footer + **`ProportionBar`**; **`CreateFlowLayoutClient`**. |
-| App shell (not a DS atom) | **`ConditionalNavigation.tsx`**, **`ConditionalNavigationClient.tsx`** | Server: session for first paint. Client: hide global **`Top`** on **`/create/*`** and **`/login`**; else **`TopWithPathname`**. **Tolerated `usePathname()`** — no new pathname-conditional chrome (**`routes.mdc`**). |
+| App shell (not a DS atom) | **`ConditionalNavigation.tsx`**, **`ConditionalNavigationClient.tsx`**, **`SkipToContent.tsx`** | Server: session for first paint. Client: hide global **`Top`** on **`/create/*`** and **`/login`**; else **`TopWithPathname`**. Skip link in group layouts targets **`#main-content`**. **Tolerated `usePathname()`** — no new pathname-conditional chrome (**`routes.mdc`**). |
 
 **Also under Utility in Figma:** **`CreateFlowTopNav`** / **`CreateFlowFooter`** are filed under Utility but **canonical code** is here with **`Top`** / **`Footer`** (see **Utility conventions**).
 
diff --git a/docs/perf/next16-eval.md b/docs/perf/next16-eval.md
index 3633cc9..21b68b9 100644
--- a/docs/perf/next16-eval.md
+++ b/docs/perf/next16-eval.md
@@ -9,7 +9,7 @@ as follow-up work (see "Outcome" sections below).
 
 | Flag | Recommendation | Status |
 | --- | --- | --- |
-| `cacheComponents` (PPR successor) | **Ship** | **Shipped.** `force-dynamic` removed from `(app)` and `(admin)` layouts; `<ConditionalNavigation />` (and `<MarketingNavigation />`) wrapped in `<Suspense fallback={null}>`. `(app)`/`(admin)` routes are now `◐ Partial Prerender` instead of `ƒ Dynamic`. `/` static shell dropped from 45 KB → 11.7 KB gzipped. |
+| `cacheComponents` (PPR successor) | **Ship** | **Shipped.** `force-dynamic` removed from `(app)` and `(admin)` layouts; `<ConditionalNavigation />` wrapped in `<Suspense fallback={null}>` in `(marketing)`, `(app)`, and `(admin)`. `(app)`/`(admin)` routes are now `◐ Partial Prerender` instead of `ƒ Dynamic`. `/` static shell dropped from 45 KB → 11.7 KB gzipped. |
 | React Compiler | **Ship (annotation mode)** | **Shipped (plumbing only).** `babel-plugin-react-compiler` + `eslint-plugin-react-compiler` installed. `reactCompiler: { compilationMode: "annotation" }` enabled in `next.config.mjs`. ESLint rule wired in at "warn" — found 31 latent warnings across 8 files (none introduced by this change). Migrating containers to `"use memo"` is a future task. |
 
 Both flags now ship in `main`. The findings below describe what changed in
@@ -76,9 +76,9 @@ requires expressing that dynamism via `<Suspense>` boundaries plus
 2. Wrapped `<ConditionalNavigation />` (server component reading
    `getNavAuthSignedIn()` → `cookies()`) in `<Suspense fallback={null}>` in
    both layouts.
-3. Same change for `<MarketingNavigation />` in
+3. Same Suspense wrap for `<ConditionalNavigation />` in
    [app/(marketing)/layout.tsx](../../app/(marketing)/layout.tsx) — the
-   marketing nav reads `usePathname()` (uncached per request) and would
+   nav reads `usePathname()` (uncached per request) and would
    otherwise block the static shell at routes like `/rules/[id]`.
 4. Enabled `experimental.cacheComponents: true` in
    [next.config.mjs](../../next.config.mjs).
diff --git a/lib/mainContent.ts b/lib/mainContent.ts
new file mode 100644
index 0000000..e5cdcc1
--- /dev/null
+++ b/lib/mainContent.ts
@@ -0,0 +1,2 @@
+/** DOM id of the group-layout `<main>` landmark; skip-to-content targets this. */
+export const MAIN_CONTENT_ID = "main-content";
diff --git a/messages/en/components/header.json b/messages/en/components/header.json
index 2b193d7..6f2c3cf 100644
--- a/messages/en/components/header.json
+++ b/messages/en/components/header.json
@@ -4,6 +4,7 @@
     "learn": "Learn",
     "about": "About"
   },
+  "skipToContent": "Skip to content",
   "buttons": {
     "logIn": "Log in",
     "profile": "Profile",
diff --git a/tests/components/SkipToContent.test.tsx b/tests/components/SkipToContent.test.tsx
new file mode 100644
index 0000000..ce1e1f2
--- /dev/null
+++ b/tests/components/SkipToContent.test.tsx
@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom/vitest";
+import { describe, expect, it } from "vitest";
+import SkipToContent from "../../app/components/navigation/SkipToContent";
+import { MAIN_CONTENT_ID } from "../../lib/mainContent";
+import { renderWithProviders as render, screen } from "../utils/test-utils";
+
+describe("SkipToContent", () => {
+  it("targets the main landmark", () => {
+    render(<SkipToContent />);
+    const link = screen.getByRole("link", { name: "Skip to content" });
+    expect(link).toHaveAttribute("href", `#${MAIN_CONTENT_ID}`);
+    expect(link).toHaveClass("skip-to-content");
+  });
+});
diff --git a/tests/components/Top.test.tsx b/tests/components/Top.test.tsx
index dc3195b..1fc0983 100644
--- a/tests/components/Top.test.tsx
+++ b/tests/components/Top.test.tsx
@@ -85,9 +85,7 @@ describe('Top "Create rule" button', () => {
 
     renderWithProviders(<Top folderTop={false} />);
 
-    // Top renders the Create Rule button at three breakpoints (xs/sm/md);
-    // any of them clicking the same handler is the point.
-    const [btn] = screen.getAllByRole("button", {
+    const btn = screen.getByRole("button", {
       name: /create a new rule/i,
     });
     await userEvent.click(btn);
@@ -112,7 +110,7 @@ describe('Top "Create rule" button', () => {
   it("uses filled invert for Create rule", () => {
     for (const folderTop of [false, true]) {
       const { unmount } = renderWithProviders(<Top folderTop={folderTop} />);
-      const [button] = screen.getAllByRole("button", {
+      const button = screen.getByRole("button", {
         name: /create a new rule/i,
       });
       expect(button.className).toContain(
@@ -125,3 +123,56 @@ describe('Top "Create rule" button', () => {
     }
   });
 });
+
+describe("Top header chrome", () => {
+  it("renders each nav control once, including display:none copies", () => {
+    for (const folderTop of [false, true]) {
+      const { unmount } = renderWithProviders(
+        <Top folderTop={folderTop} loggedIn />,
+      );
+      expect(
+        screen.getAllByRole("menuitem", {
+          name: /navigate to use cases page/i,
+          hidden: true,
+        }),
+      ).toHaveLength(1);
+      expect(
+        screen.getAllByRole("menuitem", {
+          name: /navigate to learn page/i,
+          hidden: true,
+        }),
+      ).toHaveLength(1);
+      expect(
+        screen.getAllByRole("menuitem", {
+          name: /go to your profile/i,
+          hidden: true,
+        }),
+      ).toHaveLength(1);
+      expect(
+        screen.getAllByRole("button", {
+          name: /create a new rule/i,
+          hidden: true,
+        }),
+      ).toHaveLength(1);
+      unmount();
+    }
+  });
+
+  it("shows Profile instead of Log in when signed in", () => {
+    renderWithProviders(<Top folderTop={false} loggedIn />);
+    expect(
+      screen.getByRole("menuitem", { name: /go to your profile/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /log in to your account/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("keeps the standard logo and nav in separate columns", () => {
+    renderWithProviders(<Top folderTop={false} loggedIn />);
+    const logo = document.querySelector("[data-top='logo']");
+    const nav = document.querySelector("[data-top='nav']");
+    expect(logo?.className).not.toMatch(/\bz-20\b/);
+    expect(nav?.className).not.toMatch(/\babsolute\b/);
+  });
+});
diff --git a/tests/components/TopWithPathname.test.tsx b/tests/components/TopWithPathname.test.tsx
new file mode 100644
index 0000000..bb88a2d
--- /dev/null
+++ b/tests/components/TopWithPathname.test.tsx
@@ -0,0 +1,34 @@
+import { describe, expect, it, vi } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import TopWithPathname from "../../app/components/navigation/Top/TopWithPathname";
+import { renderWithProviders, screen } from "../utils/test-utils";
+
+const { pushMock } = vi.hoisted(() => ({ pushMock: vi.fn() }));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: pushMock,
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+  }),
+  usePathname: () => "/learn",
+}));
+
+vi.mock("../../lib/create/api", () => ({
+  fetchAuthSession: () => new Promise(() => {}),
+}));
+
+describe("TopWithPathname", () => {
+  it("renders Profile from the server session before /api/auth/session resolves", () => {
+    renderWithProviders(<TopWithPathname initialSignedIn />);
+    expect(
+      screen.getByRole("menuitem", { name: /go to your profile/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /log in to your account/i }),
+    ).not.toBeInTheDocument();
+  });
+});
