diff --git a/data/onCreatePage.ts b/data/onCreatePage.ts
index c9e5650b05..a8fbdad732 100644
--- a/data/onCreatePage.ts
+++ b/data/onCreatePage.ts
@@ -12,7 +12,7 @@ export type LayoutOptions = {
 const mdxWrapper = path.resolve('src/components/Layout/MDXWrapper.tsx');
 
 const pageLayoutOptions: Record<string, LayoutOptions> = {
-  '/docs': { leftSidebar: true, rightSidebar: false, template: 'index', mdx: false },
+  '/docs': { leftSidebar: false, rightSidebar: false, template: 'index', mdx: false },
   '/docs/api/control-api': {
     leftSidebar: false,
     rightSidebar: false,
diff --git a/src/components/Layout/Breadcrumbs.tsx b/src/components/Layout/Breadcrumbs.tsx
index ea0a967763..f4afd3e8b9 100644
--- a/src/components/Layout/Breadcrumbs.tsx
+++ b/src/components/Layout/Breadcrumbs.tsx
@@ -35,7 +35,7 @@ const Breadcrumbs: React.FC = () => {
   })();
 
   return (
-    <nav aria-label="breadcrumb" className="flex mt-8 items-center gap-1">
+    <nav aria-label="breadcrumb" className="flex items-center gap-1 min-w-0">
       {lastActiveNodeIndex === null && (
         <Icon
           name="icon-gui-chevron-left-micro"
diff --git a/src/components/Layout/CopyForLLM.test.tsx b/src/components/Layout/CopyForLLM.test.tsx
new file mode 100644
index 0000000000..e2fde02363
--- /dev/null
+++ b/src/components/Layout/CopyForLLM.test.tsx
@@ -0,0 +1,122 @@
+import React, { ReactNode } from 'react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import CopyForLLM from './CopyForLLM';
+
+const mockUseLayoutContext = jest.fn(() => ({
+  activePage: {
+    language: 'javascript',
+    languages: ['javascript'],
+    product: 'pubsub',
+    page: {
+      name: 'Test Page',
+      link: '/docs/test-page',
+    },
+    tree: [],
+    template: 'mdx' as const,
+  },
+}));
+
+jest.mock('src/contexts/layout-context', () => ({
+  useLayoutContext: () => mockUseLayoutContext(),
+}));
+
+jest.mock('@reach/router', () => ({
+  useLocation: () => ({ pathname: '/docs/test-page' }),
+}));
+
+jest.mock('@ably/ui/core/Icon', () => ({
+  __esModule: true,
+  default: ({ name }: { name: string }) => <span data-testid={`icon-${name}`}>{name}</span>,
+}));
+
+jest.mock('@ably/ui/core/insights', () => ({
+  track: jest.fn(),
+}));
+
+// Mock Radix DropdownMenu to render content directly
+jest.mock('@radix-ui/react-dropdown-menu', () => ({
+  Root: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Trigger: ({ children }: { children: ReactNode; asChild?: boolean }) => <div>{children}</div>,
+  Portal: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Content: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  Item: ({ children, onSelect, ...props }: { children: ReactNode; onSelect?: (e: Event) => void; asChild?: boolean }) =>
+    props.asChild ? <>{children}</> : <div onClick={() => onSelect?.({ preventDefault: () => {} } as unknown as Event)}>{children}</div>,
+  Separator: () => <hr />,
+}));
+
+describe('CopyForLLM', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+    jest.clearAllTimers();
+  });
+
+  it('renders the dropdown trigger button', () => {
+    global.fetch = jest.fn(() => Promise.resolve({ ok: false, status: 404 } as Response));
+
+    render(<CopyForLLM />);
+    expect(screen.getByText('Copy for LLM')).toBeInTheDocument();
+  });
+
+  it('renders LLM links for ChatGPT, Claude and Perplexity', () => {
+    global.fetch = jest.fn(() => Promise.resolve({ ok: false, status: 404 } as Response));
+
+    render(<CopyForLLM />);
+    expect(screen.getByText('Open in ChatGPT')).toBeInTheDocument();
+    expect(screen.getByText('Open in Claude')).toBeInTheDocument();
+    expect(screen.getByText('Open in Perplexity')).toBeInTheDocument();
+  });
+
+  it('shows markdown items when content is available', async () => {
+    const mockMarkdown = '# Test content';
+
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        ok: true,
+        headers: {
+          get: (name: string) => (name === 'Content-Type' ? 'text/markdown' : null),
+        },
+        text: () => Promise.resolve(mockMarkdown),
+      } as Response),
+    );
+
+    const mockWriteText = jest.fn();
+    Object.assign(navigator, { clipboard: { writeText: mockWriteText } });
+
+    jest.useFakeTimers();
+
+    render(<CopyForLLM />);
+
+    await screen.findByText('View as markdown');
+    expect(screen.getByText('Copy as markdown')).toBeInTheDocument();
+
+    // Click copy
+    const copyItem = screen.getByText('Copy as markdown').closest('div');
+    if (copyItem) {
+      act(() => {
+        fireEvent.click(copyItem);
+      });
+    }
+
+    expect(mockWriteText).toHaveBeenCalledWith(mockMarkdown);
+
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+    jest.useRealTimers();
+  });
+
+  it('does not show markdown items when fetch fails', async () => {
+    global.fetch = jest.fn(() => Promise.resolve({ ok: false, status: 404 } as Response));
+
+    render(<CopyForLLM />);
+
+    await new Promise<void>((resolve) => setTimeout(resolve, 50));
+
+    expect(screen.queryByText('View as markdown')).not.toBeInTheDocument();
+    expect(screen.queryByText('Copy as markdown')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/Layout/CopyForLLM.tsx b/src/components/Layout/CopyForLLM.tsx
new file mode 100644
index 0000000000..f3420ce4c4
--- /dev/null
+++ b/src/components/Layout/CopyForLLM.tsx
@@ -0,0 +1,189 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useLocation } from '@reach/router';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import Icon from '@ably/ui/core/Icon';
+import { IconName } from '@ably/ui/core/Icon/types';
+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';
+
+const menuItemClassName =
+  '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';
+
+const CopyForLLM: React.FC = () => {
+  const { activePage } = useLayoutContext();
+  const { language, product, page } = activePage;
+  const location = useLocation();
+  const [markdownContent, setMarkdownContent] = useState<string | null>(null);
+  const [copyFeedback, setCopyFeedback] = useState<string | null>(null);
+
+  const llmLinks = useMemo(() => {
+    const docUrl = `https://ably.com${page.link}.md`;
+    const prompt = `Fetch the documentation from ${docUrl} and tell me more about ${product ? productData[product]?.nav.name : 'Ably'}'s '${page.name}' feature${language ? ` for ${languageInfo[language]?.label}` : ''}`;
+    const gptPath = `https://chatgpt.com/?q=${encodeURIComponent(prompt)}`;
+    const claudePath = `https://claude.ai/new?q=${encodeURIComponent(prompt)}`;
+    const perplexityPath = `https://www.perplexity.ai/?q=${encodeURIComponent(prompt)}`;
+
+    return [
+      { model: 'gpt', label: 'Open in ChatGPT', icon: 'icon-tech-openai', link: gptPath },
+      { model: 'claude', label: 'Open in Claude', icon: 'icon-tech-claude-mono', link: claudePath },
+      { model: 'perplexity', label: 'Open in Perplexity', icon: 'icon-tech-perplexity', link: perplexityPath },
+    ];
+  }, [product, page.name, page.link, language]);
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    let isMounted = true;
+
+    const fetchMarkdown = async () => {
+      try {
+        const response = await fetch(`${location.pathname}.md`, {
+          signal: abortController.signal,
+          headers: { Accept: 'text/markdown' },
+        });
+
+        if (!isMounted) return;
+
+        if (!response.ok) {
+          if (response.status === 404) {
+            setMarkdownContent(null);
+            return;
+          }
+          throw new Error(`Failed to fetch markdown: ${response.status} ${response.statusText}`);
+        }
+
+        const contentType = response.headers.get('Content-Type')?.toLowerCase() || '';
+        const isMarkdownType =
+          contentType.includes('text/markdown') ||
+          contentType.includes('application/markdown') ||
+          contentType.includes('text/plain');
+
+        if (contentType && !isMarkdownType) {
+          if (contentType.includes('text/html') || contentType.includes('application/json')) {
+            throw new Error(`Received ${contentType} response instead of markdown for ${location.pathname}.md`);
+          }
+          console.warn(
+            `Markdown fetch: unexpected content type "${contentType}" for ${location.pathname}.md, accepting anyway`,
+          );
+        }
+
+        const content = await response.text();
+        if (isMounted) {
+          setMarkdownContent(content);
+        }
+      } catch (error) {
+        if (!isMounted || (error instanceof Error && error.name === 'AbortError')) return;
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        if (!errorMessage.includes('404')) {
+          console.error(`Failed to fetch markdown for ${location.pathname}:`, {
+            error: errorMessage,
+            path: `${location.pathname}.md`,
+            errorType: error instanceof Error ? error.name : typeof error,
+          });
+        }
+        setMarkdownContent(null);
+      }
+    };
+
+    fetchMarkdown();
+
+    return () => {
+      isMounted = false;
+      abortController.abort();
+    };
+  }, [location.pathname]);
+
+  const handleCopyMarkdown = useCallback(() => {
+    if (!markdownContent) return;
+
+    try {
+      navigator.clipboard.writeText(markdownContent);
+      setCopyFeedback('Copied!');
+      setTimeout(() => setCopyFeedback(null), 2000);
+
+      track('markdown_copy_link_clicked', {
+        location: location.pathname,
+      });
+    } catch (error) {
+      console.error('Failed to copy markdown:', error);
+      setCopyFeedback('Error!');
+      setTimeout(() => setCopyFeedback(null), 2000);
+    }
+  }, [markdownContent, location.pathname]);
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className="flex items-center gap-1.5 ui-text-label4 font-semibold text-neutral-900 dark:text-neutral-400 hover:text-neutral-1300 dark:hover:text-neutral-000 focus-base rounded px-2 py-1 transition-colors cursor-pointer">
+          <Icon name="icon-gui-document-text-outline" size="16px" />
+          <span>Copy for LLM</span>
+          <Icon name="icon-gui-chevron-down-micro" size="16px" />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className="min-w-[220px] 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="start"
+        >
+          {markdownContent && (
+            <>
+              <DropdownMenu.Item className={menuItemClassName} asChild>
+                <a
+                  href={`${location.pathname}.md`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  onClick={() => {
+                    track('markdown_preview_link_clicked', {
+                      location: location.pathname,
+                    });
+                  }}
+                >
+                  <Icon name="icon-gui-eye-outline" size="20px" />
+                  <span>View as markdown</span>
+                </a>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                className={menuItemClassName}
+                onSelect={(e) => {
+                  e.preventDefault();
+                  handleCopyMarkdown();
+                }}
+              >
+                <Icon name="icon-gui-square-2-stack-outline" size="20px" />
+                <span>{copyFeedback ?? 'Copy as markdown'}</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Separator className="h-px bg-neutral-300 dark:bg-neutral-1000 my-1" />
+            </>
+          )}
+          {llmLinks.map(({ model, label, icon, link }) => (
+            <DropdownMenu.Item key={model} className={menuItemClassName} asChild>
+              <a
+                href={link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="justify-between"
+                onClick={() => {
+                  track('llm_link_clicked', {
+                    model,
+                    location: location.pathname,
+                    link,
+                  });
+                }}
+              >
+                <div className="flex items-center gap-2">
+                  <Icon name={icon as IconName} size="20px" />
+                  <span>{label}</span>
+                </div>
+                <Icon name="icon-gui-arrow-top-right-on-square-outline" size="16px" />
+              </a>
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};
+
+export default CopyForLLM;
diff --git a/src/components/Layout/Header.tsx b/src/components/Layout/Header.tsx
index 5eb3bff931..81f638039b 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -4,6 +4,7 @@ import { graphql, useStaticQuery } from 'gatsby';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { throttle } from 'es-toolkit/compat';
+import cn from '@ably/ui/core/utils/cn';
 import Icon from '@ably/ui/core/Icon';
 import TabMenu from '@ably/ui/core/TabMenu';
 import Logo from '@ably/ui/core/images/logo/ably-logo.svg';
@@ -11,6 +12,7 @@ import { track } from '@ably/ui/core/insights';
 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 ProductBar from './ProductBar';
 import UserContext from 'src/contexts/user-context';
 import ExamplesList from '../Examples/ExamplesList';
 import Link from '../Link';
@@ -23,16 +25,12 @@ const MD_BREAKPOINT = 1040;
 const CLI_ENABLED = false;
 const MAX_MOBILE_MENU_WIDTH = '560px';
 
-const desktopTabs = [
-  <Link key="docs" to="/docs" className="p-4">
-    Documentation
-  </Link>,
-  <Link key="examples" to="/examples" className="p-4">
-    Examples
-  </Link>,
-];
+const headerLinkClassName = 'px-3 py-1.5 rounded-lg ui-text-label3 font-medium transition-colors';
+const activeHeaderLinkClassName = 'text-neutral-1300 dark:text-neutral-000 bg-orange-100 dark:bg-orange-1000';
+const inactiveHeaderLinkClassName =
+  'text-neutral-800 dark:text-neutral-500 hover:text-neutral-1300 dark:hover:text-neutral-000 hover:bg-neutral-100 dark:hover:bg-neutral-1200';
 
-const mobileTabs = ['Documentation', 'Examples'];
+const mobileTabs = ['Platform', 'Products', 'Examples'];
 
 const helpResourcesItems = [
   {
@@ -151,24 +149,46 @@ const Header: React.FC = () => {
   }, [sessionState.logOut]);
 
   return (
-    <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">
+    <div className="fixed top-0 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 justify-between h-16 px-6 max-w-[1856px] mx-auto">
+      <div className="flex items-center gap-8 shrink-0">
         <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">
+          <span className="bg-neutral-000 dark:bg-neutral-1300 border border-neutral-300 dark:border-neutral-1000 text-[10px] font-bold text-neutral-1000 dark:text-neutral-400 px-1.5 py-[3px] rounded-md uppercase">
             Docs
           </span>
         </a>
-        <TabMenu
-          rootClassName="hidden md:flex h-16"
-          tabs={desktopTabs}
-          tabClassName="!p-0 !ui-text-label3"
-          options={{
-            underline: false,
-            flexibleTabHeight: true,
-            defaultTabIndex: location.pathname.includes('/examples') ? 1 : 0,
-          }}
-        />
+        <nav className="hidden md:flex items-center gap-1">
+          <Link
+            to="/docs/platform"
+            className={cn(
+              headerLinkClassName,
+              activePage.product === 'platform' ? activeHeaderLinkClassName : inactiveHeaderLinkClassName,
+            )}
+          >
+            Platform
+          </Link>
+          <Link
+            to="/docs/pub-sub"
+            className={cn(
+              headerLinkClassName,
+              activePage.product && activePage.product !== 'platform'
+                ? activeHeaderLinkClassName
+                : inactiveHeaderLinkClassName,
+            )}
+          >
+            Products
+          </Link>
+          <Link
+            to="/examples"
+            className={cn(
+              headerLinkClassName,
+              location.pathname.includes('/examples') ? activeHeaderLinkClassName : inactiveHeaderLinkClassName,
+            )}
+          >
+            Examples
+          </Link>
+        </nav>
         {isMobileMenuOpen && (
           <div
             ref={mobileMenuRef}
@@ -182,7 +202,13 @@ const Header: React.FC = () => {
             <TabMenu
               tabs={mobileTabs}
               contents={[
-                <LeftSidebar inHeader key="nav-mobile-documentation-tab" />,
+                <div key="nav-mobile-platform-tab">
+                  <LeftSidebar inHeader />
+                </div>,
+                <div key="nav-mobile-products-tab">
+                  <ProductBar />
+                  <LeftSidebar inHeader />
+                </div>,
                 <ExamplesList key="nav-mobile-examples-tab" />,
               ]}
               rootClassName="h-full overflow-y-hidden min-h-[3.1875rem] flex flex-col"
@@ -193,12 +219,39 @@ const Header: React.FC = () => {
           </div>
         )}
       </div>
+      <div
+        id="inkeep-search-mount"
+        className="hidden md:flex items-center justify-center flex-1 min-w-0 mx-4"
+      >
+        {!externalScriptsData.inkeepSearchEnabled && (
+          <div className="w-full max-w-[480px]">
+            <button
+              className={cn(
+                secondaryButtonClassName,
+                'w-full justify-start gap-2 text-neutral-600 dark:text-neutral-700 font-normal',
+              )}
+              onClick={() => {
+                // Inkeep renders its chat widget inside a shadow DOM; this reaches in to
+                // programmatically open it. Will silently no-op if the widget structure changes.
+                const chatContainer = document.querySelector('#inkeep-ai-chat > div');
+                const chatButton = chatContainer?.shadowRoot?.querySelector('button');
+                if (chatButton) chatButton.click();
+              }}
+            >
+              <Icon name="icon-gui-magnifying-glass-outline" size="16px" />
+              <span>Search docs...</span>
+            </button>
+          </div>
+        )}
+      </div>
       <Tooltip.Provider delayDuration={0} disableHoverableContent>
-        <div className="hidden md:flex gap-2 pt-3 md:py-0 px-4 md:px-0">
+        <div className="hidden md:flex gap-2 pt-3 md:py-0 px-4 md:px-0 shrink-0">
           {externalScriptsData.inkeepChatEnabled && (
             <button
               className={secondaryButtonClassName}
               onClick={() => {
+                // Inkeep renders its chat widget inside a shadow DOM; this reaches in to
+                // programmatically open it. Will silently no-op if the widget structure changes.
                 const chatContainer = document.querySelector('#inkeep-ai-chat > div');
                 const chatButton = chatContainer?.shadowRoot?.querySelector('button');
 
@@ -321,6 +374,7 @@ const Header: React.FC = () => {
           <InkeepSearchBar ref={chatBarRef} instanceType="chat" extraInputStyle={{ backgroundColor: 'white' }} />
         )}
       </div>
+      </div>
     </div>
   );
 };
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
index f0ec23f2d4..941f534891 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -6,12 +6,14 @@ import cn from '@ably/ui/core/utils/cn';
 import '../../styles/global.css';
 import { Container } from 'src/components/Container';
 import { LayoutOptions } from 'data/onCreatePage';
-import { LayoutProvider } from 'src/contexts/layout-context';
+import { LayoutProvider, useLayoutContext } from 'src/contexts/layout-context';
 import Breadcrumbs from './Breadcrumbs';
+import CopyForLLM from './CopyForLLM';
 import Footer from './Footer';
 import GlobalLoading from '../GlobalLoading/GlobalLoading';
 import Header from './Header';
 import LeftSidebar from './LeftSidebar';
+import ProductBar from './ProductBar';
 import RightSidebar from './RightSidebar';
 import HiddenLanguageLinks from './HiddenLanguageLinks';
 
@@ -34,7 +36,9 @@ type LayoutProps = PageProps<unknown, PageContextType>;
 
 const Layout: React.FC<LayoutProps> = ({ children, pageContext }) => {
   const location = useLocation();
+  const { activePage } = useLayoutContext();
   const { leftSidebar, rightSidebar, template } = pageContext.layout ?? {};
+  const showProductBar = activePage.product !== null && activePage.product !== 'platform';
   const isRedocPage =
     location.pathname === '/docs/api/control-api' ||
     location.pathname === '/docs/api/chat-rest' ||
@@ -42,26 +46,35 @@ const Layout: React.FC<LayoutProps> = ({ children, pageContext }) => {
 
   return (
     <GlobalLoading template={template}>
+
       <Header />
-      <div
-        className={cn(
-          'ui-standard-container mx-0 max-w-full flex pt-16 md:px-0 md:gap-12 lg:gap-16 xl:gap-20 justify-center',
-          !leftSidebar && 'md:px-12',
-        )}
-      >
-        <LeftSidebar className={cn(!leftSidebar && 'md:hidden')} />
-        <div className={cn({ 'flex-1 flex min-w-0 justify-center': !isRedocPage })}>
-          <div className={cn({ 'max-w-screen-lg w-full flex md:gap-12 lg:gap-16 xl:gap-20': !isRedocPage })}>
-            <Container
-              as="main"
-              className={cn('flex-1 px-4 -mx-4', { 'overflow-x-hidden sm:overflow-x-auto': !isRedocPage })}
-            >
-              {leftSidebar ? <Breadcrumbs /> : <div />}
-              {children}
-              <Footer pageContext={pageContext} />
-            </Container>
-            {rightSidebar ? <RightSidebar /> : <div />}
-          </div>
+      {showProductBar && <ProductBar className="hidden md:block" />}
+      <div className="max-w-[1856px] mx-auto pt-16">
+        <div
+          className={cn(
+            'flex px-8',
+            !leftSidebar && 'md:px-12',
+          )}
+        >
+          <LeftSidebar className={cn(!leftSidebar && 'md:hidden')} />
+          <Container
+            as="main"
+            className={cn(
+              'flex-1 min-w-0',
+              { 'max-w-[704px] mx-auto': !isRedocPage && leftSidebar },
+              { 'overflow-x-hidden sm:overflow-x-auto': !isRedocPage },
+            )}
+          >
+            {leftSidebar ? (
+              <div className="flex items-center justify-between mt-8 gap-4">
+                <Breadcrumbs />
+                <CopyForLLM />
+              </div>
+            ) : null}
+            {children}
+            <Footer pageContext={pageContext} />
+          </Container>
+          {rightSidebar ? <RightSidebar /> : <div />}
         </div>
       </div>
       <HiddenLanguageLinks />
diff --git a/src/components/Layout/LeftSidebar.test.tsx b/src/components/Layout/LeftSidebar.test.tsx
index c7efeacfcb..54abc9491d 100644
--- a/src/components/Layout/LeftSidebar.test.tsx
+++ b/src/components/Layout/LeftSidebar.test.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useLocation } from '@reach/router';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import LeftSidebar from './LeftSidebar';
 import { useLayoutContext } from 'src/contexts/layout-context';
 
@@ -37,11 +36,12 @@ jest.mock('gatsby', () => ({
 }));
 
 jest.mock('../Link', () => {
-  const MockLink: React.FC<{ children: React.ReactNode; to: string }> = ({ children, to, ...props }) => (
-    <a href={to} {...props}>
+  const { forwardRef } = require('react');
+  const MockLink = forwardRef(({ children, to, ...props }: { children: React.ReactNode; to: string }, ref: React.Ref<HTMLAnchorElement>) => (
+    <a href={to} ref={ref} {...props}>
       {children}
     </a>
-  );
+  ));
   MockLink.displayName = 'MockLink';
   return MockLink;
 });
@@ -53,10 +53,10 @@ describe('LeftSidebar', () => {
   beforeEach(() => {
     mockUseLayoutContext.mockReturnValue({
       activePage: {
-        page: { name: 'Introduction', link: '/platform/intro' },
+        page: { name: 'About Ably', link: '/docs/platform' },
         tree: [
           { index: 0, page: { name: 'Platform', link: '/platform' } },
-          { index: 0, page: { name: 'Introduction', link: '/platform/intro' } },
+          { index: 0, page: { name: 'About Ably', link: '/docs/platform' } },
         ],
         languages: [],
         language: 'javascript',
@@ -66,7 +66,8 @@ describe('LeftSidebar', () => {
     });
 
     mockUseLocation.mockReturnValue({
-      pathname: '/platform/intro',
+      pathname: '/docs/platform',
+      search: '',
     });
 
     const mockIntersectionObserver = jest.fn();
@@ -84,98 +85,39 @@ describe('LeftSidebar', () => {
     jest.clearAllMocks();
   });
 
-  it('renders the sidebar with products', () => {
+  it('renders nav content for the active product only', () => {
     render(<LeftSidebar />);
-    expect(screen.getByRole('button', { name: 'Platform' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Ably Pub/Sub' })).toBeInTheDocument();
-  });
-
-  it('shows Platform accordion expanded with first three child items when active page is under Platform', async () => {
-    render(<LeftSidebar />);
-
-    // Platform should be auto-expanded since active page is under Platform (index 0)
-    await waitFor(() => {
-      expect(screen.getByText('About Ably')).toBeInTheDocument();
-      expect(screen.getByText('Architecture')).toBeInTheDocument();
-      expect(screen.getByText('Products and SDKs')).toBeInTheDocument();
-    });
-
-    // Verify these are clickable accordion triggers
-    const aboutAblyButton = screen.getByText('About Ably').closest('button');
-    const archButton = screen.getByText('Architecture').closest('button');
-    const productsButton = screen.getByText('Products and SDKs').closest('button');
+    // Platform nav sections should be present
+    expect(screen.getByText('About Ably')).toBeInTheDocument();
+    expect(screen.getByText('Architecture')).toBeInTheDocument();
 
-    expect(aboutAblyButton).toBeInTheDocument();
-    expect(archButton).toBeInTheDocument();
-    expect(productsButton).toBeInTheDocument();
+    // Other products should NOT appear
+    expect(screen.queryByText('Ably Pub/Sub')).not.toBeInTheDocument();
+    expect(screen.queryByText('Ably Chat')).not.toBeInTheDocument();
   });
 
-  it('expands Platform/Architecture accordion and shows first three child items', async () => {
-    const user = userEvent.setup();
-    render(<LeftSidebar />);
-
-    // Platform should be auto-expanded since active page is under Platform (index 0)
-    await waitFor(() => {
-      expect(screen.getByText('Architecture')).toBeInTheDocument();
-    });
-
-    // Architecture children should not be visible yet
-    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();
+  it('shows placeholder when no product is active', () => {
+    mockUseLayoutContext.mockReturnValue({
+      activePage: {
+        page: { name: '', link: '' },
+        tree: [],
+        languages: [],
+        language: 'javascript',
+        product: null,
+        template: null,
+      },
     });
 
-    // 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();
+    render(<LeftSidebar />);
+    expect(screen.getByText('Select a product above to browse documentation.')).toBeInTheDocument();
   });
 
-  it('clicks Ably Pub/Sub to expand Pub/Sub showing first three child items', async () => {
-    const user = userEvent.setup();
+  it('renders top-level sections as static headings', () => {
     render(<LeftSidebar />);
-
-    // Platform should be auto-expanded since active page is under Platform (index 0)
-    await waitFor(() => {
-      expect(screen.getByText('Architecture')).toBeInTheDocument();
-    });
-
-    // Pub/Sub children should not be visible initially
-    expect(screen.queryByText('About Pub/Sub')).not.toBeInTheDocument();
-    expect(screen.queryByText('Getting started')).not.toBeInTheDocument();
-
-    // Click on Ably Pub/Sub button to expand it (type="multiple" so Platform stays open)
-    const pubsubButton = screen.getByRole('button', { name: 'Ably Pub/Sub' });
-    await user.click(pubsubButton);
-
-    // After clicking, verify the Pub/Sub child accordion items appear
-    await waitFor(() => {
-      expect(screen.getByText('About Pub/Sub')).toBeInTheDocument();
-      expect(screen.getByText('Getting started')).toBeInTheDocument();
-    });
-
-    // Verify both product sections are visible (Platform has "About Ably", Pub/Sub has "About Pub/Sub")
-    expect(screen.getByText('About Ably')).toBeInTheDocument();
-    expect(screen.getByText('About Pub/Sub')).toBeInTheDocument();
-
-    // Platform's Architecture should still be visible since accordion type is "multiple"
-    expect(screen.getByText('Architecture')).toBeInTheDocument();
+    // Top-level sections render as plain headings, not accordion triggers
+    const aboutHeading = screen.getByText('About Ably');
+    expect(aboutHeading).toBeInTheDocument();
+    // Should not be inside an accordion trigger button
+    expect(aboutHeading.closest('button')).toBeNull();
   });
 });
diff --git a/src/components/Layout/LeftSidebar.tsx b/src/components/Layout/LeftSidebar.tsx
index 5c646e6dbe..a641c831d8 100644
--- a/src/components/Layout/LeftSidebar.tsx
+++ b/src/components/Layout/LeftSidebar.tsx
@@ -3,6 +3,7 @@ import { graphql, useStaticQuery } from 'gatsby';
 import { useLocation } from '@reach/router';
 import * as Accordion from '@radix-ui/react-accordion';
 import cn from '@ably/ui/core/utils/cn';
+import { HEADER_HEIGHT } from '@ably/ui/core/utils/heights';
 import Icon from '@ably/ui/core/Icon';
 
 import { productData } from 'src/data';
@@ -10,6 +11,7 @@ import { NavProductContent, NavProductPage } from 'src/data/nav/types';
 import Link from '../Link';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import { interactiveButtonClassName } from './utils/styles';
+import { PRODUCT_BAR_HEIGHT } from './utils/heights';
 
 // Build link preserving all language params across navigation
 const buildLinkWithParams = (targetLink: string, searchParams: URLSearchParams): string => {
@@ -49,7 +51,7 @@ const accordionTriggerClassName = cn(
   '[&[data-state=open]>svg]:rotate-90',
 );
 
-const accordionLinkClassName = 'pl-3 py-[6px]';
+const accordionLinkClassName = 'pl-3 py-1';
 
 const iconClassName = 'text-neutral-1300 dark:text-neutral-000 transition-transform';
 
@@ -63,7 +65,11 @@ const ChildAccordion = ({ content, tree }: { content: (NavProductPage | NavProdu
   const preExpandedItems = content
     .map((page, index) => 'expand' in page && page.expand && `item-${tree.join('-')}-${index}`)
     .filter((item) => typeof item === 'string');
-  const [openSections, setOpenSections] = useState<string[]>([`item-${previousTree.join('-')}`, ...preExpandedItems]);
+
+  const [openSections, setOpenSections] = useState<string[]>([
+    `item-${previousTree.join('-')}`,
+    ...preExpandedItems,
+  ]);
 
   useEffect(() => {
     if (activeTriggerRef.current) {
@@ -105,7 +111,7 @@ const ChildAccordion = ({ content, tree }: { content: (NavProductPage | NavProdu
   return (
     <Accordion.Root
       type="multiple"
-      className={cn(layer > 0 ? 'pl-3' : 'px-2 py-3')}
+      className={cn(layer > 1 ? 'pl-3' : '')}
       value={openSections}
       onValueChange={(value) => {
         setOpenSections(value);
@@ -124,7 +130,7 @@ const ChildAccordion = ({ content, tree }: { content: (NavProductPage | NavProdu
               ref={isSelected ? 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,
+                  layer > 1,
                 'text-neutral-1300 dark:text-neutral-000 font-bold': isActive,
                 'border-orange-600 bg-orange-100 hover:bg-orange-100': isSelected,
               })}
@@ -175,15 +181,28 @@ const ChildAccordion = ({ content, tree }: { content: (NavProductPage | NavProdu
   );
 };
 
-const LeftSidebar = ({ className, inHeader = false }: LeftSidebarProps) => {
-  const { activePage } = useLayoutContext();
+/** Render top-level nav sections as static headings with their content always expanded. */
+const SectionNav = ({ content, tree }: { content: (NavProductPage | NavProductContent)[]; tree: number[] }) => {
+  return (
+    <div className="px-3 pt-9 pb-3">
+      {content.map((page, index) => {
+        const hasDeeperLayer = 'pages' in page && page.pages;
 
-  const defaultPageItems = useMemo(
-    () => (activePage.tree[0]?.index !== undefined ? [`item-${activePage.tree[0].index}`] : []),
-    [activePage.tree],
+        return (
+          <div key={page.name}>
+            <div className={cn('ui-text-label2 font-bold text-neutral-1300 dark:text-neutral-000 pb-1.5', index > 0 ? 'pt-5' : 'pt-0')}>
+              {page.name}
+            </div>
+            {hasDeeperLayer && <ChildAccordion content={page.pages} tree={[...tree, index]} />}
+          </div>
+        );
+      })}
+    </div>
   );
+};
 
-  const [openProducts, setOpenProducts] = useState(defaultPageItems);
+const LeftSidebar = ({ className, inHeader = false }: LeftSidebarProps) => {
+  const { activePage } = useLayoutContext();
 
   const {
     site: {
@@ -201,81 +220,55 @@ const LeftSidebar = ({ className, inHeader = false }: LeftSidebarProps) => {
     }
   `);
 
-  useEffect(() => {
-    if (activePage.tree[0]?.index !== undefined) {
-      setOpenProducts((openProducts) => Array.from(new Set([...openProducts, `item-${activePage.tree[0].index}`])));
-    }
-  }, [activePage.tree]);
+  // Resolve the active product's nav content
+  const activeProductKey = activePage.product;
+  const activeProduct = activeProductKey ? productData[activeProductKey] : null;
+  const content = useMemo(
+    () => (activeProduct ? [...activeProduct.nav.content, ...activeProduct.nav.api] : []),
+    [activeProduct],
+  );
+
+  // The tree indices from the original sidebar started at [productIndex, sectionIndex, ...].
+  // Since we no longer wrap in a product accordion, the tree now starts at [productIndex, sectionIndex, ...].
+  // The ChildAccordion uses tree[1+] for section expansion, so we pass tree=[productIndex] as the base.
+  const productIndex = activePage.tree[0]?.index ?? 0;
+
+  // When the product bar is visible (non-platform products), add its height to the sticky offset
+  const hasProductBar = activeProductKey !== null && activeProductKey !== 'platform';
+  const stickyTopPx = HEADER_HEIGHT + (hasProductBar ? PRODUCT_BAR_HEIGHT : 0);
+  const stickyTopStyle = inHeader ? undefined : { top: `${stickyTopPx}px`, height: `calc(100dvh - ${stickyTopPx}px)` };
+  const stickyTopClass = inHeader ? 'top-16' : '';
 
   return (
-    <div className={cn('sticky top-16 h-full', inHeader ? 'w-full' : 'w-[280px] hidden md:block', className)}>
+    <div
+      className={cn('sticky', stickyTopClass, inHeader ? 'w-full' : 'w-[312px] hidden md:block', className)}
+      style={stickyTopStyle}
+    >
+      {inHeader && (
+        <div
+          id="inkeep-search-mobile-mount"
+          className={cn(
+            'bg-neutral-100 dark:bg-neutral-1200 sticky top-0',
+            externalScriptsData.inkeepSearchEnabled && 'p-1',
+          )}
+        />
+      )}
       <div
-        id={inHeader ? 'inkeep-search-mobile-mount' : 'inkeep-search-mount'}
-        className={cn(
-          'bg-neutral-100 dark:bg-neutral-1200',
-          externalScriptsData.inkeepSearchEnabled && 'p-1',
-          inHeader ? 'sticky top-0' : 'border-r border-neutral-300 dark:border-neutral-1000',
-        )}
-      ></div>
-      <Accordion.Root
-        type="multiple"
-        value={openProducts}
         className={cn(
           'bg-neutral-000 dark:bg-neutral-1300 overflow-x-hidden overflow-y-auto',
           inHeader
             ? 'w-full h-[calc(100dvh-64px-128px)]'
-            : [
-                'w-[280px] border-r border-neutral-300 dark:border-neutral-1000',
-                externalScriptsData.inkeepSearchEnabled ? 'h-[calc(100dvh-64px-44px)]' : 'h-[calc(100dvh-64px)]',
-              ],
+            : 'w-[312px] h-full border-r border-neutral-300 dark:border-neutral-1000',
         )}
-        onValueChange={(value) => {
-          setOpenProducts(value);
-        }}
       >
-        {Object.entries(productData).map(([productKey, productObj], index) => {
-          const isSelected = activePage.tree[0]?.index === 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 h-12 px-4 py-3 font-bold',
-                  isSelected && 'text-neutral-1300 dark:text-neutral-000',
-                )}
-              >
-                <div className="flex-1 flex items-center gap-2">
-                  <Icon
-                    name={isSelected ? productObj.nav.icon.open : productObj.nav.icon.closed}
-                    additionalCSS={cn(
-                      iconClassName,
-                      isSelected
-                        ? '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={accordionContentClassName}>
-                <ChildAccordion content={[...productObj.nav.content, ...productObj.nav.api]} tree={[index]} />
-              </Accordion.Content>
-            </Accordion.Item>
-          );
-        })}
-      </Accordion.Root>
+        {content.length > 0 ? (
+          <SectionNav content={content} tree={[productIndex]} />
+        ) : (
+          <div className="p-4 text-neutral-700 dark:text-neutral-600 ui-text-p3">
+            Select a product above to browse documentation.
+          </div>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/components/Layout/ProductBar.tsx b/src/components/Layout/ProductBar.tsx
new file mode 100644
index 0000000000..1b9c6d66c0
--- /dev/null
+++ b/src/components/Layout/ProductBar.tsx
@@ -0,0 +1,140 @@
+import { useMemo } from 'react';
+import cn from '@ably/ui/core/utils/cn';
+import Icon from '@ably/ui/core/Icon';
+import { IconName } from '@ably/ui/core/Icon/types';
+
+import { productData } from 'src/data';
+import { ProductKey } from 'src/data/types';
+import { useLayoutContext } from 'src/contexts/layout-context';
+import Link from '../Link';
+
+type ProductBarItem = {
+  type: 'product';
+  key: ProductKey;
+  name: string;
+  link: string;
+  icon: { closed: IconName; open: IconName };
+};
+
+type CustomBarItem = {
+  type: 'link';
+  name: string;
+  link: string;
+  icon?: IconName;
+  external?: boolean;
+};
+
+type BarDivider = {
+  type: 'divider';
+};
+
+type NavBarItem = ProductBarItem | CustomBarItem | BarDivider;
+
+const buildNavBarItems = (): NavBarItem[] => {
+  return (Object.keys(productData) as ProductKey[])
+    .filter((key) => key !== 'platform')
+    .map((key) => ({
+      type: 'product',
+      key,
+      name: productData[key].nav.name.replace(/^Ably\s+/, ''),
+      link: productData[key].nav.link ?? `/docs/${key}`,
+      icon: productData[key].nav.icon,
+    }));
+};
+
+// --- Styles ---
+
+const tabBaseClassName = cn(
+  'flex items-center gap-1.5 px-3 py-2.5 whitespace-nowrap rounded-lg transition-colors',
+  'ui-text-label3 font-medium',
+  'focus-base',
+);
+
+const activeTabClassName = 'text-neutral-1300 dark:text-neutral-000 bg-orange-100 dark:bg-orange-1000';
+
+const inactiveTabClassName = cn(
+  'text-neutral-800 dark:text-neutral-500',
+  'hover:text-neutral-1300 dark:hover:text-neutral-000',
+  'hover:bg-neutral-100 dark:hover:bg-neutral-1200',
+  'cursor-pointer',
+);
+
+// --- Main component ---
+
+type ProductBarProps = {
+  className?: string;
+};
+
+const ProductBar = ({ className }: ProductBarProps) => {
+  const { activePage } = useLayoutContext();
+  const items = useMemo(buildNavBarItems, []);
+
+  return (
+    <nav
+      className={cn(
+        'sticky top-16 z-30 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000',
+        className,
+      )}
+    >
+      <div className="flex items-center gap-0.5 px-3 py-1.5 overflow-x-auto scrollbar-none max-w-[1856px] mx-auto">
+        {items.map((item, index) => {
+          if (item.type === 'divider') {
+            return (
+              <div
+                key={`divider-${index}`}
+                className="w-px h-5 mx-1.5 bg-neutral-300 dark:bg-neutral-1000 flex-shrink-0"
+              />
+            );
+          }
+
+          const isProduct = item.type === 'product';
+          const isActive = isProduct
+            ? activePage.product === item.key
+            : activePage.page.link === item.link;
+
+          const iconName = isProduct
+            ? isActive
+              ? (item as ProductBarItem).icon.open
+              : (item as ProductBarItem).icon.closed
+            : (item as CustomBarItem).icon;
+
+          const itemKey = isProduct ? item.key : item.link;
+
+          return (
+            <Link
+              key={itemKey}
+              to={item.link}
+              className={cn(
+                tabBaseClassName,
+                isActive ? activeTabClassName : inactiveTabClassName,
+              )}
+              {...(!isProduct &&
+                (item as CustomBarItem).external && {
+                  target: '_blank',
+                  rel: 'noopener noreferrer',
+                })}
+            >
+              {iconName && (
+                <Icon
+                  name={iconName}
+                  size="16px"
+                  additionalCSS={cn(
+                    isActive
+                      ? 'text-orange-600'
+                      : 'text-neutral-700 dark:text-neutral-600',
+                  )}
+                />
+              )}
+              <span>{item.name}</span>
+              {!isProduct && (item as CustomBarItem).external && (
+                <Icon name="icon-gui-arrow-top-right-on-square-outline" size="12px" />
+              )}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+};
+
+export default ProductBar;
diff --git a/src/components/Layout/RightSidebar.test.tsx b/src/components/Layout/RightSidebar.test.tsx
index 549fbd5a94..3850347fcd 100644
--- a/src/components/Layout/RightSidebar.test.tsx
+++ b/src/components/Layout/RightSidebar.test.tsx
@@ -12,6 +12,14 @@ jest.mock('@reach/router', () => ({
   useLocation: jest.fn(),
 }));
 
+jest.mock('./LanguageSelector', () => ({
+  LanguageSelector: () => <div data-testid="language-selector">Language Selector</div>,
+}));
+
+jest.mock('./hooks/useShowLanguageSelector', () => ({
+  useShowLanguageSelector: () => false,
+}));
+
 const mockUseLayoutContext = useLayoutContext as jest.Mock;
 const mockUseLocation = useLocation as jest.Mock;
 
diff --git a/src/components/Layout/RightSidebar.tsx b/src/components/Layout/RightSidebar.tsx
index e9722bf1eb..08f9d59220 100644
--- a/src/components/Layout/RightSidebar.tsx
+++ b/src/components/Layout/RightSidebar.tsx
@@ -2,7 +2,10 @@ import { useEffect, useRef, useState, useCallback } from 'react';
 import { useLocation } from '@reach/router';
 import cn from '@ably/ui/core/utils/cn';
 import { componentMaxHeight, HEADER_HEIGHT, HEADER_BOTTOM_MARGIN } from '@ably/ui/core/utils/heights';
-import { INKEEP_ASK_BUTTON_HEIGHT } from './utils/heights';
+import { INKEEP_ASK_BUTTON_HEIGHT, PRODUCT_BAR_HEIGHT } from './utils/heights';
+import { useLayoutContext } from 'src/contexts/layout-context';
+import { LanguageSelector } from './LanguageSelector';
+import { useShowLanguageSelector } from './hooks/useShowLanguageSelector';
 
 type SidebarHeader = {
   id: string;
@@ -49,6 +52,12 @@ const getElementIndent = (type: string, isStepped: boolean) => {
 
 const RightSidebar = () => {
   const location = useLocation();
+  const { activePage } = useLayoutContext();
+  const hasProductBar = activePage.product !== null && activePage.product !== 'platform';
+  const stickyTopPx = HEADER_HEIGHT + (hasProductBar ? PRODUCT_BAR_HEIGHT : 0);
+
+  const showLanguageSelector = useShowLanguageSelector();
+
   const [headers, setHeaders] = useState<SidebarHeader[]>([]);
   const [activeHeader, setActiveHeader] = useState<Pick<SidebarHeader, 'id'>>({
     id: location.hash ? location.hash.slice(1) : '#',
@@ -252,12 +261,18 @@ const RightSidebar = () => {
 
   return (
     <div
-      className="absolute md:sticky w-60 top-24 right-6"
+      className="hidden md:block sticky w-[312px] shrink-0"
       style={{
+        top: `${stickyTopPx}px`,
         height: componentMaxHeight(HEADER_HEIGHT, HEADER_BOTTOM_MARGIN, 32),
       }}
     >
-      <div className="hidden md:flex flex-col h-full overflow-y-auto">
+      <div className="flex flex-col h-full overflow-y-auto pt-8">
+        {showLanguageSelector && (
+          <div className="mb-6">
+            <LanguageSelector />
+          </div>
+        )}
         {headers.length > 0 ? (
           <>
             <p className="ui-text-label4 font-semibold text-neutral-1300 dark:text-neutral-000 mb-3">On this page</p>
diff --git a/src/components/Layout/hooks/useShowLanguageSelector.ts b/src/components/Layout/hooks/useShowLanguageSelector.ts
new file mode 100644
index 0000000000..0642958d41
--- /dev/null
+++ b/src/components/Layout/hooks/useShowLanguageSelector.ts
@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { useLayoutContext } from 'src/contexts/layout-context';
+import { languageData } from 'src/data/languages';
+import { ProductKey } from 'src/data/types';
+
+export const useShowLanguageSelector = () => {
+  const { activePage } = useLayoutContext();
+
+  return useMemo(
+    () =>
+      activePage.isDualLanguage ||
+      (activePage.languages.length > 0 &&
+        !activePage.languages.every(
+          (language) => !Object.keys(languageData[activePage.product as ProductKey] ?? {}).includes(language),
+        )),
+    [activePage.languages, activePage.product, activePage.isDualLanguage],
+  );
+};
diff --git a/src/components/Layout/mdx/PageHeader.test.tsx b/src/components/Layout/mdx/PageHeader.test.tsx
index 9d5dca1022..5dd76a49ae 100644
--- a/src/components/Layout/mdx/PageHeader.test.tsx
+++ b/src/components/Layout/mdx/PageHeader.test.tsx
@@ -1,150 +1,18 @@
-import React, { ReactNode } from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { PageHeader } from './PageHeader';
 
-const mockUseLayoutContext = jest.fn(() => ({
-  activePage: {
-    language: 'javascript',
-    languages: ['javascript'],
-    product: 'pubsub',
-    page: {
-      name: 'Test Page',
-      link: '/docs/test-page',
-    },
-    tree: [],
-    template: 'mdx' as const,
-  },
-}));
+describe('PageHeader', () => {
+  it('renders title and intro', () => {
+    render(<PageHeader title="Test Page" intro="Test intro text" />);
 
-// Mock the layout context
-jest.mock('src/contexts/layout-context', () => ({
-  useLayoutContext: () => mockUseLayoutContext(),
-}));
-
-// Mock useLocation from @reach/router
-jest.mock('@reach/router', () => ({
-  useLocation: () => ({ pathname: '/docs/test-page' }),
-}));
-
-// Mock Radix UI Tooltip to avoid act() warnings from async state updates
-jest.mock('@radix-ui/react-tooltip', () => ({
-  Provider: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  Root: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  Trigger: ({ children, asChild }: { children: ReactNode; asChild?: boolean }) =>
-    asChild ? children : <div>{children}</div>,
-  Portal: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-  Content: ({ children }: { children: ReactNode }) => <div>{children}</div>,
-}));
-
-// Mock Icon component
-jest.mock('@ably/ui/core/Icon', () => {
-  return {
-    __esModule: true,
-    default: ({ name, size }: { name: string; size: string }) => (
-      <span data-testid={`icon-${name}`} style={{ width: size, height: size }}>
-        {name}
-      </span>
-    ),
-  };
-});
-
-// Mock track function
-jest.mock('@ably/ui/core/insights', () => ({
-  track: jest.fn(),
-}));
-
-// Mock LanguageSelector to avoid its complexity
-jest.mock('../LanguageSelector', () => ({
-  LanguageSelector: () => <div data-testid="language-selector">Language Selector</div>,
-}));
-
-describe('PageHeader Markdown buttons', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
+    expect(screen.getByText('Test Page')).toBeInTheDocument();
+    expect(screen.getByText('Test intro text')).toBeInTheDocument();
   });
 
-  afterEach(() => {
-    jest.restoreAllMocks();
-    jest.clearAllTimers();
-  });
-
-  it('shows Markdown copy and view buttons when markdown content is available', async () => {
-    const mockMarkdownContent = '# Mock markdown content\n\nThis is a test.';
-
-    // Mock successful fetch response
-    global.fetch = jest.fn(() =>
-      Promise.resolve({
-        ok: true,
-        headers: {
-          get: (name: string) => (name === 'Content-Type' ? 'text/markdown' : null),
-        },
-        text: () => Promise.resolve(mockMarkdownContent),
-      } as Response),
-    );
-
-    // Mock clipboard API
-    const mockWriteText = jest.fn();
-    Object.assign(navigator, {
-      clipboard: {
-        writeText: mockWriteText,
-      },
-    });
-
-    // Use fake timers to control the setTimeout in resetCopyTooltip
-    jest.useFakeTimers();
-
-    render(<PageHeader title="Test Page" intro="Test intro" />);
-
-    // Wait for the fetch to complete and state to update
-    await screen.findByText('Markdown');
-
-    // Check that the Copy button is present
-    const copyButton = screen.getByLabelText('Copy Markdown');
-    expect(copyButton).toBeInTheDocument();
-
-    // Check that the View link is present
-    const viewLink = screen.getByRole('link', { name: /icon-gui-eye-outline/i });
-    expect(viewLink).toBeInTheDocument();
-    expect(viewLink).toHaveAttribute('href', '/docs/test-page.md');
-
-    // Click the copy button and verify clipboard interaction
-    act(() => {
-      fireEvent.click(copyButton);
-    });
-
-    expect(mockWriteText).toHaveBeenCalledWith(mockMarkdownContent);
-    expect(mockWriteText).toHaveBeenCalledTimes(1);
-
-    // Clean up timers
-    act(() => {
-      jest.runOnlyPendingTimers();
-    });
-    jest.useRealTimers();
-  });
-
-  it('does not show Markdown buttons when markdown content is null', async () => {
-    // Suppress console.error for this test since we're testing a failure case
-    const originalError = console.error;
-    console.error = jest.fn();
-
-    // Mock failed fetch response
-    global.fetch = jest.fn(() =>
-      Promise.resolve({
-        ok: false,
-        status: 404,
-      } as Response),
-    );
-
-    render(<PageHeader title="Test Page" intro="Test intro" />);
-
-    // Wait a bit for any async updates
-    await new Promise<void>((resolve) => setTimeout(resolve, 100));
-
-    // Check that the Markdown section is not present
-    expect(screen.queryByText('Markdown')).not.toBeInTheDocument();
-    expect(screen.queryByLabelText('Copy Markdown')).not.toBeInTheDocument();
+  it('renders title without intro', () => {
+    render(<PageHeader title="Test Page" intro="" />);
 
-    // Restore console.error
-    console.error = originalError;
+    expect(screen.getByText('Test Page')).toBeInTheDocument();
   });
 });
diff --git a/src/components/Layout/mdx/PageHeader.tsx b/src/components/Layout/mdx/PageHeader.tsx
index 9b6c083400..553bc8e15e 100644
--- a/src/components/Layout/mdx/PageHeader.tsx
+++ b/src/components/Layout/mdx/PageHeader.tsx
@@ -1,16 +1,5 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { useLocation } from '@reach/router';
-import * as Tooltip from '@radix-ui/react-tooltip';
+import React from 'react';
 import cn from '@ably/ui/core/utils/cn';
-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 { languageData, languageInfo } from 'src/data/languages';
-import { useLayoutContext } from 'src/contexts/layout-context';
-import { interactiveButtonClassName, tooltipContentClassName } from '../utils/styles';
-import { ProductKey } from 'src/data/types';
 
 type PageHeaderProps = {
   title: string;
@@ -18,225 +7,14 @@ type PageHeaderProps = {
 };
 
 export const PageHeader: React.FC<PageHeaderProps> = ({ title, intro }) => {
-  const { activePage } = useLayoutContext();
-  const { language, product, page } = activePage;
-  const location = useLocation();
-  const [copyTooltipOpen, setCopyTooltipOpen] = useState(false);
-  const [copyTooltipContent, setCopyTooltipContent] = useState('Copy');
-  const [markdownContent, setMarkdownContent] = useState<string | null>(null);
-
-  const llmLinks = useMemo(() => {
-    const docUrl = `https://ably.com${page.link}.md`;
-    const prompt = `Fetch the documentation from ${docUrl} and tell me more about ${product ? productData[product]?.nav.name : 'Ably'}'s '${page.name}' feature${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', icon: 'icon-tech-claude-mono', link: claudePath },
-    ];
-  }, [product, page.name, page.link, language]);
-
-  const showLanguageSelector = useMemo(
-    () =>
-      // Always show for dual language pages (AI Transport guides)
-      activePage.isDualLanguage ||
-      // Standard logic: show if languages exist and at least one is in languageData
-      (activePage.languages.length > 0 &&
-        !activePage.languages.every(
-          (language) => !Object.keys(languageData[product as ProductKey] ?? {}).includes(language),
-        )),
-    [activePage.languages, product, activePage.isDualLanguage],
-  );
-
-  useEffect(() => {
-    const abortController = new AbortController();
-    let isMounted = true;
-
-    const fetchMarkdown = async () => {
-      try {
-        const response = await fetch(`${location.pathname}.md`, {
-          signal: abortController.signal,
-          headers: { Accept: 'text/markdown' },
-        });
-
-        if (!isMounted) {
-          return;
-        }
-
-        if (!response.ok) {
-          // 404 is expected in development mode where markdown files aren't generated
-          if (response.status === 404) {
-            setMarkdownContent(null);
-            return;
-          }
-          throw new Error(`Failed to fetch markdown: ${response.status} ${response.statusText}`);
-        }
-
-        const contentType = response.headers.get('Content-Type')?.toLowerCase() || '';
-        const isMarkdownType =
-          contentType.includes('text/markdown') ||
-          contentType.includes('application/markdown') ||
-          contentType.includes('text/plain');
-
-        // Only reject if it's explicitly something else (like text/html or application/json)
-        if (contentType && !isMarkdownType) {
-          if (contentType.includes('text/html') || contentType.includes('application/json')) {
-            throw new Error(`Received ${contentType} response instead of markdown for ${location.pathname}.md`);
-          }
-          // For other content types, log a warning but still accept the content
-          console.warn(
-            `Markdown fetch: unexpected content type "${contentType}" for ${location.pathname}.md, accepting anyway`,
-          );
-        }
-
-        const content = await response.text();
-
-        // Only update state if component is still mounted
-        if (isMounted) {
-          setMarkdownContent(content);
-        }
-      } catch (error) {
-        // Ignore all errors if component is unmounted or if it's an abort error
-        if (!isMounted || (error instanceof Error && error.name === 'AbortError')) {
-          return;
-        }
-        // Don't log 404 errors - they're expected in development mode
-        const errorMessage = error instanceof Error ? error.message : String(error);
-        if (!errorMessage.includes('404')) {
-          // Log detailed error information for debugging (except 404s)
-          console.error(`Failed to fetch markdown for ${location.pathname}:`, {
-            error: errorMessage,
-            path: `${location.pathname}.md`,
-            errorType: error instanceof Error ? error.name : typeof error,
-          });
-        }
-        setMarkdownContent(null);
-      }
-    };
-
-    fetchMarkdown();
-
-    return () => {
-      isMounted = false;
-      abortController.abort();
-    };
-  }, [location.pathname]);
-
-  const resetCopyTooltip = useCallback(() => {
-    setCopyTooltipOpen(true);
-    setTimeout(() => {
-      setCopyTooltipOpen(false);
-      setTimeout(() => setCopyTooltipContent('Copy'), 150);
-    }, 2000);
-  }, []);
-
-  const handleCopyMarkdown = () => {
-    if (!markdownContent) {
-      return;
-    }
-
-    try {
-      navigator.clipboard.writeText(markdownContent);
-      setCopyTooltipContent('Copied!');
-      resetCopyTooltip();
-
-      track('markdown_copy_link_clicked', {
-        location: location.pathname,
-      });
-    } catch (error) {
-      console.error('Failed to copy markdown:', error);
-      setCopyTooltipContent('Error!');
-      resetCopyTooltip();
-    }
-  };
-
   return (
     <div className="my-8 border-b border-neutral-300 dark:border-neutral-1000 pb-8">
-      <h1 className={cn('ui-text-h1', intro ? 'mb-4' : 'mb-8')}>{title}</h1>
+      <h1 className={cn('ui-text-h1', intro ? 'mb-4' : 'mb-0')}>{title}</h1>
       {intro && (
-        <p className="text-neutral-800 dark:text-neutral-500 font-serif italic tracking-tight text-lg leading-normal mb-8">
+        <p className="text-neutral-800 dark:text-neutral-500 font-serif italic tracking-tight text-lg leading-normal mb-0">
           {intro}
         </p>
       )}
-
-      <div className="flex items-center gap-5 flex-wrap">
-        {showLanguageSelector && (
-          <div className="flex items-center h-8 border-r border-neutral-300 dark:border-neutral-1000 pr-5">
-            <LanguageSelector />
-          </div>
-        )}
-
-        <Tooltip.Provider delayDuration={0} disableHoverableContent>
-          {markdownContent && (
-            <div className="flex items-center gap-0.5 border-r border-neutral-300 dark:border-neutral-1000 pr-5">
-              <span className="text-p4 font-semibold text-neutral-900 dark:text-neutral-400 mr-1.5">Markdown</span>
-              <Tooltip.Root open={copyTooltipOpen} onOpenChange={setCopyTooltipOpen}>
-                <Tooltip.Trigger asChild>
-                  <button
-                    className={interactiveButtonClassName}
-                    onClick={handleCopyMarkdown}
-                    aria-label="Copy Markdown"
-                  >
-                    <Icon name="icon-gui-square-2-stack-outline" size="20px" />
-                  </button>
-                </Tooltip.Trigger>
-                <Tooltip.Portal>
-                  <Tooltip.Content className={tooltipContentClassName}>{copyTooltipContent}</Tooltip.Content>
-                </Tooltip.Portal>
-              </Tooltip.Root>
-              <Tooltip.Root>
-                <Tooltip.Trigger asChild>
-                  <a
-                    href={`${location.pathname}.md`}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={interactiveButtonClassName}
-                    onClick={() => {
-                      track('markdown_preview_link_clicked', {
-                        location: location.pathname,
-                      });
-                    }}
-                  >
-                    <Icon name="icon-gui-eye-outline" size="20px" />
-                  </a>
-                </Tooltip.Trigger>
-                <Tooltip.Portal>
-                  <Tooltip.Content className={tooltipContentClassName}>View</Tooltip.Content>
-                </Tooltip.Portal>
-              </Tooltip.Root>
-            </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>
-            {llmLinks.map(({ model, label, icon, link }) => (
-              <Tooltip.Root key={model}>
-                <Tooltip.Trigger asChild>
-                  <a
-                    key={model}
-                    href={link}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className={interactiveButtonClassName}
-                    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>
-            ))}
-          </div>
-        </Tooltip.Provider>
-      </div>
     </div>
   );
 };
diff --git a/src/components/Layout/utils/heights.ts b/src/components/Layout/utils/heights.ts
index b58a0f81e0..bbc35e8a91 100644
--- a/src/components/Layout/utils/heights.ts
+++ b/src/components/Layout/utils/heights.ts
@@ -5,4 +5,5 @@
 */
 
 export const LANGUAGE_SELECTOR_HEIGHT = 32;
+export const PRODUCT_BAR_HEIGHT = 44;
 export const INKEEP_ASK_BUTTON_HEIGHT = 48;