diff --git a/.changeset/eleven-pants-work.md b/.changeset/eleven-pants-work.md
new file mode 100644
index 0000000000..e9e13d193d
--- /dev/null
+++ b/.changeset/eleven-pants-work.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Display sidebar on no-TOC pages
diff --git a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
index 9ac0b218e3..edaccf8156 100644
--- a/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
+++ b/packages/gitbook/src/components/DocumentView/OpenAPI/style.css
@@ -122,7 +122,7 @@
 }
 
 .openapi-column-preview-body {
-    @apply flex flex-col gap-4 sticky top-4 site-header:top-20 site-header-sections:top-32 page-api-block:xl:max-2xl:top-32 print-mode:static;
+    @apply flex flex-col gap-4 sticky top-4 site-header:top-20 site-header-sections:page-has-toc:top-32 page-api-block:xl:max-2xl:top-32 print-mode:static;
 }
 
 .openapi-column-preview pre {
diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx
index 67a926163b..e69f093c5f 100644
--- a/packages/gitbook/src/components/Header/Dropdown.tsx
+++ b/packages/gitbook/src/components/Header/Dropdown.tsx
@@ -38,13 +38,11 @@ export function Dropdown<E extends HTMLElement>(props: {
                 aria-orientation="vertical"
                 aria-labelledby={dropdownId}
                 className={tcls(
-                    'w-52',
                     'max-h-80',
                     'flex',
                     'absolute',
                     'top-full',
                     'left-0',
-                    'z-20',
                     'origin-top-left',
                     'invisible',
                     'transition-opacity',
@@ -54,22 +52,24 @@ export function Dropdown<E extends HTMLElement>(props: {
                     className
                 )}
             >
-                <div
-                    className={tcls(
-                        'mt-2',
-                        'w-full',
-                        'bg-tint-base',
-                        'rounded-lg',
-                        'straight-corners:rounded-sm',
-                        'p-2',
-                        'shadow-1xs',
-                        'overflow-auto',
-                        'ring-1',
-                        'ring-tint-subtle',
-                        'focus:outline-none'
-                    )}
-                >
-                    {children}
+                <div className="fixed z-50 w-52">
+                    <div
+                        className={tcls(
+                            'mt-2',
+                            'w-full',
+                            'bg-tint-base',
+                            'rounded-lg',
+                            'straight-corners:rounded-sm',
+                            'p-2',
+                            'shadow-1xs',
+                            'overflow-auto',
+                            'ring-1',
+                            'ring-tint-subtle',
+                            'focus:outline-none'
+                        )}
+                    >
+                        {children}
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 316d769a7f..85d1a965e2 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -20,7 +20,6 @@ import { SpacesDropdown } from './SpacesDropdown';
 export function Header(props: { context: GitBookSiteContext; withTopHeader?: boolean }) {
     const { context, withTopHeader } = props;
     const { siteSpace, siteSpaces, sections, customization } = context;
-    const isMultiVariants = siteSpaces.length > 1;
 
     return (
         <header
@@ -31,7 +30,7 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                 `h-[${HEADER_HEIGHT_DESKTOP}px]`,
                 'sticky',
                 'top-0',
-                'z-10',
+                'z-30',
                 'w-full',
                 'flex-none',
                 'shadow-[0px_1px_0px]',
@@ -68,14 +67,12 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                             'py-3',
                             'min-h-16',
                             'sm:h-16',
-                            isMultiVariants && 'page-no-toc:max-[400px]:flex-wrap',
                             CONTAINER_STYLE
                         )}
                     >
                         <div
                             className={tcls(
                                 'flex max-w-full',
-                                isMultiVariants && 'page-no-toc:max-[400px]:w-full',
                                 'min-w-0 shrink items-center justify-start gap-2 lg:gap-4'
                             )}
                         >
@@ -86,25 +83,13 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                                     'text-tint-strong',
                                     'theme-bold:text-header-link',
                                     'hover:bg-tint-hover',
-                                    'theme-bold:hover:bg-header-link/3'
+                                    'theme-bold:hover:bg-header-link/3',
+                                    'page-no-toc:hidden'
                                 )}
                             />
                             <HeaderLogo context={context} />
                         </div>
 
-                        {isMultiVariants && (
-                            <div className="mr-auto page-no-toc:flex hidden">
-                                <SpacesDropdown
-                                    context={context}
-                                    siteSpace={siteSpace}
-                                    siteSpaces={siteSpaces}
-                                    className={
-                                        'theme-bold:bg-header-link/2 theme-bold:text-header-link theme-bold:ring-header-link/4 theme-bold:group-focus-within/dropdown:bg-header-link/3 theme-bold:group-focus-within/dropdown:text-header-link theme-bold:group-focus-within/dropdown:ring-header-link/6 theme-bold:group-hover/dropdown:bg-header-link/3 theme-bold:group-hover/dropdown:text-header-link theme-bold:group-hover/dropdown:ring-header-link/6 theme-bold:contrast-more:bg-header-background theme-bold:contrast-more:text-header-link theme-bold:contrast-more:ring-header-link theme-bold:contrast-more:group-hover/dropdown:text-header-link theme-bold:contrast-more:group-hover/dropdown:ring-header-link theme-bold:contrast-more:group-focus-within/dropdown:text-header-link theme-bold:contrast-more:group-focus-within/dropdown:ring-header-link theme-bold:dark:bg-header-link/2 theme-bold:dark:text-header-link theme-bold:dark:ring-header-link/4 theme-bold:dark:group-hover/dropdown:bg-header-link/3 theme-bold:dark:group-hover/dropdown:text-header-link theme-bold:dark:group-hover/dropdown:ring-header-link/6 theme-bold:contrast-more:dark:group-hover/dropdown:text-header-link theme-bold:contrast-more:dark:group-hover/dropdown:ring-header-link theme-bold:dark:group-focus-within/dropdown:bg-header-link/3 theme-bold:dark:group-focus-within/dropdown:text-header-link theme-bold:dark:group-focus-within/dropdown:ring-header-link/6 theme-bold:contrast-more:dark:group-focus-within/dropdown:text-header-link theme-bold:contrast-more:dark:group-focus-within/dropdown:ring-header-link'
-                                    }
-                                />
-                            </div>
-                        )}
-
                         {customization.header.links.length > 0 && (
                             <HeaderLinks>
                                 {customization.header.links.map((link, index) => {
@@ -169,8 +154,48 @@ export function Header(props: { context: GitBookSiteContext; withTopHeader?: boo
                     </div>
                 </div>
             </div>
-            {sections ? (
-                <SiteSectionTabs sections={encodeClientSiteSections(context, sections)} />
+
+            {sections || siteSpaces.length > 1 ? (
+                <div
+                    className={tcls(
+                        'w-full',
+                        'overflow-x-scroll',
+                        'overflow-y-hidden',
+                        'hide-scroll',
+                        '-mb-4 pb-4', // Positive padding / negative margin allows the navigation menu indicator to show in a scroll viewƒ
+                        !sections ? ['hidden', 'page-no-toc:flex'] : 'flex'
+                    )}
+                >
+                    <div
+                        className={tcls(
+                            CONTAINER_STYLE,
+                            'page-default-width:max-w-[unset]',
+                            'grow',
+                            'flex',
+                            'items-end',
+                            'page-default-width:2xl:px-[calc((100%-1536px+4rem)/2)]'
+                        )}
+                    >
+                        {siteSpaces.length > 1 && (
+                            <div
+                                id="variants"
+                                className="my-2 mr-5 page-no-toc:flex hidden grow border-tint border-r pr-5 *:grow only:mr-0 only:border-none only:pr-0 sm:max-w-64"
+                            >
+                                <SpacesDropdown
+                                    context={context}
+                                    siteSpace={siteSpace}
+                                    siteSpaces={siteSpaces}
+                                    className="w-full grow py-1"
+                                />
+                            </div>
+                        )}
+                        {sections && (
+                            <SiteSectionTabs
+                                sections={encodeClientSiteSections(context, sections)}
+                            />
+                        )}
+                    </div>
+                </div>
             ) : null}
         </header>
     );
diff --git a/packages/gitbook/src/components/Header/HeaderLogo.tsx b/packages/gitbook/src/components/Header/HeaderLogo.tsx
index 054d1d5a58..925730e3fb 100644
--- a/packages/gitbook/src/components/Header/HeaderLogo.tsx
+++ b/packages/gitbook/src/components/Header/HeaderLogo.tsx
@@ -55,6 +55,7 @@ export async function HeaderLogo(props: HeaderLogoProps) {
                         'min-w-0',
                         'max-w-40',
                         'lg:max-w-64',
+                        'site-header-none:page-no-toc:lg:max-w-56',
                         'max-h-10',
                         'lg:max-h-12',
                         'h-full',
@@ -84,7 +85,7 @@ function LogoFallback(props: HeaderLogoProps) {
             <div
                 className={tcls(
                     'text-pretty',
-                    'line-clamp-3',
+                    'line-clamp-2',
                     'tracking-tight',
                     'max-w-[18ch]',
                     'lg:max-w-[24ch]',
diff --git a/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx b/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
index 1cf86aa330..c5a246d54f 100644
--- a/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
+++ b/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx
@@ -54,7 +54,6 @@ export function HeaderMobileMenu(props: Partial<React.ButtonHTMLAttributes<HTMLB
                 'px-2',
                 'rounded',
                 'straight-corners:rounded-sm',
-                'page-no-toc:hidden',
                 props.className
             )}
         >
diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
index 991fab8f52..23acfe5175 100644
--- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx
+++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
@@ -63,7 +63,7 @@ export function SpacesDropdown(props: {
                         className
                     )}
                 >
-                    <span className={tcls('line-clamp-2', 'grow')}>{siteSpace.title}</span>
+                    <span className={tcls('truncate', 'grow')}>{siteSpace.title}</span>
                     <DropdownChevron />
                 </div>
             )}
diff --git a/packages/gitbook/src/components/PageAside/PageAside.tsx b/packages/gitbook/src/components/PageAside/PageAside.tsx
index f7743dbdc7..3e7d2ebb75 100644
--- a/packages/gitbook/src/components/PageAside/PageAside.tsx
+++ b/packages/gitbook/src/components/PageAside/PageAside.tsx
@@ -48,8 +48,11 @@ export function PageAside(props: {
                 'group/aside',
                 'hidden',
                 'xl:flex',
+                // 'page-no-toc:lg:flex',
                 'flex-col',
                 'basis-56',
+                // 'page-no-toc:basis-40',
+                // 'page-no-toc:xl:basis-56',
                 'grow-0',
                 'shrink-0',
                 'break-anywhere', // To prevent long words in headings from breaking the layout
diff --git a/packages/gitbook/src/components/PageBody/PageBody.tsx b/packages/gitbook/src/components/PageBody/PageBody.tsx
index e5490090d9..b2965b64d5 100644
--- a/packages/gitbook/src/components/PageBody/PageBody.tsx
+++ b/packages/gitbook/src/components/PageBody/PageBody.tsx
@@ -47,12 +47,12 @@ export function PageBody(props: {
                         'page-api-block:xl:max-2xl:pr-0',
                         // Max size to ensure one column in api is aligned with rest of content (2 x 3xl) + (gap-3 + 2) * px-12
                         'page-api-block:max-w-[1654px]',
-                        'page-api-block:mx-auto',
+                        'page-api-block:mx-auto'
 
-                        page.layout.tableOfContents ? null : 'xl:ml-56'
+                        // page.layout.tableOfContents ? null : 'xl:ml-56'
                     ) +
-                    (asFullWidth ? ' page-full-width' : '') +
-                    (!page.layout.tableOfContents ? ' page-no-toc' : '')
+                    (asFullWidth ? ' page-full-width' : ' page-default-width') +
+                    (!page.layout.tableOfContents ? ' page-no-toc' : ' page-has-toc')
                 }
             >
                 <PreservePageLayout asFullWidth={asFullWidth} />
diff --git a/packages/gitbook/src/components/PageBody/PageCover.tsx b/packages/gitbook/src/components/PageBody/PageCover.tsx
index 103daf24b9..2239512f47 100644
--- a/packages/gitbook/src/components/PageBody/PageCover.tsx
+++ b/packages/gitbook/src/components/PageBody/PageCover.tsx
@@ -32,7 +32,11 @@ export async function PageCover(props: {
                           'sm:-mx-6',
                           'md:-mx-8',
                           '-lg:mr-8',
-                          page.layout.tableOfContents ? 'lg:ml-0' : null,
+                          'lg:ml-0',
+                          !page.layout.tableOfContents &&
+                          context.customization.header.preset !== 'none'
+                              ? 'lg:-ml-64'
+                              : null,
                       ]
                     : ['sm:mx-auto', 'max-w-3xl', 'sm:rounded-md', 'mb-8']
             )}
diff --git a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
index 0cf1afea4c..44f165dd16 100644
--- a/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
+++ b/packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx
@@ -55,7 +55,7 @@ export async function CustomizationRootLayout(props: {
             lang={customization.internationalization.locale}
             className={tcls(
                 customization.header.preset === CustomizationHeaderPreset.None
-                    ? null
+                    ? 'site-header-none'
                     : 'scroll-pt-[76px]', // Take the sticky header in consideration for the scrolling
                 customization.styling.corners === CustomizationCorners.Straight
                     ? ' straight-corners'
diff --git a/packages/gitbook/src/components/Search/SearchModal.tsx b/packages/gitbook/src/components/Search/SearchModal.tsx
index 80956f3e3a..d181393b64 100644
--- a/packages/gitbook/src/components/Search/SearchModal.tsx
+++ b/packages/gitbook/src/components/Search/SearchModal.tsx
@@ -84,7 +84,7 @@ export function SearchModal(props: SearchModalProps) {
                             'bg-tint-12/4',
                             'dark:bg-tint-1/6',
                             'backdrop-blur-2xl',
-                            'z-30',
+                            'z-50',
                             'px-4',
                             'pt-4',
                             'md:pt-[min(8vh,6rem)]'
diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx
index 88384d4080..226d2dc99c 100644
--- a/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx
+++ b/packages/gitbook/src/components/SiteSections/SiteSectionList.tsx
@@ -137,12 +137,13 @@ export function SiteSectionGroupItem(props: {
     return (
         <>
             <button
+                type="button"
                 onClick={(event) => {
                     event.preventDefault();
                     event.stopPropagation();
                     setIsVisible((prev) => !prev);
                 }}
-                className={`group/section-link flex w-full flex-row items-center gap-3 rounded-md straight-corners:rounded-none px-3 py-2 transition-all hover:bg-tint-hover hover:text-tint-strong contrast-more:hover:ring-1 contrast-more:hover:ring-tint ${
+                className={`group/section-link flex w-full flex-row items-center gap-3 rounded-md straight-corners:rounded-none px-3 py-2 text-left transition-all hover:bg-tint-hover hover:text-tint-strong contrast-more:hover:ring-1 contrast-more:hover:ring-tint ${
                     isActiveGroup
                         ? 'font-semibold text-primary hover:bg-primary-hover hover:text-primary-strong contrast-more:text-primary-strong contrast-more:hover:ring-1 contrast-more:hover:ring-primary-hover'
                         : null
diff --git a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
index 4594ba1afc..065afc4d6e 100644
--- a/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
+++ b/packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx
@@ -21,26 +21,27 @@ export function SiteSectionTabs(props: { sections: ClientSiteSections }) {
     } = props;
     const [value, setValue] = React.useState<string | null>();
     const [offset, setOffset] = React.useState<number | null>(null);
-    const scrollableViewRef = React.useRef<HTMLDivElement>(null);
+    const menuContainerRef = React.useRef<HTMLDivElement>(null);
 
     const onNodeUpdate = (trigger: HTMLButtonElement | null, itemValue: string, size = 0) => {
+        const padding = 16;
+        const margin = -12; // Offsetting the menu container's negative margin
         const windowWidth = document.documentElement.clientWidth;
+        const windowBuffer = 16; // constrain to within the window with some buffer on the left and right we don't want the menu to enter
+        const viewportWidth =
+            size < MIN_ITEMS_FOR_COLS
+                ? VIEWPORT_ITEM_WIDTH + padding
+                : VIEWPORT_ITEM_WIDTH * 2 + padding;
+        const minOffset = 0 - (menuContainerRef.current?.offsetLeft ?? 0) + margin;
+        const maxOffset = minOffset + windowWidth - viewportWidth;
+
         if (windowWidth < 768) {
             // if the screen is small don't offset the menu
-            setOffset(0);
+            setOffset(minOffset + windowBuffer);
         } else if (trigger && value === itemValue) {
-            const padding = 16;
-            const viewportWidth =
-                size < MIN_ITEMS_FOR_COLS
-                    ? VIEWPORT_ITEM_WIDTH + padding
-                    : VIEWPORT_ITEM_WIDTH * 2 + padding;
-            const scrollLeft = scrollableViewRef.current?.scrollLeft ?? 0;
-            const triggerOffset = trigger.offsetLeft - scrollLeft; // offset of the trigger from the left edge including scrolling
-            const bufferLeft = 2; // offset the menu viewport should not pass on the left side of window
-            const bufferRight = windowWidth - (16 + viewportWidth); // offset the menu viewport should not pass on the right side of the window
+            const position = minOffset + trigger?.getBoundingClientRect().left;
             setOffset(
-                // constrain to within the window with some buffer on the left and right we don't want the menu to enter
-                Math.min(bufferRight, Math.max(bufferLeft, Math.round(triggerOffset)))
+                Math.min(maxOffset - windowBuffer, Math.max(minOffset + windowBuffer, position))
             );
         } else if (!value) {
             setOffset(null);
@@ -50,14 +51,16 @@ export function SiteSectionTabs(props: { sections: ClientSiteSections }) {
     return sectionsAndGroups.length > 0 ? (
         <NavigationMenu.Root
             aria-label="Sections"
+            id="sections"
             onValueChange={setValue}
-            className="relative z-10 mx-auto flex w-full max-w-screen-2xl page-full-width:max-w-full flex-nowrap items-center"
+            className="z-10 flex w-full flex-nowrap items-center"
         >
             <div
-                ref={scrollableViewRef}
-                className="hide-scroll -mb-4 w-full overflow-y-hidden overflow-x-scroll pb-4" /* Positive padding / negative margin allows the navigation menu indicator to show in a scroll view */
+                ref={menuContainerRef}
+                className="-mx-3"
+                // className="-mb-4 pb-4" /* Positive padding / negative margin allows the navigation menu indicator to show in a scroll view */
             >
-                <NavigationMenu.List className="center m-0 flex list-none gap-2 bg-transparent px-1 sm:px-3 md:px-5">
+                <NavigationMenu.List className="center m-0 flex list-none gap-2 bg-transparent">
                     {sectionsAndGroups.map((sectionOrGroup) => {
                         const { id, title, icon } = sectionOrGroup;
                         const isGroup = sectionOrGroup.object === 'site-section-group';
@@ -121,11 +124,11 @@ export function SiteSectionTabs(props: { sections: ClientSiteSections }) {
                 className="absolute top-full flex transition-transform duration-200 ease-in-out"
                 style={{
                     display: offset === null ? 'none' : undefined,
-                    transform: offset ? `translateX(${offset}px)` : undefined,
+                    transform: offset ? `translateX(${offset}px) translateZ(0)` : 'translateZ(0)', // TranslateZ is needed to force a stacking context, fixing a rendering bug on Safari
                 }}
             >
                 <NavigationMenu.Viewport
-                    className="relative mt-3 ml-4 h-[var(--radix-navigation-menu-viewport-height)] w-[calc(100vw_-_2rem)] origin-[top_center] overflow-hidden rounded straight-corners:rounded-none bg-tint shadow-1xs shadow-dark/1 duration-250 data-[state=closed]:duration-150 motion-safe:transition-[width,_height,_transform] data-[state=closed]:motion-safe:animate-scaleOut data-[state=open]:motion-safe:animate-scaleIn md:mx-0 md:w-[var(--radix-navigation-menu-viewport-width)] dark:shadow-dark/4"
+                    className="relative mt-3 h-[var(--radix-navigation-menu-viewport-height)] w-[calc(100vw_-_2rem)] origin-[top_center] overflow-hidden rounded straight-corners:rounded-none bg-tint shadow-1xs shadow-dark/1 duration-250 data-[state=closed]:duration-150 motion-safe:transition-[width,_height,_transform] data-[state=closed]:motion-safe:animate-scaleOut data-[state=open]:motion-safe:animate-scaleIn md:mx-0 md:w-[var(--radix-navigation-menu-viewport-width)] dark:shadow-dark/4"
                     style={{
                         translate:
                             undefined /* don't move this to a Tailwind class as Radix renders viewport incorrectly for a few frames */,
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
index 12acad90e3..ffcb10014e 100644
--- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
@@ -85,7 +85,8 @@ export function SpaceLayout(props: {
                                         'lg:flex',
                                         'grow-0',
                                         'flex-wrap',
-                                        'dark:shadow-light/1'
+                                        'dark:shadow-light/1',
+                                        'text-base/tight'
                                     )}
                                 >
                                     <HeaderLogo context={context} />
@@ -106,6 +107,7 @@ export function SpaceLayout(props: {
                                                             ? 'search_or_ask'
                                                             : 'search'
                                                     )}
+                                                    ...
                                                 </span>
                                             </SearchButton>
                                         </React.Suspense>
@@ -122,7 +124,11 @@ export function SpaceLayout(props: {
                                         context={context}
                                         siteSpace={siteSpace}
                                         siteSpaces={siteSpaces}
-                                        className={tcls('w-full')}
+                                        className={tcls(
+                                            'w-full',
+                                            'page-no-toc:hidden',
+                                            'site-header-none:page-no-toc:flex'
+                                        )}
                                     />
                                 )}
                             </>
diff --git a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
index 664671b0a2..612c79819b 100644
--- a/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
+++ b/packages/gitbook/src/components/TableOfContents/TableOfContents.tsx
@@ -21,12 +21,13 @@ export function TableOfContents(props: {
             data-testid="table-of-contents"
             className={tcls(
                 'group',
-                'page-no-toc:hidden',
+                'text-sm',
 
                 'grow-0',
                 'shrink-0',
                 'basis-full',
                 'lg:basis-72',
+                'page-no-toc:lg:basis-56',
 
                 'relative',
                 'z-[1]',
@@ -46,10 +47,14 @@ export function TableOfContents(props: {
                 'pt-6',
                 'pb-4',
                 'sidebar-filled:lg:pr-6',
+                'page-no-toc:lg:pr-0',
 
                 'hidden',
-                'navigation-open:flex',
+                'navigation-open:!flex',
                 'lg:flex',
+                'page-no-toc:lg:hidden',
+                'page-no-toc:xl:flex',
+                'site-header-none:page-no-toc:lg:flex',
                 'flex-col',
                 'gap-4',
 
@@ -73,6 +78,7 @@ export function TableOfContents(props: {
                     'theme-bold-tint:bg-tint-subtle',
                     '[html.sidebar-filled.theme-muted_&]:bg-tint-base',
                     '[html.sidebar-filled.theme-bold.tint_&]:bg-tint-base',
+                    'page-no-toc:!bg-transparent',
 
                     'sidebar-filled:rounded-xl',
                     'straight-corners:rounded-none'
@@ -101,7 +107,11 @@ export function TableOfContents(props: {
                         rootPages={pages}
                         pages={pages}
                         context={context}
-                        style={tcls('sidebar-list-line:border-l', 'border-tint-subtle')}
+                        style={tcls(
+                            'page-no-toc:hidden',
+                            'sidebar-list-line:border-l',
+                            'border-tint-subtle'
+                        )}
                     />
                     {customization.trademark.enabled ? (
                         <Trademark
diff --git a/packages/gitbook/src/components/TableOfContents/Trademark.tsx b/packages/gitbook/src/components/TableOfContents/Trademark.tsx
index 49f83a10a0..ff4b8eddcf 100644
--- a/packages/gitbook/src/components/TableOfContents/Trademark.tsx
+++ b/packages/gitbook/src/components/TableOfContents/Trademark.tsx
@@ -25,7 +25,6 @@ export function Trademark(props: {
                 'relative',
                 'z-[2]',
                 'lg:absolute',
-                'mt-6',
 
                 'left-0',
                 'right-2',
@@ -34,6 +33,7 @@ export function Trademark(props: {
                 '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',
@@ -55,7 +55,8 @@ export function Trademark(props: {
                 'theme-muted:before:to-tint-subtle',
                 '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'
+                '[html.sidebar-filled.theme-bold.tint_&]:before:to-tint-base',
+                'page-no-toc:before:!to-transparent'
             )}
         >
             <TrademarkLink {...props} />
@@ -85,6 +86,9 @@ export function TrademarkLink(props: {
             href={url.toString()}
             className={tcls(
                 'text-sm',
+                // 'page-no-toc:lg:max-xl:text-xs',
+                // 'page-no-toc:lg:max-xl:px-3',
+                // 'page-no-toc:lg:max-xl:py-3',
                 'font-semibold',
                 'text-tint',
 
@@ -93,7 +97,9 @@ export function TrademarkLink(props: {
                 'items-center',
                 'px-5',
                 'py-4',
+
                 'sidebar-filled:px-3',
+                'sidebar-filled:page-no-toc:lg:px-5',
 
                 'rounded-lg',
                 'straight-corners:rounded-none',
@@ -114,8 +120,22 @@ export function TrademarkLink(props: {
                 placement,
             }}
         >
-            <Icon icon="gitbook" className={tcls('size-5', 'mr-3')} />
-            {t(language, 'powered_by_gitbook')}
+            <Icon
+                icon="gitbook"
+                className={tcls(
+                    'size-5',
+                    // 'page-no-toc:lg:max-xl:size-4',
+                    'shrink-0'
+                )}
+            />
+            <span
+                className={tcls(
+                    'ml-3'
+                    // 'page-no-toc:lg:max-xl:ml-2'
+                )}
+            >
+                {t(language, 'powered_by_gitbook')}
+            </span>
         </Link>
     );
 }
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
index db95f7a469..466774e209 100644
--- a/packages/gitbook/tailwind.config.ts
+++ b/packages/gitbook/tailwind.config.ts
@@ -456,8 +456,12 @@ const config: Config = {
             /**
              * Variant when a header is displayed.
              */
+            addVariant('site-header-none', 'html.site-header-none &');
             addVariant('site-header', 'body:has(#site-header:not(.mobile-only)) &');
-            addVariant('site-header-sections', 'body:has(#site-header:not(.mobile-only) > nav) &');
+            addVariant('site-header-sections', [
+                'body:has(#site-header:not(.mobile-only) #sections) &',
+                'body:has(.page-no-toc):has(#site-header:not(.mobile-only) #variants) &',
+            ]);
 
             const customisationVariants = {
                 // Sidebar styles
@@ -502,12 +506,14 @@ const config: Config = {
              * Variant when the page contains a block that will be rendered in full-width mode.
              */
             addVariant('page-full-width', 'body:has(.page-full-width) &');
+            addVariant('page-default-width', 'body:has(.page-default-width) &');
 
             /**
              * Variant when the page is configured to hide the table of content.
              * `page.layout.tableOfContents` is set to false.
              */
             addVariant('page-no-toc', 'body:has(.page-no-toc) &');
+            addVariant('page-has-toc', 'body:has(.page-has-toc) &');
 
             /**
              * Variant when the page contains an OpenAPI block.