diff --git a/package.json b/package.json
index cf3e1dcb9f..0d74044835 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@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",
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/Header.tsx b/src/components/Layout/Header.tsx
index 6782f8d508..8d0c3dd436 100644
--- a/src/components/Layout/Header.tsx
+++ b/src/components/Layout/Header.tsx
@@ -7,13 +7,13 @@ 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';
 import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from '@ably/ui/core/utils/heights';
-import cn from '@ably/ui/core/utils/cn';
 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 Link from '../Link';
 import { InkeepSearchBar } from '../SearchBar/InkeepSearchBar';
+import { secondaryButtonClassName, iconButtonClassName, tooltipContentClassName } from './utils/styles';
 
 // Tailwind 'md' breakpoint from tailwind.config.js
 const MD_BREAKPOINT = 1040;
@@ -50,14 +50,6 @@ const helpResourcesItems = [
     external: true,
   },
 ];
-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]',
-);
-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';
-const iconButtonClassName = cn(secondaryButtonClassName, 'w-9 p-0');
 
 const Header: React.FC = () => {
   const location = useLocation();
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 f869eb579e..fc369582af 100644
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -42,7 +42,7 @@ const Layout: React.FC<LayoutProps> = ({ children, pageContext }) => {
       <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', { 'overflow-x-auto': !isRedocPage })}>
+        <Container as="main" className={cn('flex-1 px-4 -mx-4', { 'overflow-x-auto': !isRedocPage })}>
           {leftSidebar ? <Breadcrumbs /> : <div />}
           {children}
           <Footer />
diff --git a/src/components/Layout/MDXWrapper.tsx b/src/components/Layout/MDXWrapper.tsx
index 5e74554bad..f830619b99 100644
--- a/src/components/Layout/MDXWrapper.tsx
+++ b/src/components/Layout/MDXWrapper.tsx
@@ -13,26 +13,31 @@ 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 Aside from '../blocks/dividers/Aside';
 
-import PageTitle from '../PageTitle';
-import { Frontmatter, PageContextType } from './Layout';
-import { MarkdownProvider } from '../Markdown';
-import Article from '../Article';
 import If from './mdx/If';
 import { useCopyableHeaders } from './mdx/headers';
-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 { PageHeader } from './mdx/PageHeader';
+
+import { Frontmatter, PageContextType } from './Layout';
+import { ActivePage } from './utils/nav';
+
+import { HtmlComponentPropsData } from '../html-component-props';
+import { MarkdownProvider } from '../Markdown';
+
+import Article from '../Article';
 import { Head } from '../Head';
+
+import UserContext from 'src/contexts/user-context';
+import { useLayoutContext } from 'src/contexts/layout-context';
+import { languageData } from 'src/data/languages';
 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 +52,8 @@ type Replacement = {
   replacer: () => string;
 };
 
+type ElementProps = { className?: string; children?: ReactNode };
+
 const SDKContext = createContext<SDKContextType | undefined>(undefined);
 
 const useSDK = () => {
@@ -114,10 +121,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;
     }
 
@@ -222,7 +231,7 @@ const MDXWrapper: React.FC<MDXWrapperProps> = ({ children, pageContext, location
             Tiles,
           }}
         >
-          <PageTitle>{title}</PageTitle>
+          <PageHeader title={title} description={description} />
           {children}
         </MarkdownProvider>
       </Article>
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/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/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/tailwind.config.js b/tailwind.config.js
index 66041d7af5..d9620ed5c2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -12,6 +12,9 @@ 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',
       },
diff --git a/yarn.lock b/yarn.lock
index 0ff086ad80..d3fe883010 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3514,6 +3514,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"