diff --git a/.changeset/angry-worms-punch.md b/.changeset/angry-worms-punch.md
new file mode 100644
index 0000000000..3b1ab558d0
--- /dev/null
+++ b/.changeset/angry-worms-punch.md
@@ -0,0 +1,5 @@
+---
+'nextra-theme-docs': patch
+---
+
+fix covered select options
diff --git a/.changeset/strange-clocks-teach.md b/.changeset/strange-clocks-teach.md
new file mode 100644
index 0000000000..acd3c6d1e7
--- /dev/null
+++ b/.changeset/strange-clocks-teach.md
@@ -0,0 +1,6 @@
+---
+'nextra': patch
+'nextra-theme-docs': patch
+---
+
+better focus ui, use ring color as theme hue color
diff --git a/examples/swr-site/pages/_meta.en-US.json b/examples/swr-site/pages/_meta.en-US.json
index 7fe48123f4..8f96d4ea36 100644
--- a/examples/swr-site/pages/_meta.en-US.json
+++ b/examples/swr-site/pages/_meta.en-US.json
@@ -58,14 +58,15 @@
   "404": {
     "type": "page",
     "theme": {
-      "timestamp": false
+      "timestamp": false,
+      "typesetting": "article"
     }
   },
   "500": {
     "type": "page",
     "theme": {
       "timestamp": false,
-      "layout": "full"
+      "typesetting": "article"
     }
   }
 }
diff --git a/examples/swr-site/theme.config.tsx b/examples/swr-site/theme.config.tsx
index ebc5a37d7a..fc611eca1f 100644
--- a/examples/swr-site/theme.config.tsx
+++ b/examples/swr-site/theme.config.tsx
@@ -113,7 +113,7 @@ const config: DocsThemeConfig = {
         <a
           rel="noopener"
           target="_blank"
-          className="inline-flex items-center font-semibold gap-2"
+          className="flex items-center font-semibold gap-2"
           href={FOOTER_LINK[locale]}
         >
           {FOOTER_LINK_TEXT[locale]}
diff --git a/packages/nextra-theme-blog/src/article-layout.tsx b/packages/nextra-theme-blog/src/article-layout.tsx
index 71d5ae2683..c940af993e 100644
--- a/packages/nextra-theme-blog/src/article-layout.tsx
+++ b/packages/nextra-theme-blog/src/article-layout.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 import Meta from './meta'
-import MDXTheme from './mdx-theme'
+import { MDXTheme } from './mdx-theme'
 import { useBlogContext } from './blog-context'
 import { BasicLayout } from './basic-layout'
 
diff --git a/packages/nextra-theme-blog/src/index.tsx b/packages/nextra-theme-blog/src/index.tsx
index 0eb4e4eacb..64aa71c1f5 100644
--- a/packages/nextra-theme-blog/src/index.tsx
+++ b/packages/nextra-theme-blog/src/index.tsx
@@ -1,7 +1,6 @@
-import React, { ReactElement, ReactNode, FC } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import { ThemeProvider } from 'next-themes'
-import type { PageOpts } from 'nextra'
-import type { LayoutProps, NextraBlogTheme } from './types'
+import type { LayoutProps } from './types'
 import { BlogProvider } from './blog-context'
 import { ArticleLayout } from './article-layout'
 import { PostsLayout } from './posts-layout'
diff --git a/packages/nextra-theme-blog/src/mdx-theme.tsx b/packages/nextra-theme-blog/src/mdx-theme.tsx
index cff01524c0..5a1ba02b4c 100644
--- a/packages/nextra-theme-blog/src/mdx-theme.tsx
+++ b/packages/nextra-theme-blog/src/mdx-theme.tsx
@@ -82,8 +82,10 @@ const components = {
   code: Code
 }
 
-const MDXTheme = ({ children }: { children: ReactNode }): ReactElement => {
+export const MDXTheme = ({
+  children
+}: {
+  children: ReactNode
+}): ReactElement => {
   return <MDXProvider components={components}>{children}</MDXProvider>
 }
-
-export default MDXTheme
diff --git a/packages/nextra-theme-blog/src/page-layout.tsx b/packages/nextra-theme-blog/src/page-layout.tsx
index 6952ee4f27..4c8c805cf3 100644
--- a/packages/nextra-theme-blog/src/page-layout.tsx
+++ b/packages/nextra-theme-blog/src/page-layout.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 import { BasicLayout } from './basic-layout'
-import MDXTheme from './mdx-theme'
+import { MDXTheme } from './mdx-theme'
 import Nav from './nav'
 
 export const PageLayout = ({ children }: { children: ReactNode }) => {
diff --git a/packages/nextra-theme-blog/src/posts-layout.tsx b/packages/nextra-theme-blog/src/posts-layout.tsx
index 486a42821f..4a8b9f237b 100644
--- a/packages/nextra-theme-blog/src/posts-layout.tsx
+++ b/packages/nextra-theme-blog/src/posts-layout.tsx
@@ -3,7 +3,7 @@ import { useRouter } from 'next/router'
 import React, { ReactNode } from 'react'
 import { useBlogContext } from './blog-context'
 import { BasicLayout } from './basic-layout'
-import MDXTheme from './mdx-theme'
+import { MDXTheme } from './mdx-theme'
 import Nav from './nav'
 import { collectPostsAndNavs } from './utils/collect'
 import getTags from './utils/get-tags'
diff --git a/packages/nextra-theme-docs/css/hamburger.css b/packages/nextra-theme-docs/css/hamburger.css
index 36edd926e2..00593c4ebe 100644
--- a/packages/nextra-theme-docs/css/hamburger.css
+++ b/packages/nextra-theme-docs/css/hamburger.css
@@ -1,36 +1,34 @@
 .nextra-hamburger svg {
   g {
-    transform-origin: center;
-    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+    @apply origin-center;
+    transition: transform 0.2s cubic-bezier(.25, 1, .5, 1);
   }
   path {
     opacity: 1;
-    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
-    opacity 0.2s ease 0.2s;
+    transition: transform 0.2s cubic-bezier(.25, 1, .5, 1) 0.2s, opacity .2s ease .2s;
   }
 
   &.open {
     path {
-      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
-      opacity 0s ease 0.2s;
+      transition: transform 0.2s cubic-bezier(.25, 1, .5, 1), opacity 0s ease .2s;
     }
     g {
-      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+      transition: transform 0.2s cubic-bezier(.25, 1, .5, 1) .2s;
     }
   }
 
   &.open > {
     path {
-      opacity: 0;
+      @apply opacity-0
     }
     g:nth-of-type(1) {
-      transform: rotate(45deg);
+      @apply rotate-45;
       path {
         transform: translate3d(0, 6px, 0);
       }
     }
     g:nth-of-type(2) {
-      transform: rotate(-45deg);
+      @apply -rotate-45;
       path {
         transform: translate3d(0, -6px, 0);
       }
diff --git a/packages/nextra-theme-docs/css/scrollbar.css b/packages/nextra-theme-docs/css/scrollbar.css
index 4f900c1fac..e0970e8a1e 100644
--- a/packages/nextra-theme-docs/css/scrollbar.css
+++ b/packages/nextra-theme-docs/css/scrollbar.css
@@ -7,7 +7,7 @@
     @apply w-1.5 h-1.5;
   }
   &::-webkit-scrollbar-track {
-    @apply bg-transparent my-5;
+    @apply bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
     @apply rounded-[20px];
diff --git a/packages/nextra-theme-docs/css/styles.css b/packages/nextra-theme-docs/css/styles.css
index 29665af6d4..f2e0e7e907 100644
--- a/packages/nextra-theme-docs/css/styles.css
+++ b/packages/nextra-theme-docs/css/styles.css
@@ -13,131 +13,33 @@ html {
   font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1, 'ss06' 1;
   -webkit-tap-highlight-color: transparent;
 }
+
 body {
   @apply w-full bg-white dark:bg-dark dark:text-gray-100;
 }
 
-.nextra-container {
-  /* Navbar */
-  .nextra-nav-container {
-    a:focus,
-    summary:focus {
-      @apply select-none outline-none;
-    }
-    a:focus-visible,
-    summary:focus-visible {
-      @apply select-none outline-none ring ring-primary-200;
-    }
-
-    .nextra-nav-container-blur {
-      z-index: -1;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02),
-        0 -1px 0 rgba(0, 0, 0, 0.06) inset;
-      .dark & {
-        box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
-      }
-    }
-
-    .nextra-nav-link {
-      @apply text-sm;
-    }
-    .nextra-menu-icon {
-      @apply select-none rounded outline-none active:bg-gray-400/20;
-    }
+a,
+summary,
+button,
+input,
+[tabindex]:not([tabindex='-1']) {
+  @apply outline-none;
+  &:focus-visible {
+    @apply ring-2 ring-primary-200 ring-offset-1 ring-offset-primary-300;
   }
+}
 
-  /* Sidebar */
-  .nextra-sidebar {
-    -webkit-touch-callout: none;
-    ul.nextra-sidebar-list {
-      overflow: hidden;
-      a,
-      button {
-        &:focus-visible {
-          @apply ring ring-primary-200;
-        }
-      }
-      li.active > a {
-        &,
-        &:hover {
-          @apply bg-primary-50 font-bold text-primary-500;
-          @apply dark:bg-primary-500/10 dark:text-primary-500;
-        }
-      }
-      @media (prefers-contrast: more) {
-        li.active > a {
-          @apply border border-primary-500 dark:border-primary-500;
-        }
-      }
-      button,
-      summary,
-      li a {
-        @apply mt-1 block w-full select-none rounded px-2 py-1.5 text-sm text-gray-500 outline-none transition-[background-color];
-        @apply dark:text-neutral-500;
-        -webkit-tap-highlight-color: transparent;
-        -webkit-touch-callout: none;
-        &:hover {
-          @apply bg-gray-100 text-gray-900;
-          @apply dark:bg-primary-100/5 dark:text-gray-50;
-        }
-        @media (prefers-contrast: more) {
-          & {
-            @apply border border-transparent text-gray-900;
-            @apply hover:border-gray-900;
-          }
-          .dark & {
-            @apply border border-transparent text-gray-50;
-            @apply hover:border-gray-50;
-          }
-        }
-      }
-      ul {
-        @apply relative dark:border-neutral-800;
-        @apply ltr:md:border-l ltr:pl-3 ltr:ml-1 rtl:md:border-r rtl:pr-3 rtl:mr-1;
-      }
-    }
-  }
+a, summary {
+  @apply rounded;
 }
 
 @media (max-width: 767px) {
-  article:before {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: -200px;
-    pointer-events: none;
-    transition: opacity 1.5s ease;
-    opacity: 0;
-    z-index: 14;
-    background-color: black;
-    .nextra-container.menu-active & {
-      opacity: 0.8;
-    }
-  }
   .nextra-sidebar-container {
-    @apply top-0 overscroll-contain bg-white pt-16 dark:bg-dark;
-    height: 100vh;
-    height: -webkit-fill-available;
-    height: 100dvh;
-
-    opacity: 0;
-    transform: translate3d(0, -110%, 0);
-    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1),
-      opacity 0s linear 1s;
+    @apply fixed pt-[calc(var(--nextra-navbar-height))] top-0 w-full bottom-24 z-[15] overscroll-contain bg-white dark:bg-dark;
+    transition: transform .8s cubic-bezier(.52, .16, .04, 1);
     will-change: transform, opacity;
     contain: layout style;
     backface-visibility: hidden;
-
-    &.open {
-      opacity: 1;
-      transform: translate3d(0, 0, 0);
-      transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
-    }
-    body.resizing & {
-      transition: none;
-    }
   }
   .nextra-banner-container ~ div {
     .nextra-sidebar-container {
@@ -147,130 +49,80 @@ body {
       @apply top-10 md:top-0;
     }
   }
-  .nextra-banner-hidden
-    .nextra-banner-container
-    ~ div
-    .nextra-sidebar-container {
-    @apply pt-16;
+  .nextra-banner-hidden {
+    .nextra-banner-container ~ div .nextra-sidebar-container {
+      @apply pt-16;
+    }
+    .nextra-nav-container {
+      @apply !top-0;
+    }
   }
-  .nextra-banner-hidden div.nextra-nav-container {
-    @apply top-0;
+  .nextra-search .excerpt {
+    @apply overflow-hidden text-ellipsis;
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
   }
 }
 
 @media (prefers-reduced-motion: reduce) and (max-width: 767px) {
-  article:before {
-    transition: none;
-  }
-  .nextra-sidebar-container {
-    transition: none;
-    &.open {
-      transition: none;
-    }
-  }
-}
-
-@media (prefers-contrast: more) {
-  .nextra-nav-container nav .nextra-nav-link {
-    @apply text-gray-700 dark:text-gray-100;
-    &.active {
-      @apply font-bold;
-    }
-  }
-  article pre {
-    @apply border border-primary-900/20 contrast-150 dark:border-primary-100/40;
-  }
-  .nextra-callout {
-    @apply border-current dark:!border-current;
-  }
-  .nextra-search ul li .excerpt {
-    @apply dark:text-gray-50;
-  }
-  .nextra-navigation-links {
-    border-color: #999 !important;
-  }
-  .nextra-nav-container-blur {
-    box-shadow: 0 0 0 1px black;
-    .dark & {
-      box-shadow: 0 0 0 1px white;
-    }
+  article:before,
+  .nextra-sidebar-container,
+  .nextra-sidebar-container.open,
+  body.resizing .nextra-sidebar-container {
+    @apply transition-none;
   }
 }
 
 /* Content Typography */
-article {
-  min-height: calc(100vh - 64px);
-  details > summary {
-    &::-webkit-details-marker {
-      @apply hidden;
-    }
-    &::before {
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
-      height: 1.2em;
-      width: 1.2em;
-      vertical-align: -4px;
-    }
+article details > summary {
+  &::-webkit-details-marker {
+    @apply hidden;
+  }
+  &::before {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd' /%3E%3C/svg%3E");
+    height: 1.2em;
+    width: 1.2em;
+    vertical-align: -4px;
   }
 }
 
-.nextra-toc > .div,
-.nextra-sidebar-container {
-  mask-image: linear-gradient(to bottom, transparent, #000 20px),
+@media (min-width: 768px) {
+  .nextra-toc > .div,
+  .nextra-sidebar-container {
+    mask-image: linear-gradient(to bottom, transparent, #000 20px),
     linear-gradient(to left, #000 10px, transparent 10px);
+  }
 }
 
 @supports (
   (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
 ) {
   .nextra-search ul {
-    @apply backdrop-blur-lg bg-opacity-70 dark:bg-opacity-80;
+    @apply backdrop-blur-lg bg-white/70 dark:bg-dark/80;
   }
   .nextra-nav-container-blur {
-    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
+    @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
   }
 }
 
-@media screen and (max-width: 767px) {
-  .nextra-search .excerpt {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-    -webkit-box-orient: vertical;
+input[type='search'] {
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
   }
 }
 
-input[type='search']::-webkit-search-decoration,
-input[type='search']::-webkit-search-cancel-button,
-input[type='search']::-webkit-search-results-button,
-input[type='search']::-webkit-search-results-decoration {
-  -webkit-appearance: none;
-}
-
-/* Locale */
-.locale-switch summary::-webkit-details-marker,
-.locale-switch summary::marker {
-  content: '';
-  display: none;
-}
-.locale-switch[open] summary:before {
-  content: '';
-  @apply fixed inset-0 z-10 block cursor-default bg-transparent;
-}
-.locale-switch .locale-dropdown {
-  position: absolute;
-  z-index: 11;
-}
-
 .contains-task-list {
   @apply ml-0 list-none;
-}
-
-.contains-task-list input[type='checkbox'] {
-  @apply mr-1;
+  input[type='checkbox'] {
+    @apply mr-1;
+  }
 }
 
 .nextra-banner-hidden .nextra-banner-container {
-  display: none;
+  @apply hidden;
 }
diff --git a/packages/nextra-theme-docs/package.json b/packages/nextra-theme-docs/package.json
index cbeb7dd1bf..99c6051c89 100644
--- a/packages/nextra-theme-docs/package.json
+++ b/packages/nextra-theme-docs/package.json
@@ -42,8 +42,9 @@
     "format": "prettier --ignore-path ../../.gitignore --write --list-different ."
   },
   "dependencies": {
-    "@headlessui/react": "^1.6.5",
+    "@headlessui/react": "^1.6.6",
     "@mdx-js/react": "^2.1.2",
+    "@popperjs/core": "^2.11.6",
     "@reach/skip-nav": "^0.17.0",
     "clsx": "^1.2.1",
     "flexsearch": "^0.7.21",
diff --git a/packages/nextra-theme-docs/src/components/banner.tsx b/packages/nextra-theme-docs/src/components/banner.tsx
index 2c1c4996d9..2855e29f8b 100644
--- a/packages/nextra-theme-docs/src/components/banner.tsx
+++ b/packages/nextra-theme-docs/src/components/banner.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react'
 import { XIcon } from 'nextra/icons'
+import cn from 'clsx'
 import { useConfig } from '../contexts'
 import { renderComponent } from '../utils'
 
@@ -8,21 +9,27 @@ export function Banner(): ReactElement | null {
   if (!banner.text) {
     return null
   }
+  const hideBannerScript = `try{if(localStorage.getItem(${JSON.stringify(
+    banner.key
+  )})==='0'){document.body.classList.add('nextra-banner-hidden')}}catch(e){}`
+
   return (
     <>
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `try{if(localStorage.getItem(${JSON.stringify(
-            banner.key
-          )})==='0'){document.body.classList.add('nextra-banner-hidden')}}catch(e){}`
-        }}
-      />
-      <div className="nextra-banner-container sticky top-0 z-20 flex h-10 items-center bg-neutral-900 pl-10 text-sm text-slate-50  dark:bg-[linear-gradient(1deg,#383838,#212121)] dark:text-white md:relative">
-        <div className="mx-auto w-full max-w-[90rem] truncate whitespace-nowrap py-1 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] text-center font-medium">
+      <script dangerouslySetInnerHTML={{ __html: hideBannerScript }} />
+      <div
+        className={cn(
+          'relative z-20 flex justify-center items-center',
+          'bg-neutral-900 text-sm text-slate-50 font-medium',
+          'h-[var(--nextra-banner-height)] [body.nextra-banner-hidden_&]:hidden',
+          'dark:bg-[linear-gradient(1deg,#383838,#212121)] dark:text-white',
+          'py-1 pl-[max(env(safe-area-inset-left),2.5rem)] pr-[max(env(safe-area-inset-right),2.5rem)]'
+        )}
+      >
+        <div className="max-w-[90rem] truncate">
           {renderComponent(banner.text)}
         </div>
         <button
-          className="mr-2 w-8 opacity-80 hover:opacity-100"
+          className="opacity-80 absolute ltr:right-0 rtl:left-0 hover:opacity-100"
           onClick={() => {
             try {
               localStorage.setItem(banner.key, '0')
@@ -30,7 +37,7 @@ export function Banner(): ReactElement | null {
             document.body.classList.add('nextra-banner-hidden')
           }}
         >
-          <XIcon className="h4 mx-auto w-4" />
+          <XIcon className="h4 w-4 mx-4" />
         </button>
       </div>
     </>
diff --git a/packages/nextra-theme-docs/src/components/callout.tsx b/packages/nextra-theme-docs/src/components/callout.tsx
index e83ec6fbdb..5ad23dfda7 100644
--- a/packages/nextra-theme-docs/src/components/callout.tsx
+++ b/packages/nextra-theme-docs/src/components/callout.tsx
@@ -28,6 +28,7 @@ export function Callout({
     <div
       className={cn(
         'nextra-callout border mt-6 flex rounded-lg py-2 ltr:pr-4 rtl:pl-4',
+        'contrast-more:border-current contrast-more:dark:border-current',
         themes[type]
       )}
     >
diff --git a/packages/nextra-theme-docs/src/components/flexsearch.tsx b/packages/nextra-theme-docs/src/components/flexsearch.tsx
index f903a1766a..c09ad0103d 100644
--- a/packages/nextra-theme-docs/src/components/flexsearch.tsx
+++ b/packages/nextra-theme-docs/src/components/flexsearch.tsx
@@ -195,7 +195,6 @@ export function Flexsearch({
         const content = doc.display || doc.content
         if (occurred[url + '@' + content]) continue
         occurred[url + '@' + content] = true
-
         results.push({
           _page_rk: i,
           _section_rk: j,
@@ -216,14 +215,13 @@ export function Flexsearch({
                 <HighlightMatches match={search} value={title} />
               </div>
               {content && (
-                <div className="excerpt mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400">
+                <div className="excerpt mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50">
                   <HighlightMatches match={search} value={content} />
                 </div>
               )}
             </>
           )
         })
-
         isFirstItemOfPage = false
       }
     }
diff --git a/packages/nextra-theme-docs/src/components/footer.tsx b/packages/nextra-theme-docs/src/components/footer.tsx
index 450612fabd..9921b9eb05 100644
--- a/packages/nextra-theme-docs/src/components/footer.tsx
+++ b/packages/nextra-theme-docs/src/components/footer.tsx
@@ -11,32 +11,21 @@ export function Footer({ menu }: { menu?: boolean }): ReactElement {
     <footer className="bg-gray-100 pb-[env(safe-area-inset-bottom)] dark:bg-neutral-900">
       <div
         className={cn(
-          'hidden border-b py-2 dark:border-neutral-800 md:block',
-          !menu && 'md:hidden'
+          'mx-auto max-w-[90rem] py-2 px-4 flex gap-2',
+          menu ? 'flex' : 'hidden'
         )}
       >
-        <div className="mx-auto max-w-[90rem]">
-          <div className="inline-flex px-4">
-            {config.i18n.length > 0 && (
-              <div className="relative flex-1">
-                <LocaleSwitch options={config.i18n} />
-              </div>
-            )}
-            {config.darkMode ? (
-              <div className="relative grow-0">
-                <ThemeSwitch lite={false} />
-              </div>
-            ) : null}
-          </div>
-        </div>
+        {config.i18n.length > 0 && <LocaleSwitch options={config.i18n} />}
+        {config.darkMode && <ThemeSwitch />}
       </div>
-      <div className="mx-auto max-w-[90rem] py-12 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
-        <div className="flex flex-col-reverse items-center justify-between md:flex-row md:items-end">
-          <span className="text-gray-600 dark:text-gray-400">
-            {renderComponent(config.footer.text)}
-          </span>
-          <div className="mt-6" />
-        </div>
+      <hr className="dark:border-neutral-800" />
+      <div
+        className={cn(
+          'mx-auto max-w-[90rem] py-12 flex justify-center md:justify-start text-gray-600 dark:text-gray-400',
+          'pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]'
+        )}
+      >
+        {renderComponent(config.footer.text)}
       </div>
     </footer>
   )
diff --git a/packages/nextra-theme-docs/src/components/head.tsx b/packages/nextra-theme-docs/src/components/head.tsx
index 38722ac284..a1dbd4f87c 100644
--- a/packages/nextra-theme-docs/src/components/head.tsx
+++ b/packages/nextra-theme-docs/src/components/head.tsx
@@ -55,6 +55,7 @@ export function Head(): ReactElement {
           --nextra-primary-hue: ${lightHue}deg;
           --nextra-navbar-height: 4rem;
           --nextra-menu-height: 3.75rem;
+          --nextra-banner-height: 2.5rem;
         }
         
         .dark {
diff --git a/packages/nextra-theme-docs/src/components/input.tsx b/packages/nextra-theme-docs/src/components/input.tsx
index 5ea413fec0..d05b94bf57 100644
--- a/packages/nextra-theme-docs/src/components/input.tsx
+++ b/packages/nextra-theme-docs/src/components/input.tsx
@@ -14,8 +14,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
           'block w-full appearance-none rounded-lg px-3 py-2 transition-colors',
           'md:text-sm text-base leading-tight',
           'bg-black/[.03] dark:bg-gray-50/10',
-          'focus:bg-white focus:outline-none focus:ring-1 focus:ring-gray-200',
-          'dark:focus:bg-dark dark:focus:ring-gray-100/20',
+          'focus:bg-white dark:focus:bg-dark',
           'placeholder:text-gray-400 dark:placeholder:text-gray-500',
           'contrast-more:border contrast-more:border-current'
         )}
diff --git a/packages/nextra-theme-docs/src/components/locale-switch.tsx b/packages/nextra-theme-docs/src/components/locale-switch.tsx
index fc27235c1a..dbb00a8734 100644
--- a/packages/nextra-theme-docs/src/components/locale-switch.tsx
+++ b/packages/nextra-theme-docs/src/components/locale-switch.tsx
@@ -6,14 +6,21 @@ import { GlobeIcon } from 'nextra/icons'
 
 interface LocaleSwitchProps {
   options: NonNullable<DocsThemeConfig['i18n']>
+  lite?: boolean
+  className?: string
 }
 
-export function LocaleSwitch({ options }: LocaleSwitchProps): ReactElement {
+export function LocaleSwitch({
+  options,
+  lite,
+  className
+}: LocaleSwitchProps): ReactElement {
   const { locale, asPath } = useRouter()
   const selected = options.find(l => locale === l.locale)
   return (
     <Select
-      position="left"
+      title="Change language"
+      className={className}
       onChange={option => {
         const date = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000)
         document.cookie = `NEXT_LOCALE=${
@@ -26,7 +33,7 @@ export function LocaleSwitch({ options }: LocaleSwitchProps): ReactElement {
         name: (
           <div className="flex items-center gap-2">
             <GlobeIcon />
-            <span>{selected?.text}</span>
+            <span className={lite ? 'hidden' : ''}>{selected?.text}</span>
           </div>
         )
       }}
diff --git a/packages/nextra-theme-docs/src/components/nav-links.tsx b/packages/nextra-theme-docs/src/components/nav-links.tsx
index d62fdf03ca..9648143f6a 100644
--- a/packages/nextra-theme-docs/src/components/nav-links.tsx
+++ b/packages/nextra-theme-docs/src/components/nav-links.tsx
@@ -4,6 +4,7 @@ import { ArrowRightIcon } from 'nextra/icons'
 import { useConfig } from '../contexts'
 import { Item } from '../utils'
 import { Anchor } from './anchor'
+import { DocsThemeConfig } from '../index'
 
 interface NavLinkProps {
   currentIndex: number
@@ -11,7 +12,7 @@ interface NavLinkProps {
 }
 
 const classes = {
-  link: 'max-w-[50%] gap-1 [word-break:break-word] flex items-center rounded py-4 text-base font-medium text-gray-600 transition-colors hover:text-primary-500 dark:text-gray-300 md:text-lg',
+  link: 'max-w-[50%] gap-1 [word-break:break-word] flex items-center py-4 text-base font-medium text-gray-600 transition-colors hover:text-primary-500 dark:text-gray-300 md:text-lg',
   icon: 'h-5 inline flex-shrink-0'
 }
 
@@ -20,21 +21,21 @@ export const NavLinks = ({
   currentIndex
 }: NavLinkProps): ReactElement | null => {
   const config = useConfig()
-  const navigation: { prev?: boolean; next?: boolean } =
-    typeof config.navigation === 'boolean'
-      ? config.navigation === false
-        ? { prev: false, next: false }
-        : {}
-      : config.navigation
-  const prev =
-    navigation.prev === false ? null : flatDirectories[currentIndex - 1]
-  const next =
-    navigation.next === false ? null : flatDirectories[currentIndex + 1]
+  const nav = config.navigation
+  const navigation: Exclude<DocsThemeConfig['navigation'], boolean> =
+    typeof nav === 'boolean' ? { prev: nav, next: nav } : nav
+  const prev = navigation.prev && flatDirectories[currentIndex - 1]
+  const next = navigation.next && flatDirectories[currentIndex + 1]
 
   if (!prev && !next) return null
 
   return (
-    <div className="nextra-navigation-links mb-8 flex items-center border-t pt-8 dark:border-neutral-800">
+    <div
+      className={cn(
+        'mb-8 flex items-center border-t pt-8 dark:border-neutral-800',
+        'contrast-more:border-neutral-400 dark:contrast-more:border-neutral-400'
+      )}
+    >
       {prev && (
         <Anchor
           href={prev.route}
diff --git a/packages/nextra-theme-docs/src/components/navbar.tsx b/packages/nextra-theme-docs/src/components/navbar.tsx
index f2b47d5a36..c1850dbb72 100644
--- a/packages/nextra-theme-docs/src/components/navbar.tsx
+++ b/packages/nextra-theme-docs/src/components/navbar.tsx
@@ -15,6 +15,13 @@ export type NavBarProps = {
   items: (PageItem | MenuItem)[]
 }
 
+const classes = {
+  link: 'text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100',
+  active: 'subpixel-antialiased contrast-more:font-bold',
+  inactive:
+    'text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'
+}
+
 function NavbarMenu({
   className,
   menu,
@@ -30,30 +37,29 @@ function NavbarMenu({
   )
 
   return (
-    <Menu>
-      <Menu.Button
-        className={cn(
-          className,
-          'items-center -ml-2 hidden whitespace-nowrap p-2 md:inline-flex',
-          'text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'
-        )}
-      >
-        {children}
-      </Menu.Button>
-      <Transition
-        leave="transition-opacity"
-        leaveFrom="opacity-100"
-        leaveTo="opacity-0"
-      >
-        <Menu.Items className="absolute right-0 z-20 mt-1 max-h-64 min-w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-neutral-800 dark:ring-white dark:ring-opacity-20">
-          {Object.entries(items || {}).map(([key, item]) => {
-            const href =
-              item.href || routes[key]?.route || menu.route + '/' + key
-
-            return (
+    <div className="inline-block relative">
+      <Menu>
+        <Menu.Button
+          className={cn(
+            className,
+            'rounded items-center -ml-2 hidden whitespace-nowrap p-2 md:inline-flex',
+            classes.inactive
+          )}
+        >
+          {children}
+        </Menu.Button>
+        <Transition
+          leave="transition-opacity"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <Menu.Items className="absolute right-0 z-20 mt-1 max-h-64 min-w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg dark:bg-neutral-800">
+            {Object.entries(items || {}).map(([key, item]) => (
               <Menu.Item key={key}>
                 <Anchor
-                  href={href}
+                  href={
+                    item.href || routes[key]?.route || menu.route + '/' + key
+                  }
                   className={cn(
                     'hidden whitespace-nowrap md:inline-block text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100 relative select-none w-full',
                     'py-1.5 ltr:pl-3 ltr:pr-9 rtl:pr-3 rtl:pl-9'
@@ -63,11 +69,11 @@ function NavbarMenu({
                   {item.title || key}
                 </Anchor>
               </Menu.Item>
-            )
-          })}
-        </Menu.Items>
-      </Transition>
-    </Menu>
+            ))}
+          </Menu.Items>
+        </Transition>
+      </Menu>
+    </div>
   )
 }
 
@@ -79,7 +85,14 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
 
   return (
     <div className="nextra-nav-container sticky top-0 z-20 w-full bg-transparent">
-      <div className="nextra-nav-container-blur pointer-events-none absolute h-full w-full bg-white dark:bg-dark" />
+      <div
+        className={cn(
+          'nextra-nav-container-blur',
+          'pointer-events-none absolute z-[-1] h-full w-full bg-white dark:bg-dark',
+          'shadow-[0_2px_4px_rgba(0,0,0,.02),0_-1px_0_rgba(0,0,0,.06)_inset] dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset]',
+          'contrast-more:shadow-[0_0_0_1px_#000] contrast-more:dark:shadow-[0_0_0_1px_#fff]'
+        )}
+      />
       <nav className="mx-auto flex h-[var(--nextra-navbar-height)] max-w-[90rem] items-center justify-end gap-2 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
         <Anchor
           href="/"
@@ -99,23 +112,21 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
               activeRoute.startsWith(menu.route + '/')
 
             return (
-              <div className="inline-block relative" key={'menu-' + menu.title}>
-                <NavbarMenu
-                  className={cn(
-                    'nextra-nav-link flex gap-1',
-                    isActive
-                      ? 'active subpixel-antialiased'
-                      : 'text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'
-                  )}
-                  menu={menu}
-                >
-                  {menu.title}
-                  <ArrowRightIcon
-                    className="h-[18px] min-w-[18px] rounded-sm p-0.5"
-                    pathClassName="origin-center transition-transform rotate-90"
-                  />
-                </NavbarMenu>
-              </div>
+              <NavbarMenu
+                key={menu.title}
+                className={cn(
+                  classes.link,
+                  'flex gap-1',
+                  isActive ? classes.active : classes.inactive
+                )}
+                menu={menu}
+              >
+                {menu.title}
+                <ArrowRightIcon
+                  className="h-[18px] min-w-[18px] rounded-sm p-0.5"
+                  pathClassName="origin-center transition-transform rotate-90"
+                />
+              </NavbarMenu>
             )
           }
           const page = pageOrMenu as PageItem
@@ -136,11 +147,9 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
               href={href}
               key={page.route}
               className={cn(
-                'nextra-nav-link',
+                classes.link,
                 '-ml-2 hidden whitespace-nowrap p-2 md:inline-block',
-                !isActive || page.newWindow
-                  ? 'text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200'
-                  : 'active subpixel-antialiased'
+                !isActive || page.newWindow ? classes.inactive : classes.active
               )}
               newWindow={page.newWindow}
               aria-selected={!page.newWindow && isActive}
@@ -176,7 +185,7 @@ export function Navbar({ flatDirectories, items }: NavBarProps): ReactElement {
         ) : null}
 
         <button
-          className="nextra-hamburger block p-2 -mr-2 md:hidden"
+          className="nextra-hamburger rounded active:bg-gray-400/20 p-2 -mr-2 md:hidden"
           onClick={() => setMenu(!menu)}
         >
           <MenuIcon className={cn({ open: menu })} />
diff --git a/packages/nextra-theme-docs/src/components/not-found.tsx b/packages/nextra-theme-docs/src/components/not-found.tsx
index 2e91284a39..f787582763 100644
--- a/packages/nextra-theme-docs/src/components/not-found.tsx
+++ b/packages/nextra-theme-docs/src/components/not-found.tsx
@@ -15,7 +15,7 @@ export function NotFoundPage(): ReactElement | null {
   }
 
   return (
-    <p>
+    <p className="text-center">
       <Anchor
         href={getGitIssueUrl({
           repository: config.docsRepositoryBase,
@@ -23,7 +23,7 @@ export function NotFoundPage(): ReactElement | null {
           labels
         })}
         newWindow
-        className="ring-primary-500/30 focus:outline-none focus-visible:ring text-primary-500 underline decoration-from-font [text-underline-position:under]"
+        className="text-primary-500 underline decoration-from-font [text-underline-position:under]"
       >
         {renderComponent(content)}
       </Anchor>
diff --git a/packages/nextra-theme-docs/src/components/search.tsx b/packages/nextra-theme-docs/src/components/search.tsx
index 7329c0eb35..f4d8837188 100644
--- a/packages/nextra-theme-docs/src/components/search.tsx
+++ b/packages/nextra-theme-docs/src/components/search.tsx
@@ -1,6 +1,6 @@
 import React, {
-  ComponentProps,
   ReactElement,
+  KeyboardEvent,
   Fragment,
   useCallback,
   useState,
@@ -56,62 +56,59 @@ export function Search({
   }, [show])
 
   useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (
-        input.current &&
-        document.activeElement &&
-        !INPUTS.includes(document.activeElement.tagName.toLowerCase())
-      ) {
-        if (e.key === '/' || (e.key === 'k' && e.metaKey)) {
-          e.preventDefault()
-          input.current.focus()
-        } else if (e.key === 'Escape') {
-          setShow(false)
-          input.current.blur()
-        }
+    const down = (e: globalThis.KeyboardEvent): void => {
+      const tagName = document.activeElement?.tagName.toLowerCase()
+      if (!input.current || !tagName || INPUTS.includes(tagName)) return
+      if (e.key === '/' || (e.key === 'k' && e.metaKey)) {
+        e.preventDefault()
+        input.current.focus()
+      } else if (e.key === 'Escape') {
+        setShow(false)
+        input.current.blur()
       }
     }
 
     window.addEventListener('keydown', down)
-    return () => window.removeEventListener('keydown', down)
+    return () => {
+      window.removeEventListener('keydown', down)
+    }
   }, [])
 
-  const handleKeyDown = useCallback<
-    NonNullable<ComponentProps<'input'>['onKeyDown']>
-  >(
-    e => {
+  const handleKeyDown = useCallback(
+    function <T>(e: KeyboardEvent<T>) {
       switch (e.key) {
         case 'ArrowDown': {
-          e.preventDefault()
           if (active + 1 < results.length) {
-            setActive(active + 1)
-            const activeElement = ulRef.current?.querySelector(
+            const el = ulRef.current?.querySelector<HTMLAnchorElement>(
               `li:nth-of-type(${active + 2}) > a`
             )
-            activeElement?.scrollIntoView({
-              behavior: 'smooth',
-              block: 'nearest'
-            })
+            if (el) {
+              e.preventDefault()
+              handleActive({ currentTarget: el })
+              el.focus()
+            }
           }
           break
         }
         case 'ArrowUp': {
-          e.preventDefault()
           if (active - 1 >= 0) {
-            setActive(active - 1)
-            const activeElement = ulRef.current?.querySelector(
+            const el = ulRef.current?.querySelector<HTMLAnchorElement>(
               `li:nth-of-type(${active}) > a`
             )
-            activeElement?.scrollIntoView({
-              behavior: 'smooth',
-              block: 'nearest'
-            })
+            if (el) {
+              e.preventDefault()
+              handleActive({ currentTarget: el })
+              el.focus()
+            }
           }
           break
         }
         case 'Enter': {
-          router.push(results[active].route)
-          finishSearch()
+          const result = results[active]
+          if (result) {
+            router.push(result.route)
+            finishSearch()
+          }
           break
         }
         case 'Escape': {
@@ -175,19 +172,13 @@ export function Search({
     </Transition>
   )
 
-  const handleMouseMove = useCallback<
-    NonNullable<ComponentProps<'a'>['onMouseMove']>
-  >(e => {
-    const { index } = e.currentTarget.dataset
-    setActive(Number(index))
-  }, [])
-
-  const handleFocusAndBlur = useCallback<
-    NonNullable<ComponentProps<'input'>['onFocus']>
-  >(e => {
-    const isFocus = e.type === 'focus'
-    setShow(isFocus)
-  }, [])
+  const handleActive = useCallback(
+    (e: { currentTarget: { dataset: DOMStringMap } }) => {
+      const { index } = e.currentTarget.dataset
+      setActive(Number(index))
+    },
+    []
+  )
 
   return (
     <div className={cn('nextra-search relative md:w-64', className)}>
@@ -206,72 +197,70 @@ export function Search({
         type="search"
         placeholder={renderString(config.search.placeholder)}
         onKeyDown={handleKeyDown}
-        onFocus={handleFocusAndBlur}
-        onBlur={handleFocusAndBlur}
         suffix={icon}
       />
 
       <Transition
         show={renderList}
-        as={Fragment}
+        // Transition.Child is required here, otherwise popup will be still present in DOM after focus out
+        as={Transition.Child}
         leave="transition-opacity duration-100"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >
-        {/* Transition.Child is required here, otherwise popup will be still present in DOM after focus out */}
-        <Transition.Child>
-          <ul
-            className={cn(
-              // Using bg-white as background-color when the browser didn't support backdrop-filter
-              'bg-white text-gray-100 ring-1 ring-black/5',
-              'dark:bg-neutral-900 dark:ring-white/10',
-              'absolute top-full z-20 mt-2 overscroll-contain rounded-xl py-2.5 shadow-xl overflow-auto',
-              'max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]',
-              'md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]',
-              'right-0 left-0 ltr:md:left-auto rtl:md:right-auto',
-              'contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50',
-              overlayClassName
-            )}
-            ref={ulRef}
-            style={{
-              transition: 'max-height .2s ease' // don't work with tailwindcss
-            }}
-          >
-            {loading ? (
-              <span className="flex select-none justify-center p-8 text-center text-sm text-gray-400 gap-2">
-                <SpinnerIcon className="h-5 w-5 animate-spin" />
-                Loading...
-              </span>
-            ) : results.length > 0 ? (
-              results.map(({ route, prefix, children, id }, i) => (
-                <Fragment key={id}>
-                  {prefix}
-                  <li
-                    className={cn(
-                      'mx-2.5 rounded-md break-words',
-                      'contrast-more:border',
-                      i === active
-                        ? 'bg-primary-500/10 text-primary-500 contrast-more:border-primary-500'
-                        : 'text-gray-800 dark:text-gray-300 contrast-more:border-transparent'
-                    )}
+        <ul
+          className={cn(
+            'nextra-scrollbar',
+            // Using bg-white as background-color when the browser didn't support backdrop-filter
+            'bg-white text-gray-100 dark:bg-neutral-900',
+            'absolute top-full z-20 mt-2 overscroll-contain rounded-xl py-2.5 shadow-xl overflow-auto',
+            'max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]',
+            'md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]',
+            'right-0 left-0 ltr:md:left-auto rtl:md:right-auto',
+            'contrast-more:border contrast-more:border-gray-900 contrast-more:dark:border-gray-50',
+            overlayClassName
+          )}
+          ref={ulRef}
+          style={{
+            transition: 'max-height .2s ease' // don't work with tailwindcss
+          }}
+        >
+          {loading ? (
+            <span className="flex select-none justify-center p-8 text-center text-sm text-gray-400 gap-2">
+              <SpinnerIcon className="h-5 w-5 animate-spin" />
+              Loading...
+            </span>
+          ) : results.length > 0 ? (
+            results.map(({ route, prefix, children, id }, i) => (
+              <Fragment key={id}>
+                {prefix}
+                <li
+                  className={cn(
+                    'mx-2.5 rounded-md break-words',
+                    'contrast-more:border',
+                    i === active
+                      ? 'bg-primary-500/10 text-primary-500 contrast-more:border-primary-500'
+                      : 'text-gray-800 dark:text-gray-300 contrast-more:border-transparent'
+                  )}
+                >
+                  <Anchor
+                    className="block px-2.5 py-2 scroll-m-12"
+                    href={route}
+                    data-index={i}
+                    onFocus={handleActive}
+                    onMouseMove={handleActive}
+                    onClick={finishSearch}
+                    onKeyDown={handleKeyDown}
                   >
-                    <Anchor
-                      className="block px-2.5 py-2 scroll-m-12"
-                      href={route}
-                      data-index={i}
-                      onMouseMove={handleMouseMove}
-                      onClick={finishSearch}
-                    >
-                      {children}
-                    </Anchor>
-                  </li>
-                </Fragment>
-              ))
-            ) : (
-              renderComponent(config.search.emptyResult)
-            )}
-          </ul>
-        </Transition.Child>
+                    {children}
+                  </Anchor>
+                </li>
+              </Fragment>
+            ))
+          ) : (
+            renderComponent(config.search.emptyResult)
+          )}
+        </ul>
       </Transition>
     </div>
   )
diff --git a/packages/nextra-theme-docs/src/components/select.tsx b/packages/nextra-theme-docs/src/components/select.tsx
index b06f797fbf..92ccadcef5 100644
--- a/packages/nextra-theme-docs/src/components/select.tsx
+++ b/packages/nextra-theme-docs/src/components/select.tsx
@@ -1,56 +1,73 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, ReactNode } from 'react'
 import cn from 'clsx'
 import { Listbox, Transition } from '@headlessui/react'
 import { CheckIcon } from 'nextra/icons'
+import { usePopper } from '../utils'
+import { createPortal } from 'react-dom'
+import { useMounted } from 'nextra/hooks'
 
 interface MenuOption {
   key: string
-  name: React.ReactElement | string
+  name: ReactElement | string
 }
 
 interface MenuProps {
   selected: MenuOption
   onChange: (option: MenuOption) => void
   options: MenuOption[]
-  position?: 'left' | 'right'
+  title?: string
+  className?: string
 }
 
 export function Select({
   options,
   selected,
-  position,
-  onChange
+  onChange,
+  title,
+  className
 }: MenuProps): ReactElement {
+  const [trigger, container] = usePopper({
+    strategy: 'fixed',
+    placement: 'top-start',
+    modifiers: [
+      { name: 'offset', options: { offset: [0, 10] } },
+      {
+        name: 'sameWidth',
+        enabled: true,
+        fn({ state }) {
+          state.styles.popper.minWidth = `${state.rects.reference.width}px`
+        },
+        phase: 'beforeWrite',
+        requires: ['computeStyles']
+      }
+    ]
+  })
+
   return (
     <Listbox value={selected} onChange={onChange}>
       {({ open }) => (
-        <>
-          <Listbox.Button
-            className={cn(
-              'h-7 w-full cursor-pointer rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors focus:outline-none dark:text-gray-400',
-              open
-                ? 'bg-gray-200 text-gray-900 dark:bg-primary-100/10 dark:text-gray-50'
-                : 'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50'
-            )}
-          >
-            {selected.name}
-          </Listbox.Button>
-          <Transition
-            show={open}
-            as={React.Fragment}
-            leave="transition-opacity"
-            leaveFrom="opacity-100"
-            leaveTo="opacity-0"
-          >
-            <Listbox.Options
-              className={cn(
-                'absolute bottom-[130%] z-20 mt-1 max-h-64 min-w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-neutral-800 dark:ring-white/20',
-                position &&
-                  {
-                    left: 'rtl:right-0 ltr:left-0',
-                    right: 'ltr:right-0 rtl:left-0'
-                  }[position]
-              )}
+        <Listbox.Button
+          ref={trigger}
+          title={title}
+          className={cn(
+            'h-7 rounded-md px-2 text-left text-xs font-medium text-gray-600 transition-colors dark:text-gray-400',
+            open
+              ? 'bg-gray-200 text-gray-900 dark:bg-primary-100/10 dark:text-gray-50'
+              : 'hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-primary-100/5 dark:hover:text-gray-50',
+            className
+          )}
+        >
+          {selected.name}
+          <Portal>
+            <Transition
+              // @ts-ignore
+              ref={container}
+              show={open}
+              as={Listbox.Options}
+              className="border border-black/5 dark:border-white/20 z-20 max-h-64 overflow-auto rounded-md bg-white py-1 text-sm shadow-lg dark:bg-neutral-800"
+              leave="transition-opacity"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
             >
               {options.map(option => (
                 <Listbox.Option
@@ -61,23 +78,29 @@ export function Select({
                       active
                         ? 'bg-primary-50 text-primary-500 dark:bg-primary-500/10'
                         : 'text-gray-800 dark:text-gray-100',
-                      'relative cursor-pointer select-none whitespace-nowrap py-1.5',
+                      'relative cursor-pointer whitespace-nowrap py-1.5',
                       'ltr:pl-3 ltr:pr-9 rtl:pr-3 rtl:pl-9'
                     )
                   }
                 >
                   {option.name}
-                  {option.key === selected.key ? (
+                  {option.key === selected.key && (
                     <span className="absolute inset-y-0 ltr:right-3 rtl:left-3 flex items-center">
                       <CheckIcon />
                     </span>
-                  ) : null}
+                  )}
                 </Listbox.Option>
               ))}
-            </Listbox.Options>
-          </Transition>
-        </>
+            </Transition>
+          </Portal>
+        </Listbox.Button>
       )}
     </Listbox>
   )
 }
+
+function Portal(props: { children: ReactNode }): ReactElement | null {
+  const mounted = useMounted()
+  if (!mounted) return null
+  return createPortal(props.children, document.body)
+}
diff --git a/packages/nextra-theme-docs/src/components/server-side-error.tsx b/packages/nextra-theme-docs/src/components/server-side-error.tsx
index eea6f09f7a..13a2a397d2 100644
--- a/packages/nextra-theme-docs/src/components/server-side-error.tsx
+++ b/packages/nextra-theme-docs/src/components/server-side-error.tsx
@@ -15,7 +15,7 @@ export function ServerSideErrorPage(): ReactElement | null {
   }
 
   return (
-    <p>
+    <p className="text-center">
       <Anchor
         href={getGitIssueUrl({
           repository: config.docsRepositoryBase,
@@ -25,7 +25,7 @@ export function ServerSideErrorPage(): ReactElement | null {
           labels
         })}
         newWindow
-        className="ring-primary-500/30 focus:outline-none focus-visible:ring text-primary-500 underline decoration-from-font [text-underline-position:under]"
+        className="text-primary-500 underline decoration-from-font [text-underline-position:under]"
       >
         {renderComponent(content)}
       </Anchor>
diff --git a/packages/nextra-theme-docs/src/components/sidebar.tsx b/packages/nextra-theme-docs/src/components/sidebar.tsx
index 34b9034669..ac2e4a7b7a 100644
--- a/packages/nextra-theme-docs/src/components/sidebar.tsx
+++ b/packages/nextra-theme-docs/src/components/sidebar.tsx
@@ -22,22 +22,46 @@ import {
   renderComponent
 } from '../utils'
 import { LocaleSwitch } from './locale-switch'
-import ThemeSwitch from './theme-switch'
+import { ThemeSwitch } from './theme-switch'
 import { ArrowRightIcon } from 'nextra/icons'
 import { Collapse } from './collapse'
 import { Anchor } from './anchor'
 import { DEFAULT_LOCALE } from '../constants'
 
-const TreeState: Record<string, boolean> = {}
-
-interface FolderProps {
-  item: PageItem | MenuItem | Item
-  anchors: string[]
-}
+const TreeState: Record<string, boolean> = Object.create(null)
 
 const Folder = memo(FolderImpl)
 
-function FolderImpl({ item, anchors }: FolderProps) {
+const classes = {
+  link: cn(
+    'flex rounded px-2 py-1.5 text-sm transition-colors [word-break:break-word]',
+    '[-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:border'
+  ),
+  inactive: cn(
+    'hover:bg-gray-100 text-gray-500 hover:text-gray-900',
+    'dark:hover:bg-primary-100/5 dark:text-neutral-500 dark:hover:text-gray-50',
+    'contrast-more:text-gray-900 contrast-more:dark:text-gray-50',
+    'contrast-more:border-transparent contrast-more:hover:border-gray-900 contrast-more:dark:hover:border-gray-50'
+  ),
+  active: cn(
+    'bg-primary-50 text-primary-500 dark:bg-primary-500/10 font-bold',
+    'contrast-more:border-primary-500 contrast-more:dark:border-primary-500'
+  ),
+  list: 'flex gap-1 flex-col',
+  border: cn(
+    'relative before:absolute before:top-1.5 before:bottom-1.5',
+    'before:content-[""] before:w-px before:bg-gray-200 dark:before:bg-neutral-800',
+    'ltr:pl-3 rtl:pr-3 ltr:before:left-0 rtl:before:right-0'
+  )
+}
+
+function FolderImpl({
+  item,
+  anchors
+}: {
+  item: PageItem | MenuItem | Item
+  anchors: string[]
+}): ReactElement {
   const { asPath, locale = DEFAULT_LOCALE } = useRouter()
   const routeOriginal = getFSRoute(asPath, locale)
   const [route] = routeOriginal.split('#')
@@ -80,7 +104,11 @@ function FolderImpl({ item, anchors }: FolderProps) {
     <li className={cn({ open, active })}>
       <Anchor
         href={(item as Item).withIndexPage ? item.route : ''}
-        className="cursor-pointer !flex gap-2 items-center justify-between [word-break:break-word]"
+        className={cn(
+          'gap-2 items-center justify-between',
+          classes.link,
+          active ? classes.active : classes.inactive
+        )}
         onClick={e => {
           const clickedToggleIcon = ['svg', 'path'].includes(
             (e.target as HTMLElement).tagName.toLowerCase()
@@ -119,7 +147,7 @@ function FolderImpl({ item, anchors }: FolderProps) {
       <Collapse className="ltr:pr-0 rtl:pl-0" open={open}>
         {Array.isArray(item.children) ? (
           <Menu
-            submenu
+            className={cn(classes.border, 'ltr:ml-1 rtl:mr-1')}
             directories={item.children}
             base={item.route}
             anchors={anchors}
@@ -130,30 +158,22 @@ function FolderImpl({ item, anchors }: FolderProps) {
   )
 }
 
-interface SeparatorProps {
-  title?: string
-  topLevel: boolean
-}
-
-function Separator({ title, topLevel }: SeparatorProps): ReactElement {
-  // since title can be empty string ''
-  const hasTitle = title !== undefined
+function Separator({ title }: { title: string }): ReactElement {
   const config = useConfig()
   return (
     <li
       className={cn(
-        topLevel ? 'first:mt-1' : 'first:mt-2',
-        hasTitle ? 'mt-5 mb-2' : 'my-4',
-        'break-words'
+        '[word-break:break-word]',
+        title
+          ? 'first:mt-0 mt-5 mb-2 px-2 py-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100'
+          : 'my-4'
       )}
     >
-      {hasTitle ? (
-        <div className="mx-2 py-1.5 text-sm font-semibold text-gray-900 dark:text-gray-100">
-          {renderComponent(config.sidebar.titleComponent, {
-            title,
-            type: 'separator'
-          })}
-        </div>
+      {title ? (
+        renderComponent(config.sidebar.titleComponent, {
+          title,
+          type: 'separator'
+        })
       ) : (
         <hr className="mx-2 border-t border-gray-200 dark:border-primary-100/10" />
       )}
@@ -161,13 +181,13 @@ function Separator({ title, topLevel }: SeparatorProps): ReactElement {
   )
 }
 
-interface FileProps {
+function File({
+  item,
+  anchors
+}: {
   item: PageItem | Item
   anchors: string[]
-  topLevel: boolean
-}
-
-function File({ item, anchors, topLevel }: FileProps): ReactElement {
+}): ReactElement {
   const { asPath, locale = DEFAULT_LOCALE } = useRouter()
   const route = getFSRoute(asPath, locale)
   const active = [route, route + '/'].includes(item.route + '/')
@@ -177,15 +197,15 @@ function File({ item, anchors, topLevel }: FileProps): ReactElement {
   const config = useConfig()
 
   if (item.type === 'separator') {
-    return <Separator title={item.title} topLevel={topLevel} />
+    return <Separator title={item.title} />
   }
 
   return (
-    <li className={cn({ active })}>
+    <li className={cn(classes.list, { active })}>
       <Anchor
         href={(item as PageItem).href || item.route}
         newWindow={(item as PageItem).newWindow}
-        className="break-words"
+        className={cn(classes.link, active ? classes.active : classes.inactive)}
         onClick={() => {
           setMenu(false)
         }}
@@ -196,18 +216,19 @@ function File({ item, anchors, topLevel }: FileProps): ReactElement {
         })}
       </Anchor>
       {active && anchors.length > 0 && (
-        <ul>
-          {anchors.map((text, i) => {
+        <ul className={cn(classes.list, classes.border, 'ltr:ml-3 rtl:mr-3')}>
+          {anchors.map(text => {
             const slug = slugger.slug(text)
             return (
-              <li key={`a-${slug}`}>
+              <li key={slug}>
                 <a
                   href={`#${slug}`}
                   className={cn(
-                    '!flex text-sm w-full [word-break:break-word]',
-                    'before:opacity-25 before:mr-2 before:content-["#"]',
-                    activeAnchor[slug]?.isActive &&
-                      'font-semibold !text-gray-900 dark:!text-white'
+                    classes.link,
+                    'before:opacity-25 flex gap-2 before:content-["#"]',
+                    activeAnchor[slug]?.isActive
+                      ? classes.active
+                      : classes.inactive
                   )}
                   onClick={() => {
                     setMenu(false)
@@ -228,28 +249,20 @@ interface MenuProps {
   directories: PageItem[] | Item[]
   anchors: string[]
   base?: string
-  submenu?: boolean
+  className?: string
 }
 
-function Menu({ directories, anchors, submenu }: MenuProps): ReactElement {
+function Menu({ directories, anchors, className }: MenuProps): ReactElement {
   return (
-    <ul className="nextra-sidebar-list">
-      {directories.map(item => {
-        if (
-          item.type === 'menu' ||
-          (item.children && (item.children.length || !item.withIndexPage))
-        ) {
-          return <Folder key={item.name} item={item} anchors={anchors} />
-        }
-        return (
-          <File
-            key={item.name}
-            item={item}
-            anchors={anchors}
-            topLevel={!submenu}
-          />
+    <ul className={cn(classes.list, className)}>
+      {directories.map(item =>
+        item.type === 'menu' ||
+        (item.children && (item.children.length || !item.withIndexPage)) ? (
+          <Folder key={item.name} item={item} anchors={anchors} />
+        ) : (
+          <File key={item.name} item={item} anchors={anchors} />
         )
-      })}
+      )}
     </ul>
   )
 }
@@ -274,7 +287,7 @@ export function Sidebar({
   includePlaceholder
 }: SideBarProps): ReactElement {
   const config = useConfig()
-  const { menu } = useMenu()
+  const { menu, setMenu } = useMenu()
   const anchors = useMemo(
     () =>
       headings
@@ -297,97 +310,103 @@ export function Sidebar({
   useEffect(() => {
     const activeElement = sidebarRef.current?.querySelector('li.active')
 
-    if (activeElement) {
-      scrollIntoView(activeElement, {
-        block: 'center',
-        inline: 'center',
-        scrollMode: 'always',
-        boundary: containerRef.current
-      })
+    if (activeElement && (window.innerWidth > 767 || menu)) {
+      const scroll = () => {
+        scrollIntoView(activeElement, {
+          block: 'center',
+          inline: 'center',
+          scrollMode: 'always',
+          boundary: containerRef.current
+        })
+      }
+      if (menu) {
+        // needs for mobile since menu has transition transform
+        setTimeout(scroll, 300)
+      } else {
+        scroll()
+      }
     }
-  }, [])
+  }, [menu])
 
-  const hasMenu = !!(config.i18n.length || config.darkMode)
+  const hasMenu = config.i18n.length > 0 || config.darkMode
 
   return (
     <>
       {includePlaceholder && asPopover ? (
         <div className="hidden h-0 w-64 flex-shrink-0 xl:block" />
       ) : null}
+      <div
+        className={cn(
+          '[transition:background-color_1.5s_ease] motion-reduce:transition-none',
+          menu
+            ? 'fixed inset-0 z-10 bg-black/80 dark:bg-black/60'
+            : 'bg-transparent'
+        )}
+        onClick={() => setMenu(false)}
+      />
       <aside
         className={cn(
-          'nextra-sidebar-container nextra-scrollbar fixed top-16 z-[15] h-[calc(100vh-4rem)] w-full flex-shrink-0 self-start overflow-y-auto md:sticky md:w-64',
-          asPopover ? 'md:hidden' : 'md:block',
-          '[&::-webkit-scrollbar-track]:mt-[var(--nextra-navbar-height)] md:[&::-webkit-scrollbar-track]:mt-5',
-          {
-            open: menu,
-            '[&::-webkit-scrollbar-track]:mb-[var(--nextra-menu-height)]':
-              hasMenu
-          }
+          'nextra-sidebar-container flex flex-col',
+          'md:top-16 md:flex-shrink-0 md:w-64 md:transform-none',
+          asPopover ? 'md:hidden' : 'md:sticky md:self-start',
+          menu
+            ? '[transform:translate3d(0,0,0)]'
+            : '[transform:translate3d(0,-100%,0)]'
         )}
         ref={containerRef}
       >
         <div
-          className="nextra-sidebar h-full w-full select-none pl-[calc(env(safe-area-inset-left)-1.5rem)] md:h-auto"
-          ref={sidebarRef}
+          className={cn(
+            'z-[1]',  // for bottom box shadow
+            'md:hidden p-4',
+            'shadow-[0_2px_14px_6px_#fff] dark:shadow-[0_2px_14px_6px_#111]',
+            'contrast-more:shadow-none dark:contrast-more:shadow-none'
+          )}
         >
-          <div className="min-h-[calc(100%-61px)] p-4">
-            <div
-              className={cn(
-                'sticky top-0 z-[1] block md:hidden -mt-4 mb-4 bg-white pt-4',
-                'dark:bg-dark shadow-[0_2px_14px_6px_#fff] dark:shadow-[0_2px_14px_6px_#111]'
-              )}
-            >
-              {renderComponent(config.search.component, {
-                directories: flatDirectories
-              })}
-            </div>
-            <div className="hidden md:block">
-              <Menu
-                // The sidebar menu, shows only the docs directories.
-                directories={docsDirectories}
-                // When the viewport size is larger than `md`, hide the anchors in
-                // the sidebar when `floatTOC` is enabled.
-                anchors={config.toc.float ? [] : anchors}
-              />
-            </div>
-            <div className="md:hidden">
-              <Menu
-                // The mobile dropdown menu, shows all the directories.
-                directories={fullDirectories}
-                // Always show the anchor links on mobile (`md`).
-                anchors={anchors}
-              />
-            </div>
-          </div>
-
-          {hasMenu && (
-            <div
-              className={cn(
-                'sticky bottom-0 mx-4 border-t shadow-[0_-12px_16px_#fff] dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111]',
-                'contrast-more:shadow-none contrast-more:dark:shadow-none contrast-more:border-neutral-400',
-                'h-[var(--nextra-menu-height)]',
-                'flex gap-2 bg-white dark:bg-dark justify-between items-center'
-              )}
-            >
-              {config.i18n.length > 0 && (
-                <div className="relative flex-1">
-                  <LocaleSwitch options={config.i18n} />
-                </div>
-              )}
-              {config.darkMode ? (
-                <div
-                  className={cn(
-                    'relative flex',
-                    config.i18n.length > 0 ? '' : 'flex-1'
-                  )}
-                >
-                  <ThemeSwitch lite={config.i18n.length > 0} />
-                </div>
-              ) : null}
-            </div>
+          {renderComponent(config.search.component, {
+            directories: flatDirectories
+          })}
+        </div>
+        <div
+          className={cn(
+            'px-4 pb-4 md:pt-4 overflow-y-auto nextra-scrollbar',
+            'grow md:h-[calc(100vh-var(--nextra-navbar-height)-3.75rem)]'
           )}
+          ref={sidebarRef}
+        >
+          <Menu
+            className="hidden md:flex"
+            // The sidebar menu, shows only the docs directories.
+            directories={docsDirectories}
+            // When the viewport size is larger than `md`, hide the anchors in
+            // the sidebar when `floatTOC` is enabled.
+            anchors={config.toc.float ? [] : anchors}
+          />
+          <Menu
+            className="md:hidden"
+            // The mobile dropdown menu, shows all the directories.
+            directories={fullDirectories}
+            // Always show the anchor links on mobile (`md`).
+            anchors={anchors}
+          />
         </div>
+
+        {hasMenu && (
+          <div
+            className={cn(
+              'z-[1] relative', // for top box shadow
+              'mx-4 py-4 border-t shadow-[0_-12px_16px_#fff]',
+              'flex gap-2 items-center gap-2',
+              'dark:border-neutral-800 dark:shadow-[0_-12px_16px_#111]',
+              'contrast-more:shadow-none contrast-more:dark:shadow-none contrast-more:border-neutral-400'
+            )}
+          >
+            {config.i18n.length > 0 && (
+              <LocaleSwitch options={config.i18n} className="grow" />
+            )}
+            {config.darkMode && <ThemeSwitch lite={config.i18n.length > 0} />}
+          </div>
+        )}
       </aside>
     </>
   )
diff --git a/packages/nextra-theme-docs/src/components/tabs.tsx b/packages/nextra-theme-docs/src/components/tabs.tsx
index 38d50cba40..000f2b815c 100644
--- a/packages/nextra-theme-docs/src/components/tabs.tsx
+++ b/packages/nextra-theme-docs/src/components/tabs.tsx
@@ -54,8 +54,9 @@ export function Tabs({
                 disabled={disabled}
                 className={({ selected }) =>
                   cn(
+                    'rounded-t',
                     'text-md mr-2 p-2 font-medium leading-5 transition-colors',
-                    '-mb-0.5 select-none rounded-[1px] border-b-2 ring-offset-2 focus:outline-none focus-visible:ring',
+                    '-mb-0.5 select-none border-b-2',
                     selected
                       ? 'border-primary-500 text-primary-500'
                       : 'border-transparent text-gray-600 hover:border-gray-200 hover:text-black dark:text-gray-200 dark:hover:border-neutral-800 dark:hover:text-white',
@@ -77,14 +78,10 @@ export function Tabs({
 
 export function Tab({
   children,
-  className,
   ...props
 }: ComponentProps<'div'>): ReactElement {
   return (
-    <HeadlessTab.Panel
-      className={cn('focus:outline-none focus-visible:ring', className)}
-      {...props}
-    >
+    <HeadlessTab.Panel {...props} className="rounded">
       {children}
     </HeadlessTab.Panel>
   )
diff --git a/packages/nextra-theme-docs/src/components/theme-switch.tsx b/packages/nextra-theme-docs/src/components/theme-switch.tsx
index a0abbe9948..062a9c0660 100644
--- a/packages/nextra-theme-docs/src/components/theme-switch.tsx
+++ b/packages/nextra-theme-docs/src/components/theme-switch.tsx
@@ -1,19 +1,22 @@
-import React, { memo, ReactElement } from 'react'
+import React, { ReactElement } from 'react'
 import { useTheme } from 'next-themes'
 import { Select } from './select'
 import { SunIcon, MoonIcon } from 'nextra/icons'
 import { useMounted } from 'nextra/hooks'
-import { useConfig } from '../contexts'
 
-export function ThemeSwitch({ lite = true }): ReactElement {
+type ThemeSwitchProps = {
+  lite?: boolean
+}
+
+export function ThemeSwitch({ lite }: ThemeSwitchProps): ReactElement {
   const { theme, setTheme, systemTheme } = useTheme()
   const renderedTheme = theme === 'system' ? systemTheme : theme
-  const config = useConfig()
   const mounted = useMounted()
-
+  const IconToUse = mounted && renderedTheme === 'dark' ? MoonIcon : SunIcon
   return (
+  <div className="relative">
     <Select
-      position={config.i18n.length > 0 ? (lite ? 'right' : 'left') : undefined}
+      title="Change theme"
       onChange={option => {
         setTheme(option.key)
       }}
@@ -21,11 +24,7 @@ export function ThemeSwitch({ lite = true }): ReactElement {
         key: theme || '',
         name: (
           <div className="flex items-center gap-2 capitalize">
-            {mounted && renderedTheme === 'dark' ? (
-              <MoonIcon className="h-3 w-3 [&>path]:fill-current" />
-            ) : (
-              <SunIcon className="h-3 w-3 [&>path]:fill-current" />
-            )}
+            <IconToUse />
             <span className={lite ? 'md:hidden' : ''}>
               {mounted ? theme : 'light'}
             </span>
@@ -38,7 +37,6 @@ export function ThemeSwitch({ lite = true }): ReactElement {
         { key: 'system', name: 'System' }
       ]}
     />
+  </div>
   )
 }
-
-export default memo(ThemeSwitch)
diff --git a/packages/nextra-theme-docs/src/components/toc.tsx b/packages/nextra-theme-docs/src/components/toc.tsx
index 8029b2d811..1fcb2862ba 100644
--- a/packages/nextra-theme-docs/src/components/toc.tsx
+++ b/packages/nextra-theme-docs/src/components/toc.tsx
@@ -72,7 +72,7 @@ export function TOC({ headings, filePath }: TOCProps): ReactElement {
       ref={tocRef}
       className={cn(
         'nextra-scrollbar sticky top-16 overflow-y-auto pr-4 pt-8 text-sm [hyphens:auto]',
-        'ltr:-mr-4 rtl:-ml-4 max-h-[calc(100vh-4rem-env(safe-area-inset-bottom))]'
+        'ltr:-mr-4 rtl:-ml-4 max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))]'
       )}
     >
       {hasHeadings && (
@@ -112,7 +112,7 @@ export function TOC({ headings, filePath }: TOCProps): ReactElement {
           className={cn(
             hasHeadings &&
               'mt-8 border-t bg-white pt-8 shadow-[0_-12px_16px_white] dark:bg-dark dark:shadow-[0_-12px_16px_#111]',
-            'sticky bottom-0 pb-8 dark:border-neutral-800 flex flex-col gap-2',
+            'sticky bottom-0 pb-8 dark:border-neutral-800 flex flex-col items-start gap-2',
             'contrast-more:shadow-none contrast-more:border-t contrast-more:border-neutral-400 contrast-more:dark:border-neutral-400'
           )}
         >
diff --git a/packages/nextra-theme-docs/src/index.tsx b/packages/nextra-theme-docs/src/index.tsx
index 8a2ef4a49f..a1f29b575c 100644
--- a/packages/nextra-theme-docs/src/index.tsx
+++ b/packages/nextra-theme-docs/src/index.tsx
@@ -1,5 +1,5 @@
 import type { PageMapItem, PageOpts } from 'nextra'
-import type { FC, ReactElement, ReactNode } from 'react'
+import type { ReactElement, ReactNode } from 'react'
 
 import React, { useEffect, useMemo, useRef } from 'react'
 import { useRouter } from 'next/router'
@@ -19,12 +19,7 @@ import {
   Banner
 } from './components'
 import { getComponents } from './mdx-components'
-import {
-  ActiveAnchorProvider,
-  ConfigProvider,
-  useConfig,
-  useMenu
-} from './contexts'
+import { ActiveAnchorProvider, ConfigProvider, useConfig } from './contexts'
 import { DEFAULT_LOCALE, IS_BROWSER } from './constants'
 import { getFSRoute, normalizePages, renderComponent } from './utils'
 import { DocsThemeConfig, PageTheme, RecursivePartial } from './types'
@@ -112,7 +107,7 @@ const Body = ({
 
   if (themeContext.layout === 'full') {
     return (
-      <article className="w-full justify-center overflow-x-hidden pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
+      <article className="min-h-[calc(100vh-4rem)] w-full overflow-x-hidden pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
         {body}
       </article>
     )
@@ -121,7 +116,7 @@ const Body = ({
   return (
     <article
       className={cn(
-        'flex w-full min-w-0 max-w-full justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]',
+        'min-h-[calc(100vh-4rem)] w-full flex min-w-0 max-w-full justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]',
         themeContext.typesetting === 'article' &&
           'nextra-body-typesetting-article'
       )}
@@ -145,9 +140,7 @@ const InnerLayout = ({
   timestamp,
   children
 }: PageOpts & { children: ReactNode }): ReactElement => {
-  const { locale = DEFAULT_LOCALE } = useRouter()
   const config = useConfig()
-  const { menu } = useMenu()
   const {
     activeType,
     activeIndex,
@@ -160,21 +153,11 @@ const InnerLayout = ({
     directories
   } = useDirectoryInfo(pageMap)
 
-  const localeConfig = config.i18n.find(l => l.locale === locale)
-  const isRTL = localeConfig
-    ? localeConfig.direction === 'rtl'
-    : config.direction === 'rtl'
-  const direction = isRTL ? 'rtl' : 'ltr'
-
-  useEffect(() => {
-    if (typeof document === 'undefined') return
-    // needs for `ltr:/rtl:` modifiers inside `styles.css` file
-    document.documentElement.setAttribute('dir', direction)
-  }, [])
-
   const themeContext = { ...activeThemeContext, ...frontMatter }
-  const hideSidebar = !themeContext.sidebar || themeContext.layout === 'raw'
-  const asPopover = activeType === 'page' || hideSidebar
+  const hideSidebar =
+    !themeContext.sidebar ||
+    themeContext.layout === 'raw' ||
+    activeType === 'page'
 
   const tocClassName =
     'nextra-toc order-last hidden w-64 flex-shrink-0 xl:block'
@@ -194,73 +177,79 @@ const InnerLayout = ({
       </div>
     )
 
+  const { locale = DEFAULT_LOCALE } = useRouter()
+  const localeConfig = config.i18n.find(l => l.locale === locale)
+  const isRTL = localeConfig
+    ? localeConfig.direction === 'rtl'
+    : config.direction === 'rtl'
+
+  const direction = isRTL ? 'rtl' : 'ltr'
+
   return (
     // This makes sure that selectors like `[dir=ltr] .nextra-container` work
     // before hydration as Tailwind expects the `dir` attribute to exist on the
     // `html` element.
-    <div dir={direction}>
-      <div
-        className={cn('nextra-container main-container flex flex-col', {
-          'menu-active': menu
+    <>
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `document.documentElement.setAttribute('dir','${direction}')`
+        }}
+      />
+      <Head />
+      <Banner />
+      {themeContext.navbar &&
+        renderComponent(config.navbar, {
+          flatDirectories,
+          items: topLevelNavbarItems
         })}
+      <div
+        className={cn(
+          'mx-auto flex',
+          themeContext.layout !== 'raw' && 'max-w-[90rem]'
+        )}
       >
-        <Head />
-        <Banner />
-        {themeContext.navbar &&
-          renderComponent(config.navbar, {
-            flatDirectories,
-            items: topLevelNavbarItems
-          })}
-        <div
-          className={cn(
-            'mx-auto flex w-full flex-1 items-stretch',
-            themeContext.layout !== 'raw' && 'max-w-[90rem]'
-          )}
-        >
-          <ActiveAnchorProvider>
-            <Sidebar
-              docsDirectories={docsDirectories}
-              flatDirectories={flatDirectories}
-              fullDirectories={directories}
-              headings={headings}
-              asPopover={asPopover}
-              includePlaceholder={themeContext.layout === 'default'}
-            />
-            {tocEl}
-            <SkipNavContent />
-            <Body
-              themeContext={themeContext}
-              breadcrumb={
-                activeType !== 'page' && themeContext.breadcrumb ? (
-                  <Breadcrumb activePath={activePath} />
-                ) : null
-              }
-              timestamp={timestamp}
-              navigation={
-                activeType !== 'page' && themeContext.pagination ? (
-                  <NavLinks
-                    flatDirectories={flatDocsDirectories}
-                    currentIndex={activeIndex}
-                  />
-                ) : null
-              }
+        <ActiveAnchorProvider>
+          <Sidebar
+            docsDirectories={docsDirectories}
+            flatDirectories={flatDirectories}
+            fullDirectories={directories}
+            headings={headings}
+            asPopover={hideSidebar}
+            includePlaceholder={themeContext.layout === 'default'}
+          />
+          {tocEl}
+          <SkipNavContent />
+          <Body
+            themeContext={themeContext}
+            breadcrumb={
+              activeType !== 'page' && themeContext.breadcrumb ? (
+                <Breadcrumb activePath={activePath} />
+              ) : null
+            }
+            timestamp={timestamp}
+            navigation={
+              activeType !== 'page' && themeContext.pagination ? (
+                <NavLinks
+                  flatDirectories={flatDocsDirectories}
+                  currentIndex={activeIndex}
+                />
+              ) : null
+            }
+          >
+            <MDXProvider
+              components={getComponents({
+                isRawLayout: themeContext.layout === 'raw',
+                components: config.components
+              })}
             >
-              <MDXProvider
-                components={getComponents({
-                  isRawLayout: themeContext.layout === 'raw',
-                  components: config.components
-                })}
-              >
-                {children}
-              </MDXProvider>
-            </Body>
-          </ActiveAnchorProvider>
-        </div>
-        {themeContext.footer
-          ? renderComponent(config.footer.component, { menu: asPopover })
-          : null}
+              {children}
+            </MDXProvider>
+          </Body>
+        </ActiveAnchorProvider>
       </div>
-    </div>
+      {themeContext.footer &&
+        renderComponent(config.footer.component, { menu: hideSidebar })}
+    </>
   )
 }
 
diff --git a/packages/nextra-theme-docs/src/mdx-components.tsx b/packages/nextra-theme-docs/src/mdx-components.tsx
index 9fcf3799cc..235a9a3204 100644
--- a/packages/nextra-theme-docs/src/mdx-components.tsx
+++ b/packages/nextra-theme-docs/src/mdx-components.tsx
@@ -181,8 +181,8 @@ const Details = ({
     <details
       className="my-4 rounded border border-gray-200 bg-white p-2 shadow-sm dark:border-neutral-800 dark:bg-neutral-900 first:mt-0 last:mb-0"
       {...props}
+      open={delayedOpenState}
       {...(openState && { 'data-expanded': true })}
-      {...(delayedOpenState && { open: true })}
     >
       <DetailsProvider value={setOpen}>{summary}</DetailsProvider>
       <Collapse open={openState}>{restChildren}</Collapse>
@@ -195,7 +195,7 @@ const Summary = (props: ComponentProps<'summary'>): ReactElement => {
   return (
     <summary
       className={cn(
-        'list-none cursor-pointer rounded p-1 outline-none transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800',
+        'list-none cursor-pointer p-1 transition-colors hover:bg-gray-100 dark:hover:bg-neutral-800',
         "before:mr-1 before:content-[''] before:inline-block before:transition-transform dark:before:invert",
         '[[data-expanded]>&]:before:rotate-90 rtl:before:rotate-180'
       )}
@@ -255,7 +255,7 @@ export const getComponents = ({
     a: props => (
       <A
         {...props}
-        className="ring-primary-500/30 focus:outline-none focus-visible:ring text-primary-500 underline decoration-from-font [text-underline-position:under]"
+        className="text-primary-500 underline decoration-from-font [text-underline-position:under]"
       />
     ),
     table: (props: ComponentProps<'table'>) => (
diff --git a/packages/nextra-theme-docs/src/utils/index.ts b/packages/nextra-theme-docs/src/utils/index.ts
index df5110d419..051646367b 100644
--- a/packages/nextra-theme-docs/src/utils/index.ts
+++ b/packages/nextra-theme-docs/src/utils/index.ts
@@ -4,3 +4,4 @@ export { getGitIssueUrl } from './get-git-issue-url'
 export { getHeadingText } from './get-heading-text'
 export { Item, PageItem, MenuItem, normalizePages } from './normalize-pages'
 export { renderComponent, renderString } from './render'
+export { usePopper } from './use-popper'
diff --git a/packages/nextra-theme-docs/src/utils/use-popper.ts b/packages/nextra-theme-docs/src/utils/use-popper.ts
new file mode 100644
index 0000000000..87a2b95609
--- /dev/null
+++ b/packages/nextra-theme-docs/src/utils/use-popper.ts
@@ -0,0 +1,43 @@
+import { RefCallback, useRef, useCallback, useMemo } from 'react'
+import { createPopper, Options } from '@popperjs/core'
+
+// https://github.com/tailwindlabs/headlessui/issues/59
+
+/**
+ * Example implementation to use Popper: https://popper.js.org/
+ */
+export function usePopper(
+  options?: Partial<Options>
+): [RefCallback<Element | null>, RefCallback<HTMLElement | null>] {
+  const reference = useRef<Element | null>(null)
+  const popper = useRef<HTMLElement | null>(null)
+
+  const cleanupCallback = useRef(() => {})
+
+  let instantiatePopper = useCallback(() => {
+    if (!reference.current) return
+    if (!popper.current) return
+
+    if (cleanupCallback.current) cleanupCallback.current()
+
+    cleanupCallback.current = createPopper(
+      reference.current,
+      popper.current,
+      options
+    ).destroy
+  }, [reference, popper, cleanupCallback, options])
+
+  return useMemo(
+    () => [
+      referenceDomNode => {
+        reference.current = referenceDomNode
+        instantiatePopper()
+      },
+      popperDomNode => {
+        popper.current = popperDomNode
+        instantiatePopper()
+      }
+    ],
+    [reference, popper, instantiatePopper]
+  )
+}
diff --git a/packages/nextra/__test__/__snapshots__/context.test.ts.snap b/packages/nextra/__test__/__snapshots__/context.test.ts.snap
index 2d8444937d..e7979c2bc3 100644
--- a/packages/nextra/__test__/__snapshots__/context.test.ts.snap
+++ b/packages/nextra/__test__/__snapshots__/context.test.ts.snap
@@ -7,6 +7,7 @@ exports[`context > getAllPages() > should work 1`] = `
     "meta": {
       "theme": {
         "timestamp": false,
+        "typesetting": "article",
       },
       "type": "page",
     },
@@ -17,8 +18,8 @@ exports[`context > getAllPages() > should work 1`] = `
     "kind": "MdxPage",
     "meta": {
       "theme": {
-        "layout": "full",
         "timestamp": false,
+        "typesetting": "article",
       },
       "type": "page",
     },
diff --git a/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap b/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap
index e1cfed40c9..0ee7846d37 100644
--- a/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap
+++ b/packages/nextra/__test__/__snapshots__/page-map.test.ts.snap
@@ -18,13 +18,14 @@ exports[`Page Process > pageMap en-US 1`] = `
         "404": {
           "theme": {
             "timestamp": false,
+            "typesetting": "article",
           },
           "type": "page",
         },
         "500": {
           "theme": {
-            "layout": "full",
             "timestamp": false,
+            "typesetting": "article",
           },
           "type": "page",
         },
diff --git a/packages/nextra/src/components/copy-to-clipboard.tsx b/packages/nextra/src/components/copy-to-clipboard.tsx
index 8a206eb110..27f0c3fec5 100644
--- a/packages/nextra/src/components/copy-to-clipboard.tsx
+++ b/packages/nextra/src/components/copy-to-clipboard.tsx
@@ -10,11 +10,10 @@ import { Button } from './button'
 
 export const CopyToClipboard = ({
   value,
-  className
+  ...props
 }: {
   value: string
-  className?: string
-}): ReactElement => {
+} & ComponentProps<'button'>): ReactElement => {
   const [isCopied, setCopied] = useState(false)
 
   useEffect(() => {
@@ -45,7 +44,7 @@ export const CopyToClipboard = ({
   const IconToUse = isCopied ? CheckIcon : CopyIcon
 
   return (
-    <Button onClick={handleClick} className={className}>
+    <Button onClick={handleClick} title="Copy code" {...props}>
       <IconToUse className="pointer-events-none h-4 w-4" />
     </Button>
   )
diff --git a/packages/nextra/src/components/pre.tsx b/packages/nextra/src/components/pre.tsx
index 614a5b93e4..edac324559 100644
--- a/packages/nextra/src/components/pre.tsx
+++ b/packages/nextra/src/components/pre.tsx
@@ -33,6 +33,7 @@ export const Pre = ({
       <pre
         className={[
           'bg-primary-700/5 mt-6 mb-4 overflow-x-auto rounded-xl font-medium subpixel-antialiased dark:bg-primary-300/10',
+          'contrast-more:border contrast-more:border-primary-900/20 contrast-more:contrast-150 contrast-more:dark:border-primary-100/40',
           filename ? 'pt-12 pb-4' : 'py-4',
           className
         ].join(' ')}
@@ -42,17 +43,20 @@ export const Pre = ({
       </pre>
       <div
         className={[
-          'nextra-code-block-buttons opacity-0 transition-opacity [div:hover>&]:opacity-100',
+          'opacity-0 transition-opacity [div:hover>&]:opacity-100',
           'flex gap-1 absolute m-2 right-0',
           filename ? 'top-8' : 'top-0'
         ].join(' ')}
       >
-        <Button onClick={toggleWordWrap} className="md:hidden">
+        <Button
+          tabIndex={-1}
+          onClick={toggleWordWrap}
+          className="md:hidden"
+          title="Toggle word wrap"
+        >
           <WordWrapIcon className="pointer-events-none w-4 h-4" />
         </Button>
-        {value && (
-          <CopyToClipboard value={value} className="nextra-copy-button" />
-        )}
+        {value && <CopyToClipboard tabIndex={-1} value={value} />}
       </div>
     </>
   )
diff --git a/packages/nextra/src/icons/check.tsx b/packages/nextra/src/icons/check.tsx
index b00e9b0b1d..f1f68712af 100644
--- a/packages/nextra/src/icons/check.tsx
+++ b/packages/nextra/src/icons/check.tsx
@@ -1,13 +1,13 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function CheckIcon({ className }: { className?: string }): ReactElement {
+export function CheckIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg
       viewBox="0 0 20 20"
       width="1em"
       height="1em"
       fill="currentColor"
-      className={className}
+      {...props}
     >
       <path
         fillRule="evenodd"
diff --git a/packages/nextra/src/icons/copy.tsx b/packages/nextra/src/icons/copy.tsx
index c71c5b42c3..e351e89e0f 100644
--- a/packages/nextra/src/icons/copy.tsx
+++ b/packages/nextra/src/icons/copy.tsx
@@ -1,34 +1,32 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export const CopyIcon = ({
-  className
-}: {
-  className?: string
-}): ReactElement => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    stroke="currentColor"
-    className={className}
-  >
-    <rect
-      x="9"
-      y="9"
-      width="13"
-      height="13"
-      rx="2"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-)
+export function CopyIcon(props: ComponentProps<'svg'>): ReactElement {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      {...props}
+    >
+      <rect
+        x="9"
+        y="9"
+        width="13"
+        height="13"
+        rx="2"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/packages/nextra/src/icons/discord.tsx b/packages/nextra/src/icons/discord.tsx
index fec4b76697..45923eba50 100644
--- a/packages/nextra/src/icons/discord.tsx
+++ b/packages/nextra/src/icons/discord.tsx
@@ -1,6 +1,6 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function DiscordIcon(): ReactElement {
+export function DiscordIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg
       width="24"
@@ -8,7 +8,7 @@ export function DiscordIcon(): ReactElement {
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 5 30.67 23.25"
-      aria-hidden="true"
+      {...props}
     >
       <title>Discord</title>
       <path d="M26.0015 6.9529C24.0021 6.03845 21.8787 5.37198 19.6623 5C19.3833 5.48048 19.0733 6.13144 18.8563 6.64292C16.4989 6.30193 14.1585 6.30193 11.8336 6.64292C11.6166 6.13144 11.2911 5.48048 11.0276 5C8.79575 5.37198 6.67235 6.03845 4.6869 6.9529C0.672601 12.8736 -0.41235 18.6548 0.130124 24.3585C2.79599 26.2959 5.36889 27.4739 7.89682 28.2489C8.51679 27.4119 9.07477 26.5129 9.55525 25.5675C8.64079 25.2265 7.77283 24.808 6.93587 24.312C7.15286 24.1571 7.36986 23.9866 7.57135 23.8161C12.6241 26.1255 18.0969 26.1255 23.0876 23.8161C23.3046 23.9866 23.5061 24.1571 23.7231 24.312C22.8861 24.808 22.0182 25.2265 21.1037 25.5675C21.5842 26.5129 22.1422 27.4119 22.7621 28.2489C25.2885 27.4739 27.8769 26.2959 30.5288 24.3585C31.1952 17.7559 29.4733 12.0212 26.0015 6.9529ZM10.2527 20.8402C8.73376 20.8402 7.49382 19.4608 7.49382 17.7714C7.49382 16.082 8.70276 14.7025 10.2527 14.7025C11.7871 14.7025 13.0425 16.082 13.0115 17.7714C13.0115 19.4608 11.7871 20.8402 10.2527 20.8402ZM20.4373 20.8402C18.9183 20.8402 17.6768 19.4608 17.6768 17.7714C17.6768 16.082 18.8873 14.7025 20.4373 14.7025C21.9717 14.7025 23.2271 16.082 23.1961 17.7714C23.1961 19.4608 21.9872 20.8402 20.4373 20.8402Z" />
diff --git a/packages/nextra/src/icons/github.tsx b/packages/nextra/src/icons/github.tsx
index 76630e03df..ef15d80681 100644
--- a/packages/nextra/src/icons/github.tsx
+++ b/packages/nextra/src/icons/github.tsx
@@ -1,13 +1,13 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function GitHubIcon(): ReactElement {
+export function GitHubIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg
       width="24"
       height="24"
       fill="currentColor"
       viewBox="3 3 18 18"
-      aria-hidden="true"
+      {...props}
     >
       <title>GitHub</title>
       <path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z" />
diff --git a/packages/nextra/src/icons/globe.tsx b/packages/nextra/src/icons/globe.tsx
index 9d05c2c106..0baddcb177 100644
--- a/packages/nextra/src/icons/globe.tsx
+++ b/packages/nextra/src/icons/globe.tsx
@@ -1,8 +1,14 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function GlobeIcon(): ReactElement {
+export function GlobeIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
-    <svg viewBox="0 0 20 20" width="1em" height="1em" fill="currentColor">
+    <svg
+      viewBox="2 2 16 16"
+      width="12"
+      height="12"
+      fill="currentColor"
+      {...props}
+    >
       <path
         fillRule="evenodd"
         d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
diff --git a/packages/nextra/src/icons/menu.tsx b/packages/nextra/src/icons/menu.tsx
index d13ebacfbc..52e7788ecc 100644
--- a/packages/nextra/src/icons/menu.tsx
+++ b/packages/nextra/src/icons/menu.tsx
@@ -1,6 +1,6 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function MenuIcon({ className }: { className?: string }): ReactElement {
+export function MenuIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg
       fill="none"
@@ -8,7 +8,7 @@ export function MenuIcon({ className }: { className?: string }): ReactElement {
       height="24"
       viewBox="0 0 24 24"
       stroke="currentColor"
-      className={className}
+      {...props}
     >
       <g>
         <path
diff --git a/packages/nextra/src/icons/moon.tsx b/packages/nextra/src/icons/moon.tsx
index 96eae6edb7..d634716bd6 100644
--- a/packages/nextra/src/icons/moon.tsx
+++ b/packages/nextra/src/icons/moon.tsx
@@ -1,19 +1,20 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function MoonIcon({ className }: { className?: string }): ReactElement {
+export function MoonIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg
       fill="none"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
+      viewBox="2 2 20 20"
+      width="12"
+      height="12"
       stroke="currentColor"
-      className={className}
+      {...props}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
+        fill="currentColor"
         d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
       />
     </svg>
diff --git a/packages/nextra/src/icons/spinner.tsx b/packages/nextra/src/icons/spinner.tsx
index 9517dfe1ed..f791b57ca5 100644
--- a/packages/nextra/src/icons/spinner.tsx
+++ b/packages/nextra/src/icons/spinner.tsx
@@ -1,10 +1,6 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function SpinnerIcon({
-  className
-}: {
-  className?: string
-}): ReactElement {
+export function SpinnerIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -12,7 +8,7 @@ export function SpinnerIcon({
       viewBox="0 0 24 24"
       width="24"
       height="24"
-      className={className}
+      {...props}
     >
       <circle
         className="opacity-25"
diff --git a/packages/nextra/src/icons/sun.tsx b/packages/nextra/src/icons/sun.tsx
index 24805cc979..9c3a99af71 100644
--- a/packages/nextra/src/icons/sun.tsx
+++ b/packages/nextra/src/icons/sun.tsx
@@ -1,19 +1,20 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function SunIcon({ className }: { className?: string }): ReactElement {
+export function SunIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg
       fill="none"
-      viewBox="0 0 24 24"
-      width="24"
-      height="24"
+      viewBox="3 3 18 18"
+      width="12"
+      height="12"
       stroke="currentColor"
-      className={className}
+      {...props}
     >
       <path
         strokeLinecap="round"
         strokeLinejoin="round"
         strokeWidth="2"
+        fill="currentColor"
         d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
       />
     </svg>
diff --git a/packages/nextra/src/icons/word-wrap.tsx b/packages/nextra/src/icons/word-wrap.tsx
index c2bcb26389..ae563802de 100644
--- a/packages/nextra/src/icons/word-wrap.tsx
+++ b/packages/nextra/src/icons/word-wrap.tsx
@@ -1,6 +1,6 @@
 import React, { ComponentProps, ReactElement } from 'react'
 
-export const WordWrapIcon = (props: ComponentProps<'svg'>): ReactElement => {
+export function WordWrapIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg viewBox="0 0 24 24" width="24" height="24" {...props}>
       <path
diff --git a/packages/nextra/src/icons/x.tsx b/packages/nextra/src/icons/x.tsx
index 0159d45438..61cd64f842 100644
--- a/packages/nextra/src/icons/x.tsx
+++ b/packages/nextra/src/icons/x.tsx
@@ -1,6 +1,6 @@
-import React, { ReactElement } from 'react'
+import React, { ComponentProps, ReactElement } from 'react'
 
-export function XIcon({ className }: { className?: string }): ReactElement {
+export function XIcon(props: ComponentProps<'svg'>): ReactElement {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -8,7 +8,7 @@ export function XIcon({ className }: { className?: string }): ReactElement {
       height="20"
       viewBox="0 0 20 20"
       fill="currentColor"
-      className={className}
+      {...props}
     >
       <path
         fillRule="evenodd"
diff --git a/packages/nextra/src/plugin.ts b/packages/nextra/src/plugin.ts
index 1fa5c4e104..2fb1ceb67d 100644
--- a/packages/nextra/src/plugin.ts
+++ b/packages/nextra/src/plugin.ts
@@ -50,10 +50,14 @@ export async function collectFiles(
 
   const promises = files.map(async f => {
     const filePath = path.join(dir, f.name)
-    const { name, locale, ext } = parseFileName(filePath)
+    const isDirectory = f.isDirectory()
+    const { name, locale, ext } = isDirectory
+      ? // directory couldn't have extensions
+        { name: path.basename(filePath), locale: '', ext: '' }
+      : parseFileName(filePath)
     const fileRoute = slash(path.join(route, name.replace(/^index$/, '')))
 
-    if (f.isDirectory()) {
+    if (isDirectory) {
       if (fileRoute === '/api') return
       const { items } = await collectFiles(filePath, fileRoute, fileMap)
       if (!items.length) return
diff --git a/packages/nextra/styles/subheading-anchor.css b/packages/nextra/styles/subheading-anchor.css
index 4ebd289a58..1e0638e8ec 100644
--- a/packages/nextra/styles/subheading-anchor.css
+++ b/packages/nextra/styles/subheading-anchor.css
@@ -6,6 +6,7 @@
   }
 
   & + a:after {
+    @apply absolute /* for not including # in focus ring border */;
     @apply content-['#'] text-gray-300 px-2 opacity-0 transition-opacity;
     @apply dark:text-neutral-700;
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2b1ea46e3a..02c5cc56ac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -225,8 +225,9 @@ importers:
 
   packages/nextra-theme-docs:
     specifiers:
-      '@headlessui/react': ^1.6.5
+      '@headlessui/react': ^1.6.6
       '@mdx-js/react': ^2.1.2
+      '@popperjs/core': ^2.11.6
       '@reach/skip-nav': ^0.17.0
       '@tailwindcss/nesting': ^0.0.0-insiders.565cd3e
       '@tailwindcss/typography': ^0.5.4
@@ -260,6 +261,7 @@ importers:
     dependencies:
       '@headlessui/react': 1.6.6_biqbaboplfbrettd7655fr4n2y
       '@mdx-js/react': 2.1.2_react@18.2.0
+      '@popperjs/core': 2.11.6
       '@reach/skip-nav': 0.17.0_biqbaboplfbrettd7655fr4n2y
       clsx: 1.2.1
       flexsearch: 0.7.21
@@ -896,6 +898,10 @@ packages:
       fastq: 1.13.0
     dev: true
 
+  /@popperjs/core/2.11.6:
+    resolution: {integrity: sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==}
+    dev: false
+
   /@reach/skip-nav/0.16.0_biqbaboplfbrettd7655fr4n2y:
     resolution: {integrity: sha512-SY4PdNx+hQHbeOr/+qLc+QXdRt9NTVlt0r737bOqY1WURGBIEN9sGgsmIsHluP1/bQuAe0JKdOJ/tXiwQ3Z3ug==}
     peerDependencies: