diff --git a/packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx b/packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx
index 5ca29a88878..6597d1a181b 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 import {StaticTable} from '../../../src/StaticTable';
 
 export const section = 'Date and Time';
+export const group = 'Internationalized';
 
 # Calendar
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx b/packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx
index 56189a82a60..2044c291940 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
+export const group = 'Internationalized';
 
 # CalendarDate
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx b/packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx
index 1f39610877b..f694a78ad1a 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
+export const group = 'Internationalized';
 
 # CalendarDateTime
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/DateFormatter.mdx b/packages/dev/s2-docs/pages/internationalized/date/DateFormatter.mdx
index 55a1c43bb7e..b790fbac2ba 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/DateFormatter.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/DateFormatter.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
+export const group = 'Internationalized';
 
 # DateFormatter
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/Time.mdx b/packages/dev/s2-docs/pages/internationalized/date/Time.mdx
index 7db7ac46a87..fb0edb08c36 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/Time.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/Time.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
+export const group = 'Internationalized';
 
 # Time
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/ZonedDateTime.mdx b/packages/dev/s2-docs/pages/internationalized/date/ZonedDateTime.mdx
index 820489c92c1..81711c63f3f 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/ZonedDateTime.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/ZonedDateTime.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
+export const group = 'Internationalized';
 
 # ZonedDateTime
 
diff --git a/packages/dev/s2-docs/pages/internationalized/date/index.mdx b/packages/dev/s2-docs/pages/internationalized/date/index.mdx
index a1b76f4d827..7f3045dfda7 100644
--- a/packages/dev/s2-docs/pages/internationalized/date/index.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/date/index.mdx
@@ -15,6 +15,7 @@ import {InstallCommand} from '../../../src/InstallCommand';
 export const section = 'Date and Time';
 export const pageTitle = 'Internationalized | Date and Time';
 export const description = 'Introduction to @internationalized/date';
+export const group = 'Internationalized';
 
 # Introduction
 
diff --git a/packages/dev/s2-docs/pages/internationalized/number/NumberFormatter.mdx b/packages/dev/s2-docs/pages/internationalized/number/NumberFormatter.mdx
index 5c8c3c29af7..2e5d27dd06d 100644
--- a/packages/dev/s2-docs/pages/internationalized/number/NumberFormatter.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/number/NumberFormatter.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@internationalized/number';
 
 export const section = 'Numbers';
+export const group = 'Internationalized';
 
 # NumberFormatter
 
diff --git a/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx b/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx
index 61da0b9bd1e..8c94bd66684 100644
--- a/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/number/NumberParser.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@internationalized/number';
 
 export const section = 'Numbers';
+export const group = 'Internationalized';
 
 # NumberParser
 
diff --git a/packages/dev/s2-docs/pages/internationalized/number/index.mdx b/packages/dev/s2-docs/pages/internationalized/number/index.mdx
index 4d91a1c507d..fe45401b9c4 100644
--- a/packages/dev/s2-docs/pages/internationalized/number/index.mdx
+++ b/packages/dev/s2-docs/pages/internationalized/number/index.mdx
@@ -15,6 +15,7 @@ import {InstallCommand} from '../../../src/InstallCommand';
 export const section = 'Numbers';
 export const pageTitle = 'Internationalized | Numbers';
 export const description = 'Introduction to @internationalized/number';
+export const group = 'Internationalized';
 
 # Introduction
 
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
index 27eceaf3178..db256aee4e8 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx
@@ -19,6 +19,7 @@ import React from 'react';
 import {Byline} from '../../../src/BlogList';
 import {ColorEditorExample} from './ColorEditorExample';
 
+export const hideNav = true;
 export const tags = ['color picker', 'color', 'internationalization', 'localization', 'components', 'accessibility', 'react spectrum', 'react'];
 export const description = 'Recently, we released a suite of color picker components in React Aria and React Spectrum. Since colors are inherently visual, ensuring these components are accessible to users with visual impairments presented a significant challenge. In this post, we\'ll discuss how we developed an algorithm that generates clear color descriptions for screen readers in multiple languages, while minimizing bundle size.';
 export const date = '2024-10-02';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
index 955db4e3e37..689c04abd07 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx
@@ -18,6 +18,7 @@ import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
 import {Byline} from '../../../src/BlogList';
 
+export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'button', 'touch'];
 export const description = 'Buttons seem like simple components at first, but they hide a lot of complexity under the hood. In the first part of this series, we\'ll look at how React Spectrum and React Aria implement adaptive press interactions that work across a wide variety of devices and interaction models.';
 export const date = '2020-08-12';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
index d008df84af3..260b201ccf0 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-2.mdx
@@ -17,6 +17,7 @@ import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
 import {Byline} from '../../../src/BlogList';
 
+export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'touch', 'hover', 'web development', 'javascript', 'css'];
 export const description = 'This is the second post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. Today, we\'ll cover hover interactions.';
 export const date = '2020-08-25';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
index 392a7fc22bc..fa696c101b3 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx
@@ -17,6 +17,7 @@ import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
 import {Byline} from '../../../src/BlogList';
 
+export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'interactions', 'button', 'keyboard', 'focus', 'web development', 'javascript', 'css'];
 export const description = 'This is the last post in our three part series on building a button component. In the [first post](building-a-button-part-1.html), we covered how React Spectrum and React Aria implement adaptive press events across mouse, touch, keyboard, and screen readers. In the [second post](building-a-button-part-2.html), we covered hover interactions. Today, we\'ll cover keyboard focus behavior.';
 export const date = '2020-09-09';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
index 4b66fb3ec14..165ce6d7250 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/building-a-combobox.mdx
@@ -21,6 +21,7 @@ import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
 import {Byline} from '../../../src/BlogList';
 
+export const hideNav = true;
 export const tags = ['combobox', 'accessibility', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
 export const description = 'After many months of research, development, and testing, we\'re excited to announce that the React Spectrum [ComboBox](../../s2/ComboBox.html) component and React Aria [useComboBox](https://react-spectrum.adobe.com/react-aria/useComboBox.html) hook are now available! In this post we\'ll take a deeper look into some of the challenges we faced when building an accessible and mobile friendly ComboBox.';
 export const date = '2021-07-13';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx b/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx
index ba6de79d54b..ddf143f1433 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/creating-a-pointer-friendly-submenu-experience.mdx
@@ -19,6 +19,7 @@ import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
 import {Byline} from '../../../src/BlogList';
 
+export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'submenu', 'pointer'];
 export const description = 'We are excited to announce support for submenus in the latest release of [React Spectrum](../../s2/Menu.html#submenus) and [React Aria](../Menu.html#submenus)! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the way.';
 export const date = '2024-05-01';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
index 33ab37f3624..d949f021ff2 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/date-and-time-pickers-for-all.mdx
@@ -24,6 +24,7 @@ import {today, getLocalTimeZone} from '@internationalized/date';
 import RangeCalendarExample from './RangeCalendarExample';
 import CalendarSystems from './CalendarSystems';
 
+export const hideNav = true;
 export const tags = ['date picker', 'date', 'time', 'calendar', 'components', 'accessibility', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
 export const description = 'We are very excited to announce the release of the [React Aria](https://react-spectrum.adobe.com/react-aria/useNumberField.html) and [React Spectrum](../../s2/DatePicker.html) date and time picker components! This includes a full suite of fully featured components and hooks including calendars, date and time fields, and range pickers, all with a focus on internationalization and accessibility. It also includes [@internationalized/date](../../internationalized/date/index.html), a brand new framework-agnostic library for locale-aware date and time manipulation.';
 export const date = '2022-06-21';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
index 5e419d48479..ce7b80f9b79 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/drag-and-drop.mdx
@@ -24,6 +24,7 @@ import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
 import {Byline} from '../../../src/BlogList';
 
+export const hideNav = true;
 export const tags = ['drag and drop', 'dnd', 'components', 'accessibility', 'keyboard', 'mobile', 'react spectrum', 'react', 'spectrum', 'interactions', 'touch'];
 export const description = 'We are excited to announce the release of drag and drop support in [React Aria](../dnd.html) and [React Spectrum](../../s2/dnd.html)! This includes a suite of hooks for implementing drag and drop interactions, with support for both mouse and touch, as well as full parity for keyboard and screen reader input.';
 export const date = '2022-11-16';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
index cbd1fe0da17..aab5a684550 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/how-we-internationalized-our-numberfield.mdx
@@ -22,6 +22,7 @@ import React from 'react';
 import {Byline} from '../../../src/BlogList';
 import {NumberField} from '@react-spectrum/s2';
 
+export const hideNav = true;
 export const tags = ['react aria', 'react spectrum', 'react', 'spectrum', 'interactions', 'numberfield', 'touch', 'spinbutton'];
 export const description = 'Number fields are commonly used form components, but are frequently not a great user experience. They often lack support for advanced formatting, such as currency and unit values, and do not provide a localized experience for users around the world. In this post, we\'ll discuss how we approached building our number field component with support for formatting and internationalization in mind.';
 export const date = '2021-05-05';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
index 770f1ab98d2..afaa1cca139 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/index.mdx
@@ -12,6 +12,7 @@ import {BlogList} from '../../../src/BlogList';
 
 export default Layout;
 
+export const hideNav = true;
 export const section = 'Blog';
 export const title = 'Blog';
 export const hideFromSearch = true;
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx b/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx
index d73618a6f5b..3f5be8e9280 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx
@@ -22,6 +22,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
 
+export const hideNav = true;
 export const tags = ['react stately', 'react aria', 'react spectrum', 'hooks', 'react', 'spectrum'];
 export const description = 'Today, we\'re excited to announce [React Spectrum](https://react-spectrum.adobe.com/), a collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. Check it out on [Github](https://github.com/adobe/react-spectrum)!';
 export const date = '2020-07-15';
diff --git a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
index eec59365a6b..d11503ebaee 100644
--- a/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx
@@ -20,6 +20,7 @@ import docs from 'docs:@react-spectrum/s2';
 import React from 'react';
 import {Byline} from '../../../src/BlogList';
 
+export const hideNav = true;
 export const tags = ['date picker', 'date', 'time', 'calendar', 'components', 'accessibility', 'react spectrum', 'react', 'spectrum'];
 export const description = 'Internationalization is a core feature of our Date and Time components. We support 13 different calendar systems as well as locale-specific formatting, number systems, and 12 and 24 hour time. However, we identified an issue with our right-to-left support where in some right-to-left (RTL) languages, the format of the date and time fields was incorrect. While investigating this bug, we faced several challenges in ensuring proper date and time representation in RTL languages and implemented various strategies that we\'d like to share.';
 export const date = '2025-06-06';
diff --git a/packages/dev/s2-docs/pages/react-aria/examples/index.mdx b/packages/dev/s2-docs/pages/react-aria/examples/index.mdx
index 96549d6fb18..7d7bb8bdba7 100644
--- a/packages/dev/s2-docs/pages/react-aria/examples/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/examples/index.mdx
@@ -1,7 +1,7 @@
 import {Layout} from '../../../src/Layout';
 export default Layout;
 
-export const section = 'Getting started';
+export const section = 'Overview';
 export const hideFromSearch = true;
 export const title = 'Examples';
 
diff --git a/packages/dev/s2-docs/pages/react-aria/getting-started.mdx b/packages/dev/s2-docs/pages/react-aria/getting-started.mdx
index 22218e209a9..f57833a2d0a 100644
--- a/packages/dev/s2-docs/pages/react-aria/getting-started.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/getting-started.mdx
@@ -11,7 +11,7 @@ import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
 import {Link} from '@react-spectrum/s2';
 
-export const section = 'Getting started';
+export const section = 'Overview';
 export const tags = ['introduction', 'installation'];
 export const description = 'Install and build your first component';
 
diff --git a/packages/dev/s2-docs/pages/react-aria/index.mdx b/packages/dev/s2-docs/pages/react-aria/index.mdx
index 60b2c338bbd..991f6941cc4 100644
--- a/packages/dev/s2-docs/pages/react-aria/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/index.mdx
@@ -20,8 +20,9 @@ import {Popover} from 'tailwind-starter/Popover';
 import {Button} from 'tailwind-starter/Button';
 import ogImage from 'url:../../assets/ReactAriaOpenGraph.webp';
 import reactAriaFavicon from 'url:../../assets/react-aria.ico';
+import SearchMenuWrapper from '../../src/SearchMenuWrapper';
 
-export const section = 'Getting started';
+export const section = 'Overview';
 export const title = 'Home';
 export const hideFromSearch = true;
 
@@ -102,7 +103,7 @@ export const hideFromSearch = true;
 
         <div className="flex flex-col md:flex-row items-center gap-4 my-10 justify-center">
           <a href="getting-started.html" className="no-underline bg-linear-to-r from-blue-600 to-indigo-600 border border-blue-700 shadow-[inset_0_1px_0_rgba(255,255,255,0.1)] text-base md:text-lg font-bold text-white px-8 py-3 rounded-full transition focus-ring  dark:outline-white outline-offset-2 active:scale-95">Get Started</a>
-          <a href="components.html" className="no-underline bg-white/50 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring  dark:outline-white outline-offset-2 active:scale-95">Explore Components</a>
+          <SearchMenuWrapper pages={props.pages} currentPage={props.currentPage} />
         </div>
 
         <div className="relative pt-10 md:pt-20 md:mt-20">
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
index 1ca5bf0b8e2..d9478e971c2 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/index.mdx
@@ -11,6 +11,7 @@ import {Layout} from '../../../src/Layout';
 import {ReleasesList} from '../../../src/ReleasesList';
 export default Layout;
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx
index 83705229905..5f7a1811a0f 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-0-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'December 20, 2023';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx
index 9c71fd264b7..448bd6555ff 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-1-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'February 13, 2024';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx
index 63f1a35d35f..93da0024d22 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-10-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'June 5, 2025';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx
index ef64f6450e4..dc3a7edea81 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-11-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'July 22, 2025';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx
index d024536d75c..3c878883282 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-12-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'August 25, 2025';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
index e4e019eff70..5d30f1bdde8 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-13-0.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 import {ReleasedVersions} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'October 2, 2025';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx
index ece53eb8b58..677f2069037 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-2-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'May 1, 2024';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx
index 1b22cb39774..1177bbf361e 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-3-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'July 22, 2024';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx
index 5e866a359d4..251cb90a016 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-4-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'September 30, 2024';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx
index 623580b8129..3caf3deb4a0 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-5-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'November 20, 2024';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx
index f517c931fcb..e4093f02ca8 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-6-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'January 15, 2025';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx
index f903594aac2..2360275fa2c 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-7-0.mdx
@@ -14,6 +14,7 @@ import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 import datepickerImage from 'url:../assets/datepicker-rtl.png';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'March 5, 2025';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx
index 1222826b12f..99629c9c136 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-8-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'April 11, 2025';
diff --git a/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx b/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx
index 8891b42417a..fa905d92c5d 100644
--- a/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx
+++ b/packages/dev/s2-docs/pages/react-aria/releases/v1-9-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'React Aria'];
 export const date = 'May 19, 2025';
diff --git a/packages/dev/s2-docs/pages/s2/getting-started.mdx b/packages/dev/s2-docs/pages/s2/getting-started.mdx
index 13ea383c07f..c347703e0d3 100644
--- a/packages/dev/s2-docs/pages/s2/getting-started.mdx
+++ b/packages/dev/s2-docs/pages/s2/getting-started.mdx
@@ -4,7 +4,7 @@ import {BundlerSwitcher, BundlerSwitcherItem} from '../../src/BundlerSwitcher';
 export default Layout;
 import {SegmentedControl, SegmentedControlItem} from '@react-spectrum/s2';
 
-export const section = 'Getting started';
+export const section = 'Overview';
 export const tags = ['introduction', 'installation'];
 export const description = 'Getting started with React Spectrum';
 
diff --git a/packages/dev/s2-docs/pages/s2/index.mdx b/packages/dev/s2-docs/pages/s2/index.mdx
index 120c41c33de..2e402bec37f 100644
--- a/packages/dev/s2-docs/pages/s2/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/index.mdx
@@ -4,7 +4,7 @@ export default Layout;
 import {Card, CardPreview, Content, Text} from '@react-spectrum/s2';
 import {ComponentCardView} from '../../src/ComponentCardView';
 
-export const section = 'Getting started';
+export const section = 'Overview';
 export const title = 'Home';
 
 # React Spectrum
diff --git a/packages/dev/s2-docs/pages/s2/releases/index.mdx b/packages/dev/s2-docs/pages/s2/releases/index.mdx
index 2729fb13c99..65e91946075 100644
--- a/packages/dev/s2-docs/pages/s2/releases/index.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/index.mdx
@@ -11,6 +11,7 @@ import {Layout} from '../../../src/Layout';
 import {ReleasesList} from '../../../src/ReleasesList';
 export default Layout;
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['changelog', 'versions', 'updates'];
 export const title = 'Releases';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx
index 5258a9b8714..015c5413369 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-1-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'May 17, 2024';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx
index e84e0e4ac82..5ea8ead3d99 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-10-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'July 23, 2025';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx
index 0bde08723fe..4ba1ada5fff 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-11-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'August 26, 2025';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx
index dae86e73d69..e60e7382390 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-12-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'October 3, 2025';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx
index a87bbb21d99..bf5d31a257a 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-2-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'Jun 15, 2024';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx
index f0e3f0b7f6d..720a482fbe2 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-3-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'August 20, 2024';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx
index d2e5736544f..f3375ae9eac 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-4-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'October 1, 2024';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx
index 54132579ec6..abfc9cb9418 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-5-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'November 22, 2024';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx
index 5eb4694e54c..3e093a32d82 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-6-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'January 16, 2025';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx
index 927d386d794..2bae58416f1 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-7-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'March 7, 2025';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx
index d69477881d1..6c6e2f1d760 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-8-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'April 12, 2025';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx
index ef617545fe0..6403ec25b1e 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-9-0.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'May 20, 2025';
diff --git a/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx b/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx
index 90f6222d9f0..e1cd95ad9a0 100644
--- a/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx
+++ b/packages/dev/s2-docs/pages/s2/releases/v0-9-1.mdx
@@ -13,6 +13,7 @@ export default Layout;
 import docs from 'docs:@react-spectrum/s2';
 import {Time} from '../../../src/ReleasesList';
 
+export const hideNav = true;
 export const section = 'Releases';
 export const tags = ['release', 'S2'];
 export const date = 'June 6, 2025';
diff --git a/packages/dev/s2-docs/src/Header.tsx b/packages/dev/s2-docs/src/Header.tsx
index ba79a8a6fa0..92435f1612d 100644
--- a/packages/dev/s2-docs/src/Header.tsx
+++ b/packages/dev/s2-docs/src/Header.tsx
@@ -1,16 +1,17 @@
 'use client';
 
-import {ActionButton, Badge, Text} from '@react-spectrum/s2';
+import {Badge, pressScale, Text} from '@react-spectrum/s2';
+import {baseColor, focusRing, space, style} from '@react-spectrum/s2/style' with { type: 'macro' };
 // @ts-ignore
 import BetaApp from '@react-spectrum/s2/icons/BetaApp';
 import {flushSync} from 'react-dom';
 import {getLibraryFromPage, getLibraryIcon, getLibraryLabel} from './library';
 import GithubLogo from './icons/GithubLogo';
+import {Link} from 'react-aria-components';
 // @ts-ignore
 import {PageProps} from '@parcel/rsc';
-import React, {CSSProperties, useId, useState} from 'react';
+import React, {CSSProperties, useId, useRef, useState} from 'react';
 import SearchMenuTrigger, {preloadSearchMenu} from './SearchMenuTrigger';
-import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
 
 function getButtonText(currentPage) {
   return getLibraryLabel(getLibraryFromPage(currentPage));
@@ -20,10 +21,58 @@ function getButtonIcon(currentPage) {
   return getLibraryIcon(getLibraryFromPage(currentPage));
 }
 
+const libraryStyles = style({
+  ...focusRing(),
+  paddingX: 12, 
+  display: 'flex',
+  textDecoration: 'none',
+  minHeight: 48,
+  borderRadius: 'lg',
+  transition: 'default',
+  backgroundColor: {
+    default: {
+      ...baseColor('gray-100'),
+      default: 'transparent'
+    }
+  },
+  marginStart: space(14)
+});
+
+const linkStyle = {
+  ...focusRing(),
+  font: 'ui',
+  textDecoration: 'none',
+  transition: 'default',
+  backgroundColor: {
+    default: {
+      ...baseColor('gray-100'),
+      default: 'transparent'
+    }
+  },
+  height: 32,
+  paddingX: 'edge-to-text',
+  display: 'flex',
+  alignItems: 'center',
+  borderRadius: 'lg'
+} as const;
+
+const linkStyles = style({
+  ...linkStyle
+});
+
+const iconStyles = style({
+  ...linkStyle,
+  paddingX: space(6)
+});
+
 export default function Header(props: PageProps) {
   const {pages, currentPage} = props;
   const [searchOpen, setSearchOpen] = useState(false);
   const searchMenuId = useId();
+  let ref = useRef(null);
+  let docsRef = useRef(null);
+  let releasesRef = useRef(null);
+  let blogRef = useRef(null);
 
   let openSearchMenu = async () => {
     if (!document.startViewTransition) {
@@ -60,13 +109,31 @@ export default function Header(props: PageProps) {
     }
   };
 
-  const ChevronDownIcon = (props) => (
-    <svg xmlns="http://www.w3.org/2000/svg" width={20} height={20} {...props}>
-      <path
-        fill="var(--iconPrimary, #222)"
-        d="M3.755 7.243a.748.748 0 0 1 1.06-.02l5.183 4.986 5.197-4.999a.749.749 0 1 1 1.04 1.08l-5.717 5.5a.747.747 0 0 1-1.04 0L3.776 8.303a.746.746 0 0 1-.02-1.06Z" />
-    </svg>
-  );
+  let library = getLibraryFromPage(currentPage);
+  let subdirectory = 's2';
+  if (library === 'internationalized' || library === 'react-aria') {
+    // the internationalized library has no homepage so i've chosen to route it to the react aria homepage
+    subdirectory = 'react-aria';
+  }
+
+  let homepage = '';
+  let docs = '';
+  let release = '';
+  let blog = '';
+  for (let page of pages) {
+    if (page.name.includes(subdirectory) && page.name.includes('index.html') && !page.name.includes('releases') && !page.name.includes('blog') && !page.name.includes('examples')) {
+      homepage = page.url;
+    }
+    if (page.name.includes(subdirectory) && page.name.includes('getting-started.html')) {
+      docs = page.url;
+    }
+    if (page.name.includes(subdirectory) && page.name.includes('index.html') && page.name.includes('releases')) {
+      release = page.url;
+    }
+    if (page.name.includes('react-aria') && page.name.includes('index.html') && page.name.includes('blog')) {
+      blog = page.url;
+    }
+  }
 
   return (
     <>
@@ -80,17 +147,17 @@ export default function Header(props: PageProps) {
             alignItems: 'center'
           })}>
           <div className={style({justifySelf: 'start'})}>
-            <ActionButton
+            <Link
               aria-label="Open menu and search"
               aria-expanded={searchOpen}
               aria-controls={searchOpen ? searchMenuId : undefined}
-              size="XL"
-              isQuiet
-              onPress={openSearchMenu}
+              href={homepage}
               onKeyDown={handleActionButtonKeyDown}
               // @ts-ignore
-              onHoverStart={() => preloadSearchMenu()}
-              UNSAFE_style={{paddingInlineStart: 10}}>
+              // onHoverStart={() => preloadSearchMenu()}
+              ref={ref}
+              style={pressScale(ref)}
+              className={renderProps => libraryStyles({...renderProps})}>
               <div className={style({display: 'flex', alignItems: 'center'})}>
                 <div className={style({marginTop: 4})} style={{viewTransitionName: !searchOpen ? 'search-menu-icon' : 'none'} as CSSProperties}>
                   {getButtonIcon(currentPage)}
@@ -99,8 +166,7 @@ export default function Header(props: PageProps) {
                   {getButtonText(currentPage)}
                 </span>
               </div>
-              <ChevronDownIcon className={style({width: 18})} />
-            </ActionButton>
+            </Link>
           </div>
           <SearchMenuTrigger
             pages={pages}
@@ -114,9 +180,10 @@ export default function Header(props: PageProps) {
               <BetaApp />
               <Text>Beta Preview</Text>
             </Badge>
-            <ActionButton aria-label="React Spectrum GitHub repo" size="L" isQuiet onPress={() => window.open('https://github.com/adobe/react-spectrum', '_blank', 'noopener,noreferrer')}>
-              <GithubLogo />
-            </ActionButton>
+            <Link className={renderProps => linkStyles({...renderProps})} href={docs} ref={docsRef} style={pressScale(docsRef)} >Docs</Link>
+            <Link className={renderProps => linkStyles({...renderProps})} href={release} ref={releasesRef} style={pressScale(releasesRef)} >Releases</Link>
+            <Link className={renderProps => linkStyles({...renderProps})} href={blog} target={subdirectory === 's2' ? '_blank' : ''} rel="noopener noreferrer" ref={blogRef} style={pressScale(blogRef)} >Blog</Link>
+            <Link aria-label="React Spectrum GitHub repo" className={renderProps => iconStyles({...renderProps})} href="https://github.com/adobe/react-spectrum" target="_blank" rel="noopener noreferrer" ><GithubLogo /></Link>
           </div>
         </div>
       </header>
diff --git a/packages/dev/s2-docs/src/MobileSearchMenu.tsx b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
index 4eb064a2558..fd9794b05e9 100644
--- a/packages/dev/s2-docs/src/MobileSearchMenu.tsx
+++ b/packages/dev/s2-docs/src/MobileSearchMenu.tsx
@@ -363,7 +363,8 @@ function MobileNav({pages, currentPage}: {pages: Page[], currentPage: Page}) {
     searchValue,
     sectionsForDisplay.map(s => ({id: s.id, name: s.name})),
     resourceTags,
-    initialSelectedSection
+    initialSelectedSection,
+    currentPage.exports?.title
   );
 
   const sectionTags = useSectionTagsForDisplay(
diff --git a/packages/dev/s2-docs/src/Nav.tsx b/packages/dev/s2-docs/src/Nav.tsx
index 2e5116d482f..0049dee13c2 100644
--- a/packages/dev/s2-docs/src/Nav.tsx
+++ b/packages/dev/s2-docs/src/Nav.tsx
@@ -1,33 +1,65 @@
 'use client';
 
-import {focusRing, size, style} from '@react-spectrum/s2/style' with {type: 'macro'};
+import {Disclosure, DisclosurePanel, DisclosureTitle, Picker, pressScale} from '@react-spectrum/s2';
+import {focusRing, size, space, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {getLibraryFromPage} from './library';
 import {getPageFromPathname, getSnapshot, subscribe} from './NavigationSuspense';
 import {Link} from 'react-aria-components';
 import type {Page, PageProps} from '@parcel/rsc';
-import {Picker, pressScale} from '@react-spectrum/s2';
 import React, {createContext, useContext, useEffect, useRef, useState, useSyncExternalStore} from 'react';
 
+type SectionValue = Page[] | Map<string, Page[]>;
+
+function isSectionMap(value: SectionValue): value is Map<string, Page[]> {
+  return value instanceof Map;
+}
+
 export function Nav({pages, currentPage}: PageProps) {
   let currentLibrary = getLibraryFromPage(currentPage);
-  let sections = new Map();
+  let sections = new Map<string, SectionValue>();
+  let sectionLibrary = new Map();
   for (let page of pages) {
     if (page.exports?.hideNav || page.exports?.omitFromNav) {
       continue;
     }
 
     let library = getLibraryFromPage(page);
-    if (library !== currentLibrary) {
+
+    if ((currentLibrary === 'internationalized' || currentLibrary === 'react-spectrum') && library !== currentLibrary) {
+      continue;
+    }
+
+    // If the current library is React Aria, we only want to skip pages in React Spectrum so that include Internationalized pages in the side nav
+    if (currentLibrary === 'react-aria' && library === 'react-spectrum') {
       continue;
     }
 
     let section = page.exports?.section ?? 'Components';
+    let group = page.exports?.group ?? undefined;
     if (section === '') {
       continue;
     }
-    let sectionPages = sections.get(section) ?? [];
-    sectionPages.push(page);
-    sections.set(section, sectionPages);
+
+    if (group && section && currentLibrary !== 'internationalized') {
+      let value = sections.get(group);
+      let groupMap: Map<string, Page[]>;
+      if (value instanceof Map) {
+        groupMap = value;
+      } else {
+        groupMap = new Map<string, Page[]>(); 
+      }
+      let groupPages = groupMap.get(section) ?? [];
+      groupPages.push(page);
+      groupMap.set(section, groupPages);
+      sections.set(group, groupMap);
+    } else if (section) {
+      let value = sections.get(section);
+      let sectionPages = Array.isArray(value) ? value : [];
+      sectionPages.push(page);
+      sections.set(section, sectionPages);
+    }
+
+    sectionLibrary.set(section, library);
   }
 
   let [maskSize, setMaskSize] = useState(0);
@@ -36,12 +68,21 @@ export function Nav({pages, currentPage}: PageProps) {
   let displayUrl = pendingPage?.url ?? currentPage.url;
 
   let sortedSections = [...sections].sort((a, b) => {
-    if (a[0] === 'Getting started') {
+    if (a[0] === 'Overview') {
       return -1;
     }
-    if (b[0] === 'Getting started') {
+    if (b[0] === 'Overview') {
       return 1;
     }
+
+    if (a[0] === 'Guides') {
+      return 1;
+    }
+
+    if (b[0] === 'Guides') {
+      return -1;
+    }
+    
     return a[0].localeCompare(b[0]);
   });
 
@@ -58,34 +99,108 @@ export function Nav({pages, currentPage}: PageProps) {
         maxHeight: 'calc(100vh - 72px)',
         overflow: 'auto',
         paddingX: 12,
-        width: 200,
+        minWidth: 200,
         display: {
           default: 'none',
           lg: 'block'
         }
       })}>
-      {sortedSections.map(([name, pages]) => (
-        <SideNavSection title={name} key={name}>
-          <SideNav>
-            {pages
-              .sort((a, b) => {
-                let aIntro = isIntroduction(a);
-                let bIntro = isIntroduction(b);
-                if (aIntro && !bIntro) {
-                  return -1;
-                }
-                if (!aIntro && bIntro) {
-                  return 1;
-                }
-                return title(a).localeCompare(title(b));
-              })
-              .filter(page => !page.exports?.isSubpage)
-              .map(page => (
-                <SideNavItem key={page.url}><SideNavLink href={page.url} page={page} isSelected={page.url === displayUrl}>{title(page)}</SideNavLink></SideNavItem>
-            ))}
-          </SideNav>
-        </SideNavSection>
-      ))}
+      {sortedSections.map(([name, pages]) => {
+        let nav = <></>;
+        if (isSectionMap(pages)) {
+          nav = (
+            <>
+              {Array.from(pages.entries()).map(([section, items]) => (
+                <SideNavSection title={section} key={section}>
+                  <SideNav>
+                    {items
+                      .sort((a, b) => {
+                        const aIntro = isIntroduction(a);
+                        const bIntro = isIntroduction(b);
+                        if (aIntro && !bIntro) {
+                          return -1;
+                        }
+                        if (!aIntro && bIntro) {
+                          return 1;
+                        }
+                        return title(a).localeCompare(title(b));
+                      })
+                      .filter(page => !page.exports?.isSubpage)
+                      .map(page => (
+                        <SideNavItem key={page.url}>
+                          <SideNavLink href={page.url} page={page} isSelected={page.url === displayUrl}>
+                            {title(page)}
+                          </SideNavLink>
+                        </SideNavItem>
+                      ))}
+                  </SideNav>
+                </SideNavSection>
+              ))}
+            </>
+          );
+        } else {
+          nav = (
+            <SideNav>
+              {pages
+                .sort((a, b) => {
+                  let aIntro = isIntroduction(a);
+                  let bIntro = isIntroduction(b);
+                  if (aIntro && !bIntro) {
+                    return -1;
+                  }
+                  if (!aIntro && bIntro) {
+                    return 1;
+                  }
+                  return title(a).localeCompare(title(b));
+                })
+                .filter(page => !page.exports?.isSubpage)
+                .map(page => (
+                  <SideNavItem key={page.url}><SideNavLink href={page.url} isSelected={page.url === currentPage.url}>{title(page)}</SideNavLink></SideNavItem>
+              ))}
+            </SideNav>
+          );
+        }
+
+        if ((name === 'Overview' && Array.isArray(pages)) || (currentLibrary === 'internationalized' && Array.isArray(pages))) {
+          return (
+            <div className={style({paddingStart: space(26)})} key={name}>
+              <SideNavSection title={name}>
+                <SideNav>
+                  {pages
+                    .sort((a, b) => {
+                      const aIntro = isIntroduction(a);
+                      const bIntro = isIntroduction(b);
+                      if (aIntro && !bIntro) {
+                        return -1;
+                      }
+                      if (!aIntro && bIntro) {
+                        return 1;
+                      }
+                      return title(a).localeCompare(title(b));
+                    })
+                    .filter(page => !page.exports?.isSubpage)
+                    .map(page => (
+                      <SideNavItem key={page.url}>
+                        <SideNavLink href={page.url} isSelected={page.url === currentPage.url}>
+                          {title(page)}
+                        </SideNavLink>
+                      </SideNavItem>
+                    ))}
+                </SideNav>
+              </SideNavSection>
+            </div>
+          );
+        }
+        return (
+          <Disclosure id={name} key={name} isQuiet density="spacious" defaultExpanded={name === 'Components'} styles={style({minWidth: 185})}>
+            <DisclosureTitle>{name}</DisclosureTitle>
+            <DisclosurePanel>
+              <div className={style({paddingStart: space(18)})}>{nav}</div>
+            </DisclosurePanel>
+          </Disclosure>
+        );
+      }
+      )}
     </nav>
   );
 }
@@ -105,7 +220,7 @@ function isIntroduction(page) {
 
 function SideNavSection({title, children}) {
   return (
-    <section className={style({marginBottom: 24})}>
+    <section className={style({marginBottom: 16})}>
       <div className={style({font: 'ui-sm', color: 'gray-600', minHeight: 32, paddingX: 12, display: 'flex', alignItems: 'center'})}>{title}</div>
       {children}
     </section>
diff --git a/packages/dev/s2-docs/src/SearchMenu.tsx b/packages/dev/s2-docs/src/SearchMenu.tsx
index 46d1ba3d306..2827e0f874c 100644
--- a/packages/dev/s2-docs/src/SearchMenu.tsx
+++ b/packages/dev/s2-docs/src/SearchMenu.tsx
@@ -55,7 +55,7 @@ interface SearchMenuProps {
   pages: Page[],
   currentPage: Page,
   onClose: () => void,
-  overlayId: string,
+  overlayId?: string,
   initialSearchValue: string
 }
 
@@ -145,7 +145,8 @@ export function SearchMenu(props: SearchMenuProps) {
     searchValue,
     sectionTags,
     resourceTags,
-    currentPage.exports?.section?.toLowerCase() || 'components'
+    currentPage.exports?.section?.toLowerCase() || 'components',
+    currentPage.exports?.title
   );
 
   const filteredIcons = useFilteredIcons(searchValue);
diff --git a/packages/dev/s2-docs/src/SearchMenuWrapper.tsx b/packages/dev/s2-docs/src/SearchMenuWrapper.tsx
new file mode 100644
index 00000000000..e4416809c40
--- /dev/null
+++ b/packages/dev/s2-docs/src/SearchMenuWrapper.tsx
@@ -0,0 +1,100 @@
+'use client';
+
+import '../tailwind/home.global.css';
+import {DialogTrigger, Modal, ModalOverlay, Pressable} from 'react-aria-components';
+import {flushSync} from 'react-dom';
+import {preloadSearchMenu} from './SearchMenuTrigger';
+import React, {useState} from 'react';
+import {SearchMenu} from './SearchMenu';
+import {style} from '@react-spectrum/s2/style' with { type: 'macro' };
+
+let underlayStyle = style({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: 'full',
+  height: '--page-height',
+  isolation: 'isolate',
+  backgroundColor: 'transparent-black-500',
+  opacity: {
+    isEntering: 0,
+    isExiting: 0
+  },
+  transition: 'opacity',
+  transitionDuration: {
+    default: 250,
+    isExiting: 130
+  }
+});
+
+let modalStyle = style({
+  position: 'absolute',
+  top: 8,
+  width: 'full',
+  // 1280px matches body
+  maxWidth: '[min(1280px, 95vw)]',
+  backgroundColor: 'elevated',
+  paddingX: 16,
+  paddingY: 8,
+  zIndex: 10,
+  borderWidth: 1,
+  borderColor: 'gray-300',
+  borderStyle: 'solid',
+  borderRadius: 'xl',
+  boxShadow: 'elevated',
+  left: 0,
+  right: 0,
+  margin: 'auto',
+  height: '[90vh]'
+});
+
+
+export default function SearchMenuWrapper({pages, currentPage}) {
+  const [searchOpen, setSearchOpen] = useState(false);
+
+  let openSearchMenu = async () => {
+    if (!document.startViewTransition) {
+      setSearchOpen((prev) => !prev);
+      return;
+    }
+
+    // Preload SearchMenu so it is ready to render immediately.
+    await preloadSearchMenu();
+    document.startViewTransition(() => {
+      flushSync(() => {
+        setSearchOpen((prev) => !prev);
+      });
+    });
+  };
+
+  let closeSearchMenu = () => {
+    if (!document.startViewTransition) {
+      setSearchOpen(false);
+      return;
+    }
+
+    document.startViewTransition(() => {
+      flushSync(() => {
+        setSearchOpen(false);
+      });
+    });
+  };
+
+  return (
+    <DialogTrigger isOpen={searchOpen} onOpenChange={() => {openSearchMenu();}} >
+      <Pressable><span role="button" className="no-underline bg-white/60 border border-black/10 bg-clip-padding text-base md:text-lg font-bold text-slate-800 px-8 py-3 rounded-full backdrop-saturate-150 backdrop-brightness-125 transition hover:bg-white/60 focus-ring  dark:outline-white outline-offset-2 active:scale-95">Explore Components</span></Pressable>
+      <ModalOverlay
+        style={{zIndex: 21}}
+        isDismissable
+        className={underlayStyle}>
+        <Modal className={modalStyle}>
+          <SearchMenu
+            pages={pages}
+            currentPage={currentPage}
+            onClose={closeSearchMenu}
+            initialSearchValue="" />
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  );
+}
diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx
index 5374e4af6f1..6087fac1126 100644
--- a/packages/dev/s2-docs/src/searchUtils.tsx
+++ b/packages/dev/s2-docs/src/searchUtils.tsx
@@ -207,7 +207,8 @@ export function useSearchTagSelection(
   searchValue: string,
   sectionTags: Tag[],
   resourceTags: Tag[],
-  initialTagId: string
+  initialTagId: string,
+  title: string
 ) {
   const [selectedTagId, setSelectedTagId] = useState<string>(initialTagId);
   const prevSearchWasEmptyRef = useRef<boolean>(true);
@@ -236,6 +237,10 @@ export function useSearchTagSelection(
     prevSearchWasEmptyRef.current = isEmpty;
   }, [searchValue, isResourceSelected]);
 
+  if (selectedTagId === 'overview' && title === 'Home') {
+    setSelectedTagId('components');
+  }
+
   return [selectedTagId, setSelectedTagId] as const;
 }