diff --git a/.changeset/curly-eels-carry.md b/.changeset/curly-eels-carry.md
new file mode 100644
index 0000000000..9bc3b46a39
--- /dev/null
+++ b/.changeset/curly-eels-carry.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Add sidesheet component, use it for TOC and AIChat
diff --git a/packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/(content)/layout.tsx b/packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/(content)/layout.tsx
index 53fdd28629..aa267b9647 100644
--- a/packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/(content)/layout.tsx
+++ b/packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/(content)/layout.tsx
@@ -23,7 +23,8 @@ export default async function SiteDynamicLayout({
 
     return (
         <CustomizationRootLayout
-            className="site-background"
+            htmlClassName="sheet-open:gutter-stable"
+            bodyClassName="site-background"
             forcedTheme={forcedTheme}
             context={context}
         >
diff --git a/packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/(content)/layout.tsx b/packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/(content)/layout.tsx
index 890caca50d..b86e8a3875 100644
--- a/packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/(content)/layout.tsx
+++ b/packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/(content)/layout.tsx
@@ -19,7 +19,11 @@ export default async function SiteStaticLayout({
     const withTracking = shouldTrackEvents();
 
     return (
-        <CustomizationRootLayout className="site-background" context={context}>
+        <CustomizationRootLayout
+            htmlClassName="sheet-open:gutter-stable"
+            bodyClassName="site-background"
+            context={context}
+        >
             <SiteLayout
                 context={context}
                 withTracking={withTracking}
diff --git a/packages/gitbook/src/components/AIChat/AIChat.tsx b/packages/gitbook/src/components/AIChat/AIChat.tsx
index 6bc5304811..d36ebe0e9d 100644
--- a/packages/gitbook/src/components/AIChat/AIChat.tsx
+++ b/packages/gitbook/src/components/AIChat/AIChat.tsx
@@ -27,6 +27,7 @@ import { useTrackEvent } from '../Insights';
 import { useNow } from '../hooks';
 import { Button } from '../primitives';
 import { ScrollContainer } from '../primitives/ScrollContainer';
+import { SideSheet } from '../primitives/SideSheet';
 import { AIChatControlButton } from './AIChatControlButton';
 import { AIChatIcon } from './AIChatIcon';
 import { AIChatInput } from './AIChatInput';
@@ -69,16 +70,23 @@ export function AIChat() {
     }, [chat.opened, trackEvent]);
 
     return (
-        <div
+        <SideSheet
+            side="right"
+            open={chat.opened}
+            onOpenChange={(open) => {
+                if (open) {
+                    chatController.open();
+                } else {
+                    chatController.close();
+                }
+            }}
             data-testid="ai-chat"
+            withScrim={true}
             className={tcls(
-                'ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl scroll-mt-36 px-4 py-4 transition-[width,opacity,margin,display] transition-discrete duration-300 sm:px-6 lg:fixed lg:w-80 lg:p-0 xl:w-96',
-                chat.opened
-                    ? 'lg:starting:ml-0 lg:starting:w-0 lg:starting:opacity-0'
-                    : 'hidden lg:ml-0 lg:w-0! lg:opacity-0'
+                'ai-chat mx-auto not-hydrated:hidden w-96 max-w-full pl-8 transition-[width] duration-300 ease-quint lg:max-xl:w-80'
             )}
         >
-            <EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base transition-all duration-300 max-lg:circular-corners:rounded-3xl max-lg:rounded-corners:rounded-md max-lg:border lg:w-80 xl:w-96">
+            <EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base">
                 <EmbeddableFrameMain>
                     <EmbeddableFrameHeader>
                         <AIChatDynamicIcon trademark={config.trademark} />
@@ -109,7 +117,7 @@ export function AIChat() {
                     </EmbeddableFrameBody>
                 </EmbeddableFrameMain>
             </EmbeddableFrame>
-        </div>
+        </SideSheet>
     );
 }
 
diff --git a/packages/gitbook/src/components/Cookies/CookiesToast.tsx b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
index caba3a2cfa..3de0c2b47e 100644
--- a/packages/gitbook/src/components/Cookies/CookiesToast.tsx
+++ b/packages/gitbook/src/components/Cookies/CookiesToast.tsx
@@ -41,7 +41,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
             aria-describedby={describedById}
             className={tcls(
                 'fixed',
-                'z-10',
+                'z-50',
                 'bg-tint-base',
                 'rounded-sm',
                 'straight-corners:rounded-none',
@@ -52,9 +52,9 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 'depth-flat:shadow-none',
                 'p-4',
                 'pr-8',
-                'bottom-4',
-                'right-4',
-                'left-16',
+                'bottom-[max(env(safe-area-inset-bottom),1rem)]',
+                'right-[max(env(safe-area-inset-right),1rem)]',
+                'left-[max(env(safe-area-inset-left),4rem)]',
                 'max-w-md',
                 'text-balance',
                 'sm:left-auto',
diff --git a/packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx b/packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx
index 08ee0b12b9..18a55e6e87 100644
--- a/packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx
+++ b/packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx
@@ -79,7 +79,7 @@ export async function EmbeddableDocsPage(props: EmbeddableDocsPageProps) {
                         contentClassName="p-4"
                         fadeEdges={context.sections ? [] : ['leading']}
                     >
-                        <TableOfContents className="pt-0" context={context} />
+                        <TableOfContents context={context} />
                         <PageBody
                             context={context}
                             page={page}
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 89d6cce7a0..ddb2f3f940 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -42,6 +42,7 @@ export function Header(props: {
                 `h-[${HEADER_HEIGHT_DESKTOP}px]`,
                 'sticky',
                 'top-0',
+                'pt-[env(safe-area-inset-top)]',
                 'z-30',
                 'w-full',
                 'flex-none',
diff --git a/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx b/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
index a7d0fcf0e0..0143909b2e 100644
--- a/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
+++ b/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
@@ -1,16 +1,13 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
 
-import { useScrollListener } from '../hooks/useScrollListener';
 import { Button, type ButtonProps } from '../primitives';
 
 const globalClassName = 'navigation-open';
 
-const SCROLL_DISTANCE = 320;
-
 /**
  * Button to show/hide the table of content on mobile.
  */
@@ -18,25 +15,6 @@ export function HeaderMobileMenu(props: ButtonProps) {
     const language = useLanguage();
 
     const pathname = usePathname();
-    const hasScrollRef = useRef(false);
-
-    const [isOpen, setIsOpen] = useState(false);
-
-    const toggleNavigation = () => {
-        if (!hasScrollRef.current && document.body.classList.contains(globalClassName)) {
-            document.body.classList.remove(globalClassName);
-            setIsOpen(false);
-        } else {
-            document.body.classList.add(globalClassName);
-            window.scrollTo(0, 0);
-            setIsOpen(true);
-        }
-    };
-
-    const windowRef = useRef(typeof window === 'undefined' ? null : window);
-    useScrollListener(() => {
-        hasScrollRef.current = window.scrollY >= SCROLL_DISTANCE;
-    }, windowRef);
 
     // Close the navigation when navigating to a page
     useEffect(() => {
@@ -50,8 +28,10 @@ export function HeaderMobileMenu(props: ButtonProps) {
             variant="blank"
             size="default"
             label={tString(language, 'table_of_contents_button_label')}
-            onClick={toggleNavigation}
-            active={isOpen}
+            onClick={() => {
+                document.body.classList.toggle(globalClassName);
+            }}
+            // Since the button is hidden behind the TOC after toggling, we don't need to keep track of its active state.
             {...props}
         />
     );
diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
index be6dd59815..c81b316588 100644
--- a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
+++ b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
@@ -57,13 +57,15 @@ function preloadFont(fontData: FontData) {
  * It takes care of setting the theme and the language.
  */
 export async function CustomizationRootLayout(props: {
+    /** The class name to apply to the html element. */
+    htmlClassName?: string;
     /** The class name to apply to the body element. */
-    className?: string;
+    bodyClassName?: string;
     forcedTheme?: CustomizationThemeMode | null;
     context: GitBookAnyContext;
     children: React.ReactNode;
 }) {
-    const { className, context, forcedTheme, children } = props;
+    const { htmlClassName, bodyClassName, context, forcedTheme, children } = props;
     const customization =
         'customization' in context ? context.customization : defaultCustomization();
 
@@ -107,7 +109,8 @@ export async function CustomizationRootLayout(props: {
                 // Set the dark/light class statically to avoid flashing and make it work when JS is disabled
                 (forcedTheme ?? customization.themes.default) === CustomizationThemeMode.Dark
                     ? 'dark'
-                    : ''
+                    : '',
+                htmlClassName
             )}
         >
             <head>
@@ -179,7 +182,7 @@ export async function CustomizationRootLayout(props: {
                     }
                 `}</style>
             </head>
-            <body className={className}>
+            <body className={tcls(bodyClassName, 'sheet-open:overflow-hidden')}>
                 <IconsProvider
                     assetsURL={GITBOOK_ICONS_URL}
                     assetsURLToken={GITBOOK_ICONS_TOKEN}
diff --git a/packages/gitbook/src/components/SiteLayout/SiteLayout.tsx b/packages/gitbook/src/components/SiteLayout/SiteLayout.tsx
index deac249ddf..e203751f64 100644
--- a/packages/gitbook/src/components/SiteLayout/SiteLayout.tsx
+++ b/packages/gitbook/src/components/SiteLayout/SiteLayout.tsx
@@ -101,6 +101,7 @@ export async function generateSiteLayoutViewport(context: GitBookSiteContext): P
         width: 'device-width',
         initialScale: 1,
         maximumScale: 1,
+        viewportFit: 'cover',
     };
 }
 
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
index 36097a3bc8..f50c466fc0 100644
--- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
@@ -128,7 +128,7 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                         'lg:justify-center',
                         CONTAINER_STYLE,
                         'site-width-wide:max-w-screen-4xl',
-                        'hydrated:transition-[max-width] duration-300',
+                        'transition-[max-width] duration-300',
 
                         // Ensure the footer is display below the viewport even if the content is not enough
                         withFooter && [
@@ -141,79 +141,82 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                     <TableOfContents
                         context={context}
                         header={
-                            withTopHeader ? null : (
+                            <div
+                                className={tcls(
+                                    'pr-4',
+                                    'flex',
+                                    withTopHeader ? 'lg:hidden' : '',
+                                    'grow-0',
+                                    'dark:shadow-light/1',
+                                    'text-base/tight',
+                                    'items-center'
+                                )}
+                            >
+                                <HeaderLogo context={context} />
+                                {variants.translations.length > 1 ? (
+                                    <TranslationsDropdown
+                                        context={context}
+                                        siteSpace={
+                                            variants.translations.find(
+                                                (space) => space.id === siteSpace.id
+                                            ) ?? siteSpace
+                                        }
+                                        siteSpaces={variants.translations}
+                                        className="[&_.button-leading-icon]:block! ml-auto py-2 [&_.button-content]:hidden"
+                                    />
+                                ) : null}
+                            </div>
+                        }
+                        // Displays the search button and/or the space dropdown in the ToC
+                        // according to the header/variant settings.
+                        // E.g if there is no header, the search button will be displayed in the ToC.
+                        innerHeader={
+                            !withTopHeader || variants.generic.length > 1 ? (
                                 <div
                                     className={tcls(
-                                        'hidden',
-                                        'pr-4',
-                                        'mt-2',
-                                        'lg:flex',
-                                        'grow-0',
-                                        'dark:shadow-light/1',
-                                        'text-base/tight',
-                                        'items-center'
+                                        'my-4 sidebar-default:mt-2 flex flex-col gap-2 px-5 empty:hidden',
+                                        variants.generic.length > 1 ? '' : 'max-lg:hidden'
                                     )}
                                 >
-                                    <HeaderLogo context={context} />
-                                    {variants.translations.length > 1 ? (
-                                        <TranslationsDropdown
+                                    {!withTopHeader && (
+                                        <div className="flex gap-2 max-lg:hidden">
+                                            <SearchContainer
+                                                style={CustomizationSearchStyle.Subtle}
+                                                withVariants={variants.generic.length > 1}
+                                                withSiteVariants={
+                                                    visibleSections?.list.some(
+                                                        (s) =>
+                                                            s.object === 'site-section' &&
+                                                            s.siteSpaces.length > 1
+                                                    ) ?? false
+                                                }
+                                                withSections={withSections}
+                                                section={visibleSections?.current}
+                                                siteSpace={siteSpace}
+                                                siteSpaces={visibleSiteSpaces}
+                                                viewport="desktop"
+                                            />
+                                        </div>
+                                    )}
+                                    {!withTopHeader && withSections && visibleSections && (
+                                        <SiteSectionList
+                                            className="hidden lg:block"
+                                            sections={encodeClientSiteSections(
+                                                context,
+                                                visibleSections
+                                            )}
+                                        />
+                                    )}
+                                    {variants.generic.length > 1 ? (
+                                        <SpacesDropdown
                                             context={context}
-                                            siteSpace={
-                                                variants.translations.find(
-                                                    (space) => space.id === siteSpace.id
-                                                ) ?? siteSpace
-                                            }
-                                            siteSpaces={variants.translations}
-                                            className="[&_.button-leading-icon]:block! ml-auto py-2 [&_.button-content]:hidden"
+                                            siteSpace={siteSpace}
+                                            siteSpaces={variants.generic}
+                                            className="w-full px-3"
                                         />
                                     ) : null}
                                 </div>
-                            )
-                        }
-                        // Displays the search button and/or the space dropdown in the ToC
-                        // according to the header/variant settings.
-                        // E.g if there is no header, the search button will be displayed in the ToC.
-                        innerHeader={
-                            <>
-                                {!withTopHeader && (
-                                    <div className="flex gap-2">
-                                        <SearchContainer
-                                            style={CustomizationSearchStyle.Subtle}
-                                            withVariants={variants.generic.length > 1}
-                                            withSiteVariants={
-                                                visibleSections?.list.some(
-                                                    (s) =>
-                                                        s.object === 'site-section' &&
-                                                        s.siteSpaces.length > 1
-                                                ) ?? false
-                                            }
-                                            withSections={withSections}
-                                            section={visibleSections?.current}
-                                            siteSpace={siteSpace}
-                                            siteSpaces={visibleSiteSpaces}
-                                            className="max-lg:hidden"
-                                            viewport="desktop"
-                                        />
-                                    </div>
-                                )}
-                                {!withTopHeader && withSections && visibleSections && (
-                                    <SiteSectionList
-                                        className={tcls('hidden', 'lg:block')}
-                                        sections={encodeClientSiteSections(
-                                            context,
-                                            visibleSections
-                                        )}
-                                    />
-                                )}
-                                {variants.generic.length > 1 ? (
-                                    <SpacesDropdown
-                                        context={context}
-                                        siteSpace={siteSpace}
-                                        siteSpaces={variants.generic}
-                                        className="w-full px-3 py-2"
-                                    />
-                                ) : null}
-                            </>
+                            ) : null
                         }
                     />
                     {children}
diff --git a/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx b/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
index 13b3988873..3180e197e7 100644
--- a/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
+++ b/packages/gitbook/src/components/TableOfContents/PageDocumentItem.tsx
@@ -32,7 +32,8 @@ export function PageDocumentItem(props: { page: ClientTOCPageDocument }) {
                                 'my-2',
                                 'border-tint-subtle',
                                 'sidebar-list-default:border-l',
-                                'sidebar-list-line:border-l'
+                                'sidebar-list-line:border-l',
+                                'break-anywhere'
                             )}
                         />
                     ) : null
diff --git a/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx b/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx
index 5f07a2decf..05e250b3b1 100644
--- a/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx
+++ b/packages/gitbook/src/components/TableOfContents/PageGroupItem.tsx
@@ -25,8 +25,8 @@ export function PageGroupItem(props: { page: ClientTOCPageGroup; isFirst?: boole
                     '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-subtle',
                     '[html.sidebar-filled.theme-muted_&]:bg-tint-base',
                     '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
-                    '[html.sidebar-default.theme-gradient_&]:bg-gradient-primary',
-                    '[html.sidebar-default.theme-gradient.tint_&]:bg-gradient-tint',
+                    'lg:[html.sidebar-default.theme-gradient_&]:bg-gradient-primary',
+                    'lg:[html.sidebar-default.theme-gradient.tint_&]:bg-gradient-tint',
                     isFirst ? '-mt-6' : ''
                 )}
             >
diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
index 729507d3d0..85bce61584 100644
--- a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
+++ b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
@@ -3,12 +3,16 @@ import { SiteInsightsTrademarkPlacement } from '@gitbook/api';
 import type React from 'react';
 
 import { tcls } from '@/lib/tailwind';
+import { SideSheet } from '../primitives/SideSheet';
 import { PagesList } from './PagesList';
 import { TOCScrollContainer } from './TOCScroller';
 import { TableOfContentsScript } from './TableOfContentsScript';
 import { Trademark } from './Trademark';
 import { encodeClientTableOfContents } from './encodeClientTableOfContents';
 
+/**
+ * Sidebar container, responsible for setting the right dimensions and position for the sidebar.
+ */
 export async function TableOfContents(props: {
     context: GitBookSiteContext;
     header?: React.ReactNode; // Displayed outside the scrollable TOC as a sticky header
@@ -22,23 +26,33 @@ export async function TableOfContents(props: {
 
     return (
         <>
-            <aside // Sidebar container, responsible for setting the right dimensions and position for the sidebar.
+            <SideSheet
+                side="left"
                 data-testid="table-of-contents"
                 id="table-of-contents"
+                toggleClass="navigation-open"
+                withScrim={true}
+                withCloseButton={true}
                 className={tcls(
-                    'group',
+                    'group/table-of-contents',
                     'text-sm',
 
                     'grow-0',
                     'shrink-0',
-                    'basis-full',
-                    'lg:basis-72',
+
+                    'w-72',
+                    'basis-72',
                     'lg:page-no-toc:basis-56',
 
-                    'relative',
-                    'z-1',
+                    'max-lg:not-sidebar-filled:bg-tint-base',
+                    'max-lg:not-sidebar-filled:border-r',
+                    'border-tint-subtle',
+
+                    'lg:flex!',
+                    'lg:animate-none!',
                     'lg:sticky',
                     'lg:mr-12',
+                    'lg:z-0!',
 
                     // Server-side static positioning
                     'lg:top-0',
@@ -60,29 +74,20 @@ export async function TableOfContents(props: {
                     'lg:page-no-toc:[html[style*="--outline-top-offset"]_&]:top-(--outline-top-offset)!',
                     'lg:page-no-toc:[html[style*="--outline-height"]_&]:top-(--outline-height)!',
 
-                    'pt-4',
-                    'pb-4',
+                    'py-6',
                     'lg:sidebar-filled:pr-6',
                     'lg:page-no-toc:pr-0',
+                    'max-lg:pl-8',
 
-                    'hidden',
-                    'navigation-open:flex!',
-                    'lg:flex',
-                    'lg:page-no-toc:hidden',
-                    'xl:page-no-toc:flex',
-                    'lg:site-header-none:page-no-toc:flex',
                     'flex-col',
                     'gap-4',
-
-                    'navigation-open:border-b',
-                    'border-tint-subtle',
                     className
                 )}
             >
-                {header && header}
+                {header ? header : null}
                 <div // The actual sidebar, either shown with a filled bg or transparent.
                     className={tcls(
-                        'lg:-ms-5',
+                        '-ms-5',
                         'relative flex grow flex-col overflow-hidden border-tint-subtle',
 
                         'sidebar-filled:bg-tint-subtle',
@@ -91,6 +96,7 @@ export async function TableOfContents(props: {
                         '[html.sidebar-filled.theme-muted_&]:bg-tint-base',
                         '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
                         '[html.sidebar-filled.theme-gradient_&]:border',
+                        'max-lg:sidebar-filled:border',
                         'page-no-toc:bg-transparent!',
                         'page-no-toc:border-none!',
 
@@ -99,22 +105,14 @@ export async function TableOfContents(props: {
                         'page-has-toc:[html.sidebar-filled.circular-corners_&]:rounded-3xl'
                     )}
                 >
-                    {innerHeader ? (
-                        <div className="my-4 flex flex-col space-y-4 px-5 empty:hidden">
-                            {innerHeader}
-                        </div>
-                    ) : null}
+                    {innerHeader ? innerHeader : null}
                     <TOCScrollContainer // The scrollview inside the sidebar
-                        className={tcls(
-                            'flex grow flex-col p-2 pt-4',
-                            customization.trademark.enabled && 'lg:pb-20',
-                            'hide-scrollbar overflow-y-auto'
-                        )}
+                        className="hide-scrollbar gutter-stable flex grow flex-col overflow-y-auto p-2"
                     >
                         <PagesList
                             pages={pages}
                             isRoot={true}
-                            style="page-no-toc:hidden border-tint-subtle sidebar-list-line:border-l"
+                            style="mb-5 page-no-toc:hidden grow border-tint-subtle sidebar-list-line:border-l"
                         />
                         {customization.trademark.enabled ? (
                             <Trademark
@@ -124,7 +122,7 @@ export async function TableOfContents(props: {
                         ) : null}
                     </TOCScrollContainer>
                 </div>
-            </aside>
+            </SideSheet>
             <TableOfContentsScript />
         </>
     );
diff --git a/packages/gitbook/src/components/TableOfContents/Trademark.tsx b/packages/gitbook/src/components/TableOfContents/Trademark.tsx
index f5dbe8387d..20aa580467 100644
--- a/packages/gitbook/src/components/TableOfContents/Trademark.tsx
+++ b/packages/gitbook/src/components/TableOfContents/Trademark.tsx
@@ -19,46 +19,28 @@ export function Trademark(props: {
     return (
         <div
             className={tcls(
-                'relative',
+                'sticky',
                 'z-2',
-                'lg:absolute',
 
-                'left-0',
-                'right-2',
-                'bottom-0',
+                'mt-auto',
+                'inset-x-0',
+                '-bottom-2',
+                '-mb-2',
+                'sidebar-filled:pb-2',
+                'page-no-toc:pb-0',
 
                 'pointer-events-none',
-                'sidebar-filled:pl-2',
-                'sidebar-filled:pb-2',
-                'sidebar-filled:page-no-toc:p-0',
 
                 'bg-tint-base',
                 'sidebar-filled:bg-tint-subtle',
                 'theme-muted:bg-tint-subtle',
                 '[html.sidebar-filled.theme-muted_&]:bg-tint-base',
                 '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
+                'lg:page-no-toc:bg-transparent',
 
                 'rounded-lg',
                 'straight-corners:rounded-none',
                 'circular-corners:rounded-2xl',
-
-                'before:hidden',
-                'lg:before:block',
-                'before:content-[""]',
-                'before:absolute',
-                'before:inset-x-0',
-                'before:bottom-full',
-                'before:h-8',
-                'before:bg-linear-to-b',
-                'before:from-transparent',
-                'before:to-tint-base',
-                'sidebar-filled:before:to-tint-subtle',
-                'theme-muted:before:to-tint-subtle',
-                '[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-subtle',
-                '[html.sidebar-filled.theme-muted_&]:before:to-tint-base',
-                '[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-base',
-                'page-no-toc:before:to-transparent!',
-
                 className
             )}
         >
@@ -109,8 +91,7 @@ export function TrademarkLink(props: {
                 'hover:bg-tint',
                 'hover:text-tint-strong',
 
-                'ring-2',
-                'lg:ring-1',
+                'ring-1',
                 'ring-inset',
                 'ring-tint-subtle',
 
diff --git a/packages/gitbook/src/components/layout.ts b/packages/gitbook/src/components/layout.ts
index 4f6579ab6a..93dad216bd 100644
--- a/packages/gitbook/src/components/layout.ts
+++ b/packages/gitbook/src/components/layout.ts
@@ -9,9 +9,9 @@ export const HEADER_HEIGHT_DESKTOP = 64 as const;
  * Style for the container to adapt between normal and full width.
  */
 export const CONTAINER_STYLE: ClassValue = [
-    'px-4',
-    'sm:px-6',
-    'md:px-8',
+    'px-4 pl-[max(env(safe-area-inset-left),1rem)] pr-[max(env(safe-area-inset-right),1rem)]',
+    'sm:px-6 sm:pl-[max(env(safe-area-inset-left),1.5rem)] sm:pr-[max(env(safe-area-inset-right),1.5rem)]',
+    'md:px-8 md:pl-[max(env(safe-area-inset-left),2rem)] md:pr-[max(env(safe-area-inset-right),2rem)]',
     'max-w-screen-2xl',
     'mx-auto',
 ];
diff --git a/packages/gitbook/src/components/primitives/HoverCard.tsx b/packages/gitbook/src/components/primitives/HoverCard.tsx
index 62bf42bee9..9edea89820 100644
--- a/packages/gitbook/src/components/primitives/HoverCard.tsx
+++ b/packages/gitbook/src/components/primitives/HoverCard.tsx
@@ -28,7 +28,7 @@ export function HoverCard(
         <RadixHoverCard.Portal>
             <RadixHoverCard.Content
                 side={props.side ?? 'top'}
-                className="pointer-events-none z-40 w-screen max-w-md animate-scale-in px-4 data-[state='closed']:animate-scale-out sm:w-auto"
+                className="pointer-events-none z-50 w-screen max-w-md animate-scale-in px-4 data-[state='closed']:animate-scale-out sm:w-auto"
             >
                 <div
                     className={tcls(
diff --git a/packages/gitbook/src/components/primitives/SideSheet.tsx b/packages/gitbook/src/components/primitives/SideSheet.tsx
new file mode 100644
index 0000000000..e90fd43da1
--- /dev/null
+++ b/packages/gitbook/src/components/primitives/SideSheet.tsx
@@ -0,0 +1,194 @@
+'use client';
+
+import { useLanguage } from '@/intl/client';
+import { tString } from '@/intl/translate';
+import { type ClassValue, tcls } from '@/lib/tailwind';
+import React from 'react';
+import { useIsMobile } from '../hooks/useIsMobile';
+import { Button } from './Button';
+
+/**
+ * SideSheet - A slide-in panel component that can appear from the left or right side.
+ *
+ * Supports both controlled and uncontrolled modes:
+ * - Controlled: Provide both `open` and `onOpenChange` props. Parent manages state.
+ * - Uncontrolled: Omit `open` prop. Component manages its own state internally.
+ */
+export function SideSheet(
+    props: {
+        /** Which side the sheet slides in from */
+        side: 'left' | 'right';
+        /**
+         * Optional CSS class to monitor and sync with `document.body.classList`.
+         * When set, a MutationObserver watches for the class and syncs the sheet state accordingly.
+         * Adding this class opens the sheet, removing it closes it.
+         * Works in both controlled and uncontrolled modes.
+         */
+        toggleClass?: string;
+        /**
+         * Modal behavior: true (always modal), false (never modal), or 'mobile' (modal only on mobile).
+         * Defaults to 'mobile'.
+         */
+        modal?: true | false | 'mobile';
+        /**
+         * Controls visibility. If provided, component is controlled (parent manages state).
+         * If undefined, component is uncontrolled (manages its own state).
+         */
+        open?: boolean;
+        /** Called when the open state changes. Receives the new state (true/false). Only used in controlled mode. */
+        onOpenChange?: (open: boolean) => void;
+        /** Show a backdrop overlay when modal */
+        withScrim?: boolean;
+        /** Show a close button when modal */
+        withCloseButton?: boolean;
+    } & React.HTMLAttributes<HTMLDivElement>
+) {
+    const {
+        side,
+        children,
+        className,
+        toggleClass,
+        open: openState,
+        modal = 'mobile',
+        withScrim,
+        withCloseButton,
+        onOpenChange,
+        ...rest
+    } = props;
+
+    const isMobile = useIsMobile();
+    const isModal = modal === 'mobile' ? isMobile : modal;
+
+    // Internal state for uncontrolled mode (only used when open prop is undefined)
+    const [open, setOpen] = React.useState(openState ?? false);
+
+    // Determine actual open state: controlled (from prop) or uncontrolled (from internal state)
+    const isOpen = openState !== undefined ? openState : open;
+
+    const handleClose = React.useCallback(() => {
+        if (openState !== undefined) {
+            // Controlled mode: parent manages state, notify via callback with new state
+            onOpenChange?.(false);
+        } else {
+            // Uncontrolled mode: update internal state and sync body class if needed
+            setOpen(false);
+            if (toggleClass) {
+                document.body.classList.remove(toggleClass);
+            }
+        }
+    }, [openState, onOpenChange, toggleClass]);
+
+    // Sync the sheet state with the body class if the toggleClass is set
+    React.useEffect(() => {
+        if (!toggleClass) {
+            return;
+        }
+
+        const callback = (mutationList: MutationRecord[]) => {
+            for (const mutation of mutationList) {
+                if (mutation.attributeName === 'class') {
+                    const shouldBeOpen = document.body.classList.contains(toggleClass);
+                    if (openState !== undefined) {
+                        // Controlled mode: sync with parent's state
+                        // Notify parent of state change via onOpenChange
+                        if (shouldBeOpen !== openState) {
+                            onOpenChange?.(shouldBeOpen);
+                        }
+                    } else {
+                        // Uncontrolled mode: sync internal state with body class
+                        setOpen(shouldBeOpen);
+                    }
+                }
+            }
+        };
+
+        const observer = new MutationObserver(callback);
+        observer.observe(document.body, { attributes: true });
+
+        return () => observer.disconnect();
+    }, [toggleClass, openState, onOpenChange]);
+
+    return (
+        <>
+            {withScrim ? (
+                <SideSheetScrim
+                    className={tcls(isModal && isOpen ? '' : 'hidden opacity-0 backdrop-blur-none')}
+                    onClick={handleClose}
+                />
+            ) : null}
+
+            <aside
+                className={tcls(
+                    'side-sheet',
+                    isOpen
+                        ? side === 'left'
+                            ? 'hydrated:animate-enter-from-left'
+                            : 'hydrated:animate-enter-from-right'
+                        : side === 'left'
+                          ? 'hydrated:animate-exit-to-left'
+                          : 'hydrated:animate-exit-to-right',
+                    'fixed inset-y-0 z-41 max-w-full', // Above the side sheet scrim on z-40
+                    side === 'left' ? 'left-0' : 'right-0',
+                    withCloseButton ? (side === 'left' ? 'mr-16' : 'ml-16') : '',
+                    isOpen ? '' : 'hidden',
+                    className
+                )}
+                aria-expanded={isOpen}
+                aria-modal={isModal}
+                {...rest}
+            >
+                {children}
+                {withCloseButton ? (
+                    <SideSheetCloseButton
+                        className={tcls(
+                            side === 'left' ? 'left-full ml-4' : 'right-full mr-4',
+                            isModal && isOpen ? 'animate-blur-in' : 'hidden animate-blur-out'
+                        )}
+                        onClick={handleClose}
+                    />
+                ) : null}
+            </aside>
+        </>
+    );
+}
+
+/** Backdrop overlay shown behind the modal sheet */
+export function SideSheetScrim(props: { className?: ClassValue; onClick?: () => void }) {
+    const { className, onClick } = props;
+    return (
+        <div
+            id="side-sheet-scrim"
+            onClick={() => {
+                onClick?.();
+            }}
+            onKeyUp={(e) => {
+                if (e.key === 'Escape') {
+                    onClick?.();
+                }
+            }}
+            className={tcls(
+                'fixed inset-0 z-40 items-start bg-tint-base/3 not-hydrated:opacity-0 starting:opacity-0 backdrop-blur-md starting:backdrop-blur-none transition-[opacity,display,backdrop-filter] transition-discrete duration-250 dark:bg-tint-base/6',
+                className
+            )}
+        />
+    );
+}
+
+/** Close button displayed outside the sheet when modal */
+export function SideSheetCloseButton(props: { className?: ClassValue; onClick?: () => void }) {
+    const { className, onClick } = props;
+    const language = useLanguage();
+    return (
+        <Button
+            icon="xmark"
+            variant="secondary"
+            size="default"
+            iconOnly
+            label={tString(language, 'close')}
+            className={tcls('absolute top-4 bg-tint-base! transition-discrete', className)}
+            onClick={() => {
+                onClick?.();
+            }}
+        />
+    );
+}
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
index 8d3ab5b85c..da9661537b 100644
--- a/packages/gitbook/tailwind.config.ts
+++ b/packages/gitbook/tailwind.config.ts
@@ -328,10 +328,10 @@ const config: Config = {
                 blurOut: 'blurOut 200ms ease-in both',
                 'blurOut-slow': 'blurOut 500ms ease-in both',
 
-                enterFromLeft: 'enterFromLeft 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
-                enterFromRight: 'enterFromRight 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
-                exitToLeft: 'exitToLeft 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
-                exitToRight: 'exitToRight 250ms cubic-bezier(0.83, 0, 0.17, 1) both',
+                enterFromLeft: 'enterFromLeft 300ms cubic-bezier(0.83, 0, 0.17, 1) both',
+                enterFromRight: 'enterFromRight 300ms cubic-bezier(0.83, 0, 0.17, 1) both',
+                exitToLeft: 'exitToLeft 300ms cubic-bezier(0.83, 0, 0.17, 1) both',
+                exitToRight: 'exitToRight 300ms cubic-bezier(0.83, 0, 0.17, 1) both',
 
                 heightIn: 'heightIn 200ms ease both',
                 crawl: 'crawl 2s ease-in-out infinite',
@@ -474,18 +474,18 @@ const config: Config = {
                 },
                 enterFromRight: {
                     from: { opacity: '0', transform: 'translateX(50%)', display: 'none' },
-                    to: { opacity: '1', transform: 'translateX(0)', display: 'block' },
+                    to: { opacity: '1', transform: 'translateX(0)', display: 'inherit' },
                 },
                 enterFromLeft: {
                     from: { opacity: '0', transform: 'translateX(-50%)', display: 'none' },
-                    to: { opacity: '1', transform: 'translateX(0)', display: 'block' },
+                    to: { opacity: '1', transform: 'translateX(0)', display: 'inherit' },
                 },
                 exitToRight: {
-                    from: { opacity: '1', transform: 'translateX(0)', display: 'block' },
+                    from: { opacity: '1', transform: 'translateX(0)', display: 'inherit' },
                     to: { opacity: '0', transform: 'translateX(50%)', display: 'none' },
                 },
                 exitToLeft: {
-                    from: { opacity: '1', transform: 'translateX(0)', display: 'block' },
+                    from: { opacity: '1', transform: 'translateX(0)', display: 'inherit' },
                     to: { opacity: '0', transform: 'translateX(-50%)', display: 'none' },
                 },
                 scaleIn: {
@@ -576,7 +576,11 @@ const config: Config = {
              * Variant when the Table of Content navigation is open.
              */
             addVariant('navigation-open', 'body.navigation-open &');
-            addVariant('chat-open', 'body:has(.ai-chat:not(.hidden)) &');
+            addVariant('chat-open', 'body:has(.ai-chat[aria-expanded="true"]) &');
+            addVariant(
+                'sheet-open',
+                'html:has(.side-sheet[aria-modal="true"][aria-expanded="true"]) &, &:has(.side-sheet[aria-modal="true"][aria-expanded="true"])'
+            );
 
             /**
              * Variant when a header is displayed.