diff --git a/.changeset/gorgeous-horses-grow.md b/.changeset/gorgeous-horses-grow.md
new file mode 100644
index 000000000..62e013835
--- /dev/null
+++ b/.changeset/gorgeous-horses-grow.md
@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Position the variant picker in the ToC
diff --git a/packages/gitbook/src/components/Header/Dropdown.tsx b/packages/gitbook/src/components/Header/Dropdown.tsx
index 2ce03cc72..b1d2f5b4a 100644
--- a/packages/gitbook/src/components/Header/Dropdown.tsx
+++ b/packages/gitbook/src/components/Header/Dropdown.tsx
@@ -91,8 +91,9 @@ export function DropdownChevron() {
                 'opacity-6',
                 'size-3',
                 'ms-1',
-                'transition-transform',
-                'group-hover/dropdown:rotate-180',
+                'transition-all',
+                'group-hover/dropdown:opacity-11',
+                'group-focus-within/dropdown:rotate-180',
             )}
         />
     );
diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 82f15a06a..9bccae3e7 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -74,14 +74,23 @@ export function Header(props: {
                             'gap-4',
                             'lg:gap-8',
                             'flex',
-                            'h-16',
                             'items-center',
                             'justify-between',
                             'w-full',
+                            'py-3',
+                            'min-h-16',
+                            'sm:h-16',
+                            isMultiVariants && 'page-no-toc:max-[400px]:flex-wrap',
                             CONTAINER_STYLE,
                         )}
                     >
-                        <div className="flex max-w-full shrink min-w-0 gap-2 lg:gap-4 justify-start items-center">
+                        <div
+                            className={tcls(
+                                'flex max-w-full',
+                                isMultiVariants && 'page-no-toc:max-[400px]:w-full',
+                                'shrink min-w-0 gap-2 lg:gap-4 justify-start items-center',
+                            )}
+                        >
                             <HeaderMobileMenu
                                 className={tcls(
                                     'lg:hidden',
@@ -93,31 +102,14 @@ export function Header(props: {
                                 )}
                             />
                             <HeaderLogo site={site} space={space} customization={customization} />
-                            {!hasSiteSections && isMultiVariants ? (
-                                <div className="z-20 shrink hidden sm:block">
-                                    <SpacesDropdown
-                                        className={tcls(
-                                            !isCustomizationDefault &&
-                                                withTopHeader && [
-                                                    'bg-header-link/2',
-                                                    'dark:bg-header-link/2',
-                                                    'text-header-link/8',
-                                                    'dark:text-header-link/8',
-                                                    'ring-1',
-                                                    'ring-header-link/4',
-                                                    'dark:ring-header-link/4',
-                                                    'contrast-more:bg-header-background',
-                                                    'contrast-more:text-header-link',
-                                                    'contrast-more:ring-header-link',
-                                                ],
-                                        )}
-                                        space={space}
-                                        spaces={spaces}
-                                    />
-                                </div>
-                            ) : null}
                         </div>
 
+                        {isMultiVariants && (
+                            <div className="hidden page-no-toc:flex mr-auto">
+                                <SpacesDropdown space={space} spaces={spaces} />
+                            </div>
+                        )}
+
                         {customization.header.links.length > 0 && (
                             <HeaderLinks>
                                 {customization.header.links.map((link, index) => {
diff --git a/packages/gitbook/src/components/Header/SpacesDropdown.tsx b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
index c539db215..1ba930a2a 100644
--- a/packages/gitbook/src/components/Header/SpacesDropdown.tsx
+++ b/packages/gitbook/src/components/Header/SpacesDropdown.tsx
@@ -10,6 +10,10 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className
 
     return (
         <Dropdown
+            className={tcls(
+                'group-hover/dropdown:invisible', // Prevent hover from opening the dropdown, as it's annoying in this context
+                'group-focus-within/dropdown:group-hover/dropdown:visible', // When the dropdown is already open, it should remain visible when hovered
+            )}
             button={(buttonProps) => (
                 <div
                     {...buttonProps}
@@ -18,29 +22,54 @@ export function SpacesDropdown(props: { space: Space; spaces: Space[]; className
                         'flex',
                         'flex-row',
                         'items-center',
-                        'rounded-2xl',
+                        'transition-all',
+                        'hover:cursor-pointer',
+
+                        'px-3',
+                        'py-2',
+                        'gap-2',
+
+                        'rounded-md',
                         'straight-corners:rounded-none',
 
-                        'hover:cursor-pointer',
-                        'bg-dark/1',
-                        'dark:bg-light/1',
+                        'bg-light',
+                        'group-hover/dropdown:bg-light-1',
+                        'group-focus-within/dropdown:bg-light-1',
+                        'dark:bg-dark-1',
+                        'dark:group-hover/dropdown:bg-dark-3',
+                        'dark:group-focus-within/dropdown:bg-dark-3',
 
                         'text-sm',
                         'text-dark-4',
+                        'group-hover/dropdown:text-dark',
+                        'group-focus-within/dropdown:text-dark',
                         'dark:text-light-4',
+                        'dark:group-hover/dropdown:text-light',
+                        'dark:group-focus-within/dropdown:text-light',
+
+                        'ring-1',
+                        'ring-dark/2',
+                        'group-hover/dropdown:ring-dark/4',
+                        'group-focus-within/dropdown:ring-dark/4',
+                        'dark:ring-light/2',
+                        'dark:group-hover/dropdown:ring-light/4',
+                        'dark:group-focus-within/dropdown:ring-light/4',
 
                         'contrast-more:bg-light',
-                        'contrast-more:ring-1',
-                        'contrast-more:ring-dark',
-                        'dark:contrast-more:ring-light',
                         'dark:contrast-more:bg-dark',
+                        'contrast-more:ring-1',
+                        'contrast-more:group-hover/dropdown:ring-2',
+                        'contrast-more:ring-dark',
+                        'contrast-more:group-hover/dropdown:ring-dark',
+                        'contrast-more:group-focus-within/dropdown:ring-dark',
+                        'dark:contrast-more:ring-light',
+                        'dark:contrast-more:group-hover/dropdown:ring-light',
+                        'dark:contrast-more:group-focus-within/dropdown:ring-light',
 
-                        'px-3',
-                        'py-1',
                         className,
                     )}
                 >
-                    <span className="line-clamp-2">{space.title}</span>
+                    <span className={tcls('line-clamp-2', 'grow')}>{space.title}</span>
                     <DropdownChevron />
                 </div>
             )}
diff --git a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
index f1b4b3736..22dd9d452 100644
--- a/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
+++ b/packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx
@@ -135,47 +135,31 @@ export async function SpaceLayout(props: {
                         }
                         innerHeader={
                             // 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.
-                            withVariants || !withTopHeader ? (
-                                <>
-                                    {!withTopHeader && (
-                                        <div
-                                            className={tcls(
-                                                'hidden',
-                                                'lg:block',
-                                                'flex-shrink-0',
-                                                'grow-0',
-                                                'md:grow',
-                                                'sm:max-w-xs',
-                                                'lg:max-w-full',
-                                            )}
-                                        >
-                                            <React.Suspense fallback={null}>
-                                                <SearchButton>
-                                                    <span className={tcls('flex-1')}>
-                                                        {t(
-                                                            getSpaceLanguage(customization),
-                                                            customization.aiSearch.enabled
-                                                                ? 'search_or_ask'
-                                                                : 'search',
-                                                        )}
-                                                    </span>
-                                                </SearchButton>
-                                            </React.Suspense>
-                                        </div>
-                                    )}
-                                    {withVariants && (
-                                        <div
-                                            className={tcls(
-                                                withTopHeader && !sections
-                                                    ? 'sm:hidden'
-                                                    : ['sm:hidden', 'lg:flex'],
-                                            )}
-                                        >
-                                            <SpacesDropdown space={space} spaces={spaces} />
-                                        </div>
-                                    )}
-                                </>
-                            ) : null
+                            <>
+                                {!withTopHeader && (
+                                    <div className={tcls('hidden', 'lg:block')}>
+                                        <React.Suspense fallback={null}>
+                                            <SearchButton>
+                                                <span className={tcls('flex-1')}>
+                                                    {t(
+                                                        getSpaceLanguage(customization),
+                                                        customization.aiSearch.enabled
+                                                            ? 'search_or_ask'
+                                                            : 'search',
+                                                    )}
+                                                </span>
+                                            </SearchButton>
+                                        </React.Suspense>
+                                    </div>
+                                )}
+                                {withVariants && (
+                                    <SpacesDropdown
+                                        space={space}
+                                        spaces={spaces}
+                                        className={tcls('w-full')}
+                                    />
+                                )}
+                            </>
                         }
                         headerOffset={headerOffset}
                     />