diff --git a/dictionary-octopus.txt b/dictionary-octopus.txt
index 3d54554a5e..2b564d5573 100644
--- a/dictionary-octopus.txt
+++ b/dictionary-octopus.txt
@@ -333,6 +333,7 @@ netstandard
 newcert
 newguid
 NEWID
+newnav
 Newtonsoft
 nfsadmin
 nlog
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 35d6a484dc..8115af8901 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -7,6 +7,7 @@ import Search from '../themes/octopus/components/Search.astro';
 import MobileMenu from './MobileMenu.astro';
 import OctopusLogo from './icons/OctopusLogo.astro';
 import ThemeSwitcher from './ThemeSwitcher.astro';
+import TopNav from './TopNav.astro';
 
 const stats = new accelerator.statistics('components/Header.astro');
 stats.start();
@@ -26,6 +27,41 @@ const _ = Lang(lang);
 stats.stop();
 ---
 
+<script is:inline>
+  {
+    const key = 'use-new-nav';
+    const newNavRequested = new URLSearchParams(location.search).get('newnav');
+
+    let useNewNav = false;
+    try {
+      if (newNavRequested == null) {
+        const storedItem = JSON.parse(sessionStorage.getItem(key));
+        if (storedItem) {
+          // Remember the new nav setting for an hour
+          if (Date.now() - storedItem.timestamp < 60 * 60 * 1000) {
+            useNewNav = true;
+          } else {
+            sessionStorage.removeItem(key);
+          }
+        }
+      } else if (newNavRequested !== '0') {
+        useNewNav = true;
+        sessionStorage.setItem(key, JSON.stringify({ timestamp: Date.now() }));
+      } else {
+        sessionStorage.removeItem(key);
+      }
+    } catch {}
+
+    if (useNewNav) {
+      document.documentElement.dataset.nav = 'new';
+    }
+  }
+</script>
+
+<div class="new-top-nav">
+  <TopNav />
+</div>
+
 <header class="octo-header-bkg site-header header-default">
   <div class="octo-header">
     <div class="octo-header__wrapper--left">
diff --git a/src/components/TopNav.astro b/src/components/TopNav.astro
index 0b32e3f792..e8ec54044e 100644
--- a/src/components/TopNav.astro
+++ b/src/components/TopNav.astro
@@ -4,20 +4,22 @@ import Avatar from './Avatar.astro';
 import Button from './Button.astro';
 
 type Props = {
-  active?: string;
   links?: { label: string; href: string }[];
 };
 
-// TODO: Make these real links
 const {
-  active = 'Docs',
   links = [
-    { label: 'Docs', href: '#' },
-    { label: 'Learn', href: '#' },
-    { label: 'API', href: '#' },
-    { label: 'CLI', href: '#' },
+    { label: 'Docs', href: '/docs' },
+    { label: 'Learn', href: '#' }, // TODO: Make this a real link
+    { label: 'API', href: '/docs/octopus-rest-api' },
+    { label: 'CLI', href: '/docs/octopus-rest-api/cli' },
   ],
-} = Astro.props;
+} = Astro.props satisfies Props;
+
+const pathname = Astro.url.pathname.replace(/\/+$/, '') || '/';
+const currentLabel = links
+  .filter(({ href }) => pathname === href || pathname.startsWith(`${href}/`))
+  .sort((a, b) => b.href.length - a.href.length)[0]?.label;
 ---
 
 <header class="top-nav">
@@ -35,10 +37,10 @@ const {
           <a
             class:list={[
               'top-nav__link',
-              label === active && 'top-nav__link--active',
+              label === currentLabel && 'top-nav__link--active',
             ]}
             href={href}
-            aria-current={label === active ? 'page' : undefined}
+            aria-current={label === currentLabel ? 'page' : undefined}
           >
             {label}
           </a>
@@ -47,14 +49,23 @@ const {
     </nav>
   </div>
   <div class="top-nav__trailing">
-    <!-- All of these are just non-functional and for visual/presentation only at this stage -->
-    <Button icon="fa-regular fa-moon" aria-label="Switch to dark theme" />
-    <!-- TODO: Make these real links -->
+    <!-- TODO: Fix the theme switcher icons -->
+    <Button
+      icon="fa-regular fa-moon"
+      aria-label="Dark mode"
+      aria-pressed="false"
+      data-theme-toggle-button
+    />
+    <!-- TODO: Make this a real link -->
     <Button label="Changelog" href="#" />
-    <Button label="Sign in" href="#" data-signed-out-only />
+    <Button
+      label="Sign in"
+      href="https://octopus.com/signin"
+      data-signed-out-only
+    />
     <Button
       label="Start for free"
-      href="#"
+      href="https://octopus.com/free-signup"
       importance="loud"
       data-signed-out-only
     />
@@ -73,4 +84,83 @@ const {
 
 <script>
   import '../scripts/signed-in-user';
+  import '../scripts/theme-switcher';
 </script>
+
+<style>
+  .top-nav {
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space24);
+    padding: var(--space16) var(--space24)
+      calc(var(--space16) - var(--borderWidth1));
+    border-block-end: var(--borderWidth1) solid var(--colorBorderPrimary);
+    background: var(--colorBackgroundPrimaryDefault);
+  }
+
+  .top-nav__leading,
+  .top-nav__trailing {
+    flex-shrink: 0; /* Disallow shrinking so button labels don't wrap across 2 lines */
+  }
+
+  .top-nav__leading {
+    display: flex;
+    align-items: center;
+    gap: var(--space64);
+  }
+
+  .top-nav__logo {
+    display: flex;
+  }
+
+  .top-nav__logo-mark {
+    display: block;
+    height: 2rem;
+    width: auto;
+    color: var(--colorTextPrimary);
+  }
+
+  .top-nav__links {
+    display: flex;
+    align-items: center;
+    gap: var(--space2);
+  }
+
+  .top-nav__trailing {
+    display: flex;
+    align-items: center;
+    gap: var(--space12);
+  }
+
+  a.top-nav__link {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space8) var(--space12);
+    border-radius: var(--borderRadiusSmall);
+    background: var(--colorNavBackgroundRest);
+    color: var(--colorTextPrimary);
+    font: var(--textBodyRegularMedium);
+    text-align: center;
+    text-decoration: none;
+  }
+
+  a.top-nav__link:hover:not(.top-nav__link--active),
+  a.top-nav__link:focus:not(.top-nav__link--active) {
+    background: var(--colorNavBackgroundHover);
+  }
+
+  a.top-nav__link:focus-visible {
+    outline: var(--borderWidth2) solid var(--colorBorderSelected);
+    outline-offset: var(--borderWidth1);
+  }
+
+  a.top-nav__link--active {
+    background: var(--colorNavBackgroundActive);
+    color: var(--colorTextSelected);
+    font: var(--textBodyBoldMedium);
+  }
+</style>
diff --git a/src/pages/docs/octopus-rest-api/index.mdx b/src/pages/docs/octopus-rest-api/index.mdx
index c052db27d7..40b11ed5f2 100644
--- a/src/pages/docs/octopus-rest-api/index.mdx
+++ b/src/pages/docs/octopus-rest-api/index.mdx
@@ -26,12 +26,12 @@ We designed the Octopus REST API to:
 
 ## Octopus Command Line (CLI)
 
-The Octopus CLI is a command line tool that builds on top of the [Octopus Deploy REST API](https://octopus.com/docs/octopus-rest-api). With the Octopus CLI, you can push your application packages for deployment as either zip or NuGet packages, and manage your environments, deployments, projects, and workers.
+The Octopus CLI is a command line tool that builds on top of the [Octopus Deploy REST API](/docs/octopus-rest-api). With the Octopus CLI, you can push your application packages for deployment as either zip or NuGet packages, and manage your environments, deployments, projects, and workers.
 
 The Octopus CLI can be used on Windows, Mac, Linux, and Docker. For installation options and direct downloads, visit the [CLI Readme](https://github.com/OctopusDeploy/cli/blob/main/README.md).
 
-For more information see [Octopus Command Line (CLI)](https://octopus.com/docs/octopus-rest-api/cli).
+For more information see [Octopus Command Line (CLI)](/docs/octopus-rest-api/cli).
 
 ## Next steps
 
-Follow our [getting started with the Octopus REST API](/docs/octopus-rest-api/getting-started) guide or learn [how to create an API key](/docs/octopus-rest-api/how-to-create-an-api-key).
\ No newline at end of file
+Follow our [getting started with the Octopus REST API](/docs/octopus-rest-api/getting-started) guide or learn [how to create an API key](/docs/octopus-rest-api/how-to-create-an-api-key).
diff --git a/src/scripts/theme-switcher.ts b/src/scripts/theme-switcher.ts
index 91ffeff354..87f2fa397b 100644
--- a/src/scripts/theme-switcher.ts
+++ b/src/scripts/theme-switcher.ts
@@ -10,6 +10,12 @@ import {
 } from '../lib/theme';
 
 const CHECKBOX_SELECTOR = '[data-theme-toggle-checkbox]';
+const BUTTON_SELECTOR = '[data-theme-toggle-button]';
+const BUTTON_ICON_SELECTOR = '.btn__icon';
+const BUTTON_ICON_CLASSES: Record<Theme, string> = {
+  light: 'fa-moon',
+  dark: 'fa-sun',
+};
 
 const root = document.documentElement;
 const darkQuery = window.matchMedia(COLOR_SCHEME_QUERY);
@@ -18,6 +24,10 @@ function checkboxes() {
   return document.querySelectorAll<HTMLInputElement>(CHECKBOX_SELECTOR);
 }
 
+function buttons() {
+  return document.querySelectorAll<HTMLButtonElement>(BUTTON_SELECTOR);
+}
+
 // localStorage throws in Safari private mode and in cookie-blocked iframes.
 // A failed read or write only costs persistence, so swallow it.
 function readPreference(): ThemePreference {
@@ -54,6 +64,16 @@ function syncControls(theme: Theme) {
   checkboxes().forEach((box) => {
     box.checked = theme === 'dark';
   });
+
+  buttons().forEach((button) => {
+    button.setAttribute('aria-pressed', String(theme === 'dark'));
+
+    const icon = button.querySelector(BUTTON_ICON_SELECTOR);
+    icon?.classList.remove(
+      BUTTON_ICON_CLASSES[theme === 'dark' ? 'light' : 'dark']
+    );
+    icon?.classList.add(BUTTON_ICON_CLASSES[theme]);
+  });
 }
 
 function apply(preference: ThemePreference) {
@@ -99,6 +119,15 @@ function bind() {
       box.click();
     });
   });
+
+  buttons().forEach((button) => {
+    if (button.dataset.themeBound) return;
+    button.dataset.themeBound = 'true';
+
+    button.addEventListener('click', () =>
+      setTheme(currentTheme() === 'dark' ? 'light' : 'dark')
+    );
+  });
 }
 
 // Follow the OS only while the user has not made an explicit choice.
diff --git a/src/styles/main.css b/src/styles/main.css
index ab43dcb6d3..b1cbb8aa82 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -648,7 +648,7 @@ nav.skip-links a:focus {
 .octo-header-bkg {
   box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
   background-color: var(--header-bg);
-  min-height: 82px;
+  min-height: var(--header-height);
   position: fixed;
   width: 100%;
   top: 0;
@@ -1229,8 +1229,8 @@ html[data-theme='light'] .theme-switcher__icon--dark svg path {
 .site-nav {
   align-self: start;
   position: sticky;
-  top: 82px;
-  height: calc(100vh - 82px);
+  top: var(--header-height);
+  height: calc(100vh - var(--header-height));
   box-sizing: border-box;
   /* No inline-end padding here — the scrolling list owns that gap, so the
      scrollbar rides against the border. No block-end padding either: the
@@ -1363,10 +1363,10 @@ html[data-theme='light'] .theme-switcher__icon--dark svg path {
   /* The last of the three column start heights below the header — 16px for the
      nav, 56px for the content, 100px here. */
   margin-block-start: 6.25rem;
-  top: calc(82px + 6.25rem);
+  top: calc(var(--header-height) + 6.25rem);
   /* Everything from the sticky top to the bottom of the window, so a long list
      scrolls inside the column instead of running off the end of it. */
-  height: calc(100vh - 82px - 6.25rem);
+  height: calc(100vh - var(--header-height) - 6.25rem);
   /* Keeps the toc off the right edge of the window. The grid column is widened
      to match, so the nav itself keeps its designed width. */
   padding-inline-end: var(--space16);
@@ -1504,7 +1504,7 @@ html[data-theme='light'] .theme-switcher__icon--dark svg path {
   grid-template-areas:
     'menu . content . toc .'
     'menu . footer  . .   .';
-  margin-top: 82px;
+  margin-top: var(--header-height);
 }
 
 /* Article header */
@@ -3119,80 +3119,24 @@ a.button.button--primary:active {
 /* Button component end */
 
 /* TopNav component */
-.top-nav {
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space24);
-  padding: var(--space16) var(--space24)
-    calc(var(--space16) - var(--borderWidth1));
-  border-block-end: var(--borderWidth1) solid var(--colorBorderPrimary);
-  background: var(--colorBackgroundPrimaryDefault);
-}
-
-.top-nav__leading,
-.top-nav__trailing {
-  flex-shrink: 0; /* Disallow shrinking so button labels don't wrap across 2 lines */
+.new-top-nav {
+  display: none;
 }
 
-.top-nav__leading {
-  display: flex;
-  align-items: center;
-  gap: var(--space64);
+html[data-nav='new'] {
+  --header-height: 68px;
 }
 
-.top-nav__logo {
-  display: flex;
-}
-
-.top-nav__logo-mark {
+html[data-nav='new'] .new-top-nav {
   display: block;
-  height: 2rem;
-  width: auto;
-  color: var(--colorTextPrimary);
-}
-
-.top-nav__links {
-  display: flex;
-  align-items: center;
-  gap: var(--space2);
-}
-
-.top-nav__trailing {
-  display: flex;
-  align-items: center;
-  gap: var(--space12);
-}
-
-a.top-nav__link {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--space8) var(--space12);
-  border-radius: var(--borderRadiusSmall);
-  background: var(--colorNavBackgroundRest);
-  color: var(--colorTextPrimary);
-  font: var(--textBodyRegularMedium);
-  text-align: center;
-  text-decoration: none;
-}
-
-a.top-nav__link:hover:not(.top-nav__link--active),
-a.top-nav__link:focus:not(.top-nav__link--active) {
-  background: var(--colorNavBackgroundHover);
-}
-
-a.top-nav__link:focus-visible {
-  outline: var(--borderWidth2) solid var(--colorBorderSelected);
-  outline-offset: var(--borderWidth1);
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 11;
 }
 
-a.top-nav__link--active {
-  background: var(--colorNavBackgroundActive);
-  color: var(--colorTextSelected);
-  font: var(--textBodyBoldMedium);
+html[data-nav='new'] .site-header {
+  display: none;
 }
 /* TopNav component end */
 
diff --git a/src/styles/vars.css b/src/styles/vars.css
index bad17d2e35..1991994fd9 100644
--- a/src/styles/vars.css
+++ b/src/styles/vars.css
@@ -208,6 +208,7 @@
   --block-gap: 2rem;
 
   --header-pin: 0;
+  --header-height: 82px;
   --scroll-pad: 140px;
 
   --box-shadow: 4px 0px 8px rgba(0, 0, 0, 0.25);
diff --git a/tests/topnav-signedin.spec.ts b/tests/topnav-signedin.spec.ts
index 42cbce6919..5612f8eb83 100644
--- a/tests/topnav-signedin.spec.ts
+++ b/tests/topnav-signedin.spec.ts
@@ -2,8 +2,8 @@ import { test, expect, type Page } from '@playwright/test';
 
 const showcase = '/components';
 
-const nav = '.top-nav';
-const trailing = '.top-nav__trailing';
+const nav = '.top-nav-showcase .top-nav';
+const trailing = `${nav} .top-nav__trailing`;
 const avatar = `${nav} [data-user-avatar]`;
 
 async function signIn(