diff --git a/.env.example b/.env.example
index ed5ce0fe76..b123d99fac 100644
--- a/.env.example
+++ b/.env.example
@@ -18,6 +18,7 @@ INSIGHTS_ENABLED=false
 INSIGHTS_DEBUG=true
 POSTHOG_API_KEY=''
 POSTHOG_API_HOST=''
+POSTHOG_FEEDBACK_SURVEY_NAME=''
 MIXPANEL_API_KEY=''
 MIXPANEL_AUTO_CAPTURE=''
 
diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
index e9cfcab83b..2a8da9b155 100644
--- a/gatsby-browser.tsx
+++ b/gatsby-browser.tsx
@@ -9,6 +9,8 @@ import {
   reducerBlogPosts,
   reducerSessionData,
 } from '@ably/ui/core/scripts';
+import { PostHogProvider } from 'posthog-js/react';
+import posthog from 'posthog-js';
 
 import { reducerApiKeyData } from './src/redux/api-key/api-key-reducer';
 import UserContextWrapper from './src/contexts/user-context/wrap-with-provider';
@@ -66,7 +68,7 @@ const InsightsWrapper = ({ children }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  return children;
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
 };
 
 export const wrapRootElement = ({ element }) => {
diff --git a/gatsby-config.ts b/gatsby-config.ts
index f1e20ddd77..f168fbdacc 100644
--- a/gatsby-config.ts
+++ b/gatsby-config.ts
@@ -38,6 +38,7 @@ export const siteMetadata = {
     mixpanelAutoCapture: !!process.env.MIXPANEL_AUTO_CAPTURE,
     posthogApiKey: process.env.POSTHOG_API_KEY,
     posthogHost: process.env.POSTHOG_API_HOST || 'https://insights.ably.com',
+    posthogFeedbackSurveyName: process.env.POSTHOG_FEEDBACK_SURVEY_NAME || 'Docs Feedback',
     conversationsUrl: process.env.CONVERSATIONS_API_URL,
   },
 };
diff --git a/package.json b/package.json
index 266c60a5d6..c398a66990 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,10 @@
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@gfx/zopfli": "^1.0.15",
     "@mdx-js/react": "^2.3.0",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hook/media-query": "^1.1.1",
     "@sentry/gatsby": "^9.19.0",
     "@types/cheerio": "^0.22.31",
diff --git a/src/components/Article/index.tsx b/src/components/Article/index.tsx
index 1aa0df84bb..16c343e39e 100644
--- a/src/components/Article/index.tsx
+++ b/src/components/Article/index.tsx
@@ -2,7 +2,7 @@ import React, { FunctionComponent as FC } from 'react';
 import { ArticleFooter } from './ArticleFooter';
 
 const Article: FC<{ children: React.ReactNode }> = ({ children }) => (
-  <article className="flex-1 overflow-x-hidden relative z-10">
+  <article className="flex-1 overflow-x-hidden px-4 -mx-4 relative z-10">
     {children}
     <ArticleFooter />
   </article>
diff --git a/src/components/Head.tsx b/src/components/Head.tsx
index 6789294f81..1a5b7a91aa 100644
--- a/src/components/Head.tsx
+++ b/src/components/Head.tsx
@@ -27,7 +27,7 @@ export const Head = ({
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
     <link
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Manrope:wght@200..800&family=Source+Code+Pro:wght@600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&family=Manrope:wght@200..800&family=Source+Code+Pro:wght@600&family=IBM+Plex+Serif:ital,wght@1,400;1,700&display=swap"
       rel="stylesheet"
     />
   </Helmet>
diff --git a/src/components/Layout/Breadcrumbs.test.tsx b/src/components/Layout/Breadcrumbs.test.tsx
index 6219fb7bf6..8427c4f781 100644
--- a/src/components/Layout/Breadcrumbs.test.tsx
+++ b/src/components/Layout/Breadcrumbs.test.tsx
@@ -37,11 +37,11 @@ describe('Breadcrumbs', () => {
     jest.clearAllMocks();
   });
 
-  it('renders relevant breadcrumb nodes', () => {
+  it('renders all breadcrumb nodes from activePage tree', () => {
     render(<Breadcrumbs />);
     expect(screen.getByText('Home')).toBeInTheDocument();
     expect(screen.getByText('Section 1')).toBeInTheDocument();
-    expect(screen.queryByText('Subsection 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Subsection 1')).toBeInTheDocument();
     expect(screen.getByText('Current Page')).toBeInTheDocument();
   });
 
@@ -49,38 +49,49 @@ describe('Breadcrumbs', () => {
     render(<Breadcrumbs />);
     expect(screen.getByText('Home')).toHaveAttribute('href', '/docs');
     expect(screen.getByText('Section 1')).toHaveAttribute('href', '/section-1');
-    expect(screen.queryByText('Subsection 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Subsection 1')).toHaveAttribute('href', '#');
     expect(screen.getByText('Current Page')).toHaveAttribute('href', '/section-1/subsection-1/page-1');
   });
 
-  it('disables the link for the current page', () => {
+  it('disables the link for the current page and non-linked nodes', () => {
     render(<Breadcrumbs />);
+
+    // Current page (last item) should be disabled
     expect(screen.getByText('Current Page')).toHaveClass('text-gui-unavailable');
     expect(screen.getByText('Current Page')).toHaveClass('pointer-events-none');
+
+    // Non-linked nodes (link='#') should be disabled
+    expect(screen.getByText('Subsection 1')).toHaveClass('text-gui-unavailable');
+    expect(screen.getByText('Subsection 1')).toHaveClass('pointer-events-none');
+
+    // Active links should not be disabled
+    expect(screen.getByText('Section 1')).not.toHaveClass('text-gui-unavailable');
+    expect(screen.getByText('Section 1')).not.toHaveClass('pointer-events-none');
+  });
+
+  it('shows only the last active node in mobile view', () => {
+    render(<Breadcrumbs />);
+
+    // All items except index 0 should have 'hidden sm:flex' classes
+    expect(screen.getByText('Section 1')).not.toHaveClass('hidden');
+    expect(screen.getByText('Subsection 1')).toHaveClass('hidden', 'sm:flex');
+    expect(screen.getByText('Current Page')).toHaveClass('hidden', 'sm:flex');
   });
 
-  it('removes duplicate links from breadcrumb nodes', () => {
+  it('correctly identifies last active node when current page is non-linked', () => {
     mockUseLayoutContext.mockReturnValue({
       activePage: {
         tree: [
           { page: { name: 'Section 1', link: '/section-1' } },
-          { page: { name: 'Duplicate Section', link: '/section-1' } },
-          { page: { name: 'Current Page', link: '/section-1/page-1' } },
+          { page: { name: 'Subsection 1', link: '/section-1/subsection-1' } },
+          { page: { name: 'Current Page', link: '#' } },
         ],
       },
     });
 
     render(<Breadcrumbs />);
-
-    // Should only show one instance of the duplicate link
-    const section1Links = screen.getAllByText('Section 1');
-    expect(section1Links).toHaveLength(1);
-
-    // Should not render the duplicate with different text
-    expect(screen.queryByText('Duplicate Section')).not.toBeInTheDocument();
-
-    // Should still render other breadcrumb elements
-    expect(screen.getByText('Home')).toBeInTheDocument();
-    expect(screen.getByText('Current Page')).toBeInTheDocument();
+    expect(screen.getByText('Section 1')).toHaveClass('hidden', 'sm:flex');
+    expect(screen.getByText('Subsection 1')).not.toHaveClass('hidden');
+    expect(screen.getByText('Current Page')).toHaveClass('hidden', 'sm:flex');
   });
 });
diff --git a/src/components/Layout/Breadcrumbs.tsx b/src/components/Layout/Breadcrumbs.tsx
index 4a7dd63cb8..bd5cd359a2 100644
--- a/src/components/Layout/Breadcrumbs.tsx
+++ b/src/components/Layout/Breadcrumbs.tsx
@@ -1,31 +1,34 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import Link from '../Link';
 import Icon from '@ably/ui/core/Icon';
 import cn from '@ably/ui/core/utils/cn';
-import { hierarchicalKey, PageTreeNode } from './utils/nav';
+import { hierarchicalKey } from './utils/nav';
+
+const linkStyles =
+  'ui-text-label4 font-semibold text-neutral-900 hover:text-neutral-1300 active:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-500 focus-base transition-colors';
 
 const Breadcrumbs: React.FC = () => {
   const { activePage } = useLayoutContext();
 
-  const breadcrumbNodes = useMemo(() => {
-    const filteredNodes = activePage?.tree.filter((node) => node.page.link !== '#') ?? [];
-    const uniqueNodes = filteredNodes.reduce((acc: PageTreeNode[], current) => {
-      const isDuplicate = acc.some((item) => item.page.link === current.page.link);
-      if (!isDuplicate) {
-        acc.push(current);
-      }
-      return acc;
-    }, []);
-    return uniqueNodes;
-  }, [activePage?.tree]);
-
-  if (breadcrumbNodes.length === 0) {
+  if (!activePage?.tree || activePage.tree.length === 0) {
     return null;
   }
 
-  const linkStyles =
-    'ui-text-label4 font-semibold text-neutral-900 hover:text-neutral-1300 active:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-500';
+  const lastActiveNodeIndex = (() => {
+    const index = activePage.tree
+      .toReversed()
+      .slice(1)
+      .findIndex((node) => node.page.link !== '#');
+
+    if (index !== -1) {
+      return activePage.tree.length - index - 2;
+    }
+
+    return null;
+  })();
+
+  console.log(lastActiveNodeIndex, activePage.tree);
 
   return (
     <nav aria-label="breadcrumb" className="flex mt-8 items-center gap-1">
@@ -35,17 +38,18 @@ const Breadcrumbs: React.FC = () => {
       <Icon
         name="icon-gui-chevron-right-micro"
         size="16px"
-        additionalCSS={cn('rotate-180 sm:rotate-0', { 'hidden sm:flex': breadcrumbNodes.length === 1 })}
+        color="text-neutral-900 dark:text-neutral-400"
+        additionalCSS={cn('rotate-180 sm:rotate-0', { 'hidden sm:flex': lastActiveNodeIndex === null })}
       />
-      {breadcrumbNodes.map((node, index) => (
+      {activePage.tree.map((node, index) => (
         <React.Fragment key={hierarchicalKey(node.page.link, index, activePage.tree)}>
           {index > 0 ? <Icon name="icon-gui-chevron-right-micro" size="16px" additionalCSS="hidden sm:flex" /> : null}
           <Link
             to={node.page.link}
             className={cn(linkStyles, {
               'text-gui-unavailable dark:text-gui-unavailable-dark pointer-events-none':
-                index === breadcrumbNodes.length - 1,
-              'hidden sm:flex': index !== breadcrumbNodes.length - 2,
+                index === activePage.tree.length - 1 || node.page.link === '#',
+              'hidden sm:flex': index !== lastActiveNodeIndex,
             })}
           >
             {node.page.name}
diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx
index 431377cc51..79c8761358 100644
--- a/src/components/Layout/Footer.tsx
+++ b/src/components/Layout/Footer.tsx
@@ -1,7 +1,24 @@
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useLocation } from '@reach/router';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
 import Status, { StatusUrl } from '@ably/ui/core/Status';
+import cn from '@ably/ui/core/utils/cn';
+import type { PageContextType } from './Layout';
+import { useLayoutContext } from 'src/contexts/layout-context';
+import Button from '@ably/ui/core/Button';
+
+const ENABLE_FEEDBACK = false;
+
+type FeedbackMode = 'yes' | 'no' | 'feedback';
+
+type FeedbackButton = {
+  label: string;
+  monoIcon: IconName;
+  colorIcon: IconName;
+  placeholder: string;
+  description?: string;
+};
 
 const leftFooterLinks = [
   { label: 'Changelog', link: 'https://changelog.ably.com/' },
@@ -16,87 +33,305 @@ const rightFooterLinks = [
   { label: 'Cookies', link: '/privacy' },
 ];
 
-const socialLinks: { key: string; colorIcon: IconName; monoIcon: IconName; link: string }[] = [
-  { key: 'x', colorIcon: 'icon-social-x', monoIcon: 'icon-social-x-mono', link: 'https://x.com/ablyrealtime' },
+const socialLinks: { key: string; icon: IconName; link: string }[] = [
+  { key: 'x', icon: 'icon-social-x-mono', link: 'https://x.com/ablyrealtime' },
   {
     key: 'linkedin',
-    colorIcon: 'icon-social-linkedin',
-    monoIcon: 'icon-social-linkedin-mono',
+    icon: 'icon-social-linkedin-mono',
     link: 'https://www.linkedin.com/company/ably-realtime',
   },
   {
     key: 'github',
-    colorIcon: 'icon-social-github',
-    monoIcon: 'icon-social-github-mono',
+    icon: 'icon-social-github-mono',
     link: 'https://github.com/ably/',
   },
   {
     key: 'discord',
-    colorIcon: 'icon-social-discord',
-    monoIcon: 'icon-social-discord-mono',
+    icon: 'icon-social-discord-mono',
     link: 'https://discord.gg/g8yqePUVDn',
   },
   {
     key: 'stackoverflow',
-    colorIcon: 'icon-social-stackoverflow',
-    monoIcon: 'icon-social-stackoverflow-mono',
+    icon: 'icon-social-stackoverflow-mono',
     link: 'https://stackoverflow.com/questions/tagged/ably-realtime',
   },
   {
     key: 'youtube',
-    colorIcon: 'icon-social-youtube',
-    monoIcon: 'icon-social-youtube-mono',
+    icon: 'icon-social-youtube-mono',
     link: 'https://www.youtube.com/c/AblyRealtime',
   },
 ];
 
-const Footer: React.FC = () => (
-  <footer className="flex flex-col my-10">
-    <div className="border border-x-0 border-y-neutral-300 dark:border-y-neutral-1000 w-full py-6 flex lg:items-center flex-col lg:flex-row gap-6 px-6 lg:px-0">
-      <div className="flex gap-6 items-center flex-1">
-        <a href="/" className="bg-neutral-100 dark:bg-neutral-1200 h-10 w-10 p-2 rounded-full">
-          <Icon name="icon-tech-ably" size="24px" />
-        </a>
-        <div className="flex gap-5 items-center">
-          {socialLinks.map((link) => (
-            <a
-              key={link.key}
-              href={link.link}
-              target="_blank"
-              rel="noreferrer noopener"
-              aria-label={`Visit Ably on ${link.key}`}
-              className="w-5 h-5 group/social-icon"
-            >
-              <Icon
-                name={link.monoIcon}
-                size="20px"
-                additionalCSS="text-neutral-1000 dark:text-neutral-300 group-hover/social-icon:hidden"
-              />
-              <Icon name={link.colorIcon} size="20px" additionalCSS="hidden group-hover/social-icon:flex" />
+const feedbackButtons: Record<FeedbackMode, FeedbackButton> = {
+  yes: {
+    label: 'Yes',
+    monoIcon: 'icon-gui-hand-thumb-up-outline',
+    colorIcon: 'icon-gui-hand-thumb-up-solid',
+    description: 'Great! Thanks for letting us know, what are we doing well?',
+    placeholder: 'Optional feedback.',
+  },
+  no: {
+    label: 'No',
+    monoIcon: 'icon-gui-hand-thumb-down-outline',
+    colorIcon: 'icon-gui-hand-thumb-down-solid',
+    description: 'Yikes! Thanks for letting us know, what can we do better?',
+    placeholder: 'Optional feedback.',
+  },
+  feedback: {
+    label: 'I have feedback',
+    monoIcon: 'icon-gui-hand-raised-outline',
+    colorIcon: 'icon-gui-hand-raised-solid',
+    placeholder: 'What would you like to say?',
+  },
+};
+
+const customGithubPaths = {
+  '/how-to/pub-sub': 'https://github.com/ably/docs/blob/main/how-tos/pub-sub/how-to.mdx',
+} as Record<string, string>;
+
+const Footer: React.FC<{ pageContext: PageContextType }> = ({ pageContext }) => {
+  const { activePage } = useLayoutContext();
+  const { frontmatter } = pageContext;
+  const location = useLocation();
+  const [feedbackMode, setFeedbackMode] = useState<FeedbackMode | null>(null);
+  const [feedbackText, setFeedbackText] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+
+  // TODO: Implement and enable feedback survey submission after strategy determined
+  /*
+  useEffect(() => {
+    if (typeof window === 'undefined' || !posthog?.getSurveys) {
+      return;
+    }
+
+    posthog.getSurveys((surveys: Survey[]) => {
+      const relevantSurvey = surveys.find((s) => s.name === externalScriptsData.posthogFeedbackSurveyName);
+
+      if (relevantSurvey) {
+        setSurvey(relevantSurvey);
+      }
+    }, true);
+  }, [posthog, externalScriptsData.posthogFeedbackSurveyName]);
+  */
+
+  useEffect(() => {
+    if (!feedbackMode) {
+      setSubmitted(false);
+      setFeedbackText('');
+    }
+  }, [feedbackMode]);
+
+  // TODO: Implement and enable feedback survey submission after strategy determined
+  /*
+  const handleFeedbackSubmit = () => {
+    if (!survey || !survey.id || !survey.questions[0]?.id) {
+      return;
+    }
+
+    const responseKey = `$survey_response_${survey.questions[0].id}`;
+
+    posthog.capture('docs-feedback-survey', {
+      $survey_id: survey.id,
+      [responseKey]: feedbackText,
+      type: feedbackMode,
+      page: activePage.page.link,
+      language: activePage.language,
+    });
+
+    setFeedbackText('');
+    setSubmitted(true);
+    setTimeout(() => {
+      setFeedbackMode(null);
+    }, 2000);
+  };
+  */
+
+  const lastUpdated = useMemo(() => {
+    if (frontmatter?.last_updated) {
+      try {
+        return new Date(frontmatter.last_updated).toLocaleDateString('en-US', {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        });
+      } catch (e) {
+        return null;
+      }
+    }
+    return null;
+  }, [frontmatter]);
+
+  const githubEditPath = useMemo(() => {
+    let path = '#';
+    const pathName = location.pathname.replace('docs/', '');
+
+    if (customGithubPaths[pathName]) {
+      path = customGithubPaths[pathName];
+    } else if (activePage.template === 'mdx') {
+      path =
+        'https://github.com/ably/docs/blob/main/src/pages/docs' +
+        (activePage.page.index ? `${pathName}/index.mdx` : `${pathName}.mdx`);
+    } else {
+      return null;
+    }
+
+    return path;
+  }, [location.pathname, activePage.template, activePage.page.index]);
+
+  return (
+    <footer className="flex flex-col my-10">
+      <div className="flex flex-col gap-6 px-6 lg:px-0">
+        {ENABLE_FEEDBACK && (
+          <div className="flex flex-wrap items-center gap-6">
+            <span className="ui-text-label3 font-semibold text-neutral-1300 dark:text-neutral-000">
+              Was this page helpful?
+            </span>
+            <div className="flex items-center gap-6">
+              {Object.entries(feedbackButtons).map(([key, button]) => {
+                const isActive = feedbackMode === key;
+
+                return (
+                  <button
+                    key={key}
+                    className="group/feedback-button flex items-center gap-2 ui-text-label3 text-neutral-900 dark:text-neutral-400 hover:text-neutral-1300 dark:hover:text-neutral-000 transition-colors focus-base"
+                    onClick={() => {
+                      setFeedbackMode(key as FeedbackMode);
+                    }}
+                  >
+                    <Icon
+                      name={button.colorIcon}
+                      size="20px"
+                      additionalCSS="transition-colors"
+                      color={
+                        isActive
+                          ? 'text-orange-600'
+                          : 'hidden group-hover/feedback-button:block text-neutral-1300 dark:text-neutral-000'
+                      }
+                    />
+                    {!isActive && (
+                      <Icon
+                        name={button.monoIcon}
+                        size="20px"
+                        additionalCSS="transition-colors"
+                        color="text-neutral-900 dark:text-neutral-400 group-hover/feedback-button:hidden"
+                      />
+                    )}
+                    <span
+                      className={cn('transition-colors', {
+                        'text-neutral-1300 dark:text-neutral-000': isActive,
+                        'group-hover/feedback-button:text-neutral-1300 dark:group-hover/feedback-button:text-neutral-000':
+                          !isActive,
+                      })}
+                    >
+                      {button.label}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        )}
+        {feedbackMode &&
+          (() => {
+            const activeFeedbackButton = feedbackButtons[feedbackMode];
+
+            if (submitted) {
+              return (
+                <div className="flex items-center gap-2 py-2">
+                  <span className="ui-text-p3 font-medium text-green-600 dark:text-green-500">
+                    Feedback submitted. Thank you!
+                  </span>
+                </div>
+              );
+            }
+
+            return (
+              <div className="flex flex-col items-start gap-6">
+                {activeFeedbackButton?.description && (
+                  <span className="ui-text-p3 font-medium text-neutral-1000 dark:text-neutral-300">
+                    {activeFeedbackButton.description}
+                  </span>
+                )}
+                <textarea
+                  rows={3}
+                  className="w-full py-2 px-3 ui-text-p3 rounded-lg border border-neutral-400 dark:border-neutral-900 focus-base"
+                  placeholder={activeFeedbackButton?.placeholder}
+                  value={feedbackText}
+                  onChange={(e) => setFeedbackText(e.target.value)}
+                />
+                <div className="flex items-center gap-2">
+                  {feedbackMode === 'feedback' && (
+                    <Button variant="secondary" size="xs" onClick={() => setFeedbackMode(null)}>
+                      Cancel
+                    </Button>
+                  )}
+                  <Button variant="primary" size="xs" disabled={!feedbackText}>
+                    Send feedback
+                  </Button>
+                </div>
+              </div>
+            );
+          })()}
+
+        <div className="flex flex-wrap items-center gap-5">
+          {lastUpdated && (
+            <span className="ui-text-p4 text-neutral-800 dark:text-neutral-500 border-r border-neutral-300 dark:border-neutral-1000 pr-5">
+              Last updated: {lastUpdated}
+            </span>
+          )}
+          {githubEditPath && (
+            <a href={githubEditPath} className="flex items-center gap-2 ui-text-p4 ui-link transition-colors">
+              <Icon name="icon-social-github-mono" size="16px" color="text-neutral-900 dark:text-neutral-400" />
+              Edit on GitHub
             </a>
-          ))}
+          )}
         </div>
       </div>
-      <div>
-        <Status statusUrl={StatusUrl} showDescription />
+
+      <div className="mt-8 border border-x-0 border-y-neutral-300 dark:border-y-neutral-1000 w-full py-6 flex lg:items-center flex-col lg:flex-row gap-6 px-6 lg:px-0">
+        <div className="flex gap-5 items-center flex-1">
+          <span className="ui-text-p3 font-semibold text-neutral-1300 dark:text-neutral-000">Find us on</span>
+          <div className="flex gap-1 items-center">
+            {socialLinks.map((link) => (
+              <a
+                key={link.key}
+                href={link.link}
+                target="_blank"
+                rel="noreferrer noopener"
+                aria-label={`Visit Ably on ${link.key}`}
+                className="size-8 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100 rounded p-1.5 focus-base"
+              >
+                <Icon name={link.icon} size="20px" additionalCSS="text-neutral-900 dark:text-neutral-400" />
+              </a>
+            ))}
+          </div>
+        </div>
       </div>
-    </div>
-    <div className="flex justify-between w-full flex-col lg:flex-row px-6 lg:px-0 mt-6 gap-6">
-      {[leftFooterLinks, rightFooterLinks].map((links, index) => (
-        <div key={`link-set-${index}`} className="flex gap-5">
-          {links.map((link) => (
-            <a
-              key={link.label}
-              href={link.link}
-              className="ui-text-label4 font-medium text-neutral-900 hover:text-neutral-1300 dark:text-neutral-400 dark:hover:text-neutral-000 transition-colors"
-            >
-              {link.label}
-            </a>
+
+      <div className="flex w-full px-6 lg:px-0 mt-6 gap-6 sm:flex-row flex-col justify-between items-start">
+        <div className="flex gap-6">
+          {[leftFooterLinks, rightFooterLinks].map((links, index) => (
+            <div key={`link-set-${index}`} className="flex flex-col gap-1 min-w-40">
+              {links.map((link) => (
+                <a
+                  key={link.label}
+                  href={link.link}
+                  className="ui-text-label3 font-medium text-neutral-900 hover:text-neutral-1300 active:text-neutral-1100 dark:text-neutral-400 dark:hover:text-neutral-000 dark:active:text-neutral-200 transition-colors"
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
           ))}
         </div>
-      ))}
-    </div>
-  </footer>
-);
+        <Status
+          additionalCSS="px-4 py-3 rounded-lg border border-neutral-300 dark:border-neutral-1000 hover:border-neutral-500 dark:hover:border-neutral-800 transition-colors"
+          statusUrl={StatusUrl}
+          showDescription
+        />
+      </div>
+    </footer>
+  );
+};
 
 export default Footer;
diff --git a/src/components/Layout/Header.test.tsx b/src/components/Layout/Header.test.tsx
index 7fc0f3a681..26852a0cde 100644
--- a/src/components/Layout/Header.test.tsx
+++ b/src/components/Layout/Header.test.tsx
@@ -56,40 +56,19 @@ describe('Header', () => {
 
   it('renders the header with logo and links', () => {
     render(<Header />);
-    expect(screen.getAllByAltText('Ably logo').length).toBeGreaterThan(0);
+    expect(screen.getByAltText('Ably')).toBeInTheDocument();
 
-    expect(screen.getByText('Docs')).toBeInTheDocument();
+    expect(screen.getAllByText('Docs')).toHaveLength(2);
     expect(screen.getByText('Examples')).toBeInTheDocument();
   });
 
-  it('renders the search bar when searchBar is true', () => {
-    render(<Header searchBar={true} />);
-    expect(screen.getByText('SearchBar')).toBeInTheDocument();
-  });
-
-  it('does not render the search bar when searchBar is false', () => {
-    render(<Header searchBar={false} />);
-    expect(screen.queryByText('SearchBar')).not.toBeInTheDocument();
-  });
-
   it('toggles the mobile menu when the burger icon is clicked', () => {
     render(<Header />);
     const burgerIcon = screen.getByText('icon-gui-bars-3-outline');
     fireEvent.click(burgerIcon);
-    expect(screen.getByText('icon-gui-x-mark-outline')).toBeInTheDocument();
     expect(screen.getByText('LeftSidebar')).toBeInTheDocument();
   });
 
-  it('disables scrolling when the mobile menu is open', () => {
-    render(<Header />);
-    const burgerIcon = screen.getByText('icon-gui-bars-3-outline');
-    fireEvent.click(burgerIcon);
-    expect(document.body).toHaveClass('overflow-hidden');
-    const closeIcon = screen.getByText('icon-gui-x-mark-outline');
-    fireEvent.click(closeIcon);
-    expect(document.body).not.toHaveClass('overflow-hidden');
-  });
-
   it('renders the sign in buttons when not signed in', () => {
     render(
       <UserContext.Provider value={{ sessionState: { signedIn: false }, apps: [] }}>
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index be8cddad38..8d0c3dd436 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -1,19 +1,57 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useLocation } from '@reach/router';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { throttle } from 'es-toolkit/compat';
 import Icon from '@ably/ui/core/Icon';
-import AblyHeader from '@ably/ui/core/Header';
-import { SearchBar } from '../SearchBar';
+import TabMenu from '@ably/ui/core/TabMenu';
+import Logo from '@ably/ui/core/images/logo/ably-logo.svg';
+import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from '@ably/ui/core/utils/heights';
+import { IconName } from '@ably/ui/core/Icon/types';
 import LeftSidebar from './LeftSidebar';
 import UserContext from 'src/contexts/user-context';
 import ExamplesList from '../Examples/ExamplesList';
-import TabMenu from '@ably/ui/core/TabMenu';
 import Link from '../Link';
+import { InkeepSearchBar } from '../SearchBar/InkeepSearchBar';
+import { secondaryButtonClassName, iconButtonClassName, tooltipContentClassName } from './utils/styles';
 
-type HeaderProps = {
-  searchBar?: boolean;
-};
+// Tailwind 'md' breakpoint from tailwind.config.js
+const MD_BREAKPOINT = 1040;
+const CLI_ENABLED = false;
+const MAX_MOBILE_MENU_WIDTH = '560px';
+
+const desktopTabs = [
+  <Link key="docs" to="/docs" className="p-4">
+    Docs
+  </Link>,
+  <Link key="examples" to="/examples" className="p-4">
+    Examples
+  </Link>,
+];
+
+const mobileTabs = ['Docs', 'Examples'];
+
+const helpResourcesItems = [
+  {
+    href: '/support',
+    icon: 'icon-gui-lifebuoy-outline' as IconName,
+    label: 'Support',
+  },
+  {
+    href: '/sdks',
+    icon: 'icon-gui-cube-outline' as IconName,
+    label: 'SDKs',
+    external: true,
+  },
+  {
+    href: 'https://ably.com',
+    icon: 'icon-gui-ably-badge' as IconName,
+    label: 'ably.com',
+    external: true,
+  },
+];
 
-const Header: React.FC<HeaderProps> = ({ searchBar = true }) => {
+const Header: React.FC = () => {
   const location = useLocation();
   const userContext = useContext(UserContext);
   const sessionState = {
@@ -23,21 +61,57 @@ const Header: React.FC<HeaderProps> = ({ searchBar = true }) => {
     accountName: userContext.sessionState.accountName ?? '',
     account: userContext.sessionState.account ?? { links: { dashboard: { href: '#' } } },
   };
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const mobileMenuRef = useRef<HTMLDivElement>(null);
+  const burgerButtonRef = useRef<HTMLDivElement>(null);
+  const searchBarRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      const clickedOutsideMenu = mobileMenuRef.current && !mobileMenuRef.current.contains(target);
+      const clickedOutsideBurgerButton = burgerButtonRef.current && !burgerButtonRef.current.contains(target);
+
+      if (isMobileMenuOpen && clickedOutsideMenu && clickedOutsideBurgerButton) {
+        setIsMobileMenuOpen(false);
+      }
+    };
+
+    const handleResize = throttle(() => {
+      if (window.innerWidth >= MD_BREAKPOINT && isMobileMenuOpen) {
+        setIsMobileMenuOpen(false);
+      }
+    }, 150);
+
+    // Physically shift the inkeep search bar around given that it's initialised once
+    const targetId = isMobileMenuOpen ? 'inkeep-search-mobile-mount' : 'inkeep-search-mount';
+    const targetElement = document.getElementById(targetId);
+    const searchBar = searchBarRef.current;
 
-  const desktopTabs = [
-    <Link key="docs" to="/docs" className="p-4">
-      Docs
-    </Link>,
-    <Link key="examples" to="/examples" className="p-4">
-      Examples
-    </Link>,
-  ];
-  const mobileTabs = ['Docs', 'Examples'];
+    if (targetElement && searchBar) {
+      targetElement.appendChild(searchBar);
+    }
+
+    window.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('resize', handleResize);
+      handleResize.cancel();
+    };
+  }, [isMobileMenuOpen]);
 
   return (
-    <AblyHeader
-      nav={
+    <div className="flex items-center justify-between h-16 px-6 fixed w-full z-50 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000">
+      <div className="flex items-center gap-8">
+        <a href="/docs" className="flex items-center gap-2 focus-base p-2 rounded -ml-2">
+          <img src={Logo} width="96px" alt="Ably" />
+          <span className="bg-orange-100 dark:bg-orange-1000 text-[10px] font-bold text-neutral-700 dark:text-neutral-600 px-1.5 py-[3px] rounded-md uppercase">
+            Docs
+          </span>
+        </a>
         <TabMenu
+          rootClassName="hidden md:flex h-16"
           tabs={desktopTabs}
           tabClassName="!p-0"
           options={{
@@ -46,64 +120,150 @@ const Header: React.FC<HeaderProps> = ({ searchBar = true }) => {
             defaultTabIndex: location.pathname.includes('/examples') ? 1 : 0,
           }}
         />
-      }
-      mobileNav={
-        <TabMenu
-          tabs={mobileTabs}
-          contents={[
-            <LeftSidebar inHeader key="nav-mobile-documentation-tab" />,
-            <ExamplesList key="nav-mobile-examples-tab" />,
-          ]}
-          rootClassName="h-full overflow-y-hidden min-h-[3.1875rem] flex flex-col"
-          contentClassName="h-full py-4 overflow-y-scroll"
-          tabClassName="ui-text-menu2 !px-4"
-          options={{ flexibleTabWidth: true }}
-        />
-      }
-      searchButton={
-        <button
-          className="cursor-pointer focus-base rounded px-0 pt-1 text-neutral-1300 dark:text-neutral-000"
-          aria-label="Toggle search"
-          onClick={() => {
-            const searchContainer = document.querySelector('#inkeep-search > div');
-            const searchButton = searchContainer?.shadowRoot?.querySelector('button');
+        {isMobileMenuOpen && (
+          <div
+            ref={mobileMenuRef}
+            id="mobile-menu"
+            className="md:hidden fixed flex flex-col top-[4.75rem] overflow-y-hidden mx-3 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-50"
+            style={{
+              maxWidth: MAX_MOBILE_MENU_WIDTH,
+              maxHeight: componentMaxHeight(HEADER_HEIGHT, HEADER_BOTTOM_MARGIN),
+            }}
+          >
+            <TabMenu
+              tabs={mobileTabs}
+              contents={[
+                <LeftSidebar inHeader key="nav-mobile-documentation-tab" />,
+                <ExamplesList key="nav-mobile-examples-tab" />,
+              ]}
+              rootClassName="h-full overflow-y-hidden min-h-[3.1875rem] flex flex-col"
+              contentClassName="h-full overflow-y-scroll"
+              tabClassName="ui-text-menu2 !px-4"
+              options={{ flexibleTabWidth: true }}
+            />
+          </div>
+        )}
+      </div>
+      <Tooltip.Provider delayDuration={0} disableHoverableContent>
+        <div className="hidden md:flex gap-2 pt-3 md:py-0 px-4 md:px-0">
+          <button
+            className={secondaryButtonClassName}
+            onClick={() => {
+              const searchContainer = document.querySelector('#inkeep-search > div');
+              const searchButton = searchContainer?.shadowRoot?.querySelector('button');
 
-            if (searchButton) {
-              searchButton.click();
-            }
-          }}
-        >
-          <Icon name="icon-gui-magnifying-glass-outline" size="1.5rem" />
-        </button>
-      }
-      searchButtonVisibility="mobile"
-      searchBar={
-        searchBar ? (
-          <SearchBar
-            displayLocation="homepage"
-            extraStyleOptions={{
-              wrapperContainer: { width: '100%', maxWidth: '280px' },
-              inputContainer: { width: '100%', maxWidth: '280px' },
+              if (searchButton) {
+                searchButton.click();
+              }
             }}
-          />
-        ) : null
-      }
-      headerCenterClassName="flex-none w-52 lg:w-[17.5rem]"
-      headerLinks={[
-        {
-          href: '/docs/sdks',
-          label: 'SDKs',
-          external: true,
-        },
-        {
-          href: '/support',
-          label: 'Support',
-        },
-      ]}
-      sessionState={sessionState}
-      logoHref="/docs"
-      location={location}
-    />
+          >
+            <Icon name="icon-gui-sparkles-outline" size="20px" />
+            <span>Ask AI</span>
+          </button>
+          <DropdownMenu.Root>
+            <Tooltip.Root>
+              <DropdownMenu.Trigger asChild>
+                <Tooltip.Trigger asChild>
+                  <button className={iconButtonClassName}>
+                    <Icon name="icon-gui-question-mark-circle-outline" size="20px" />
+                  </button>
+                </Tooltip.Trigger>
+              </DropdownMenu.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content className={tooltipContentClassName}>Help & Resources</Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+            <DropdownMenu.Portal>
+              <DropdownMenu.Content
+                className="min-w-[200px] bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 rounded-lg ui-shadow-lg-medium p-1 z-50"
+                sideOffset={5}
+                align="end"
+              >
+                {helpResourcesItems.map((item) => (
+                  <DropdownMenu.Item
+                    key={item.href}
+                    className="flex items-center gap-2 px-3 py-2 text-sm text-neutral-1300 dark:text-neutral-000 hover:bg-neutral-100 dark:hover:bg-neutral-1200 rounded cursor-pointer outline-none"
+                    asChild
+                  >
+                    <a
+                      href={item.href}
+                      {...(item.external && { target: '_blank', rel: 'noopener noreferrer' })}
+                      className={item.external ? 'justify-between' : undefined}
+                    >
+                      <div className="flex items-center gap-2">
+                        <Icon name={item.icon} size="20px" />
+                        <span>{item.label}</span>
+                      </div>
+                      {item.external && <Icon name="icon-gui-arrow-top-right-on-square-outline" size="16px" />}
+                    </a>
+                  </DropdownMenu.Item>
+                ))}
+              </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Root>
+          {CLI_ENABLED && (
+            <Tooltip.Root>
+              <Tooltip.Trigger asChild>
+                <button className={iconButtonClassName}>
+                  <Icon name="icon-gui-command-line-outline" size="20px" />
+                </button>
+              </Tooltip.Trigger>
+              <Tooltip.Portal>
+                <Tooltip.Content className={tooltipContentClassName}>Open CLI</Tooltip.Content>
+              </Tooltip.Portal>
+            </Tooltip.Root>
+          )}
+          {sessionState.signedIn ? (
+            <>
+              {sessionState.preferredEmail ? (
+                <Tooltip.Root>
+                  <Tooltip.Trigger asChild>
+                    <a href="/dashboard" className={secondaryButtonClassName}>
+                      Dashboard
+                    </a>
+                  </Tooltip.Trigger>
+                  <Tooltip.Portal>
+                    <Tooltip.Content className={tooltipContentClassName}>{sessionState.preferredEmail}</Tooltip.Content>
+                  </Tooltip.Portal>
+                </Tooltip.Root>
+              ) : (
+                <a href="/dashboard" className={secondaryButtonClassName}>
+                  Dashboard
+                </a>
+              )}
+              <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                  <button className={iconButtonClassName}>
+                    <Icon name="icon-gui-arrow-right-start-on-rectangle-outline" size="20px" />
+                  </button>
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                  <Tooltip.Content className={tooltipContentClassName}>Log out</Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+            </>
+          ) : (
+            <>
+              <a href="/login" className={secondaryButtonClassName}>
+                Login
+              </a>
+              <a href="/sign-up" className="flex-1 md:flex-none md:ui-button-primary-xs">
+                Start free
+              </a>
+            </>
+          )}
+        </div>
+      </Tooltip.Provider>
+      <div ref={burgerButtonRef} className="flex md:hidden">
+        <button className={iconButtonClassName} onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}>
+          <Icon name="icon-gui-bars-3-outline" size="20px" />
+        </button>
+      </div>
+
+      <div className="hidden">
+        <InkeepSearchBar ref={searchBarRef} extraInputStyle={{ backgroundColor: 'white' }} />
+      </div>
+    </div>
   );
 };
 
diff --git a/src/components/Layout/LanguageSelector.test.tsx b/src/components/Layout/LanguageSelector.test.tsx
index 3514a496b3..049271c294 100644
--- a/src/components/Layout/LanguageSelector.test.tsx
+++ b/src/components/Layout/LanguageSelector.test.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { useLocation } from '@reach/router';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { LanguageSelector } from './LanguageSelector';
 import { useLayoutContext } from 'src/contexts/layout-context';
+import { navigate } from '../Link';
 
 jest.mock('src/contexts/layout-context', () => ({
   useLayoutContext: jest.fn(),
@@ -19,6 +20,10 @@ jest.mock('@ably/ui/core/Badge', () => ({
   default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
 }));
 
+jest.mock('../Link', () => ({
+  navigate: jest.fn(),
+}));
+
 const mockUseLayoutContext = useLayoutContext as jest.Mock;
 
 jest.mock('@reach/router', () => ({
@@ -28,19 +33,20 @@ jest.mock('@reach/router', () => ({
 
 const mockUseLocation = useLocation as jest.Mock;
 
-const mockLanguageData = {
-  pubsub: {
-    javascript: 1.0,
-    python: 1.0,
-    ruby: 1.0,
+jest.mock('src/data/languages', () => ({
+  languageData: {
+    pubsub: {
+      javascript: '1.0',
+      python: '1.0',
+      ruby: '1.0',
+    },
   },
-};
-
-const mockLanguageInfo = {
-  javascript: { label: 'JavaScript' },
-  python: { label: 'Python' },
-  ruby: { label: 'Ruby' },
-};
+  languageInfo: {
+    javascript: { label: 'JavaScript' },
+    python: { label: 'Python' },
+    ruby: { label: 'Ruby' },
+  },
+}));
 
 describe('LanguageSelector', () => {
   beforeEach(() => {
@@ -55,26 +61,10 @@ describe('LanguageSelector', () => {
       activePage: {
         tree: [0],
         languages: ['javascript', 'python'],
+        language: 'javascript',
       },
       products: [['pubsub']],
     });
-
-    Object.defineProperty(window, 'location', {
-      writable: true,
-      value: { search: '' },
-    });
-
-    jest.spyOn(window, 'URLSearchParams').mockImplementation(
-      () =>
-        ({
-          get: jest.fn().mockReturnValue(null),
-        }) as unknown as URLSearchParams,
-    );
-
-    jest.mock('src/data/languages', () => ({
-      languageData: mockLanguageData,
-      languageInfo: mockLanguageInfo,
-    }));
   });
 
   afterEach(() => {
@@ -85,44 +75,60 @@ describe('LanguageSelector', () => {
     render(<LanguageSelector />);
     expect(screen.getByText('icon-gui-chevron-down-micro')).toBeInTheDocument();
     expect(screen.getByText('icon-tech-javascript')).toBeInTheDocument();
+    expect(screen.getByText('JavaScript')).toBeInTheDocument();
   });
 
-  it('opens the dropdown menu on click', () => {
+  it('opens the dropdown menu on click', async () => {
     render(<LanguageSelector />);
-    fireEvent.click(screen.getByText('icon-gui-chevron-down-micro'));
-    expect(screen.getByText('Code Language')).toBeInTheDocument();
+    const trigger = screen.getByRole('combobox', { name: /select code language/i });
+    fireEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByText('Code Language')).toBeInTheDocument();
+    });
   });
 
-  it('renders language options', () => {
+  it('renders language options', async () => {
     render(<LanguageSelector />);
-    fireEvent.click(screen.getByText('icon-gui-chevron-down-micro'));
-    expect(screen.getByText('JavaScript')).toBeInTheDocument();
-    expect(screen.getByText('Python')).toBeInTheDocument();
+    const trigger = screen.getByRole('combobox', { name: /select code language/i });
+    fireEvent.click(trigger);
+
+    await waitFor(() => {
+      const items = screen.getAllByText('JavaScript');
+      // One in trigger, one in dropdown
+      expect(items.length).toBeGreaterThanOrEqual(1);
+      expect(screen.getByText('Python')).toBeInTheDocument();
+    });
   });
 
-  it('closes the dropdown menu on outside click', () => {
+  it('closes the dropdown menu on escape key', async () => {
     render(<LanguageSelector />);
-    fireEvent.click(screen.getByText('icon-gui-chevron-down-micro'));
-    fireEvent.mouseDown(document);
-    expect(screen.queryByText('Code Language')).not.toBeInTheDocument();
+    const trigger = screen.getByRole('combobox', { name: /select code language/i });
+    fireEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByText('Code Language')).toBeInTheDocument();
+    });
+
+    fireEvent.keyDown(trigger, { key: 'Escape', code: 'Escape' });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Code Language')).not.toBeInTheDocument();
+    });
   });
 
-  it('filters options based on activePage.languages', () => {
+  it('filters options based on activePage.languages', async () => {
     render(<LanguageSelector />);
-    fireEvent.click(screen.getByText('icon-gui-chevron-down-micro'));
-    expect(screen.getByText('JavaScript')).toBeInTheDocument();
-    expect(screen.getByText('Python')).toBeInTheDocument();
-    expect(screen.queryByText('Ruby')).not.toBeInTheDocument();
-  });
+    const trigger = screen.getByRole('combobox', { name: /select code language/i });
+    fireEvent.click(trigger);
 
-  it('sets the default option to Python when ?lang=python is in the URL', () => {
-    mockUseLocation.mockReturnValue({
-      pathname: '/some-path',
-      search: '?lang=python',
-      hash: '',
-      state: null,
+    await waitFor(() => {
+      expect(screen.getByText('Python')).toBeInTheDocument();
+      expect(screen.queryByText('Ruby')).not.toBeInTheDocument();
     });
+  });
 
+  it('sets the default option to Python when language is python', () => {
     mockUseLayoutContext.mockReturnValue({
       activePage: {
         tree: [0],
@@ -132,20 +138,25 @@ describe('LanguageSelector', () => {
       products: [['pubsub']],
     });
 
-    jest.spyOn(window, 'URLSearchParams').mockImplementation(
-      () =>
-        ({
-          get: jest.fn((key) => {
-            if (key === 'lang') {
-              return 'python';
-            }
-            return null;
-          }),
-        }) as unknown as URLSearchParams,
-    );
-
     render(<LanguageSelector />);
     expect(screen.getByText('icon-tech-python')).toBeInTheDocument();
-    expect(screen.queryByText('icon-tech-javascript')).not.toBeInTheDocument();
+    expect(screen.getByText('Python')).toBeInTheDocument();
+  });
+
+  it('navigates when a language option is selected', async () => {
+    render(<LanguageSelector />);
+    const trigger = screen.getByRole('combobox', { name: /select code language/i });
+    fireEvent.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByText('Python')).toBeInTheDocument();
+    });
+
+    const pythonOption = screen.getByRole('option', { name: /python/i });
+    fireEvent.click(pythonOption);
+
+    await waitFor(() => {
+      expect(navigate).toHaveBeenCalledWith('/some-path?lang=python');
+    });
   });
 });
diff --git a/src/components/Layout/LanguageSelector.tsx b/src/components/Layout/LanguageSelector.tsx
index 260cbc8089..b47acb94e3 100644
--- a/src/components/Layout/LanguageSelector.tsx
+++ b/src/components/Layout/LanguageSelector.tsx
@@ -1,17 +1,18 @@
-import { useEffect, useMemo, useRef, useState, MouseEvent, TouchEvent } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useLocation } from '@reach/router';
-import Select from 'react-select';
 import Badge from '@ably/ui/core/Badge';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
 import cn from '@ably/ui/core/utils/cn';
 import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from '@ably/ui/core/utils/heights';
+import { track } from '@ably/ui/core/insights';
 import { languageData, languageInfo } from 'src/data/languages';
 import { LanguageKey } from 'src/data/languages/types';
-import { useOnClickOutside } from 'src/hooks';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import { navigate } from '../Link';
 import { LANGUAGE_SELECTOR_HEIGHT, INKEEP_ASK_BUTTON_HEIGHT } from './utils/heights';
+import * as Select from '../ui/Select';
+import { Skeleton } from '../ui/Skeleton';
 
 type LanguageSelectorOptionData = {
   label: LanguageKey;
@@ -19,74 +20,13 @@ type LanguageSelectorOptionData = {
   version: string;
 };
 
-type LanguageSelectorOptionProps = {
-  data: LanguageSelectorOptionData;
-  isOption?: boolean;
-  setMenuOpen: (menuOpen: boolean) => void;
-  selectProps: {
-    menuIsOpen: boolean;
-  };
-  langParam: string | null;
-};
-
-const LanguageSelectorOption = ({ isOption, setMenuOpen, langParam, ...props }: LanguageSelectorOptionProps) => {
-  const lang = languageInfo[props.data.label];
-  const location = useLocation();
-
-  const handleClick = (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => {
-    e.preventDefault();
-
-    if (isOption) {
-      navigate(`${location.pathname}?lang=${props.data.label}`);
-    }
-
-    setMenuOpen(!props.selectProps.menuIsOpen);
-  };
-
-  return (
-    <div
-      className={cn(
-        'ui-text-label4 text-left leading-none w-full text-neutral-1100 dark:text-neutral-200 hover:text-neutral-1200 dark:hover:text-neutral-300 group/lang-dropdown flex gap-2 items-center rounded',
-        {
-          'p-2 hover:bg-neutral-100 dark:hover:bg-neutral-1200 cursor-pointer': isOption,
-        },
-      )}
-      onClick={handleClick}
-      onTouchEnd={handleClick}
-      role="menuitem"
-    >
-      <div className={cn('flex items-center gap-2', { 'flex-1': isOption })}>
-        <Icon size="20px" name={`icon-tech-${lang?.alias ?? props.data.label}` as IconName} />
-        {isOption ? lang?.label : null}
-      </div>
-      <Badge
-        color="neutral"
-        size="xs"
-        className={cn('my-px', { 'group-hover/lang-dropdown:bg-neutral-000': isOption })}
-      >
-        v{props.data.version}
-      </Badge>
-      {isOption ? (
-        <div className="w-4 h-4">
-          {props.data.label === langParam ? (
-            <Icon name="icon-gui-check-outline" size="16px" color="text-neutral-1000" />
-          ) : null}
-        </div>
-      ) : null}
-    </div>
-  );
-};
-
 export const LanguageSelector = () => {
   const { activePage } = useLayoutContext();
+  const location = useLocation();
   const languageVersions = languageData[activePage.product ?? 'pubsub'];
-  const [menuOpen, setMenuOpen] = useState(false);
-  const [selectedOption, setSelectedOption] = useState<LanguageSelectorOptionData | null>(null);
-  const selectRef = useRef<HTMLDivElement>(null);
+  const [value, setValue] = useState<string>('');
 
-  useOnClickOutside(() => setMenuOpen(false), selectRef);
-
-  const options = useMemo(
+  const options: LanguageSelectorOptionData[] = useMemo(
     () =>
       Object.entries(languageVersions)
         .map(([lang, version]) => ({
@@ -100,66 +40,65 @@ export const LanguageSelector = () => {
 
   useEffect(() => {
     const defaultOption = options.find((option) => option.label === activePage.language) || options[0];
-    setSelectedOption(defaultOption);
+    if (defaultOption) {
+      setValue(defaultOption.value);
+    }
   }, [activePage.language, options]);
 
-  const handleClick = (e: MouseEvent<HTMLButtonElement> | TouchEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setMenuOpen(!menuOpen);
+  const selectedOption = useMemo(() => options.find((option) => option.value === value), [options, value]);
+
+  const handleValueChange = (newValue: string) => {
+    setValue(newValue);
+
+    const option = options.find((opt) => opt.value === newValue);
+    if (option) {
+      track('language_selector_changed', {
+        language: option.label,
+        location: location.pathname,
+      });
+      navigate(`${location.pathname}?lang=${option.label}`);
+    }
   };
 
+  if (!selectedOption) {
+    return <Skeleton className="w-[180px] h-5 my-[9px]" />;
+  }
+
+  const selectedLang = languageInfo[selectedOption.label];
+
   return (
-    <div
-      ref={selectRef}
-      className="md:relative w-full text-right md:text-left mb-6 focus-base -mt-1 md:mt-0 -mr-1 md:mr-0"
-    >
-      <Select
-        options={options}
-        value={selectedOption}
-        onChange={(option) => setSelectedOption(option)}
-        classNames={{
-          control: () => '!border-none !inline-flex !cursor-pointer group/lang-dropdown',
-          valueContainer: () => '!p-0',
-          menu: () => 'absolute right-0 w-60 z-10',
-        }}
-        styles={{
-          control: () => ({ height: LANGUAGE_SELECTOR_HEIGHT }),
-          menu: () => ({ boxShadow: 'none' }),
-        }}
-        tabIndex={0}
-        menuIsOpen={menuOpen}
-        components={{
-          Option: (props) => (
-            <LanguageSelectorOption
-              {...props}
-              setMenuOpen={setMenuOpen}
-              langParam={selectedOption?.label || null}
-              isOption
+    <div className="md:relative w-full text-right md:text-left -mt-1 md:mt-0 -mr-1 md:mr-0">
+      <Select.Root value={value} onValueChange={handleValueChange}>
+        <Select.Trigger
+          className="border-none inline-flex cursor-pointer group/lang-dropdown focus-base rounded px-0"
+          style={{ height: LANGUAGE_SELECTOR_HEIGHT }}
+          aria-label="Select code language"
+        >
+          <div className="ui-text-label4 text-left leading-none w-full text-neutral-1100 dark:text-neutral-200 hover:text-neutral-1200 dark:hover:text-neutral-300 flex gap-2 items-center">
+            <Icon size="20px" name={`icon-tech-${selectedLang?.alias ?? selectedOption.label}` as IconName} />
+            <span className="text-neutral-900 dark:text-neutral-400 font-semibold">{selectedLang?.label}</span>
+            <Badge color="neutral" size="xs" className="my-px">
+              v{selectedOption.version}
+            </Badge>
+          </div>
+          <Select.Icon className="flex items-center pl-2 text-red-orange cursor-pointer">
+            <Icon
+              name="icon-gui-chevron-down-micro"
+              size="20px"
+              additionalCSS="text-neutral-700 group-hover/lang-dropdown:text-neutral-1300 dark:text-neutral-600 dark:group-hover/lang-dropdown:text-neutral-000 transition-colors"
             />
-          ),
-          SingleValue: (props) => (
-            <LanguageSelectorOption {...props} setMenuOpen={setMenuOpen} langParam={selectedOption?.label || null} />
-          ),
-          IndicatorSeparator: null,
-          DropdownIndicator: () => (
-            <button
-              role="button"
-              className="flex items-center pl-2 text-red-orange cursor-pointer"
-              onClick={handleClick}
-              onTouchEnd={handleClick}
-              aria-label="Toggle language dropdown"
-            >
-              <Icon
-                name="icon-gui-chevron-down-micro"
-                size="20px"
-                additionalCSS="text-neutral-700 group-hover/lang-dropdown:text-neutral-1300 dark:text-neutral-600 dark:group-hover/lang-dropdown:text-neutral-000 transition-colors"
-              />
-            </button>
-          ),
-          Input: () => null,
-          MenuList: ({ children }) => (
-            <div
-              className="overflow-y-scroll bg-neutral-000 shadow dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 rounded-lg ui-shadow-sm-soft p-2"
+          </Select.Icon>
+        </Select.Trigger>
+
+        <Select.Portal>
+          <Select.Content
+            className="overflow-hidden bg-neutral-000 shadow dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 rounded-lg ui-shadow-sm-soft z-40"
+            position="popper"
+            align="end"
+            sideOffset={4}
+          >
+            <Select.Viewport
+              className="p-2"
               style={{
                 maxHeight: componentMaxHeight(
                   HEADER_HEIGHT,
@@ -168,16 +107,50 @@ export const LanguageSelector = () => {
                   INKEEP_ASK_BUTTON_HEIGHT,
                 ),
               }}
-              role="menu"
             >
-              <p className="ui-text-overline2 text-left py-4 px-2 text-neutral-700 dark:text-neutral-600">
+              <p className="ui-text-overline2 text-left p-2 pb-3 text-neutral-700 dark:text-neutral-600">
                 Code Language
               </p>
-              {children}
-            </div>
-          ),
-        }}
-      />
+              {options.map((option) => {
+                const lang = languageInfo[option.label];
+                return (
+                  <Select.Item
+                    key={option.value}
+                    value={option.value}
+                    className={cn(
+                      'ui-text-label4 text-left leading-none w-full text-neutral-900 dark:text-neutral-400',
+                      'hover:text-neutral-1300 dark:hover:text-neutral-000 transition-colors',
+                      'p-2 hover:bg-neutral-100 dark:hover:bg-neutral-1200 cursor-pointer',
+                      'flex gap-2 items-center rounded outline-none',
+                      'focus:bg-neutral-100 dark:focus:bg-neutral-1200',
+                      'data-[highlighted]:bg-neutral-100 dark:data-[highlighted]:bg-neutral-1200 focus-base',
+                    )}
+                  >
+                    <div className="flex items-center gap-2 flex-1">
+                      <Icon size="20px" name={`icon-tech-${lang?.alias ?? option.label}` as IconName} />
+                      {lang?.label}
+                    </div>
+                    <Badge color="neutral" size="xs" className="my-px hover:bg-neutral-000 w-9 justify-center">
+                      v{option.version}
+                    </Badge>
+                    {option.value === value ? (
+                      <Select.ItemIndicator className="w-4 h-4 flex items-center justify-center">
+                        <Icon
+                          name="icon-gui-check-outline"
+                          size="16px"
+                          color="text-neutral-1000 dark:text-neutral-300"
+                        />
+                      </Select.ItemIndicator>
+                    ) : (
+                      <div className="w-4 h-4" aria-hidden={option.value === value} />
+                    )}
+                  </Select.Item>
+                );
+              })}
+            </Select.Viewport>
+          </Select.Content>
+        </Select.Portal>
+      </Select.Root>
     </div>
   );
 };
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index 1afc4c4756..51bef210aa 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -19,6 +19,7 @@ export type Frontmatter = {
   meta_description: string;
   meta_keywords?: string;
   redirect_from?: string[];
+  last_updated?: string;
 };
 
 export type PageContextType = {
@@ -31,7 +32,7 @@ type LayoutProps = PageProps<unknown, PageContextType>;
 
 const Layout: React.FC<LayoutProps> = ({ children, pageContext }) => {
   const location = useLocation();
-  const { searchBar, leftSidebar, rightSidebar, template } = pageContext.layout ?? {};
+  const { leftSidebar, rightSidebar, template } = pageContext.layout ?? {};
   const isRedocPage =
     location.pathname === '/docs/api/control-api' ||
     location.pathname === '/docs/api/chat-rest' ||
@@ -39,15 +40,15 @@ const Layout: React.FC<LayoutProps> = ({ children, pageContext }) => {
 
   return (
     <GlobalLoading template={template}>
-      <Header searchBar={searchBar} />
-      <div className="flex pt-16 md:gap-12 lg:gap-16 xl:gap-20 justify-center ui-standard-container mx-auto">
-        {leftSidebar ? <LeftSidebar /> : null}
-        <Container as="main" className={cn('flex-1', { 'overflow-x-auto': !isRedocPage })}>
-          {leftSidebar ? <Breadcrumbs /> : null}
+      <Header />
+      <div className="flex pt-16 px-12 md:px-0 md:gap-12 lg:gap-16 xl:gap-20 justify-center">
+        {leftSidebar ? <LeftSidebar /> : <div />}
+        <Container as="main" className={cn('flex-1 px-4 -mx-4', { 'overflow-x-auto': !isRedocPage })}>
+          {leftSidebar ? <Breadcrumbs /> : <div />}
           {children}
-          <Footer />
+          <Footer pageContext={pageContext} />
         </Container>
-        {rightSidebar ? <RightSidebar /> : null}
+        {rightSidebar ? <RightSidebar /> : <div />}
       </div>
     </GlobalLoading>
   );
diff --git a/src/components/Layout/LeftSidebar.test.tsx b/src/components/Layout/LeftSidebar.test.tsx
index a9148d1bbb..edd8d07563 100644
--- a/src/components/Layout/LeftSidebar.test.tsx
+++ b/src/components/Layout/LeftSidebar.test.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useLocation } from '@reach/router';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 import LeftSidebar from './LeftSidebar';
 import { useLayoutContext } from 'src/contexts/layout-context';
@@ -23,56 +24,6 @@ jest.mock('../Link', () => {
   return MockLink;
 });
 
-// Mock productData
-jest.mock('src/data', () => ({
-  productData: {
-    platform: {
-      nav: {
-        name: 'Platform',
-        icon: { open: 'icon-gui-chevron-up-micro', closed: 'icon-gui-chevron-down-micro' },
-        content: [
-          {
-            name: 'Overview',
-            pages: [
-              { name: 'Introduction', link: '/platform/intro' },
-              { name: 'Getting Started', link: '/platform/getting-started' },
-            ],
-          },
-        ],
-        api: [
-          {
-            name: 'API Overview',
-            pages: [
-              { name: 'API Introduction', link: '/platform/api-intro' },
-              { name: 'API Reference', link: '/platform/api-reference' },
-            ],
-          },
-        ],
-        link: '/platform',
-        showJumpLink: true,
-      },
-    },
-    pubsub: {
-      nav: {
-        name: 'Pub/Sub',
-        icon: { open: 'icon-gui-chevron-up-outline', closed: 'icon-gui-chevron-down-outline' },
-        content: [
-          {
-            name: 'Overview',
-            pages: [
-              { name: 'Introduction', link: '/pubsub/intro' },
-              { name: 'Getting Started', link: '/pubsub/getting-started' },
-            ],
-          },
-        ],
-        api: [],
-        link: '/pubsub',
-        showJumpLink: false,
-      },
-    },
-  },
-}));
-
 const mockUseLayoutContext = useLayoutContext as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 
@@ -80,10 +31,8 @@ describe('LeftSidebar', () => {
   beforeEach(() => {
     mockUseLayoutContext.mockReturnValue({
       activePage: {
-        tree: [
-          { index: 0, page: { name: 'Link 1', link: '/link-1' } },
-          { index: 1, page: { name: 'Link 2', link: '/link-2' } },
-        ],
+        page: { name: 'Test Page', link: '/platform/intro' },
+        tree: [{ index: 0, page: { name: 'Link 1', link: '/link-1' } }],
       },
     });
 
@@ -109,20 +58,86 @@ describe('LeftSidebar', () => {
   it('renders the sidebar with products', () => {
     render(<LeftSidebar />);
     expect(screen.getByRole('button', { name: 'Platform' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Pub/Sub' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Ably Pub/Sub' })).toBeInTheDocument();
   });
 
-  it('renders product content and API sections', () => {
+  it('shows Platform accordion expanded with first three child items when active page is under Platform', async () => {
     render(<LeftSidebar />);
-    expect(screen.getByText('Overview')).toBeInTheDocument();
-    expect(screen.getByText('API Overview')).toBeInTheDocument();
+
+    // Since activePage.page.link is '/platform/intro', the Platform accordion should be open by default
+    // Verify the labels of the first three child accordion items are visible
+    await waitFor(() => {
+      expect(screen.getByText('Introduction')).toBeInTheDocument();
+      expect(screen.getByText('Architecture')).toBeInTheDocument();
+      expect(screen.getByText('Products and SDKs')).toBeInTheDocument();
+    });
+
+    // Verify these are clickable accordion triggers
+    const introButton = screen.getByText('Introduction').closest('button');
+    const archButton = screen.getByText('Architecture').closest('button');
+    const productsButton = screen.getByText('Products and SDKs').closest('button');
+
+    expect(introButton).toBeInTheDocument();
+    expect(archButton).toBeInTheDocument();
+    expect(productsButton).toBeInTheDocument();
   });
 
-  it('renders links for pages and API pages', () => {
+  it('expands Platform/Architecture accordion and shows first three child items', async () => {
+    const user = userEvent.setup();
     render(<LeftSidebar />);
-    expect(screen.getByText('Introduction')).toBeInTheDocument();
-    expect(screen.getByText('Getting Started')).toBeInTheDocument();
-    expect(screen.getByText('API Introduction')).toBeInTheDocument();
-    expect(screen.getByText('API Reference')).toBeInTheDocument();
+
+    // Platform is already expanded since activePage is /platform/intro
+    expect(screen.queryByText('Overview')).not.toBeInTheDocument();
+    expect(screen.queryByText('Edge network')).not.toBeInTheDocument();
+    expect(screen.queryByText('Infrastructure operations')).not.toBeInTheDocument();
+
+    // Find and click Architecture button to expand it
+    const architectureButton = screen.getByText('Architecture').closest('button');
+    if (!architectureButton) {
+      throw new Error('Architecture button not found');
+    }
+    await user.click(architectureButton);
+
+    // After clicking, verify the first three child items are visible
+    await waitFor(() => {
+      expect(screen.getByText('Overview')).toBeInTheDocument();
+      expect(screen.getByText('Edge network')).toBeInTheDocument();
+      expect(screen.getByText('Infrastructure operations')).toBeInTheDocument();
+    });
+
+    // Verify these are links (leaf nodes) not accordion triggers
+    const overviewLink = screen.getByText('Overview').closest('a');
+    const edgeNetworkLink = screen.getByText('Edge network').closest('a');
+    const infrastructureLink = screen.getByText('Infrastructure operations').closest('a');
+
+    expect(overviewLink).toBeInTheDocument();
+    expect(edgeNetworkLink).toBeInTheDocument();
+    expect(infrastructureLink).toBeInTheDocument();
+  });
+
+  it('clicks Ably Pub/Sub to close Platform and expand Pub/Sub showing first three child items', async () => {
+    const user = userEvent.setup();
+    render(<LeftSidebar />);
+
+    // Initially on Platform page, so Platform accordion is open
+    expect(screen.getByText('Architecture')).toBeInTheDocument();
+
+    // Pub/Sub children should not be visible
+    expect(screen.queryByText('Authentication')).not.toBeInTheDocument();
+    expect(screen.queryByText('Connections')).not.toBeInTheDocument();
+
+    // Click on Ably Pub/Sub button to expand it (this should close Platform since type="single")
+    const pubsubButton = screen.getByRole('button', { name: 'Ably Pub/Sub' });
+    await user.click(pubsubButton);
+
+    // After clicking, verify the first three Pub/Sub child accordion items appear
+    await waitFor(() => {
+      expect(screen.getByText('Introduction')).toBeInTheDocument();
+      expect(screen.getByText('Authentication')).toBeInTheDocument();
+      expect(screen.getByText('Connections')).toBeInTheDocument();
+    });
+
+    // Platform's Architecture should no longer be visible since accordion closed
+    expect(screen.queryByText('Architecture')).not.toBeInTheDocument();
   });
 });
diff --git a/src/components/Layout/LeftSidebar.tsx b/src/components/Layout/LeftSidebar.tsx
index 3b6582cbca..854bbb060f 100644
--- a/src/components/Layout/LeftSidebar.tsx
+++ b/src/components/Layout/LeftSidebar.tsx
@@ -1,238 +1,189 @@
-import { useMemo, useState, useEffect, useRef } from 'react';
-import { navigate, useLocation } from '@reach/router';
+import { useEffect, useRef, useState } from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
 import cn from '@ably/ui/core/utils/cn';
-import Accordion from '@ably/ui/core/Accordion';
-import { AccordionData } from '@ably/ui/core/Accordion/types';
 import Icon from '@ably/ui/core/Icon';
-import { throttle } from 'lodash';
 
 import { productData } from 'src/data';
-import { NavProduct, NavProductContent, NavProductPages } from 'src/data/nav/types';
-import {
-  commonAccordionOptions,
-  composeNavLinkId,
-  hierarchicalKey,
-  PageTreeNode,
-  sidebarAlignmentClasses,
-  sidebarAlignmentStyles,
-} from './utils/nav';
+import { NavProductContent, NavProductPage } from 'src/data/nav/types';
 import Link from '../Link';
 import { useLayoutContext } from 'src/contexts/layout-context';
 
-type ContentType = 'content' | 'api';
-
 type LeftSidebarProps = {
   inHeader?: boolean;
 };
 
-const NavPage = ({
-  depth,
-  page,
-  indices,
-  type,
-  indentLinks,
-  inHeader,
+const accordionContentClassName =
+  'overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animation-accordion-up';
+
+const accordionTriggerClassName = cn(
+  // Layout & display
+  'flex items-center justify-between gap-2 p-0 pr-2 w-full text-left ui-text-label3',
+  // Background color states
+  'bg-neutral-000 dark:bg-neutral-1300 hover:bg-neutral-100 dark:hover:bg-neutral-1200 active:bg-neutral-200 dark:active:bg-neutral-1100',
+  // Text color states
+  'text-neutral-900 dark:text-neutral-400 hover:text-neutral-1300 dark:hover:text-neutral-000',
+  // State styles
+  'data-[state=open]:text-neutral-1300 dark:data-[state=open]:text-neutral-000 data-[state=open]:font-bold',
+  // Icon animation
+  '[&[data-state=open]>svg]:rotate-90',
+  // Misc
+  'focus-base transition-colors',
+);
+
+const accordionLinkClassName = 'pl-3 py-[6px]';
+
+const iconClassName = 'text-neutral-1300 dark:text-neutral-000 transition-transform';
+
+const ChildAccordion = ({
+  content,
+  layer,
+  tree,
 }: {
-  depth: number;
-  page: NavProductPages;
-  indices: number[];
-  type: ContentType;
-  inHeader: boolean;
-  indentLinks?: boolean;
+  content: (NavProductPage | NavProductContent)[];
+  layer: number;
+  tree: number[];
 }) => {
-  const location = useLocation();
-  const linkId = 'link' in page ? composeNavLinkId(page.link) : undefined;
   const { activePage } = useLayoutContext();
-  const treeMatch = indices.every((value, index) => value === activePage.tree[index]?.index);
-
-  if ('link' in page) {
-    const language = new URLSearchParams(location.search).get('lang');
-    const pageActive = treeMatch && page.link === activePage.page.link;
-
-    return (
-      <Link
-        key={hierarchicalKey(page.link, depth, activePage.tree)}
-        id={linkId}
-        className={cn({
-          'block ui-text-label2 leading-relaxed md:leading-snug md:ui-text-label4 text-neutral-1000 dark:text-neutral-300 md:text-neutral-900 dark:md:text-neutral-400 transition-colors hover:text-neutral-1300 active:text-neutral-800 focus-base':
-            true,
-          '!font-semibold': !pageActive,
-          'text-neutral-900': !pageActive && type === 'content',
-          'text-neutral-1000': !pageActive && type === 'api',
-          '!font-bold !text-neutral-1300': pageActive,
-          'pl-3': indentLinks,
-        })}
-        target={page.external ? '_blank' : undefined}
-        rel={page.external ? 'noopener noreferrer' : undefined}
-        to={language ? `${page.link}?lang=${language}` : page.link}
-      >
-        {page.name}
-        {page.external ? <Icon name="icon-gui-arrow-top-right-on-square-outline" additionalCSS="ml-1" /> : null}
-      </Link>
-    );
-  } else {
-    return (
-      <Accordion
-        key={hierarchicalKey(page.name, depth, activePage.tree)}
-        data={[
-          {
-            name: page.name,
-            content: page.pages.map((subPage, subPageIndex) => (
-              <div className="mb-2 first:mt-2" key={subPage.name}>
-                <NavPage
-                  page={subPage}
-                  indentLinks
-                  indices={[...indices, subPageIndex]}
-                  type={type}
-                  depth={depth + 1}
-                  inHeader={inHeader}
-                />
-              </div>
-            )),
-          },
-        ]}
-        {...commonAccordionOptions(page, treeMatch ? 0 : undefined, false, inHeader)}
-      />
-    );
-  }
-};
+  const activeTriggerRef = useRef<HTMLButtonElement>(null);
+  const previousTree = activePage.tree.map(({ index }) => index).slice(0, layer + 2);
 
-const renderProductContent = (
-  content: NavProductContent[],
-  type: ContentType,
-  inHeader: boolean,
-  productIndex: number,
-) =>
-  content.map((productContent, productContentIndex) => (
-    <div className="flex flex-col gap-2.5 md:gap-2" key={productContent.name}>
-      <div className="ui-text-overline2 text-neutral-700">{productContent.name}</div>
-      {productContent.pages.map((page, pageIndex) => (
-        <NavPage
-          key={'name' in page ? page.name : `page-group-${pageIndex}`}
-          page={page}
-          indices={[productIndex, productContentIndex, pageIndex]}
-          type={type}
-          depth={2}
-          inHeader={inHeader}
-        />
-      ))}
-    </div>
-  ));
-
-const constructProductNavData = (activePageTree: PageTreeNode[], inHeader: boolean): AccordionData[] => {
-  const navData: AccordionData[] = Object.entries(productData).map(([productKey, productObj], index) => {
-    const product = productObj.nav as NavProduct;
-    const apiReferencesId = `${productKey}-api-references`;
-
-    return {
-      name: product.name,
-      icon:
-        activePageTree[0]?.page.name === product.name
-          ? { name: product.icon.open, css: 'text-orange-600' }
-          : { name: product.icon.closed },
-      onClick: () => {
-        // When a product is clicked, find and scroll to any open accordion element
-        if (typeof document !== 'undefined') {
-          // Use setTimeout to ensure the DOM has updated after the click and animation has completed
-          setTimeout(() => {
-            const targetAccordion = window.innerWidth >= 1040 ? 'left-nav' : 'mobile-nav';
-            const menuContainer = document.getElementById(targetAccordion);
-            const openAccordion: HTMLElement | null = menuContainer
-              ? menuContainer.querySelector('[data-state="open"] > button')
-              : null;
+  useEffect(() => {
+    if (activeTriggerRef.current) {
+      setTimeout(() => {
+        activeTriggerRef.current?.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
+      }, 200);
+    }
+  }, []);
 
-            if (openAccordion) {
-              menuContainer?.scrollTo({
-                top: openAccordion.offsetTop,
-                behavior: 'smooth',
-              });
-            }
-          }, 200);
-        }
-      },
-      content: (
-        <div key={product.name} className="flex flex-col gap-5 px-4 pt-3">
-          {product.showJumpLink ? (
-            <a
-              href="#"
-              className="text-gui-blue-default-light text-[11px]"
-              onClick={(e) => {
-                e.preventDefault();
-                if (typeof document !== 'undefined') {
-                  const element = document.getElementById(apiReferencesId);
-                  if (element) {
-                    element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-                  }
-                }
-              }}
-            >
-              Jump to API references
-            </a>
-          ) : null}
-          {renderProductContent(product.content, 'content', inHeader, index)}
-          {product.api.length > 0 ? (
-            <div
-              id={apiReferencesId}
-              className="flex flex-col gap-2.5 md:gap-2 rounded-lg bg-neutral-100 border border-neutral-300 p-4 mb-6 md:-mx-4"
+  return (
+    <Accordion.Root
+      type="multiple"
+      className={cn(layer > 0 && 'pl-3')}
+      defaultValue={[`item-${previousTree.join('-')}`]}
+    >
+      {content.map((page, index) => {
+        const hasDeeperLayer = 'pages' in page && page.pages;
+        const isActiveLink = 'link' in page && page.link === activePage.page.link;
+
+        return (
+          <Accordion.Item key={page.name} value={`item-${tree.join('-')}-${index}`}>
+            <Accordion.Trigger
+              ref={isActiveLink ? activeTriggerRef : null}
+              className={cn(accordionTriggerClassName, 'font-medium rounded-lg', {
+                'border-l border-neutral-300 dark:border-neutral-1000 hover:border-neutral-500 dark:hover:border-neutral-800 rounded-l-none':
+                  layer > 0,
+                'border-orange-600 bg-orange-100 hover:bg-orange-100': isActiveLink,
+              })}
             >
-              {renderProductContent(product.api, 'api', inHeader, index)}
-            </div>
-          ) : null}
-        </div>
-      ),
-    };
-  });
-
-  // Add a Home entry at the start of navData if inHeader is true
-  if (inHeader) {
-    navData.unshift({
-      name: 'Home',
-      content: null,
-      onClick: () => {
-        navigate('/docs');
-      },
-      interactive: false,
-    });
-  }
-
-  return navData;
+              {hasDeeperLayer ? (
+                <div className={cn(accordionLinkClassName, 'flex-1')}>
+                  <span>{page.name}</span>
+                </div>
+              ) : (
+                'link' in page && (
+                  <Link
+                    className={cn(
+                      accordionLinkClassName,
+                      'ui-text-label3 font-medium w-full h-full pr-5',
+                      isActiveLink && 'text-neutral-1300 dark:text-neutral-000 font-bold',
+                    )}
+                    tabIndex={-1}
+                    to={page.link}
+                  >
+                    <span>{page.name}</span>
+                  </Link>
+                )
+              )}
+              {hasDeeperLayer ? (
+                <Icon name="icon-gui-chevron-right-outline" additionalCSS={iconClassName} size="12px" />
+              ) : null}
+            </Accordion.Trigger>
+            {hasDeeperLayer && (
+              <Accordion.Content className={cn(accordionContentClassName, layer === 0 && 'pt-1')}>
+                <ChildAccordion content={page.pages} layer={layer + 1} tree={[...tree, index]} />
+              </Accordion.Content>
+            )}
+          </Accordion.Item>
+        );
+      })}
+    </Accordion.Root>
+  );
 };
 
 const LeftSidebar = ({ inHeader = false }: LeftSidebarProps) => {
   const { activePage } = useLayoutContext();
-  const [hasScrollbar, setHasScrollbar] = useState(false);
-  const sidebarRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const checkScrollbar = throttle(() => {
-      if (sidebarRef.current) {
-        setHasScrollbar(sidebarRef.current.offsetWidth > sidebarRef.current.clientWidth);
-      }
-    }, 150);
-
-    checkScrollbar();
-    window.addEventListener('resize', checkScrollbar);
-
-    return () => {
-      window.removeEventListener('resize', checkScrollbar);
-    };
-  }, []);
-
-  const productNavData = useMemo(() => constructProductNavData(activePage.tree, inHeader), [activePage.tree, inHeader]);
+  const [openProduct, setOpenProduct] = useState<string | null>(`item-${activePage.tree[0]?.index}`);
 
   return (
-    <Accordion
-      ref={sidebarRef}
-      className={cn(
-        !inHeader && [sidebarAlignmentClasses, 'hidden md:block md:-mx-4'],
-        'overflow-y-auto',
-        hasScrollbar ? 'md:pr-2' : 'md:pr-4',
-      )}
-      style={!inHeader ? sidebarAlignmentStyles : {}}
-      id={inHeader ? 'mobile-nav' : 'left-nav'}
-      data={productNavData}
-      {...commonAccordionOptions(null, activePage.tree[0]?.index, true, inHeader)}
-    />
+    <div className={cn('sticky top-16 h-full', inHeader ? 'w-full' : 'w-[280px] hidden md:block')}>
+      <div
+        id={inHeader ? 'inkeep-search-mobile-mount' : 'inkeep-search-mount'}
+        className={cn(
+          'p-1 bg-neutral-100 dark:bg-neutral-1200',
+          inHeader ? 'sticky top-0' : 'border-r border-neutral-300 dark:border-neutral-1000',
+        )}
+      ></div>
+      <Accordion.Root
+        type="single"
+        collapsible
+        defaultValue={`item-${activePage.tree[0]?.index}`}
+        className={cn(
+          'bg-neutral-000 dark:bg-neutral-1300 overflow-y-auto',
+          inHeader
+            ? 'w-full h-[calc(100dvh-64px-128px)]'
+            : 'w-[280px] h-[calc(100dvh-64px-44px)] border-r border-neutral-300 dark:border-neutral-1000',
+        )}
+        onValueChange={(value) => {
+          setOpenProduct(value);
+        }}
+      >
+        {Object.entries(productData).map(([productKey, productObj], index) => {
+          const isActive = openProduct === `item-${index}`;
+
+          return (
+            <Accordion.Item
+              key={productKey}
+              value={`item-${index}`}
+              className="border-b border-neutral-300 dark:border-neutral-1000"
+            >
+              <Accordion.Trigger
+                className={cn(
+                  'group/accordion-trigger z-10',
+                  accordionTriggerClassName,
+                  'data-[state=open]:border-b data-[state=open]:sticky data-[state=open]:top-0 [&[data-state=open]_svg]:text-orange-600 h-12 px-4 py-3 font-bold',
+                  isActive && 'text-neutral-1300 dark:text-neutral-000',
+                )}
+              >
+                <div className="flex-1 flex items-center gap-2">
+                  <Icon
+                    name={isActive ? productObj.nav.icon.open : productObj.nav.icon.closed}
+                    additionalCSS={cn(
+                      iconClassName,
+                      isActive
+                        ? 'text-orange-600'
+                        : 'text-neutral-900 dark:text-neutral-400 group-hover/accordion-trigger:text-neutral-1300 dark:group-hover/accordion-trigger:text-neutral-000',
+                    )}
+                    size="20px"
+                  />
+                  <span>{productObj.nav.name}</span>
+                </div>
+                <Icon
+                  name="icon-gui-chevron-right-outline"
+                  additionalCSS={cn(iconClassName, '!text-neutral-900 dark:!text-neutral-400')}
+                  size="12px"
+                />
+              </Accordion.Trigger>
+              <Accordion.Content className={cn(accordionContentClassName, 'px-2 py-3')}>
+                <ChildAccordion content={productObj.nav.content} layer={0} tree={[index]} />
+              </Accordion.Content>
+            </Accordion.Item>
+          );
+        })}
+      </Accordion.Root>
+    </div>
   );
 };
 
diff --git a/src/components/Layout/MDXWrapper.tsx b/src/components/Layout/MDXWrapper.tsx
index 5e74554bad..df9f782c45 100644
--- a/src/components/Layout/MDXWrapper.tsx
+++ b/src/components/Layout/MDXWrapper.tsx
@@ -1,5 +1,4 @@
 import React, {
-  PropsWithChildren,
   useState,
   createContext,
   isValidElement,
@@ -13,26 +12,30 @@ import { navigate, PageProps } from 'gatsby';
 import CodeSnippet from '@ably/ui/core/CodeSnippet';
 import type { CodeSnippetProps, SDKType } from '@ably/ui/core/CodeSnippet';
 import cn from '@ably/ui/core/utils/cn';
+
 import { getRandomChannelName } from '../blocks/software/Code/get-random-channel-name';
 
-import PageTitle from '../PageTitle';
+import If from './mdx/If';
+import { useCopyableHeaders } from './mdx/headers';
+import Table from './mdx/Table';
+import { Tiles } from './mdx/tiles';
+import { PageHeader } from './mdx/PageHeader';
+import Admonition from './mdx/Admonition';
+
 import { Frontmatter, PageContextType } from './Layout';
+import { ActivePage } from './utils/nav';
+
 import { MarkdownProvider } from '../Markdown';
+
 import Article from '../Article';
-import If from './mdx/If';
-import { useCopyableHeaders } from './mdx/headers';
+import { Head } from '../Head';
+
+import UserContext from 'src/contexts/user-context';
 import { useLayoutContext } from 'src/contexts/layout-context';
-import Aside from '../blocks/dividers/Aside';
-import { HtmlComponentPropsData } from '../html-component-props';
 import { languageData } from 'src/data/languages';
-import { ActivePage } from './utils/nav';
-import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from './mdx/tables';
-import { Tiles } from './mdx/tiles';
-import { Head } from '../Head';
 import { useSiteMetadata } from 'src/hooks/use-site-metadata';
-import { ProductName } from 'src/templates/template-data';
 import { getMetaTitle } from '../common/meta-title';
-import UserContext from 'src/contexts/user-context';
+import { ProductName } from 'src/templates/template-data';
 
 type MDXWrapperProps = PageProps<unknown, PageContextType>;
 
@@ -47,6 +50,8 @@ type Replacement = {
   replacer: () => string;
 };
 
+type ElementProps = { className?: string; children?: ReactNode };
+
 const SDKContext = createContext<SDKContextType | undefined>(undefined);
 
 const useSDK = () => {
@@ -114,10 +119,12 @@ const WrappedCodeSnippet: React.FC<{ activePage: ActivePage } & CodeSnippetProps
       return null;
     }
 
-    const preElement = child as ReactElement<{ children?: ReactNode }>;
-    const codeElement = isValidElement(preElement.props?.children) ? (preElement.props.children as ReactElement) : null;
+    const preElement = child as ReactElement<ElementProps>;
+    const codeElement = isValidElement(preElement.props?.children)
+      ? (preElement.props.children as ReactElement<ElementProps>)
+      : null;
 
-    if (!codeElement || !codeElement.props?.className) {
+    if (!codeElement || !codeElement.props.className) {
       return null;
     }
 
@@ -149,15 +156,6 @@ const WrappedCodeSnippet: React.FC<{ activePage: ActivePage } & CodeSnippetProps
   );
 };
 
-const WrappedAside = (props: PropsWithChildren<{ 'data-type': string }>) => {
-  return (
-    <Aside
-      attribs={{ 'data-type': props['data-type'] }}
-      data={(<>{props.children}</>) as unknown as HtmlComponentPropsData}
-    />
-  );
-};
-
 const META_DESCRIPTION_FALLBACK = `Ably provides a suite of APIs to build, extend, and deliver powerful digital experiences in realtime. Organizations like Toyota, Bloomberg, HubSpot, and Hopin depend on Ably’s platform to offload the growing complexity of business-critical realtime data synchronization at global scale.`;
 const META_PRODUCT_FALLBACK = 'pub_sub';
 
@@ -212,17 +210,18 @@ const MDXWrapper: React.FC<MDXWrapperProps> = ({ children, pageContext, location
           components={{
             If,
             Code: (props) => <WrappedCodeSnippet activePage={activePage} apiKeys={apiKeys} {...props} />,
-            Aside: WrappedAside,
-            table: Table,
-            thead: TableHead,
-            tbody: TableBody,
-            tr: TableRow,
-            th: TableHeader,
-            td: TableCell,
+            Aside: Admonition,
+            Table,
+            table: Table.Root,
+            thead: Table.Header,
+            tbody: Table.Body,
+            tr: Table.Row,
+            th: Table.Head,
+            td: Table.Cell,
             Tiles,
           }}
         >
-          <PageTitle>{title}</PageTitle>
+          <PageHeader title={title} description={description} />
           {children}
         </MarkdownProvider>
       </Article>
diff --git a/src/components/Layout/RightSidebar.test.tsx b/src/components/Layout/RightSidebar.test.tsx
index 10f33e66cc..25659bfae9 100644
--- a/src/components/Layout/RightSidebar.test.tsx
+++ b/src/components/Layout/RightSidebar.test.tsx
@@ -13,10 +13,6 @@ jest.mock('@reach/router', () => ({
   useLocation: jest.fn(),
 }));
 
-jest.mock('./LanguageSelector', () => ({
-  LanguageSelector: jest.fn(() => <div>LanguageSelector</div>),
-}));
-
 const mockUseLayoutContext = useLayoutContext as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 
@@ -62,83 +58,29 @@ describe('RightSidebar', () => {
     document.body.innerHTML = '';
   });
 
-  it('does not render the LanguageSelector component when activePage.languages is empty', () => {
-    render(<RightSidebar />);
-    expect(screen.queryByText('LanguageSelector')).not.toBeInTheDocument();
-  });
-
-  it('renders the LanguageSelector component when activePage.languages is not empty', () => {
-    mockUseLayoutContext.mockReturnValue({
-      activePage: {
-        page: {
-          name: 'Test Page',
-          link: '/test-path',
-        },
-        tree: [0],
-        languages: ['javascript'],
-      },
-      products: [['pubsub']],
-    });
-    render(<RightSidebar />);
-    expect(screen.getByText('LanguageSelector')).toBeInTheDocument();
-  });
-
   it('renders headers from the article', () => {
     render(<RightSidebar />);
     expect(screen.getByRole('heading', { level: 2, name: 'Header 1' })).toBeInTheDocument();
     expect(screen.getByRole('heading', { level: 3, name: 'Header 2' })).toBeInTheDocument();
   });
 
-  it('sets active header on click', async () => {
-    render(<RightSidebar />);
-    const headerLink = await screen.findByRole('link', { name: 'Header 1' });
-    fireEvent.click(headerLink);
-    expect(headerLink).toHaveClass('text-neutral-1300');
-  });
+  it('renders sidebar links for article headers', () => {
+    const { container } = render(<RightSidebar />);
 
-  it('renders external links', () => {
-    render(<RightSidebar />);
-    expect(screen.getByText('Edit on GitHub')).toBeInTheDocument();
-    expect(screen.getByText('Request changes')).toBeInTheDocument();
-  });
+    // Verify sidebar links are created with correct IDs
+    const header1Link = container.querySelector('#sidebar-header1');
+    const header2Link = container.querySelector('#sidebar-header2');
 
-  it('renders a textile Github link when the page is textile', () => {
-    mockUseLayoutContext.mockReturnValue({
-      activePage: {
-        page: {
-          name: 'Test Page',
-          link: '/test-path',
-        },
-        template: 'textile',
-        tree: [0],
-        languages: [],
-      },
-      products: [['pubsub']],
-    });
-    render(<RightSidebar />);
-
-    const githubLink = screen.getByTestId('external-github-link');
-    expect(githubLink).toBeInTheDocument();
-    expect(githubLink).toHaveAttribute('href', 'https://github.com/ably/docs/blob/main/content/test-path.textile');
+    expect(header1Link).toBeInTheDocument();
+    expect(header2Link).toBeInTheDocument();
+    expect(header1Link).toHaveAttribute('href', '#header1');
+    expect(header2Link).toHaveAttribute('href', '#header2');
   });
 
-  it('renders an MDX Github link when the page is MDX', () => {
-    mockUseLayoutContext.mockReturnValue({
-      activePage: {
-        page: {
-          name: 'Test Page',
-          link: '/test-path',
-        },
-        template: 'mdx',
-        tree: [0],
-        languages: [],
-      },
-      products: [['pubsub']],
-    });
+  it('sets active header on click', async () => {
     render(<RightSidebar />);
-
-    const githubLink = screen.getByTestId('external-github-link');
-    expect(githubLink).toBeInTheDocument();
-    expect(githubLink).toHaveAttribute('href', 'https://github.com/ably/docs/blob/main/src/pages/docs/test-path.mdx');
+    const headerLink = await screen.findByRole('link', { name: 'Header 1' });
+    fireEvent.click(headerLink);
+    expect(headerLink).toHaveClass('text-neutral-1300');
   });
 });
diff --git a/src/components/Layout/RightSidebar.tsx b/src/components/Layout/RightSidebar.tsx
index 824f580fc8..70a14a57de 100644
--- a/src/components/Layout/RightSidebar.tsx
+++ b/src/components/Layout/RightSidebar.tsx
@@ -1,256 +1,298 @@
-import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { useLocation, WindowLocation } from '@reach/router';
+import { useEffect, useRef, useState, useCallback } from 'react';
+import { useLocation } from '@reach/router';
 import cn from '@ably/ui/core/utils/cn';
-import Icon from '@ably/ui/core/Icon';
-import { IconName } from '@ably/ui/core/Icon/types';
 import { componentMaxHeight, HEADER_HEIGHT, HEADER_BOTTOM_MARGIN } from '@ably/ui/core/utils/heights';
-import Tooltip from '@ably/ui/core/Tooltip';
-import { track } from '@ably/ui/core/insights';
-
-import { LanguageSelector } from './LanguageSelector';
-import { useLayoutContext } from 'src/contexts/layout-context';
-import { productData } from 'src/data';
-import { LanguageKey } from 'src/data/languages/types';
-import { languageInfo } from 'src/data/languages';
-import { ActivePage, sidebarAlignmentClasses, sidebarAlignmentStyles } from './utils/nav';
 import { INKEEP_ASK_BUTTON_HEIGHT } from './utils/heights';
 
 type SidebarHeader = {
   id: string;
   type: string;
   label: string;
+  stepNumber?: string;
 };
 
-const githubBasePathTextile = 'https://github.com/ably/docs/blob/main/content';
-const githubBasePathMDX = 'https://github.com/ably/docs/blob/main/src/pages/docs';
-const requestBasePath = 'https://github.com/ably/docs/issues/new';
-
-const customGithubPaths = {
-  '/how-to/pub-sub': 'https://github.com/ably/docs/blob/main/how-tos/pub-sub/how-to.mdx',
-} as Record<string, string>;
-
-const externalLinks = (
-  activePage: ActivePage,
-  location: WindowLocation,
-): { label: string; icon: IconName; link: string; type: string }[] => {
-  if (!activePage) {
-    return [];
+const getHeaderId = (element: Element) =>
+  element.querySelector('a')?.getAttribute('id') ?? element.querySelector('a')?.getAttribute('name') ?? element.id;
+
+// Paddings for various indentations of headers, 12px apart
+const INDENT_MAP: Record<string, string> = {
+  H2: 'pl-4',
+  H3: 'pl-7',
+  H4: 'pl-10',
+  H5: 'pl-[52px]', // there is no pl-13
+  H6: 'pl-16',
+} as const;
+
+// Paddings for various indentations of stepped headers, 12px apart with a 1rem buffer for the step indicators
+const STEPPED_INDENT_MAP: Record<string, string> = {
+  H2: 'pl-8',
+  H3: 'pl-11',
+  H4: 'pl-14',
+  H5: 'pl-[68px]', // there is no pl-17
+  H6: 'pl-20',
+} as const;
+
+// The height of a single line row
+const FALLBACK_HEADER_HEIGHT = 28;
+
+const getElementIndent = (type: string, isStepped: boolean) => {
+  if (isStepped && STEPPED_INDENT_MAP[type]) {
+    return STEPPED_INDENT_MAP[type];
   }
 
-  let githubEditPath = '#';
-  const githubPathName = location.pathname.replace('docs/', '');
-
-  if (customGithubPaths[githubPathName]) {
-    githubEditPath = customGithubPaths[githubPathName];
-  } else if (activePage.template === 'mdx') {
-    githubEditPath =
-      githubBasePathMDX + (activePage.page.index ? `${githubPathName}/index.mdx` : `${githubPathName}.mdx`);
-  } else {
-    githubEditPath =
-      githubBasePathTextile + (activePage.page.index ? `${githubPathName}/index.textile` : `${githubPathName}.textile`);
+  if (INDENT_MAP[type]) {
+    return INDENT_MAP[type];
   }
 
-  const language = activePage.languages.length > 0 ? activePage.language : null;
-  const requestTitle = `Change request for: ${activePage.page.link}`;
-  const requestBody = encodeURIComponent(`
-  **Page name**: ${activePage.page.name}
-  **URL**: [${activePage.page.link}](https://ably.com${activePage.page.link})
-  ${language && languageInfo[language] ? `Language: **${languageInfo[language].label}**` : ''}
-
-  **Requested change or enhancement**:
-`);
-
-  return [
-    {
-      label: 'Edit on GitHub',
-      icon: 'icon-social-github-mono',
-      link: githubEditPath,
-      type: 'github',
-    },
-    {
-      label: 'Request changes',
-      icon: 'icon-gui-hand-raised-outline',
-      link: `${requestBasePath}?title=${requestTitle}&body=${requestBody}`,
-      type: 'request',
-    },
-  ];
-};
-
-const llmLinks = (
-  activePage: ActivePage,
-  language: LanguageKey,
-): { model: string; label: string; icon: IconName; link: string }[] => {
-  const prompt = `Tell me more about ${activePage.product ? productData[activePage.product]?.nav.name : 'Ably'}'s '${activePage.page.name}' feature from https://ably.com${activePage.page.link}${language ? ` for ${languageInfo[language]?.label}` : ''}`;
-  const gptPath = `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`;
-  const claudePath = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
-
-  return [
-    { model: 'gpt', label: 'ChatGPT', icon: 'icon-tech-openai', link: gptPath },
-    { model: 'claude', label: 'Claude (must be logged in)', icon: 'icon-tech-claude-mono', link: claudePath },
-  ];
-};
-
-const getHeaderId = (element: Element) => {
-  const customId = element.querySelector('a')?.getAttribute('id') ?? element.querySelector('a')?.getAttribute('name');
-  return customId ?? element.id;
+  return 'pl-0';
 };
 
 const RightSidebar = () => {
   const location = useLocation();
-  const { activePage } = useLayoutContext();
   const [headers, setHeaders] = useState<SidebarHeader[]>([]);
   const [activeHeader, setActiveHeader] = useState<Pick<SidebarHeader, 'id'>>({
     id: location.hash ? location.hash.slice(1) : '#',
   });
+  const [isStepped, setIsStepped] = useState<boolean>(false);
+  const [sidebarDimensions, setSidebarDimensions] = useState<{
+    indicatorHeights: number[];
+    indicatorPosition: { yOffset: number; height: number };
+  }>({
+    indicatorHeights: [],
+    indicatorPosition: { yOffset: 0, height: 28 },
+  });
   const intersectionObserver = useRef<IntersectionObserver | undefined>(undefined);
   const manualSelection = useRef<boolean>(false);
-  const showLanguageSelector = activePage?.languages.length > 0;
-  const language = new URLSearchParams(location.search).get('lang') as LanguageKey;
-
-  const handleHeaderClick = useCallback((headerId: string) => {
-    // Set manual selection flag to prevent intersection observer updates
-    manualSelection.current = true;
-    setActiveHeader({ id: headerId });
-
-    // Reset the flag after scroll animation completes
-    setTimeout(() => {
-      manualSelection.current = false;
-    }, 1000);
+
+  // Extract headers from article element
+  const extractHeaders = useCallback((articleElement: Element): { headers: SidebarHeader[]; hasSteps: boolean } => {
+    const headerElements = articleElement.querySelectorAll('h2, h3, h4, h5, h6');
+    let hasSteps = false;
+
+    const headers = Array.from(headerElements)
+      .filter((element) => element.id && element.textContent)
+      .map((header) => {
+        const stepNumber = header.querySelector('[data-step]')?.getAttribute('data-step');
+        if (stepNumber) {
+          hasSteps = true;
+        }
+
+        return {
+          type: header.tagName,
+          label: header.textContent ?? '',
+          id: getHeaderId(header),
+          stepNumber: stepNumber || undefined,
+        };
+      });
+
+    return { headers, hasSteps };
   }, []);
 
+  // Callback that fires when header intersects with the viewport
+  const handleIntersect = useCallback(
+    (
+      entries: {
+        target: Element;
+        isIntersecting: boolean;
+        boundingClientRect: DOMRect;
+      }[],
+    ) => {
+      // Skip updates if the header was manually selected
+      if (manualSelection.current) {
+        return;
+      }
+
+      // Get all currently intersecting headers
+      const intersectingEntries = entries.filter((entry) => entry.isIntersecting);
+
+      if (intersectingEntries.length > 0) {
+        // Find the entry nearest to the top of the viewport
+        const topEntry = intersectingEntries.reduce((nearest, current) => {
+          return current.boundingClientRect.top < nearest.boundingClientRect.top ? current : nearest;
+        }, intersectingEntries[0]);
+
+        if (topEntry.target.id) {
+          setActiveHeader({
+            id: getHeaderId(topEntry.target),
+          });
+        }
+      }
+    },
+    [],
+  );
+
+  // Setup intersection observer and update headers when page changes
   useEffect(() => {
     const articleElement = document.querySelector('article');
     if (!articleElement) {
       return;
     }
 
-    const updateHeaders = () => {
-      const headerElements = articleElement.querySelectorAll('h2, h3, h6') ?? [];
-      const headerData = Array.from(headerElements)
-        .filter((element) => element.id && element.textContent)
-        .map((header) => {
-          const customId =
-            header.querySelector('a')?.getAttribute('id') ?? header.querySelector('a')?.getAttribute('name');
-
-          return {
-            type: header.tagName,
-            label: header.textContent ?? '',
-            id: customId ?? header.id,
-            height: header.getBoundingClientRect().height,
-          };
-        });
+    // Extract and set headers
+    const { headers: headerData, hasSteps } = extractHeaders(articleElement);
+    setHeaders(headerData);
+    setIsStepped(hasSteps);
 
-      setHeaders(headerData);
+    // Set the first header as active when page changes
+    if (headerData.length > 0) {
+      setActiveHeader({ id: headerData[0].id });
+    }
 
-      // Set the first header as active when page changes
-      if (headerData.length > 0) {
-        setActiveHeader({ id: headerData[0].id });
-      }
+    // Create intersection observer
+    const observer = new IntersectionObserver(handleIntersect, {
+      root: null,
+      threshold: 0,
+      rootMargin: '-64px 0px -80% 0px', // Account for header and focus on top of viewport
+    });
 
-      const handleIntersect = (
-        entries: {
-          target: Element;
-          isIntersecting: boolean;
-          boundingClientRect: DOMRect;
-        }[],
-      ) => {
-        // Skip updates if manual selection is active
-        if (manualSelection.current) {
-          return;
-        }
+    // Observe all headers
+    const headerElements = articleElement.querySelectorAll('h2, h3, h4, h5, h6');
+    headerElements.forEach((header) => observer.observe(header));
 
-        // Get all currently intersecting headers
-        const intersectingEntries = entries.filter((entry) => entry.isIntersecting);
+    // Store observer reference for cleanup
+    intersectionObserver.current = observer;
 
-        if (intersectingEntries.length > 0) {
-          // Find the entry nearest to the top of the viewport
-          const topEntry = intersectingEntries.reduce((nearest, current) => {
-            return current.boundingClientRect.top < nearest.boundingClientRect.top ? current : nearest;
-          }, intersectingEntries[0]);
+    // Cleanup
+    return () => {
+      observer.disconnect();
+    };
+  }, [location.pathname, location.search, extractHeaders, handleIntersect]);
 
-          if (topEntry.target.id) {
-            setActiveHeader({
-              id: getHeaderId(topEntry.target),
-            });
-          }
-        }
-      };
-
-      // Create a new observer with configuration focused on the top of the viewport
-      intersectionObserver.current = new IntersectionObserver(handleIntersect, {
-        root: null,
-        // Using a small threshold to detect partial visibility
-        threshold: 0,
-        // Account for 64px header bar at top and focus on top portion of viewport
-        rootMargin: '-64px 0px -80% 0px',
-      });
+  // Calculate sidebar dimensions after DOM is ready
+  useEffect(() => {
+    if (headers.length === 0) {
+      return;
+    }
 
-      // Observe each header
-      headerElements.forEach((header) => {
-        intersectionObserver.current?.observe(header);
+    const calculateDimensions = () => {
+      // Calculate step indicator heights (for stepped mode)
+      const indicatorHeights = isStepped
+        ? headers.map((header) => {
+            const sidebarElement = document.getElementById(`sidebar-${header.id}`);
+            const sidebarElementDimensions = sidebarElement?.getBoundingClientRect();
+            return sidebarElementDimensions?.height ?? FALLBACK_HEADER_HEIGHT;
+          })
+        : [];
+
+      // Calculate indicator position (for non-stepped mode)
+      const sidebarElement = document.getElementById(`sidebar-${activeHeader?.id}`);
+      const sidebarParentElement = sidebarElement?.parentElement;
+      const sidebarElementDimensions = sidebarElement?.getBoundingClientRect();
+
+      const indicatorPosition =
+        sidebarParentElement && sidebarElementDimensions
+          ? {
+              yOffset: Math.abs(sidebarParentElement.getBoundingClientRect().top - sidebarElementDimensions.top),
+              height: sidebarElementDimensions.height,
+            }
+          : { yOffset: 0, height: FALLBACK_HEADER_HEIGHT };
+
+      setSidebarDimensions({
+        indicatorHeights,
+        indicatorPosition,
       });
-
-      return () => {
-        intersectionObserver.current?.disconnect();
-      };
     };
 
-    updateHeaders();
-  }, [location.pathname, location.search]);
+    calculateDimensions();
 
-  const highlightPosition = useMemo(() => {
-    const sidebarElement =
-      typeof document !== 'undefined' ? document.getElementById(`sidebar-${activeHeader?.id}`) : null;
-    const sidebarParentElement = sidebarElement?.parentElement;
-    const sidebarElementDimensions = sidebarElement?.getBoundingClientRect();
+    window.addEventListener('resize', calculateDimensions);
 
-    if (!sidebarParentElement || !sidebarElementDimensions) {
-      return {
-        yOffset: 0,
-        height: 21,
-      };
-    }
+    // Watch each individual sidebar item for dimension changes (catches async updates, i.e. font pop-in)
+    const resizeObservers: ResizeObserver[] = [];
+    headers.forEach((header) => {
+      const sidebarElement = document.getElementById(`sidebar-${header.id}`);
+      if (sidebarElement) {
+        const observer = new ResizeObserver(() => {
+          calculateDimensions();
+        });
+        observer.observe(sidebarElement);
+        resizeObservers.push(observer);
+      }
+    });
 
-    return {
-      yOffset: Math.abs(sidebarParentElement.getBoundingClientRect().top - sidebarElementDimensions?.top),
-      height: sidebarElementDimensions?.height,
+    return () => {
+      window.removeEventListener('resize', calculateDimensions);
+      resizeObservers.forEach((observer) => observer.disconnect());
     };
-  }, [activeHeader]);
+  }, [headers, isStepped, activeHeader]);
+
+  const { indicatorHeights, indicatorPosition } = sidebarDimensions;
+
+  const steppedHeader = useCallback(
+    (header: SidebarHeader, index: number) => (
+      <div
+        key={[header.id, 'step-indicator', index].join('-')}
+        className="flex items-center justify-center"
+        style={{
+          height: indicatorHeights[index],
+        }}
+      >
+        <div
+          className={cn(
+            'bg-neutral-000 dark:bg-neutral-1300',
+            header.stepNumber ? 'py-0.5' : 'py-1',
+            index === 0 && 'pt-[100%] -mt-[75%]',
+            index === headers.length - 1 && 'pb-[100%] -mb-[75%]',
+          )}
+        >
+          <div
+            className={cn(
+              'flex items-center justify-center rounded-full text-[10px] font-semibold transition-colors bg-neutral-300 dark:bg-neutral-1000 text-neutral-1000 dark:text-neutral-300',
+              header.id === activeHeader?.id && 'bg-orange-600 text-neutral-000',
+              header.stepNumber ? 'size-4' : 'size-2',
+            )}
+          >
+            {header.stepNumber ?? ''}
+          </div>
+        </div>
+      </div>
+    ),
+    [indicatorHeights, headers.length, activeHeader?.id],
+  );
 
   return (
     <div
-      className={cn(sidebarAlignmentClasses, 'md:pb-20 right-8 md:right-0')}
+      className="absolute md:sticky w-60 my-10 top-[104px] right-6"
       style={{
-        ...sidebarAlignmentStyles,
         height: componentMaxHeight(HEADER_HEIGHT, HEADER_BOTTOM_MARGIN, INKEEP_ASK_BUTTON_HEIGHT),
       }}
     >
-      {showLanguageSelector ? <LanguageSelector /> : null}
-      <div className="hidden md:flex flex-col h-full">
+      <div className="hidden md:flex flex-col h-full overflow-y-auto">
         {headers.length > 0 ? (
           <>
-            <p className="ui-text-overline2 text-neutral-700 mb-3">On this page</p>
-            <div className="flex gap-4 overflow-auto shadow-[0.5px_0px_var(--color-neutral-000)_inset,1.5px_0px_var(--color-neutral-300)_inset] py-0.5 pl-4">
-              <div
-                className="h-[1.125rem] -ml-4 w-0.5 bg-neutral-1300 dark:bg-neutral-000 rounded-full transition-[transform,height,colors] z-0"
-                style={{
-                  transform: `translateY(${highlightPosition.yOffset}px)`,
-                  height: `${highlightPosition.height}px`,
-                }}
-              ></div>
-              {/* 18px derives from the 2px width of the grey tracker bar plus the 16px between it and the menu items */}
-              <div className="flex flex-col gap-2 w-[calc(100%-18px)] pr-4">
+            <p className="ui-text-label4 font-semibold text-neutral-1300 dark:text-neutral-000 mb-3">On this page</p>
+            <div
+              className={cn(
+                'flex shadow-[0.5px_0px_var(--color-neutral-000)_inset,1.5px_0px_var(--color-neutral-300)_inset]',
+                isStepped && 'ml-2',
+              )}
+            >
+              {isStepped ? (
+                <div className="-ml-[7px]">{headers.map((header, index) => steppedHeader(header, index))}</div>
+              ) : (
+                <div
+                  className="h-7 w-0.5 bg-orange-600 rounded-full transition-[transform,height,colors] z-0"
+                  style={{
+                    transform: `translateY(${indicatorPosition.yOffset}px)`,
+                    height: `${indicatorPosition.height}px`,
+                  }}
+                ></div>
+              )}
+              <div className="flex flex-col">
                 {headers.map((header, index) => (
                   <a
                     href={`#${header.id}`}
-                    key={[location.pathname, header.id, language, index].join('-')}
+                    key={[location.pathname, header.id, index].join('-')}
                     id={`sidebar-${header.id}`}
+                    tabIndex={0}
+                    data-heading={header.type.toLowerCase()}
                     className={cn(
-                      'ui-text-label4 font-medium text-neutral-900 dark:text-neutral-400 transition-colors scroll-smooth hover:text-neutral-1300 dark:hover:text-neutral-000',
+                      'ui-text-label4 font-medium text-neutral-900 dark:text-neutral-400 hover:text-neutral-1300 dark:hover:text-neutral-000 active:text-neutral-1100 dark:active:text-neutral-200 py-[5px] pr-2 transition-colors focus-base',
                       { 'text-neutral-1300 dark:text-neutral-000': header.id === activeHeader?.id },
-                      { 'ml-2': header.type !== 'H2' },
+                      isStepped && '-ml-4',
+                      getElementIndent(header.type, isStepped),
                     )}
-                    onClick={() => handleHeaderClick(header.id)}
+                    onClick={() => setActiveHeader({ id: header.id })}
                   >
                     {header.label}
                   </a>
@@ -259,70 +301,6 @@ const RightSidebar = () => {
             </div>
           </>
         ) : null}
-        <div className="bg-neutral-100 dark:bg-neutral-1200 border border-neutral-300 dark:border-neutral-1000 rounded-lg transition-colors mt-6">
-          {externalLinks(activePage, location).map(({ label, icon, link, type }) => (
-            <a
-              key={label}
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="group/external-link"
-              data-testid={`external-${type}-link`}
-            >
-              <div className="flex items-center p-4 border-b border-neutral-300 dark:border-neutral-1000">
-                <div className="flex-1 flex items-center gap-3">
-                  <Icon
-                    size="20px"
-                    name={icon}
-                    color="text-neutral-900"
-                    additionalCSS="group-hover/external-link:text-neutral-1300 dark:group-hover/external-link:text-neutral-000 transition-colors"
-                  />
-                  <span className="text-p4 font-semibold text-neutral-900 dark:text-neutral-400 group-hover/external-link:text-neutral-1300 dark:group-hover/external-link:text-neutral-000 transition-colors">
-                    {label}
-                  </span>
-                </div>
-                <Icon
-                  name="icon-gui-arrow-top-right-on-square-outline"
-                  color="text-neutral-900"
-                  additionalCSS="group-hover/external-link:text-neutral-1300 dark:group-hover/external-link:text-neutral-000 transition-colors"
-                  size="16px"
-                />
-              </div>
-            </a>
-          ))}
-          <div className="flex items-center p-4 gap-2">
-            <span className="text-p4 font-semibold text-neutral-900 dark:text-neutral-400">Open in </span>
-            {llmLinks(activePage, language).map(({ model, label, icon, link }) => (
-              <a
-                key={model}
-                href={link}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex h-5 ui-theme-dark group/llm-link cursor-pointer"
-                onClick={() => {
-                  track('llm_link_clicked', {
-                    model,
-                    location: location.pathname,
-                    link,
-                  });
-                }}
-              >
-                <Tooltip
-                  content={label}
-                  triggerElement={
-                    <Icon
-                      name={icon}
-                      size="20px"
-                      additionalCSS="transition-colors text-neutral-900 dark:text-neutral-400 group-hover/llm-link:text-neutral-1300 dark:group-hover/llm-link:text-neutral-000"
-                    />
-                  }
-                >
-                  {label}
-                </Tooltip>
-              </a>
-            ))}
-          </div>
-        </div>
       </div>
     </div>
   );
diff --git a/src/components/Layout/mdx/Admonition.tsx b/src/components/Layout/mdx/Admonition.tsx
new file mode 100644
index 0000000000..54ce73c05f
--- /dev/null
+++ b/src/components/Layout/mdx/Admonition.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import cn from '@ably/ui/core/utils/cn';
+
+type AdmonitionVariant =
+  | 'neutral'
+  | 'note'
+  | 'further-reading'
+  | 'important'
+  | 'new'
+  | 'warning'
+  | 'experimental'
+  | 'updated';
+
+interface AdmonitionProps extends React.HTMLAttributes<HTMLElement> {
+  'data-type'?: AdmonitionVariant;
+}
+
+const admonitionConfig: Record<
+  AdmonitionVariant,
+  {
+    borderColor: string;
+    backgroundColor: string;
+    title: string;
+  }
+> = {
+  neutral: {
+    borderColor: 'border-l-neutral-500 dark:border-l-neutral-800',
+    backgroundColor: 'bg-neutral-100 dark:bg-neutral-1200',
+    title: 'Category',
+  },
+  note: {
+    borderColor: 'border-l-blue-500 dark:border-l-blue-400',
+    backgroundColor: 'bg-blue-100 dark:bg-blue-800',
+    title: 'Note',
+  },
+  'further-reading': {
+    borderColor: 'border-l-green-500 dark:border-l-green-400',
+    backgroundColor: 'bg-green-100 dark:bg-green-800',
+    title: 'Further reading',
+  },
+  important: {
+    borderColor: 'border-l-orange-500 dark:border-l-orange-600',
+    backgroundColor: 'bg-orange-100 dark:bg-orange-1000',
+    title: 'Important',
+  },
+  new: {
+    borderColor: 'border-l-yellow-500 dark:border-l-yellow-400',
+    backgroundColor: 'bg-yellow-100 dark:bg-yellow-800',
+    title: 'New',
+  },
+  warning: {
+    borderColor: 'border-l-yellow-500 dark:border-l-yellow-400',
+    backgroundColor: 'bg-yellow-100 dark:bg-yellow-800',
+    title: 'Warning',
+  },
+  experimental: {
+    borderColor: 'border-l-purple-500 dark:border-l-purple-400',
+    backgroundColor: 'bg-purple-100 dark:bg-purple-800',
+    title: 'Experimental',
+  },
+  updated: {
+    borderColor: 'border-l-pink-500 dark:border-l-pink-400',
+    backgroundColor: 'bg-pink-100 dark:bg-pink-800',
+    title: 'Updated',
+  },
+};
+
+const Admonition: React.FC<AdmonitionProps> = ({ 'data-type': dataType = 'note', children, className, ...rest }) => {
+  const { borderColor, backgroundColor, title } = admonitionConfig[dataType] ?? admonitionConfig.note;
+
+  return (
+    <aside
+      {...rest}
+      data-type={dataType}
+      className={cn(
+        'border-l px-6 py-4 my-4 rounded-r-lg text-neutral-1000 dark:text-neutral-300',
+        borderColor,
+        backgroundColor,
+        className,
+      )}
+    >
+      <div className="text-sm leading-relaxed [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&>*:nth-child(2)]:inline [&>*:nth-child(3)]:mt-5">
+        <strong className="font-bold ui-text-p2">{title}: </strong>
+        {children}
+      </div>
+    </aside>
+  );
+};
+
+export default Admonition;
diff --git a/src/components/Layout/mdx/PageHeader.tsx b/src/components/Layout/mdx/PageHeader.tsx
new file mode 100644
index 0000000000..4afde15b11
--- /dev/null
+++ b/src/components/Layout/mdx/PageHeader.tsx
@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import { useLocation } from '@reach/router';
+import * as Tooltip from '@radix-ui/react-tooltip';
+import Icon from '@ably/ui/core/Icon';
+import { IconName } from '@ably/ui/core/Icon/types';
+import { LanguageSelector } from '../LanguageSelector';
+import { track } from '@ably/ui/core/insights';
+import { productData } from 'src/data';
+import { languageInfo } from 'src/data/languages';
+import { useLayoutContext } from 'src/contexts/layout-context';
+import { tooltipContentClassName } from '../utils/styles';
+
+type PageHeaderProps = {
+  title: string;
+  description: string;
+};
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ title, description }) => {
+  const { activePage } = useLayoutContext();
+  const { language, product, page } = activePage;
+  const location = useLocation();
+
+  const llmLinks = useMemo(() => {
+    const prompt = `Tell me more about ${product ? productData[product]?.nav.name : 'Ably'}'s '${page.name}' feature from https://ably.com${page.link}${language ? ` for ${languageInfo[language]?.label}` : ''}`;
+    const gptPath = `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`;
+    const claudePath = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
+
+    return [
+      { model: 'gpt', label: 'ChatGPT', icon: 'icon-tech-openai', link: gptPath },
+      { model: 'claude', label: 'Claude (must be logged in)', icon: 'icon-tech-claude-mono', link: claudePath },
+    ];
+  }, [product, page.name, page.link, language]);
+
+  return (
+    <div className="my-8">
+      <h1 className="ui-text-h1 mb-4">{title}</h1>
+      <p className="text-neutral-800 dark:text-neutral-500 mb-8 font-serif italic tracking-tight text-lg leading-normal">
+        {description}
+      </p>
+
+      <div className="flex items-center gap-5">
+        {activePage.languages.length > 0 && (
+          <div className="flex-shrink-0 border-r border-neutral-300 dark:border-neutral-1000 pr-5">
+            <LanguageSelector />
+          </div>
+        )}
+
+        <div className="flex items-center gap-0.5">
+          <span className="text-p4 font-semibold text-neutral-900 dark:text-neutral-400 mr-1.5">Open in </span>
+          <Tooltip.Provider delayDuration={0} disableHoverableContent>
+            {llmLinks.map(({ model, label, icon, link }) => (
+              <Tooltip.Root key={model}>
+                <Tooltip.Trigger asChild>
+                  <a
+                    key={model}
+                    href={link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex text-neutral-900 dark:text-neutral-400 cursor-pointer p-1.5 focus-base rounded-lg"
+                    onClick={() => {
+                      track('llm_link_clicked', {
+                        model,
+                        location: location.pathname,
+                        link,
+                      });
+                    }}
+                  >
+                    <Icon name={icon as IconName} size="20px" />
+                  </a>
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                  <Tooltip.Content className={tooltipContentClassName}>{label}</Tooltip.Content>
+                </Tooltip.Portal>
+              </Tooltip.Root>
+            ))}
+          </Tooltip.Provider>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Layout/mdx/Table.tsx b/src/components/Layout/mdx/Table.tsx
new file mode 100644
index 0000000000..d7b16cc7c2
--- /dev/null
+++ b/src/components/Layout/mdx/Table.tsx
@@ -0,0 +1,124 @@
+import React from 'react';
+import cn from '@ably/ui/core/utils/cn';
+
+// Table Root Component
+interface TableRootProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+const TableRoot: React.FC<TableRootProps> = ({ children, className, ...props }) => {
+  return (
+    <div className={cn('overflow-x-auto my-4 rounded-lg overflow-hidden', className)} {...props}>
+      <table className="w-full border-separate border-spacing-0 text-left text-sm">{children}</table>
+    </div>
+  );
+};
+
+// Table Header Component
+interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children: React.ReactNode;
+}
+
+const TableHeader: React.FC<TableHeaderProps> = ({ children, className, ...props }) => {
+  return (
+    <thead className={cn('bg-neutral-100 dark:bg-neutral-1200', className)} {...props}>
+      {children}
+    </thead>
+  );
+};
+
+// Table Body Component
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children: React.ReactNode;
+}
+
+const TableBody: React.FC<TableBodyProps> = ({ children, className, ...props }) => {
+  return (
+    <tbody className={className} {...props}>
+      {children}
+    </tbody>
+  );
+};
+
+// Table Row Component
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  children: React.ReactNode;
+}
+
+const TableRow: React.FC<TableRowProps> = ({ children, className, ...props }) => {
+  return (
+    <tr className={cn('first:border-t', className)} {...props}>
+      {children}
+    </tr>
+  );
+};
+
+// Table Head Cell Component
+interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+  children: React.ReactNode;
+}
+
+const TableHead: React.FC<TableHeadProps> = ({ children, className, ...props }) => {
+  return (
+    <th
+      className={cn(
+        'px-4 py-3 text-left font-bold text-neutral-1000 dark:text-neutral-300',
+        'first:rounded-tl-lg last:rounded-tr-lg',
+        'border-t first:border-l last:border-r border-b border-neutral-300 dark:border-neutral-1000',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </th>
+  );
+};
+
+// Table Cell Component
+interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  children: React.ReactNode;
+}
+
+const TableCell: React.FC<TableCellProps> = ({ children, className, ...props }) => {
+  return (
+    <td
+      className={cn(
+        'px-4 py-3 font-medium text-neutral-1000 dark:text-neutral-300',
+        'first:border-l last:border-r border-b border-neutral-300 dark:border-neutral-1000',
+        '[table>tbody:first-child_tr:first-child_&]:border-t',
+        '[table>tbody:first-child_tr:first-child_&]:first:rounded-tl-lg [table>tbody:first-child_tr:first-child_&]:last:rounded-tr-lg',
+        '[tr:last-child_&]:first:rounded-bl-lg [tr:last-child_&]:last:rounded-br-lg',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </td>
+  );
+};
+
+// Table Caption Component (optional)
+interface TableCaptionProps extends React.HTMLAttributes<HTMLTableCaptionElement> {
+  children: React.ReactNode;
+}
+
+const TableCaption: React.FC<TableCaptionProps> = ({ children, className, ...props }) => {
+  return (
+    <caption className={cn('mt-2 text-sm text-neutral-600 dark:text-neutral-700', className)} {...props}>
+      {children}
+    </caption>
+  );
+};
+
+// Compound component pattern
+export const Table = Object.assign(TableRoot, {
+  Root: TableRoot,
+  Header: TableHeader,
+  Body: TableBody,
+  Row: TableRow,
+  Head: TableHead,
+  Cell: TableCell,
+  Caption: TableCaption,
+});
+
+export default Table;
diff --git a/src/components/Layout/mdx/tables.tsx b/src/components/Layout/mdx/tables.tsx
deleted file mode 100644
index 87d96d3fe0..0000000000
--- a/src/components/Layout/mdx/tables.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-
-// Table components with responsive styling
-const Table = (props: React.HTMLAttributes<HTMLTableElement>) => (
-  <div className="overflow-x-auto mb-2">
-    <table className="border-0 border-collapse mb-1 border-spacing-0 ui-text-p2 text-left" {...props} />
-  </div>
-);
-
-const TableHead = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (
-  <thead className="bg-gray-50 border-b" {...props} />
-);
-
-const TableBody = (props: React.HTMLAttributes<HTMLTableSectionElement>) => (
-  <tbody className="border-b divide-neutral-300" {...props} />
-);
-
-const TableRow = (props: React.HTMLAttributes<HTMLTableRowElement>) => (
-  <tr className="hover:bg-gray-50 border-b divide-neutral-300" {...props} />
-);
-
-const TableHeader = (props: React.HTMLAttributes<HTMLTableCellElement>) => (
-  <th
-    className="px-3 py-2 text-left ui-text-p1 font-bold text-neutral-1100 tracking-wider whitespace-nowrap"
-    {...props}
-  />
-);
-
-const TableCell = (props: React.HTMLAttributes<HTMLTableCellElement>) => (
-  <td className="px-3 py-4 align-text-top text-sm" {...props} />
-);
-
-export { Table, TableHead, TableBody, TableRow, TableHeader, TableCell };
diff --git a/src/components/Layout/utils/nav.ts b/src/components/Layout/utils/nav.ts
index 739b098cdd..23bd91c288 100644
--- a/src/components/Layout/utils/nav.ts
+++ b/src/components/Layout/utils/nav.ts
@@ -1,6 +1,3 @@
-import cn from '@ably/ui/core/utils/cn';
-import { AccordionProps } from '@ably/ui/core/Accordion';
-import { HEADER_HEIGHT, componentMaxHeight } from '@ably/ui/core/utils/heights';
 import { ProductData, ProductKey } from 'src/data/types';
 import { NavProductContent, NavProductPage, NavProductPages } from 'src/data/nav/types';
 import { LanguageKey } from 'src/data/languages/types';
@@ -137,40 +134,5 @@ export const formatNavLink = (link: string) => {
   return link.replace(/\/$/, '');
 };
 
-export const commonAccordionOptions = (
-  currentPage: NavProductContent | null,
-  openIndex: number | undefined,
-  topLevel: boolean,
-  inHeader: boolean,
-): Omit<AccordionProps, 'data'> => ({
-  icons: { open: { name: 'icon-gui-chevron-up-micro' }, closed: { name: 'icon-gui-chevron-down-micro' } },
-  options: {
-    autoClose: topLevel,
-    headerCSS: cn(
-      'text-neutral-1000 dark:text-neutral-300 md:text-neutral-900 dark:md:text-neutral-400 hover:text-neutral-1100 active:text-neutral-1000 !py-0 pl-0 !mb-0 transition-colors [&_svg]:!w-6 [&_svg]:!h-6 md:[&_svg]:!w-5 md:[&_svg]:!h-5',
-      {
-        'my-3': topLevel && inHeader,
-        'h-10 ui-text-label1 !font-bold md:ui-text-label4 px-4': topLevel,
-        'min-h-[1.625em] md:min-h-[1.375em] ui-text-label2 !font-semibold md:ui-text-label4': !topLevel,
-      },
-    ),
-    selectedHeaderCSS: '!text-neutral-1300 mb-2',
-    contentCSS: '[&>div]:pb-0',
-    rowIconSize: '20px',
-    defaultOpenIndexes: !inHeader && openIndex !== undefined ? [openIndex] : [],
-    hideBorders: true,
-    fullyOpen: !topLevel && currentPage?.expand,
-  },
-});
-
-export const sidebarAlignmentClasses = 'absolute md:sticky w-60 md:pb-32 pt-6';
-
-export const sidebarAlignmentStyles: React.CSSProperties = {
-  top: HEADER_HEIGHT,
-  height: componentMaxHeight(HEADER_HEIGHT),
-};
-
-export const composeNavLinkId = (link: string) => `nav-link-${formatNavLink(link).replaceAll('/', '-')}`;
-
 export const hierarchicalKey = (id: string, depth: number, tree?: PageTreeNode[]) =>
   [...(tree ? tree.slice(0, depth).map((node) => node.index) : []), id].join('-');
diff --git a/src/components/Layout/utils/styles.ts b/src/components/Layout/utils/styles.ts
new file mode 100644
index 0000000000..08d2e5545f
--- /dev/null
+++ b/src/components/Layout/utils/styles.ts
@@ -0,0 +1,12 @@
+import cn from '@ably/ui/core/utils/cn';
+
+export const tooltipContentClassName = cn(
+  'px-2 py-1 bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1100 ui-text-p3 font-medium rounded-lg relative z-50 mt-2',
+  'data-[state=closed]:animate-[tooltipExit_0.25s_ease-in-out]',
+  'data-[state=delayed-open]:animate-[tooltipEntry_0.25s_ease-in-out]',
+);
+
+export const secondaryButtonClassName =
+  'focus-base flex items-center justify-center gap-2 px-4 py-[7px] h-9 ui-text-label4 text-neutral-1300 dark:text-neutral-000 rounded border border-neutral-400 dark:border-neutral-900 hover:border-neutral-600 dark:hover:border-neutral-700';
+
+export const iconButtonClassName = cn(secondaryButtonClassName, 'w-9 p-0');
diff --git a/src/components/SearchBar/InkeepSearchBar.tsx b/src/components/SearchBar/InkeepSearchBar.tsx
index fe228d382d..ad480272af 100644
--- a/src/components/SearchBar/InkeepSearchBar.tsx
+++ b/src/components/SearchBar/InkeepSearchBar.tsx
@@ -1,11 +1,9 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, forwardRef } from 'react';
 
-export const InkeepSearchBar = ({
-  className,
-  extraInputStyle,
-}: {
-  className: string;
-  extraInputStyle: CSSProperties;
-}) => {
-  return <div id="inkeep-search" className={className} style={extraInputStyle}></div>;
-};
+export const InkeepSearchBar = forwardRef<HTMLDivElement, { className?: string; extraInputStyle?: CSSProperties }>(
+  ({ className, extraInputStyle = {} }, ref) => {
+    return <div ref={ref} id="inkeep-search" className={className} style={extraInputStyle}></div>;
+  },
+);
+
+InkeepSearchBar.displayName = 'InkeepSearchBar';
diff --git a/src/components/ui/Select.tsx b/src/components/ui/Select.tsx
new file mode 100644
index 0000000000..d788a14e74
--- /dev/null
+++ b/src/components/ui/Select.tsx
@@ -0,0 +1,50 @@
+import { useLayoutEffect } from 'react';
+import * as RadixSelect from '@radix-ui/react-select';
+
+// Radix Select insists on locking scrolling when the dropdown is open. This is a workaround to unlock scrolling.
+const useScrollUnlock = () => {
+  useLayoutEffect(() => {
+    const TYPE_LIST = ['wheel', 'scroll', 'touchmove'] as const;
+    const stopper = (e: Event) => e.stopImmediatePropagation();
+
+    const unlockScroll = () => {
+      TYPE_LIST.forEach((type) => {
+        window.addEventListener(type, stopper, { capture: true, passive: false });
+      });
+      document.body.removeAttribute('data-scroll-locked');
+    };
+
+    const cleanupListeners = () => {
+      TYPE_LIST.forEach((type) => {
+        window.removeEventListener(type, stopper, { capture: true });
+      });
+    };
+
+    const mo = new MutationObserver((mutations) => {
+      // Only react if data-scroll-locked was added
+      const wasLocked = mutations.some(
+        (m) => m.type === 'attributes' && document.body.hasAttribute('data-scroll-locked'),
+      );
+      if (wasLocked) {
+        cleanupListeners();
+        unlockScroll();
+      }
+    });
+
+    mo.observe(document.body, { attributes: true, attributeFilter: ['data-scroll-locked'] });
+
+    return () => {
+      mo.disconnect();
+      cleanupListeners();
+    };
+  }, []);
+};
+
+const Root = (props: RadixSelect.SelectProps) => {
+  useScrollUnlock();
+  return <RadixSelect.Root {...props} />;
+};
+
+// Re-export everything from Radix Select, then override Root
+export * from '@radix-ui/react-select';
+export { Root };
diff --git a/src/components/ui/Skeleton.tsx b/src/components/ui/Skeleton.tsx
new file mode 100644
index 0000000000..e6aacaa945
--- /dev/null
+++ b/src/components/ui/Skeleton.tsx
@@ -0,0 +1,13 @@
+import cn from '@ably/ui/core/utils/cn';
+
+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn('bg-neutral-200 dark:bg-neutral-1100 animate-pulse rounded-md', className)}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };
diff --git a/src/hooks/use-site-metadata.ts b/src/hooks/use-site-metadata.ts
index 3435e32f3f..99e879d7d2 100644
--- a/src/hooks/use-site-metadata.ts
+++ b/src/hooks/use-site-metadata.ts
@@ -28,6 +28,7 @@ export const useSiteMetadata = () => {
             mixpanelAutoCapture
             posthogApiKey
             posthogHost
+            posthogFeedbackSurveyName
             conversationsUrl
           }
         }
diff --git a/src/pages/docs/test-stepped-sidebar.mdx b/src/pages/docs/test-stepped-sidebar.mdx
new file mode 100644
index 0000000000..367e5e813f
--- /dev/null
+++ b/src/pages/docs/test-stepped-sidebar.mdx
@@ -0,0 +1,156 @@
+---
+title: Getting Started with Chat (Stepped Tutorial)
+meta_description: "A step-by-step guide to setting up and using Ably Chat."
+---
+
+This is a test page to demonstrate the stepped sidebar functionality. Follow these numbered steps to get started with Ably Chat.
+
+## Introduction
+
+Before diving into the setup process, let's understand what Ably Chat provides and why you might want to use it.
+
+## <span data-step="1">Create a client</span>
+
+
+First, you need to create an Ably Chat client instance. This client will be used to interact with the Ably Chat API.
+
+```javascript
+import * as Ably from 'ably';
+import { ChatClient } from '@ably/chat';
+
+const realtimeClient = new Ably.Realtime({
+  key: 'your-api-key',
+  clientId: 'unique-client-id'
+});
+
+const chatClient = new ChatClient(realtimeClient);
+```
+
+The client ID should be a unique identifier for the user. This is used to track which messages belong to which users.
+
+## <span data-step="2">Connect to a room</span>
+
+Once you have a client, you can connect to a chat room. Rooms are the main way to organize conversations in Ably Chat.
+
+```javascript
+const room = await chatClient.rooms.get('my-chat-room', {
+  presence: { enableEvents: true },
+  typing: { heartbeatThrottleMs: 5000 }
+});
+
+await room.attach();
+```
+
+The room ID can be any string that uniquely identifies your room. If the room doesn't exist, it will be created automatically.
+
+### Room configuration options Room configuration options Room configuration options Room configuration options
+
+You can configure various features when creating a room:
+
+- **Presence**: Track who is currently in the room
+- **Typing indicators**: Show when users are typing
+- **Occupancy**: Track the number of users in the room
+- **Reactions**: Enable emoji reactions to messages
+
+## <span data-step="3">Send messages</span>
+
+Now that you're connected to a room, you can start sending messages:
+
+```javascript
+await room.messages.send({ text: 'Hello, world!' });
+```
+
+You can also send messages with additional metadata:
+
+```javascript
+await room.messages.send({
+  text: 'Hello!',
+  metadata: {
+    type: 'greeting',
+    timestamp: Date.now()
+  }
+});
+```
+
+## <span data-step="4">Subscribe to messages</span>
+
+To receive messages from other users, you need to subscribe to the room's message events:
+
+```javascript
+const { unsubscribe } = room.messages.subscribe((message) => {
+  console.log('Received message:', message.text);
+  console.log('From:', message.clientId);
+  console.log('At:', message.timestamp);
+});
+
+// Later, when you want to stop receiving messages
+unsubscribe();
+```
+
+The subscription will continue to receive messages until you call the `unsubscribe` function.
+
+## <span data-step="5">Add presence tracking</span>
+
+Presence tracking allows you to see who is currently in the room and track their status:
+
+```javascript
+// Enter the room's presence set
+await room.presence.enter({ status: 'online' });
+
+// Subscribe to presence updates
+room.presence.subscribe((presenceEvent) => {
+  console.log('Presence update:', presenceEvent.action);
+  console.log('User:', presenceEvent.clientId);
+  console.log('Data:', presenceEvent.data);
+});
+
+// Update your presence data
+await room.presence.update({ status: 'away' });
+
+// Leave the room's presence set
+await room.presence.leave();
+```
+
+## Additional features
+
+Beyond the core functionality, Ably Chat provides several additional features to enhance your chat experience.
+
+### Typing indicators
+
+Show when users are currently typing in the room:
+
+```javascript
+// Start typing
+await room.typing.start();
+
+// Subscribe to typing events
+room.typing.subscribe((event) => {
+  console.log(`${event.clientId} is typing`);
+});
+
+// Stop typing
+await room.typing.stop();
+```
+
+### Room reactions
+
+Allow users to send quick emoji reactions:
+
+```javascript
+// Send a reaction
+await room.reactions.send({ type: 'like' });
+
+// Subscribe to reactions
+room.reactions.subscribe((reaction) => {
+  console.log(`${reaction.clientId} sent: ${reaction.type}`);
+});
+```
+
+## Next steps
+
+Now that you've completed the basic setup, you can explore more advanced features:
+
+- Learn about [message history and pagination](/docs/chat/rooms/messages)
+- Implement [occupancy tracking](/docs/chat/rooms/occupancy)
+- Set up [webhooks for chat events](/docs/chat/webhooks)
+- Configure [push notifications](/docs/chat/push-notifications)
diff --git a/src/types/non-javascript-assets/svg-loading.d.ts b/src/types/non-javascript-assets/svg-loading.d.ts
index dda274a423..cdb2b1a9a2 100644
--- a/src/types/non-javascript-assets/svg-loading.d.ts
+++ b/src/types/non-javascript-assets/svg-loading.d.ts
@@ -1,4 +1,4 @@
 declare module '*.svg' {
-  const content: unknown;
+  const content: string;
   export default content;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index 6ce2650021..d9620ed5c2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,9 +12,28 @@ module.exports = extendConfig((ablyUIConfig) => ({
     ...ablyUIConfig.theme,
     extend: {
       ...ablyUIConfig.theme.extend,
+      fontFamily: {
+        serif: ['IBM Plex Serif', 'Georgia', 'Cambria', 'Times New Roman', 'Times', 'serif'],
+      },
       gridTemplateColumns: {
         'header-layout': '173px minmax(200px, 400px) 1fr',
       },
+      keyframes: {
+        ...ablyUIConfig.theme.extend.keyframes,
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        ...ablyUIConfig.theme.extend.animation,
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
     },
   },
 }));
diff --git a/yarn.lock b/yarn.lock
index 1ab98d3731..0669e3c050 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3126,6 +3126,21 @@
     "@radix-ui/react-primitive" "2.0.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
+"@radix-ui/react-accordion@^1.2.12":
+  version "1.2.12"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz#1fd70d4ef36018012b9e03324ff186de7a29c13f"
+  integrity sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collapsible" "1.1.12"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
 "@radix-ui/react-arrow@1.1.4":
   version "1.1.4"
   resolved "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.4.tgz"
@@ -3154,7 +3169,7 @@
     "@radix-ui/react-use-controllable-state" "1.1.0"
     "@radix-ui/react-use-layout-effect" "1.1.0"
 
-"@radix-ui/react-collapsible@^1.1.12":
+"@radix-ui/react-collapsible@1.1.12", "@radix-ui/react-collapsible@^1.1.12":
   version "1.1.12"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz#e2cc69a4490a2920f97c3c3150b0bf21281e3c49"
   integrity sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==
@@ -3198,6 +3213,16 @@
     "@radix-ui/react-primitive" "2.1.0"
     "@radix-ui/react-slot" "1.2.0"
 
+"@radix-ui/react-collection@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.1.7.tgz#d05c25ca9ac4695cc19ba91f42f686e3ea2d9aec"
+  integrity sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.3"
+
 "@radix-ui/react-compose-refs@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz"
@@ -3271,11 +3296,29 @@
     "@radix-ui/react-use-callback-ref" "1.1.1"
     "@radix-ui/react-use-escape-keydown" "1.1.1"
 
+"@radix-ui/react-dropdown-menu@^2.1.16":
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz#5ee045c62bad8122347981c479d92b1ff24c7254"
+  integrity sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-menu" "2.1.16"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
 "@radix-ui/react-focus-guards@1.1.2":
   version "1.1.2"
   resolved "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz"
   integrity sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==
 
+"@radix-ui/react-focus-guards@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz#2a5669e464ad5fde9f86d22f7fdc17781a4dfa7f"
+  integrity sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==
+
 "@radix-ui/react-focus-scope@1.1.4":
   version "1.1.4"
   resolved "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.4.tgz"
@@ -3285,6 +3328,15 @@
     "@radix-ui/react-primitive" "2.1.0"
     "@radix-ui/react-use-callback-ref" "1.1.1"
 
+"@radix-ui/react-focus-scope@1.1.7":
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz#dfe76fc103537d80bf42723a183773fd07bfb58d"
+  integrity sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+
 "@radix-ui/react-id@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz"
@@ -3299,6 +3351,30 @@
   dependencies:
     "@radix-ui/react-use-layout-effect" "1.1.1"
 
+"@radix-ui/react-menu@2.1.16":
+  version "2.1.16"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.1.16.tgz#528a5a973c3a7413d3d49eb9ccd229aa52402911"
+  integrity sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.11"
+    "@radix-ui/react-focus-guards" "1.1.3"
+    "@radix-ui/react-focus-scope" "1.1.7"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-popper" "1.2.8"
+    "@radix-ui/react-portal" "1.1.9"
+    "@radix-ui/react-presence" "1.1.5"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-roving-focus" "1.1.11"
+    "@radix-ui/react-slot" "1.2.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
+
 "@radix-ui/react-navigation-menu@^1.2.4":
   version "1.2.5"
   resolved "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.5.tgz"
@@ -3434,6 +3510,21 @@
     "@radix-ui/react-use-callback-ref" "1.1.0"
     "@radix-ui/react-use-controllable-state" "1.1.0"
 
+"@radix-ui/react-roving-focus@1.1.11":
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz#ef54384b7361afc6480dcf9907ef2fedb5080fd9"
+  integrity sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+
 "@radix-ui/react-select@^2.2.2":
   version "2.2.2"
   resolved "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.2.tgz"
@@ -3461,6 +3552,33 @@
     aria-hidden "^1.2.4"
     react-remove-scroll "^2.6.3"
 
+"@radix-ui/react-select@^2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.2.6.tgz#022cf8dab16bf05d0d1b4df9e53e4bea1b744fd9"
+  integrity sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==
+  dependencies:
+    "@radix-ui/number" "1.1.1"
+    "@radix-ui/primitive" "1.1.3"
+    "@radix-ui/react-collection" "1.1.7"
+    "@radix-ui/react-compose-refs" "1.1.2"
+    "@radix-ui/react-context" "1.1.2"
+    "@radix-ui/react-direction" "1.1.1"
+    "@radix-ui/react-dismissable-layer" "1.1.11"
+    "@radix-ui/react-focus-guards" "1.1.3"
+    "@radix-ui/react-focus-scope" "1.1.7"
+    "@radix-ui/react-id" "1.1.1"
+    "@radix-ui/react-popper" "1.2.8"
+    "@radix-ui/react-portal" "1.1.9"
+    "@radix-ui/react-primitive" "2.1.3"
+    "@radix-ui/react-slot" "1.2.3"
+    "@radix-ui/react-use-callback-ref" "1.1.1"
+    "@radix-ui/react-use-controllable-state" "1.2.2"
+    "@radix-ui/react-use-layout-effect" "1.1.1"
+    "@radix-ui/react-use-previous" "1.1.1"
+    "@radix-ui/react-visually-hidden" "1.2.3"
+    aria-hidden "^1.2.4"
+    react-remove-scroll "^2.6.3"
+
 "@radix-ui/react-slot@1.1.0":
   version "1.1.0"
   resolved "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz"