diff --git a/.changeset/large-months-hang.md b/.changeset/large-months-hang.md
new file mode 100644
index 000000000..24b84bf9c
--- /dev/null
+++ b/.changeset/large-months-hang.md
@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Fixed scalar api client routing
diff --git a/.changeset/sharp-beans-build.md b/.changeset/sharp-beans-build.md
new file mode 100644
index 000000000..4f78ee586
--- /dev/null
+++ b/.changeset/sharp-beans-build.md
@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Bumped scalar api client pacakge
diff --git a/.changeset/shiny-chefs-compare.md b/.changeset/shiny-chefs-compare.md
new file mode 100644
index 000000000..d617799d8
--- /dev/null
+++ b/.changeset/shiny-chefs-compare.md
@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Fix an issue where the space dropdown was shown under the site sections in Safari.
diff --git a/.changeset/weak-dodos-love.md b/.changeset/weak-dodos-love.md
new file mode 100644
index 000000000..1454281bd
--- /dev/null
+++ b/.changeset/weak-dodos-love.md
@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Fix an issue where the space dropdown could appear behind the header.
diff --git a/.changeset/weak-swans-battle.md b/.changeset/weak-swans-battle.md
new file mode 100644
index 000000000..b37814200
--- /dev/null
+++ b/.changeset/weak-swans-battle.md
@@ -0,0 +1,5 @@
+---
+'gitbook': minor
+---
+
+Fix the styling of site section tabs on smaller screens.
diff --git a/bun.lockb b/bun.lockb
index 3943c27d9..5f010c7dd 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/gitbook/src/components/DocumentView/Block.tsx b/packages/gitbook/src/components/DocumentView/Block.tsx
index 87ec13f51..d38553bf3 100644
--- a/packages/gitbook/src/components/DocumentView/Block.tsx
+++ b/packages/gitbook/src/components/DocumentView/Block.tsx
@@ -22,10 +22,8 @@ import { Heading } from './Heading';
 import { Hint } from './Hint';
 import { Images } from './Images';
 import { IntegrationBlock } from './Integration';
+import { List } from './List';
 import { ListItem } from './ListItem';
-import { ListOrdered } from './ListOrdered';
-import { ListTasks } from './ListTasks';
-import { ListUnordered } from './ListUnordered';
 import { BlockMath } from './Math';
 import { OpenAPI } from './OpenAPI';
 import { Paragraph } from './Paragraph';
@@ -65,11 +63,9 @@ export function Block<T extends DocumentBlock>(props: BlockProps<T>) {
             case 'heading-3':
                 return <Heading {...props} block={block} />;
             case 'list-ordered':
-                return <ListOrdered {...props} block={block} />;
             case 'list-unordered':
-                return <ListUnordered {...props} block={block} />;
             case 'list-tasks':
-                return <ListTasks {...props} block={block} />;
+                return <List {...props} block={block} />;
             case 'list-item':
                 return <ListItem {...props} block={block} />;
             case 'code':
diff --git a/packages/gitbook/src/components/DocumentView/List.tsx b/packages/gitbook/src/components/DocumentView/List.tsx
new file mode 100644
index 000000000..00f5da1f5
--- /dev/null
+++ b/packages/gitbook/src/components/DocumentView/List.tsx
@@ -0,0 +1,44 @@
+import {
+    DocumentBlockListOrdered,
+    DocumentBlockListTasks,
+    DocumentBlockListUnordered,
+} from '@gitbook/api';
+import assertNever from 'assert-never';
+
+import { BlockProps } from './Block';
+import { Blocks } from './Blocks';
+
+export function List(
+    props: BlockProps<
+        DocumentBlockListUnordered | DocumentBlockListOrdered | DocumentBlockListTasks
+    >,
+) {
+    const { block, style, ancestorBlocks, ...contextProps } = props;
+
+    return (
+        <Blocks
+            {...contextProps}
+            tag={getListTag(block.type)}
+            nodes={block.nodes}
+            ancestorBlocks={[...ancestorBlocks, block]}
+            style={['space-y-2', style]}
+        />
+    );
+}
+
+function getListTag(
+    type:
+        | DocumentBlockListUnordered['type']
+        | DocumentBlockListOrdered['type']
+        | DocumentBlockListTasks['type'],
+) {
+    switch (type) {
+        case 'list-ordered':
+            return 'ol';
+        case 'list-unordered':
+        case 'list-tasks':
+            return 'ul';
+        default:
+            assertNever(type);
+    }
+}
diff --git a/packages/gitbook/src/components/DocumentView/ListItem.module.css b/packages/gitbook/src/components/DocumentView/ListItem.module.css
deleted file mode 100644
index 1fb3dbd5c..000000000
--- a/packages/gitbook/src/components/DocumentView/ListItem.module.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.olListItemBullet {
-    /* Align the bullet container with the first line of text */
-    line-height: inherit;
-    height: 1lh;
-    /* Align the bullet content with the middle of the text */
-    display: flex;
-    align-items: center;
-}
-.olListItemBullet::before {
-    @apply text-base;
-    --tw-content: attr(data-value) '. ';
-    content: var(--tw-content);
-}
diff --git a/packages/gitbook/src/components/DocumentView/ListItem.tsx b/packages/gitbook/src/components/DocumentView/ListItem.tsx
index 6cd49563e..8274d4117 100644
--- a/packages/gitbook/src/components/DocumentView/ListItem.tsx
+++ b/packages/gitbook/src/components/DocumentView/ListItem.tsx
@@ -1,114 +1,231 @@
 import {
+    DocumentBlock,
     DocumentBlockListItem,
     DocumentBlockListOrdered,
-    DocumentBlockListTasks,
     DocumentBlockListUnordered,
 } from '@gitbook/api';
-import classNames from 'classnames';
+import assertNever from 'assert-never';
+import { assert } from 'ts-essentials';
 
 import { Checkbox } from '@/components/primitives';
 import { tcls } from '@/lib/tailwind';
 
 import { BlockProps } from './Block';
 import { Blocks } from './Blocks';
-import styles from './ListItem.module.css';
 import { getBlockTextStyle } from './spacing';
 
 export function ListItem(props: BlockProps<DocumentBlockListItem>) {
     const { block, ancestorBlocks, ...contextProps } = props;
 
-    const textStyle = getBlockTextStyle(block);
-
-    const parent = ancestorBlocks[ancestorBlocks.length - 1] as
-        | DocumentBlockListOrdered
-        | DocumentBlockListUnordered
-        | DocumentBlockListTasks
-        | undefined;
-
-    const ListItemType = () => {
-        switch (parent?.type) {
-            case 'list-tasks':
-                return (
-                    <li>
-                        <div className={tcls('flex', 'flex-row')}>
-                            <div
-                                className={tcls(
-                                    textStyle.textSize,
-                                    'flex',
-                                    'flex-col',
-                                    'justify-center',
-                                    'h-[1lh]',
-                                )}
-                            >
-                                <Checkbox
-                                    id={block.key!}
-                                    disabled
-                                    checked={block.data?.checked}
-                                    className={tcls('relative')}
-                                />
-                            </div>
-
-                            <label htmlFor={block.key} className={tcls('flex-1')}>
-                                <Blocks
-                                    {...contextProps}
-                                    nodes={block.nodes}
-                                    ancestorBlocks={[...ancestorBlocks, block]}
-                                    blockStyle={tcls('flip-heading-hash')}
-                                    style={tcls('ml-2', 'space-y-2')}
-                                />
-                            </label>
-                        </div>
-                    </li>
-                );
-            case 'list-ordered':
-                const start = parent.data.start ?? 1;
-                const indexInParent = parent.nodes.findIndex((node) => node.key === block.key) ?? 0;
-                const index = indexInParent + start;
-
-                return (
-                    <li value={index} className={tcls(textStyle.lineHeight)}>
-                        <div
-                            data-value={index}
-                            className={classNames(
-                                'bullet',
-                                styles.olListItemBullet,
-                                tcls(textStyle.textSize),
-                            )}
-                        ></div>
-                        {/* zero width space to force layouts with empty lists */}
-                        <Blocks
-                            {...contextProps}
-                            nodes={block.nodes}
-                            ancestorBlocks={[...ancestorBlocks, block]}
-                            style={tcls('space-y-2', 'flex-1', 'flex', 'flex-col')}
-                            blockStyle={tcls(
-                                textStyle.lineHeight,
-                                'min-h-[1lh]',
-                                //flip heading hash icon if list item is a heading
-                                'flip-heading-hash',
-                            )}
+    const parent = ancestorBlocks[ancestorBlocks.length - 1];
+    assert(
+        (parent && parent.type === 'list-ordered') ||
+            parent.type === 'list-unordered' ||
+            parent.type === 'list-tasks',
+        'Invalid parent list type',
+    );
+
+    const blocksElement = (
+        <Blocks
+            {...contextProps}
+            nodes={block.nodes}
+            ancestorBlocks={[...ancestorBlocks, block]}
+            blockStyle={tcls(
+                'min-h-[1lh]',
+                // flip heading hash icon if list item is a heading
+                'flip-heading-hash',
+                // remove margin-top for the first heading in a list
+                '[&:is(h2)>div]:mt-0',
+                '[&:is(h3)>div]:mt-0',
+                '[&:is(h4)>div]:mt-0',
+            )}
+            style="space-y-2 flex flex-col flex-1"
+        />
+    );
+
+    switch (parent.type) {
+        case 'list-tasks':
+            return (
+                <ListItemLI block={block}>
+                    <ListItemPrefix block={block}>
+                        <Checkbox
+                            id={block.key!}
+                            disabled
+                            checked={block.data?.checked}
+                            className="relative"
+                            size="small"
+                        />
+                    </ListItemPrefix>
+
+                    <label htmlFor={block.key} className={tcls('flex-1')}>
+                        {blocksElement}
+                    </label>
+                </ListItemLI>
+            );
+        case 'list-ordered':
+            return (
+                <ListItemLI block={block}>
+                    <ListItemPrefix block={block}>
+                        <PseudoBefore
+                            content={getOrderedListItemPrefixContent({
+                                depth: getListItemDepth({ ancestorBlocks, type: parent.type }),
+                                block,
+                                parent,
+                            })}
+                            style={{
+                                fontSize: 'min(1em, 24px)',
+                            }}
                         />
-                    </li>
-                );
-            default:
-                return (
-                    <li className={tcls(textStyle.lineHeight)}>
-                        <div className={tcls('bullet', textStyle.textSize)}></div>
-                        <Blocks
-                            {...contextProps}
-                            nodes={block.nodes}
-                            ancestorBlocks={[...ancestorBlocks, block]}
-                            style={tcls('space-y-2', 'flex', 'flex-col')}
-                            blockStyle={tcls(
-                                'min-h-[1lh]',
-                                //flip heading hash icon if list item is a heading
-                                'flip-heading-hash',
-                            )}
+                    </ListItemPrefix>
+                    {blocksElement}
+                </ListItemLI>
+            );
+        case 'list-unordered':
+            return (
+                <ListItemLI block={block}>
+                    <ListItemPrefix block={block}>
+                        <PseudoBefore
+                            content={getUnorderedListItemsPrefixContent({
+                                depth: getListItemDepth({ ancestorBlocks, type: parent.type }),
+                            })}
+                            fontFamily="Arial"
+                            style={{ fontSize: 'min(1.5em, 24px)', lineHeight: 1 }}
                         />
-                    </li>
-                );
+                    </ListItemPrefix>
+                    {blocksElement}
+                </ListItemLI>
+            );
+        default:
+            assertNever(parent);
+    }
+}
+
+function getListItemDepth(input: {
+    ancestorBlocks: DocumentBlock[];
+    type: DocumentBlockListOrdered['type'] | DocumentBlockListUnordered['type'];
+}): number {
+    const { ancestorBlocks, type } = input;
+
+    let depth = -1;
+
+    for (let i = ancestorBlocks.length - 1; i >= 0; i--) {
+        const block = ancestorBlocks[i];
+        if (block.type === type) {
+            depth = depth + 1;
+            continue;
         }
-    };
+        if (block.type === 'list-item') {
+            continue;
+        }
+        break;
+    }
+
+    return depth;
+}
+
+function ListItemLI(props: { block: DocumentBlockListItem; children: React.ReactNode }) {
+    const textStyle = getBlockTextStyle(props.block);
+    return <li className={tcls(textStyle.lineHeight, 'flex items-start')}>{props.children}</li>;
+}
 
-    return <ListItemType />;
+function ListItemPrefix(props: { block: DocumentBlockListItem; children: React.ReactNode }) {
+    const textStyle = getBlockTextStyle(props.block);
+    return (
+        <div
+            className={tcls(
+                textStyle.textSize,
+                textStyle.lineHeight,
+                'flex items-center justify-center mr-1 min-h-[1lh] min-w-6 text-dark/6 dark:text-light/5',
+            )}
+        >
+            {props.children}
+        </div>
+    );
+}
+
+function getUnorderedListItemsPrefixContent(input: { depth: number }): string {
+    switch (input.depth % 3) {
+        case 0:
+            return '•';
+        case 1:
+            return '◦';
+        case 2:
+            return '▪';
+        default:
+            return '•';
+    }
+}
+
+function PseudoBefore(props: {
+    style?: React.CSSProperties;
+    content: string;
+    fontFamily?: string;
+}) {
+    return (
+        <div
+            className="before:font-var before:content-[--pseudoBefore--content]"
+            style={
+                {
+                    '--pseudoBefore--content': `'${props.content}'`,
+                    '--font-family': props.fontFamily ?? 'inherit',
+                    ...props.style,
+                } as React.CSSProperties
+            }
+        />
+    );
+}
+
+function getOrderedListItemPrefixContent(input: {
+    depth: number;
+    parent: DocumentBlockListOrdered;
+    block: DocumentBlockListItem;
+}): string {
+    const { parent, block } = input;
+    const start = parent.data.start ?? 1;
+    const index = parent.nodes.findIndex((node) => node.key === block.key) ?? 0;
+    const value = index + start;
+    switch (input.depth % 3) {
+        // Use numbers
+        case 0: {
+            return `${value}.`;
+        }
+        // Use letters
+        case 1: {
+            const letters = 'abcdefghijklmnopqrstuvwxyz';
+            return `${letters[(value - 1) % letters.length]}.`;
+        }
+        // Use roman numbers
+        case 2: {
+            return `${toRoman(value).toLowerCase()}.`;
+        }
+        default:
+            return '•';
+    }
+}
+
+function toRoman(input: number): string {
+    const lookup = {
+        M: 1000,
+        CM: 900,
+        D: 500,
+        CD: 400,
+        C: 100,
+        XC: 90,
+        L: 50,
+        XL: 40,
+        X: 10,
+        IX: 9,
+        V: 5,
+        IV: 4,
+        I: 1,
+    };
+    let roman = '';
+    let number = input;
+    for (const i in lookup) {
+        while (number >= lookup[i as keyof typeof lookup]) {
+            roman += i;
+            number -= lookup[i as keyof typeof lookup];
+        }
+    }
+    return roman;
 }
diff --git a/packages/gitbook/src/components/DocumentView/ListOrdered.tsx b/packages/gitbook/src/components/DocumentView/ListOrdered.tsx
deleted file mode 100644
index 80a7c9e34..000000000
--- a/packages/gitbook/src/components/DocumentView/ListOrdered.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { DocumentBlockListOrdered } from '@gitbook/api';
-
-import { BlockProps } from './Block';
-import { Blocks } from './Blocks';
-
-export function ListOrdered(props: BlockProps<DocumentBlockListOrdered>) {
-    const { block, style, ancestorBlocks, ...contextProps } = props;
-
-    return (
-        <Blocks
-            {...contextProps}
-            tag="ol"
-            nodes={block.nodes}
-            ancestorBlocks={[...ancestorBlocks, block]}
-            style={[
-                'space-y-2',
-                'flex',
-                'flex-col',
-                '[&>li]:gap-[1ch]',
-
-                '[counter-reset:list-decimal]',
-
-                '[&>li]:flex',
-                '[&>li]:flex-row',
-
-                /* '[&>li>.bullet]:w-[1ch]', */
-                '[&>li>.bullet]:tabular-nums',
-                '[&>li>.bullet]:whitespace-nowrap',
-                '[&>li>.bullet]:list-decimal',
-
-                '[&>li>.bullet]:before:h-[1lh]',
-                '[&>li>.bullet]:before:leading-[inherit]',
-                '[&>li>.bullet]:before:flex',
-                /* '[&>li>.bullet]:before:pr-[1ch]', */
-                '[&>li>.bullet]:text-dark/6',
-
-                //remove any spacing when using heading as list item
-                '[&>li>div_div]:mt-0',
-
-                'dark:[&>li>.bullet]:text-light/6',
-                style,
-            ]}
-        />
-    );
-}
diff --git a/packages/gitbook/src/components/DocumentView/ListTasks.tsx b/packages/gitbook/src/components/DocumentView/ListTasks.tsx
deleted file mode 100644
index 3db02eab0..000000000
--- a/packages/gitbook/src/components/DocumentView/ListTasks.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { DocumentBlockListTasks, DocumentBlockListUnordered } from '@gitbook/api';
-
-import { BlockProps } from './Block';
-import { Blocks } from './Blocks';
-
-export function ListTasks(props: BlockProps<DocumentBlockListTasks>) {
-    const { block, style, ancestorBlocks, ...contextProps } = props;
-
-    return (
-        <Blocks
-            {...contextProps}
-            tag="ul"
-            nodes={block.nodes}
-            ancestorBlocks={[...ancestorBlocks, block]}
-            style={[
-                'list-none',
-                '[&>li]:pl-[.25ch]',
-                //remove any spacing when using heading as list item
-                '[&>li>div_div]:mt-0',
-                'space-y-2',
-                style,
-            ]}
-        />
-    );
-}
diff --git a/packages/gitbook/src/components/DocumentView/ListUnordered.tsx b/packages/gitbook/src/components/DocumentView/ListUnordered.tsx
deleted file mode 100644
index 32ab36bad..000000000
--- a/packages/gitbook/src/components/DocumentView/ListUnordered.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { DocumentBlockListUnordered } from '@gitbook/api';
-
-import { BlockProps } from './Block';
-import { Blocks } from './Blocks';
-
-export function ListUnordered(props: BlockProps<DocumentBlockListUnordered>) {
-    const { block, style, ancestorBlocks, ...contextProps } = props;
-
-    const nestedBulletStyle = [
-        // Level 1
-        '[&>li>.bullet:before]:bullet-circleFilled',
-        // Level 2
-        `[&_&>li>.bullet:before]:bullet-circle`,
-        // Level 3
-        `[&_&_&>li>.bullet:before]:bullet-dash`,
-        // Level 4
-        `[&_&_&_&>li>.bullet:before]:bullet-squareFilled`,
-        // Level 5
-        `[&_&_&_&_&>li>.bullet:before]:bullet-square`,
-        // Level 6 // reset back to reg bullets here
-        `[&_&_&_&_&_&>li>.bullet:before]:bullet-circleFilled`,
-    ];
-
-    return (
-        <Blocks
-            {...contextProps}
-            tag="ul"
-            nodes={block.nodes}
-            ancestorBlocks={[...ancestorBlocks, block]}
-            style={[
-                'list-none',
-                'space-y-2',
-                '[&>li]:relative',
-                '[&>li]:ps-[2.25ch]',
-                //remove any spacing when using heading as list item
-                '[&>li>div_div]:mt-0',
-                //custom content setup for lists
-                '[&>li>.bullet]:before:bg-dark/6',
-                '[&>li>.bullet]:before:absolute',
-                '[&>li>.bullet]:before:left-0',
-                '[&>li>.bullet]:before:w-[1ch]',
-                '[&>li>.bullet]:before:h-[1lh]',
-                '[&>li>.bullet]:before:[mask-repeat:no-repeat]',
-                '[&>li>.bullet]:before:[mask-position:left]',
-                'dark:[&>li>.bullet]:before:bg-light/6',
-                nestedBulletStyle,
-                style,
-            ]}
-        />
-    );
-}
diff --git a/packages/gitbook/src/components/DocumentView/spacing.ts b/packages/gitbook/src/components/DocumentView/spacing.ts
index 8e03527c9..c628722ba 100644
--- a/packages/gitbook/src/components/DocumentView/spacing.ts
+++ b/packages/gitbook/src/components/DocumentView/spacing.ts
@@ -6,46 +6,44 @@ import {
 } from '@gitbook/api';
 import { assertNever } from 'assert-never';
 
-import { ClassValue } from '@/lib/tailwind';
-
 /**
  * Get the line height of a block
  */
 export function getBlockTextStyle(block: DocumentBlock): {
     /** Tailwind class for the text size */
-    textSize: ClassValue;
+    textSize: string;
     /** Tailwind class for the height (h-*) */
-    lineHeight: ClassValue;
+    lineHeight: string;
     /** Tailwind class for the margin top (mt-*) */
-    marginTop?: ClassValue;
+    marginTop?: string;
 } {
     switch (block.type) {
         case 'paragraph':
             return {
-                textSize: ['text-base'],
+                textSize: 'text-base',
                 lineHeight: 'leading-normal',
             };
         case 'heading-1':
             return {
-                textSize: ['text-3xl', 'font-semibold'],
+                textSize: 'text-3xl font-semibold',
                 lineHeight: 'leading-tight',
-                marginTop: '[margin-top:_1em]',
+                marginTop: 'mt-[1em]',
             };
         case 'heading-2':
             return {
-                textSize: ['text-2xl', 'font-semibold'],
+                textSize: 'text-2xl font-semibold',
                 lineHeight: 'leading-snug',
-                marginTop: '[margin-top:_0.75em]',
+                marginTop: 'mt-[0.75em]',
             };
         case 'heading-3':
             return {
-                textSize: ['text-base', 'font-semibold'],
+                textSize: 'text-base font-semibold',
                 lineHeight: 'leading-snug',
-                marginTop: '[margin-top:_0.5em]',
+                marginTop: 'mt-[0.5em]',
             };
         case 'divider':
             return {
-                textSize: [],
+                textSize: '',
                 lineHeight: 'leading-none',
             };
         case 'list-ordered':
@@ -56,7 +54,7 @@ export function getBlockTextStyle(block: DocumentBlock): {
             return getBlockTextStyle(block.nodes[0]);
         default:
             return {
-                textSize: ['text-base'],
+                textSize: 'text-base',
                 lineHeight: 'leading-normal',
             };
     }
diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx
index f12d86dff..597522a49 100644
--- a/packages/gitbook/src/components/Header/Dropdown.tsx
+++ b/packages/gitbook/src/components/Header/Dropdown.tsx
@@ -44,7 +44,7 @@ export function Dropdown<E extends HTMLElement>(props: {
                     'absolute',
                     'top-full',
                     'left-0',
-                    'z-10',
+                    'z-20',
                     'origin-top-left',
                     'invisible',
                     'transition-opacity',
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 41dcc0b9d..a08a797d7 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -26,10 +26,8 @@ export function Header(props: {
     context: ContentRefContext;
     customization: CustomizationSettings | SiteCustomizationSettings;
     withTopHeader?: boolean;
-    children?: React.ReactNode;
 }) {
-    const { children, context, space, site, spaces, sections, customization, withTopHeader } =
-        props;
+    const { context, space, site, spaces, sections, customization, withTopHeader } = props;
     const isCustomizationDefault =
         customization.header.preset === CustomizationHeaderPreset.Default;
     const hasSiteSections = sections && sections.list.length > 1;
@@ -144,12 +142,12 @@ export function Header(props: {
             {sections ? (
                 <div
                     className={tcls(
-                        'w-full shadow-thintop dark:shadow-light/1 bg-light dark:bg-dark z-[9] mt-0.5',
+                        'w-full shadow-thintop dark:shadow-light/1 bg-light dark:bg-dark mt-0.5',
+                        // Handle long section tabs, particularly on smaller screens.
+                        'overflow-x-auto hide-scroll',
                     )}
                 >
-                    <div className={tcls(CONTAINER_STYLE)}>
-                        <SiteSectionTabs {...sections} />
-                    </div>
+                    <SiteSectionTabs {...sections} />
                 </div>
             ) : null}
         </header>
diff --git a/packages/gitbook/src/components/RootLayout/globals.css b/packages/gitbook/src/components/RootLayout/globals.css
index d64820543..4b5f7b3df 100644
--- a/packages/gitbook/src/components/RootLayout/globals.css
+++ b/packages/gitbook/src/components/RootLayout/globals.css
@@ -126,23 +126,6 @@
         @apply [&:is(h1,h2,h3,h4)>div:first-child]:[grid-area:1/2];
         @apply [&:is(h1,h2,h3,h4)>div:first-child]:ml-1;
     }
-
-    /*  bullet icons */
-    .bullet-dash {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjEiIHk9IjIuNSIgd2lkdGg9IjgiIGhlaWdodD0iMS41IiByeD0iMC42NiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==")];
-    }
-    .bullet-circleFilled {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIzIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K")];
-    }
-    .bullet-circle {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIuNzUiIHk9IjAuNzUiIHdpZHRoPSI1LjUiIGhlaWdodD0iNS41IiByeD0iMi43NSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPC9zdmc+Cg==")];
-    }
-    .bullet-squareFilled {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjIiIHdpZHRoPSI2IiBoZWlnaHQ9IjYiIHJ4PSIxIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K")];
-    }
-    .bullet-square {
-        @apply [mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxtYXNrIGlkPSJwYXRoLTEtaW5zaWRlLTFfOV80OCIgZmlsbD0id2hpdGUiPgo8cmVjdCB4PSIyIiB3aWR0aD0iNyIgaGVpZ2h0PSI3IiByeD0iMSIvPgo8L21hc2s+CjxyZWN0IHg9IjIiIHdpZHRoPSI3IiBoZWlnaHQ9IjciIHJ4PSIxIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjMiIG1hc2s9InVybCgjcGF0aC0xLWluc2lkZS0xXzlfNDgpIi8+Cjwvc3ZnPgo=")];
-    }
 }
 
 @layer utilities {
diff --git a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx
index fe56a2684..31bfd0c56 100644
--- a/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx
+++ b/packages/gitbook/src/components/SiteSectionTabs/SiteSectionTabs.tsx
@@ -1,11 +1,10 @@
 'use client';
 import { SiteSection } from '@gitbook/api';
-import { Icon } from '@gitbook/icons';
 import React from 'react';
 
 import { tcls } from '@/lib/tailwind';
 
-import { Button, Link } from '../primitives';
+import { Link } from '../primitives';
 
 /**
  * A set of navigational tabs representing site sections for multi-section sites
@@ -35,7 +34,11 @@ export function SiteSectionTabs(props: {
         if (currentTabRef.current && navRef.current) {
             const rect = currentTabRef.current.getBoundingClientRect();
             const navRect = navRef.current.getBoundingClientRect();
-            setTabDimensions({ left: rect.left - navRect.left, width: rect.width });
+
+            setTabDimensions({
+                left: rect.left - navRect.left,
+                width: rect.width,
+            });
         }
     }, []);
 
@@ -56,13 +59,11 @@ export function SiteSectionTabs(props: {
     const scale = (tabDimensions?.width ?? 0) * 0.01;
     const startPos = `${tabDimensions?.left ?? 0}px`;
 
-    const hasMoreSections = false; /** TODO: determine whether we need to show the more button */
-
     return tabs.length > 0 ? (
         <nav
             aria-label="Sections"
             ref={navRef}
-            className="flex flex-nowrap items-center max-w-screen mb-px"
+            className="flex flex-nowrap items-center mb-px max-w-screen-2xl mx-auto page-full-width:max-w-full"
             style={
                 {
                     '--tab-opacity': `${opacity}`,
@@ -71,43 +72,53 @@ export function SiteSectionTabs(props: {
                 } as React.CSSProperties
             }
         >
-            <div
-                className={tcls(
-                    'relative',
-                    'flex',
-                    'gap-2',
-                    'bg-transparent',
-                    /* add a pseudo element for active tab indicator */
-                    'after:block',
-                    "after:content-['']",
-                    'after:origin-left',
-                    'after:absolute',
-                    'after:-bottom-px',
-                    'after:left-0',
-                    'after:opacity-[--tab-opacity]',
-                    'after:scale-x-[--tab-scale]',
-                    'after:[transition:_opacity_150ms_25ms,transform_150ms]',
-                    'after:motion-reduce:transition-none',
-                    'after:translate-x-[var(--tab-start)]',
-                    'after:will-change-transform',
-                    'after:h-0.5',
-                    'after:w-[100px]',
-                    'after:bg-primary',
-                    'dark:after:bg-primary-400',
-                )}
-                role="tablist"
-            >
-                {tabs.map((tab, index) => (
-                    <Tab
-                        active={currentIndex === index}
-                        key={index + tab.path}
-                        label={tab.label}
-                        href={tab.path}
-                        ref={currentIndex === index ? currentTabRef : null}
-                    />
-                ))}
+            <div className="flex flex-col bg-transparent">
+                {/* An element for the tabs which includes the page padding */}
+                <div
+                    role="tablist"
+                    className={tcls(
+                        'flex flex-row gap-2',
+                        // Horizontal padding, which is the layout padding minus the padding of the tabs themselves.
+                        'px-1',
+                        'sm:px-3',
+                        'md:px-5',
+                    )}
+                >
+                    {tabs.map((tab, index) => (
+                        <Tab
+                            active={currentIndex === index}
+                            key={index + tab.path}
+                            label={tab.label}
+                            href={tab.path}
+                            ref={currentIndex === index ? currentTabRef : null}
+                        />
+                    ))}
+                </div>
+                {/* A container for a pseudo element for active tab indicator. A container is needed so we can set
+                    a relative position without breaking the z-index of other parts of the header. */}
+                <div
+                    className={tcls(
+                        'flex',
+                        'relative',
+                        'after:block',
+                        "after:content-['']",
+                        'after:origin-left',
+                        'after:absolute',
+                        'after:-bottom-px',
+                        'after:left-0',
+                        'after:opacity-[--tab-opacity]',
+                        'after:scale-x-[--tab-scale]',
+                        'after:[transition:_opacity_150ms_25ms,transform_150ms]',
+                        'after:motion-reduce:transition-none',
+                        'after:translate-x-[var(--tab-start)]',
+                        'after:will-change-transform',
+                        'after:h-0.5',
+                        'after:w-[100px]',
+                        'after:bg-primary',
+                        'dark:after:bg-primary-400',
+                    )}
+                ></div>
             </div>
-            {hasMoreSections ? <MoreSectionsButton /> : null}
         </nav>
     ) : null;
 }
@@ -136,16 +147,3 @@ const Tab = React.forwardRef<HTMLSpanElement, { active: boolean; href: string; l
         );
     },
 );
-
-/**
- * Dropdown trigger for when there are too many sections to show them all
- */
-function MoreSectionsButton() {
-    return (
-        <div>
-            <Button variant="secondary" size="small">
-                <Icon icon="ellipsis-h" size={12} />
-            </Button>
-        </div>
-    );
-}
diff --git a/packages/gitbook/src/components/primitives/Checkbox.tsx b/packages/gitbook/src/components/primitives/Checkbox.tsx
index fcd60d5c8..cc1a8417e 100644
--- a/packages/gitbook/src/components/primitives/Checkbox.tsx
+++ b/packages/gitbook/src/components/primitives/Checkbox.tsx
@@ -6,16 +6,22 @@ import React from 'react';
 
 import { tcls } from '@/lib/tailwind';
 
+export type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> & {
+    /**
+     * The size of the checkbox.
+     * @default medium
+     */
+    size?: 'small' | 'medium';
+};
+
 export const Checkbox = React.forwardRef<
     React.ElementRef<typeof CheckboxPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+    CheckboxProps
+>(({ className, size = 'medium', ...props }, ref) => (
     <CheckboxPrimitive.Root
         ref={ref}
         className={tcls(
             'peer',
-            'h-5',
-            'w-5',
             'shrink-0',
             'rounded-sm',
             'straight-corners:rounded-none',
@@ -32,11 +38,12 @@ export const Checkbox = React.forwardRef<
             'dark:ring-light/3',
             'dark:contrast-more:ring-light/6',
             'dark:data-[state=checked]:bg-primary-500',
+            { small: 'size-4', medium: 'size-5' }[size],
             className,
         )}
         {...props}
     >
-        <CheckboxPrimitive.Indicator className={tcls('relative', 'text-current')}>
+        <CheckboxPrimitive.Indicator className="relative text-current">
             {props.checked ? (
                 <Icon icon="check" iconStyle={IconStyle.Solid} className={'size-3'} />
             ) : null}
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
index 5a89db26c..cffcb2731 100644
--- a/packages/gitbook/tailwind.config.ts
+++ b/packages/gitbook/tailwind.config.ts
@@ -64,6 +64,7 @@ const config: Config = {
             fontFamily: {
                 sans: ['var(--font-content)'],
                 mono: ['var(--font-mono)'],
+                var: ['var(--font-family)'],
             },
             colors: {
                 // Dynamic colors matching the customization settings
diff --git a/packages/react-openapi/package.json b/packages/react-openapi/package.json
index e211fce1e..fba3072cb 100644
--- a/packages/react-openapi/package.json
+++ b/packages/react-openapi/package.json
@@ -10,7 +10,7 @@
     },
     "version": "0.7.0",
     "dependencies": {
-        "@scalar/api-client-react": "1.0.72",
+        "@scalar/api-client-react": "1.0.76",
         "classnames": "^2.5.1",
         "flatted": "^3.2.9",
         "openapi-types": "^12.1.3",
diff --git a/packages/react-openapi/src/OpenAPICodeSample.tsx b/packages/react-openapi/src/OpenAPICodeSample.tsx
index 62e8bf41f..3174d3711 100644
--- a/packages/react-openapi/src/OpenAPICodeSample.tsx
+++ b/packages/react-openapi/src/OpenAPICodeSample.tsx
@@ -119,7 +119,7 @@ export function OpenAPICodeSample(props: {
             tabs={samples}
             overlay={
                 data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'] ? null : (
-                    <ScalarApiButton />
+                    <ScalarApiButton method={data.method} path={data.path} />
                 )
             }
         />
diff --git a/packages/react-openapi/src/ScalarApiButton.tsx b/packages/react-openapi/src/ScalarApiButton.tsx
index 21b0b0ed1..f2835e22a 100644
--- a/packages/react-openapi/src/ScalarApiButton.tsx
+++ b/packages/react-openapi/src/ScalarApiButton.tsx
@@ -6,12 +6,15 @@ import React from 'react';
 /**
  * Button which launches the Scalar API Client
  */
-export function ScalarApiButton() {
+export function ScalarApiButton({ method, path }: { method: string; path: string }) {
     const client = useApiClientModal();
 
     return (
         <div className="scalar scalar-activate">
-            <button className="scalar-activate-button" onClick={() => client?.open()}>
+            <button
+                className="scalar-activate-button"
+                onClick={() => client?.open({ method, path })}
+            >
                 <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" fill="none">
                     <path
                         stroke="currentColor"