diff --git a/packages/gitbook/src/components/Header/Header.tsx b/packages/gitbook/src/components/Header/Header.tsx
index 5a092ff5e..23ac0592c 100644
--- a/packages/gitbook/src/components/Header/Header.tsx
+++ b/packages/gitbook/src/components/Header/Header.tsx
@@ -45,27 +45,27 @@ export function Header(props: {
                 'w-full',
                 'flex-none',
                 'shadow-thinbottom',
+                'dark:shadow-light/2',
                 withTopHeader ? null : 'lg:hidden',
-                'lg:z-10',
-                'dark:shadow-light/1',
-                `${isCustomizationDefault || !withTopHeader ? 'bg-light' : 'bg-header-background'}`,
-                `${
-                    isCustomizationDefault || !withTopHeader
-                        ? 'dark:bg-dark'
-                        : 'bg-header-background'
-                }`,
+                isCustomizationDefault || !withTopHeader
+                    ? ['bg-light', 'dark:bg-dark']
+                    : ['bg-header-background', 'bg-header-background'],
+                'text-sm',
+                'bg-opacity-9',
+                'dark:bg-opacity-9',
+                'backdrop-blur-lg',
+                'contrast-more:bg-opacity-11',
+                'contrast-more:dark:bg-opacity-11',
             )}
         >
             <div className={tcls('scroll-nojump')}>
                 <div
                     className={tcls(
                         'gap-4',
-                        'grid',
-                        'grid-flow-col',
-                        'auto-cols-[auto_auto_1fr_auto]',
+                        'lg:gap-8',
+                        'flex',
                         'h-16',
                         'items-center',
-                        'align-center',
                         'justify-between',
                         'w-full',
                         CONTAINER_STYLE,
@@ -109,21 +109,21 @@ export function Header(props: {
                                 style={
                                     !isCustomizationDefault && withTopHeader
                                         ? [
-                                              'bg-header-link/3',
-                                              'shadow-sm',
-                                              'ring-header-link/3',
-                                              '[&>span]:!text-header-link/7',
-                                              '[&_svg]:text-header-link',
-                                              'contrast-more:bg-transparent',
-                                              'contrast-more:ring-header-link',
-                                              'contrast-more:[&>span]:!text-header-link',
-                                              'dark:bg-header-link/3',
-                                              'dark:ring-header-link/3',
-                                              '[&>span]:!text-header-link/7',
-                                              'dark:[&_svg]:text-header-link',
-                                              'dark:contrast-more:bg-transparent',
-                                              'dark:contrast-more:ring-header-link',
-                                              'dark:contrast-more:[&>span]:!text-header-link',
+                                              //   'bg-header-link/3',
+                                              //   'shadow-sm',
+                                              //   'ring-header-link/3',
+                                              //   '[&>span]:!text-header-link/7',
+                                              //   '[&_svg]:text-header-link',
+                                              //   'contrast-more:bg-transparent',
+                                              //   'contrast-more:ring-header-link',
+                                              //   'contrast-more:[&>span]:!text-header-link',
+                                              //   'dark:bg-header-link/3',
+                                              //   'dark:ring-header-link/3',
+                                              //   '[&>span]:!text-header-link/7',
+                                              //   'dark:[&_svg]:text-header-link',
+                                              //   'dark:contrast-more:bg-transparent',
+                                              //   'dark:contrast-more:ring-header-link',
+                                              //   'dark:contrast-more:[&>span]:!text-header-link',
                                           ]
                                         : null
                                 }
@@ -142,7 +142,7 @@ export function Header(props: {
             {sections ? (
                 <div
                     className={tcls(
-                        'w-full shadow-thintop dark:shadow-light/1 bg-light dark:bg-dark mt-0.5',
+                        'w-full',
                         // Handle long section tabs, particularly on smaller screens.
                         'overflow-x-auto hide-scroll',
                     )}
diff --git a/packages/gitbook/src/components/Header/HeaderLink.tsx b/packages/gitbook/src/components/Header/HeaderLink.tsx
index 79460f301..df17f4ad6 100644
--- a/packages/gitbook/src/components/Header/HeaderLink.tsx
+++ b/packages/gitbook/src/components/Header/HeaderLink.tsx
@@ -85,14 +85,18 @@ export async function HeaderLink(props: {
                         href={target.href}
                         className={tcls(
                             'overflow-hidden',
-                            'text-sm lg:text-base',
+
                             'flex flex-row items-center',
                             'whitespace-nowrap',
-                            'hover:text-header-link-400 dark:hover:text-light',
 
                             headerPreset === CustomizationHeaderPreset.Default
-                                ? ['text-dark/8', 'dark:text-light/8']
-                                : ['text-header-link-500 hover:text-header-link-400'],
+                                ? [
+                                      'text-dark/8',
+                                      'dark:text-light/8',
+                                      'hover:text-primary',
+                                      'dark:hover:text-primary',
+                                  ]
+                                : ['text-header-link hover:text-header-link/8'],
                         )}
                     >
                         <span className={tcls('truncate')}>{link.title}</span>
diff --git a/packages/gitbook/src/components/Header/HeaderLinkMore.tsx b/packages/gitbook/src/components/Header/HeaderLinkMore.tsx
index 9eb98a313..b682608f0 100644
--- a/packages/gitbook/src/components/Header/HeaderLinkMore.tsx
+++ b/packages/gitbook/src/components/Header/HeaderLinkMore.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { ContentRefContext, resolveContentRef } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 
-import { Dropdown, DropdownMenu, DropdownMenuItem } from './Dropdown';
+import { Dropdown, DropdownChevron, DropdownMenu, DropdownMenuItem } from './Dropdown';
 import styles from './headerLinks.module.css';
 
 /**
@@ -30,15 +30,23 @@ export function HeaderLinkMore(props: {
     const renderButton = () => (
         <button
             className={tcls(
-                'px-1',
-                !isCustomizationDefault
-                    ? ['text-header-link-500']
-                    : ['text-dark/8', 'dark:text-light/8', 'dark:hover:text-light'],
-                'hover:text-header-link-400',
+                isCustomizationDefault
+                    ? [
+                          'text-dark/8',
+                          'dark:text-light/8',
+                          'hover:text-primary',
+                          'dark:hover:text-primary',
+                      ]
+                    : ['text-header-link', 'hover:text-header-link/8'],
+                'flex',
+                'gap-1',
+                'items-center',
             )}
         >
             <span className="sr-only">{label}</span>
-            <Icon icon="ellipsis" className={tcls('opacity-6', 'size-3', 'ms-1')} />
+            <Icon icon="ellipsis" className={tcls('size-4')} />
+            <DropdownChevron />
+            {/* <Icon icon="chevron-down" className={tcls('size-3')} /> */}
         </button>
     );
 
diff --git a/packages/gitbook/src/components/Header/HeaderLinks.tsx b/packages/gitbook/src/components/Header/HeaderLinks.tsx
index 4522f0782..dba614a64 100644
--- a/packages/gitbook/src/components/Header/HeaderLinks.tsx
+++ b/packages/gitbook/src/components/Header/HeaderLinks.tsx
@@ -13,7 +13,7 @@ export async function HeaderLinks({ children }: HeaderLinksProps) {
         <div
             className={tcls(
                 styles.containerHeaderlinks,
-                'flex justify-end items-center gap-x-2.5 mr-2.5 lg:gap-x-5 lg:mr-2.5 *:max-w-56 z-20',
+                'w-full flex justify-end items-center gap-x-4 lg:gap-x-8 *:max-w-56 z-20',
             )}
         >
             {children}
diff --git a/packages/gitbook/src/components/Search/SearchButton.tsx b/packages/gitbook/src/components/Search/SearchButton.tsx
index 7a5ba598b..21a55985c 100644
--- a/packages/gitbook/src/components/Search/SearchButton.tsx
+++ b/packages/gitbook/src/components/Search/SearchButton.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Icon } from '@gitbook/icons';
+import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 
 import { useLanguage, tString } from '@/intl/client';
@@ -26,7 +27,22 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
     };
 
     return (
-        <button
+        <motion.button
+            layout="position"
+            layoutId="searchbox"
+            transition={{
+                layout: {
+                    type: 'spring',
+                    bounce: 0,
+                    duration: 0.2,
+                },
+            }}
+            whileHover={{
+                scale: 1.02,
+            }}
+            whileTap={{
+                scale: 0.98,
+            }}
             onClick={onClick}
             aria-label={tString(language, 'search')}
             className={tcls(
@@ -35,47 +51,57 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV
                 'flex-row',
                 'justify-center',
                 'items-center',
-                'px-2',
-                'gap-3',
-                'text-dark/7',
-                'min-h-[2.5rem]',
-                'w-[2.5rem]',
+                'w-full',
+                'p-2',
+                'gap-2',
+
+                'bg-light',
+                'dark:bg-dark',
+
+                'ring-1',
+                'ring-dark/1',
+                'dark:ring-light/2',
+
+                'shadow',
+                'dark:shadow-none',
+
+                'text-dark/6',
+                'dark:text-light/6',
+
                 'rounded-lg',
                 'straight-corners:rounded-none',
-                'bg-dark/2',
-                'transition-colors',
-                'transition-opacity',
-                'ease-out',
-                'hover:opacity-8',
-                'ring-1',
-                'ring-inset',
-                'ring-dark/1',
+
                 'contrast-more:ring-dark',
-                'contrast-more:bg-light',
                 'contrast-more:text-dark',
-                'dark:bg-light/1',
-                'dark:ring-light/1',
-                'dark:text-light/7',
                 'contrast-more:dark:ring-light',
-                'contrast-more:dark:bg-dark',
                 'contrast-more:dark:text-light',
-                '[&>p]:hidden',
-                '[&>span]:hidden',
+
+                'transition-[box-shadow,color,background-color]',
+                'hover:shadow-md',
+                'dark:hover:bg-light/1',
+                'hover:ring-dark/2',
+                'hover:text-dark/8',
+                'dark:hover:ring-light/4',
+                'dark:hover:text-light/8',
+
+                'active:shadow-sm',
+
+                // '[&>p]:hidden',
+                // '[&>span]:hidden',
                 'md:justify-start',
-                'md:[&>p]:flex',
-                'md:[&>span]:flex',
+                'flex',
+                // 'md:[&>p]:flex',
+                // 'md:[&>span]:flex',
                 'md:w-full',
-                'md:px-3.5',
-                'text-base',
                 style,
             )}
         >
-            <div className={tcls('text-dark/7', 'pt-1.5', 'pb-2', 'dark:text-light/7')}>
-                <Icon icon="magnifying-glass" className={tcls('shrink-0', 'size-4')} />
+            <Icon icon="magnifying-glass" className={tcls('text-dark/8', 'dark:text-light/8', 'shrink-0', 'size-4')} />
+            <div className={tcls('w-full', 'hidden', 'md:block', 'text-left')}>
+                {children}
             </div>
-            {children}
             <Shortcut />
-        </button>
+        </motion.button>
     );
 }
 
@@ -96,7 +122,7 @@ const Shortcut = () => {
     }, []);
 
     return (
-        <span
+        <div
             className={tcls(
                 'hidden',
                 'md:inline',
@@ -105,11 +131,12 @@ const Shortcut = () => {
                 'text-dark/5',
                 'contrast-more:text-dark',
                 'dark:text-light/5',
+                'whitespace-nowrap',
                 'contrast-more:dark:text-light',
                 `[font-feature-settings:"calt",_"case"]`,
             )}
         >
             {operatingSystem === 'mac' ? '⌘' : 'Ctrl +'} K
-        </span>
+        </div>
     );
 };
diff --git a/packages/gitbook/src/components/Search/SearchModal.tsx b/packages/gitbook/src/components/Search/SearchModal.tsx
index 937485cf7..0480e2944 100644
--- a/packages/gitbook/src/components/Search/SearchModal.tsx
+++ b/packages/gitbook/src/components/Search/SearchModal.tsx
@@ -56,9 +56,9 @@ export function SearchModal(props: SearchModalProps) {
         };
     }, [isSearchOpened]);
 
-    if (state === null) {
-        return null;
-    }
+    // if (state === null) {
+    //     return null;
+    // }
 
     const onChangeQuery = (newQuery: SearchState) => {
         setSearchState(newQuery);
@@ -72,62 +72,72 @@ export function SearchModal(props: SearchModalProps) {
     };
 
     return (
-        <>
-            <div
-                role="dialog"
-                className={tcls(
-                    'flex',
-                    'items-start',
-                    'justify-center',
-                    'fixed',
-                    'inset-0',
-                    'bg-dark/4',
-                    'backdrop-blur-2xl',
-                    'opacity-[1]',
-                    'z-30',
-                    'px-4',
-                    'pt-4',
-                    'dark:bg-dark/8',
-                    'md:pt-[min(8vw,_6rem)]',
-                )}
-                onClick={() => {
-                    onClose();
-                }}
-            >
-                <AnimatePresence>
-                    {askState?.type === 'loading' ? (
-                        <motion.div
-                            key="loading"
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            transition={{ duration: 1 }}
-                            className={tcls(
-                                'w-[100vw]',
-                                'h-[100vh]',
-                                'fixed',
-                                'inset-0',
-                                'z-10',
-                                'pointer-events-none',
-                            )}
-                        >
-                            <LoadingPane
-                                gridStyle={['h-[100vh]', 'aspect-auto', 'top-[-30%]']}
-                                pulse
-                                tile={96}
-                                style={['grid']}
-                            />
-                        </motion.div>
-                    ) : null}
-                </AnimatePresence>
-                <SearchModalBody
-                    {...props}
-                    state={state}
-                    onChangeQuery={onChangeQuery}
-                    onClose={onClose}
-                />
-            </div>
-        </>
+        <AnimatePresence>
+            {state !== null ? (
+                <motion.div
+                    initial={{
+                        opacity: 0,
+                    }}
+                    animate={{
+                        opacity: 1,
+                    }}
+                    exit={{
+                        opacity: 0,
+                    }}
+                    transition={{
+                        duration: 0.2,
+                    }}
+                    role="dialog"
+                    className={tcls(
+                        'fixed',
+                        'inset-0',
+                        'bg-dark/4',
+                        'backdrop-blur-2xl',
+                        'z-30',
+                        'px-4',
+                        'pt-4',
+                        'dark:bg-dark/8',
+                        'md:pt-[min(8vh,6rem)]',
+                    )}
+                    onClick={() => {
+                        onClose();
+                    }}
+                >
+                    <AnimatePresence>
+                        {askState?.type === 'loading' ? (
+                            <motion.div
+                                key="loading"
+                                initial={{ opacity: 0 }}
+                                animate={{ opacity: 1 }}
+                                exit={{ opacity: 0 }}
+                                transition={{ duration: 1 }}
+                                className={tcls(
+                                    'w-screen',
+                                    'h-screen',
+                                    'fixed',
+                                    'inset-0',
+                                    'z-10',
+                                    'pointer-events-none',
+                                )}
+                            >
+                                <LoadingPane
+                                    gridStyle={['h-screen', 'aspect-auto', 'top-[-30%]']}
+                                    pulse
+                                    tile={96}
+                                    style={['grid']}
+                                />
+                            </motion.div>
+                        ) : null}
+                    </AnimatePresence>
+                    <SearchModalBody
+                        {...props}
+                        state={state}
+                        onChangeQuery={onChangeQuery}
+                        onClose={onClose}
+                    />
+                </motion.div>
+            ) : null}
+        </AnimatePresence>
     );
 }
 
@@ -183,6 +193,18 @@ function SearchModalBody(
 
     return (
         <motion.div
+            layout
+            transition={{
+                default: {
+                    duration: 0
+                },
+                layout: {
+                    type: 'spring',
+                    bounce: 0.15,
+                    duration: 0.2,
+                },
+            }}
+            layoutId="searchbox"
             role="dialog"
             aria-label={tString(language, 'search')}
             className={tcls(
@@ -190,8 +212,9 @@ function SearchModalBody(
                 'flex',
                 'flex-col',
                 'bg-white',
-                'max-w-[768px]',
-                'mt-[-1px]',
+                'max-w-prose',
+                'mx-auto',
+                'max-h-[70dvh]',
                 'w-full',
                 'rounded-lg',
                 'straight-corners:rounded-sm',
@@ -203,14 +226,6 @@ function SearchModalBody(
                 'dark:bg-dark-3',
                 'dark:ring-light/2',
             )}
-            initial={{
-                scale: 0.95,
-                opacity: 0,
-            }}
-            animate={{
-                scale: 1,
-                opacity: 1,
-            }}
             onClick={(event) => {
                 event.stopPropagation();
             }}
diff --git a/packages/gitbook/src/components/Search/SearchResults.tsx b/packages/gitbook/src/components/Search/SearchResults.tsx
index 91d8c992a..7b2c295b6 100644
--- a/packages/gitbook/src/components/Search/SearchResults.tsx
+++ b/packages/gitbook/src/components/Search/SearchResults.tsx
@@ -174,7 +174,7 @@ export const SearchResults = React.forwardRef(function SearchResults(
     }
 
     return (
-        <div className={tcls('max-h-[70vh]', 'overflow-auto', 'relative')}>
+        <div className={tcls('overflow-auto')}>
             {children}
             {results.length === 0 ? (
                 <div
diff --git a/packages/gitbook/src/components/primitives/Button.tsx b/packages/gitbook/src/components/primitives/Button.tsx
index dc60bf840..97ed37af3 100644
--- a/packages/gitbook/src/components/primitives/Button.tsx
+++ b/packages/gitbook/src/components/primitives/Button.tsx
@@ -45,7 +45,7 @@ export function Button({
 
     const sizes = {
         default: ['text-base', 'px-4', 'py-2'],
-        medium: ['text-base', 'px-3', 'py-1'],
+        medium: ['text-sm', 'px-3', 'py-1'],
         small: ['text-xs', 'px-3 py-2'],
     };
 
diff --git a/packages/gitbook/src/intl/translations/en.ts b/packages/gitbook/src/intl/translations/en.ts
index c471bbffe..d2ccb3dea 100644
--- a/packages/gitbook/src/intl/translations/en.ts
+++ b/packages/gitbook/src/intl/translations/en.ts
@@ -6,7 +6,7 @@ export const en = {
     switch_to_light_theme: 'Switch to light theme',
     switch_to_system_theme: 'Switch to system theme',
     search: 'Search',
-    search_or_ask: 'Ask or Search',
+    search_or_ask: 'Search or ask...',
     search_input_placeholder: 'Search content',
     search_ask_input_placeholder: 'Search content or ask a question',
     search_no_results: 'No results for "${1}".',
diff --git a/packages/gitbook/tailwind.config.ts b/packages/gitbook/tailwind.config.ts
index 7a2266b01..91c572abf 100644
--- a/packages/gitbook/tailwind.config.ts
+++ b/packages/gitbook/tailwind.config.ts
@@ -6,7 +6,7 @@ import plugin from 'tailwindcss/plugin';
 import { hexToRgb, shadesOfColor } from './src/lib/colors';
 
 export const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
-export const opacities = [0, 4, 8, 12, 16, 24, 40, 64, 72, 88, 96];
+export const opacities = [0, 4, 8, 12, 16, 24, 40, 64, 72, 88, 96, 100];
 
 /**
  * Generate a Tailwind color shades from a variable.
@@ -209,6 +209,10 @@ const config: Config = {
                 thintop: '0px -1px 0px  rgba(0, 0, 0, 0.05)',
                 '1xs': '0px 1px 1px rgba(0, 0, 0, 0.09), 0px 3.267px 2.754px rgb(0, 0, 0, 0.05), 0px 6.278px 6.63px rgb(0, 0, 0, 0.05), 0px 14px 22px rgb(0, 0, 0, 0.04)',
             },
+            scale: {
+                '98': '0.98',
+                '102': '1.02',
+            }
         },
         opacity: opacity(),
     },